Merge branch 'master' of https://github.com/jankuss/shroom

CHANGELOG.md

@@ -5,6 +5,32 @@ All notable changes to this project will be documented in this file.
 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.7.0] - 2021-02-17
+
+### Added
+
+- **Avatars**
+
+  - Added ability to display effects for an avatar. To use, set the `avatar.effect` property
+  - Improved avatar loading by only loading the required libraries for a specific avatar
+
+- **Event handling**
+  - Added `onPointerOver` and `onPointerOut` event handling for Avatars and Furniture
+  - Added ability to skip event handling for certain kinds of room objects while propagating.
+    Use this in an event handler: `event.skip(FURNITURE, AVATAR)` or `event.skipExcept(TILE_CURSOR)`
+
+### Changed
+
+- Change furniture visualization handling for better testability
+- Reorganize stories in storybook
+- Deprecate `BasicFurnitureVisualization` in favor of `StaticFurnitureVisualization`
+
+### Removed
+
+- Remove use of `offsets.json` for avatars
+- Remove `resumePropagation` for events
+- Disable animation queueing for avatars and furnitures `move`/`walk` methods
+
 ## [0.6.5] - 2021-01-25
 
 ### Fixed

package.json

@@ -16,6 +16,7 @@
     "@types/jsdom": "^16.2.6",
     "@types/node": "^14.14.13",
     "@types/node-fetch": "^2.5.7",
+    "@types/rbush": "^3.0.0",
     "@types/react": "^16.9.56",
     "@types/tween.js": "^18.6.1",
     "@types/ws": "^7.4.0",
@@ -41,6 +42,7 @@
   },
   "dependencies": {
     "@gizeta/swf-reader": "^1.0.0",
+    "@timohausmann/quadtree-js": "^1.2.3",
     "axios": "^0.21.1",
     "bin-pack": "^1.0.2",
     "bluebird": "^3.7.2",
@@ -56,6 +58,7 @@
     "jszip": "^3.5.0",
     "node-fetch": "^2.6.1",
     "quadtree-lib": "^1.0.9",
+    "rbush": "^3.0.1",
     "react": "^16.14.0",
     "rxjs": "^6.6.3",
     "stream": "0.0.2",
@@ -75,7 +78,8 @@
     "dump": "yarn ts-node-dev src/downloading/cli/index.tsx dump",
     "test": "jest",
     "build": "rm -rf dist && tsc",
-    "prepublishOnly": "yarn build"
+    "prepublishOnly": "yarn build",
+    "storybook": "cd storybook && yarn storybook"
   },
   "bin": {
     "shroom": "dist/cli/index.js"

src/index.ts

@@ -1,3 +1,5 @@
+import { IEventManagerEvent } from "./objects/events/interfaces/IEventManagerEvent";
+
 export { RoomObject } from "./objects/RoomObject";
 export { Avatar } from "./objects/avatar/Avatar";
 export { FloorFurniture } from "./objects/furniture/FloorFurniture";
@@ -7,12 +9,10 @@ export { RoomCamera } from "./objects/room/RoomCamera";
 export { loadRoomTexture } from "./util/loadRoomTexture";
 export { parseTileMapString } from "./util/parseTileMapString";
 export { IFurniture, IFurnitureBehavior } from "./objects/furniture/IFurniture";
-export { HitEvent } from "./interfaces/IHitDetection";
 export { IFurnitureData } from "./interfaces/IFurnitureData";
 export { FurnitureData } from "./objects/furniture/FurnitureData";
 export { Shroom } from "./objects/Shroom";
 export { Landscape } from "./objects/room/Landscape";
-export { HitDetection } from "./objects/hitdetection/HitDetection";
 export { AnimationTicker } from "./objects/animation/AnimationTicker";
 export { FurnitureLoader } from "./objects/furniture/FurnitureLoader";
 export { AvatarLoader } from "./objects/avatar/AvatarLoader";
@@ -34,3 +34,11 @@ export { IFurnitureVisualization } from "./objects/furniture/IFurnitureVisualiza
 export { WallLeft } from "./objects/room/parts/WallLeft";
 export { WallRight } from "./objects/room/parts/WallRight";
 export { RoomModelVisualization } from "./objects/room/RoomModelVisualization";
+
+export {
+  AVATAR,
+  TILE_CURSOR,
+  FURNITURE,
+} from "./objects/events/interfaces/IEventGroup";
+
+export type HitEvent = IEventManagerEvent;

src/interfaces/IHitDetection.ts

@@ -1,35 +0,0 @@
-export interface Rect {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  zIndex: number;
-}
-
-export type HitEventType = "click" | "pointerdown" | "pointerup";
-
-export interface HitEvent {
-  mouseEvent: MouseEvent;
-  tag?: string;
-  target: HitDetectionElement;
-
-  stopPropagation(): void;
-  resumePropagation(): void;
-}
-
-export interface HitDetectionElement {
-  group?: unknown;
-
-  trigger(type: HitEventType, event: HitEvent): void;
-  hits(x: number, y: number): boolean;
-  getHitDetectionZIndex(): number;
-  createDebugSprite?(): PIXI.Sprite | undefined;
-}
-
-export interface HitDetectionNode {
-  remove(): void;
-}
-
-export interface IHitDetection {
-  register(rectangle: HitDetectionElement): HitDetectionNode;
-}

src/interfaces/IRoomContext.ts

@@ -1,10 +1,10 @@
+import { IEventManager } from "../objects/events/interfaces/IEventManager";
 import { ILandscapeContainer } from "../objects/room/ILandscapeContainer";
 import { Room } from "../objects/room/Room";
 import { IAnimationTicker } from "./IAnimationTicker";
 import { IAvatarLoader } from "./IAvatarLoader";
 import { IConfiguration } from "./IConfiguration";
 import { IFurnitureLoader } from "./IFurnitureLoader";
-import { IHitDetection } from "./IHitDetection";
 import { IRoomGeometry } from "./IRoomGeometry";
 import { IRoomObjectContainer } from "./IRoomObjectContainer";
 import { IRoomVisualization } from "./IRoomVisualization";
@@ -17,10 +17,10 @@ export interface IRoomContext {
   animationTicker: IAnimationTicker;
   visualization: IRoomVisualization;
   roomObjectContainer: IRoomObjectContainer;
-  hitDetection: IHitDetection;
   configuration: IConfiguration;
   tilemap: ITileMap;
   landscapeContainer: ILandscapeContainer;
   application: PIXI.Application;
   room: Room;
+  eventManager: IEventManager;
 }

src/objects/RoomObject.ts

@@ -72,8 +72,8 @@ export abstract class RoomObject implements IRoomObject {
     return this.getRoomContext().avatarLoader;
   }
 
-  protected get hitDetection() {
-    return this.getRoomContext().hitDetection;
+  protected get eventManager() {
+    return this.getRoomContext().eventManager;
   }
 
   protected get tilemap() {

src/objects/Shroom.ts

@@ -2,7 +2,6 @@ import { AnimationTicker } from "./animation/AnimationTicker";
 import { AvatarLoader } from "./avatar/AvatarLoader";
 import { FurnitureLoader } from "./furniture/FurnitureLoader";
 import { FurnitureData } from "./furniture/FurnitureData";
-import { HitDetection } from "./hitdetection/HitDetection";
 import { Dependencies } from "./room/Room";
 
 export class Shroom {
@@ -31,7 +30,6 @@ export class Shroom {
     avatarLoader,
     furnitureData,
     furnitureLoader,
-    hitDetection,
   }: {
     resourcePath?: string;
   } & Partial<Dependencies>) {
@@ -45,15 +43,13 @@ export class Shroom {
 
     return {
       for: (application: PIXI.Application) => {
-        const _hitDetection = hitDetection ?? HitDetection.create(application);
         const _animationTicker =
           animationTicker ?? AnimationTicker.create(application);
 
         const realDependencies: Dependencies = {
           animationTicker: _animationTicker,
           avatarLoader: _avatarLoader,
           furnitureLoader: _furnitureLoader,
-          hitDetection: _hitDetection,
           configuration: _configuration,
           furnitureData: _furnitureData,
           application,

src/objects/animation/ObjectAnimation.ts

@@ -1,6 +1,8 @@
 import { IAnimationTicker } from "../../interfaces/IAnimationTicker";
 import { RoomPosition } from "../../types/RoomPosition";
 
+type FinishCurrentCallback = () => void;
+
 export class ObjectAnimation<T> {
   private _current: RoomPosition | undefined;
   private _diff: RoomPosition | undefined;
@@ -11,6 +13,7 @@ export class ObjectAnimation<T> {
     data: T;
   }[] = [];
   private _nextPosition: RoomPosition | undefined;
+  private _finishCurrent: FinishCurrentCallback | undefined;
 
   constructor(
     private _animationTicker: IAnimationTicker,
@@ -32,13 +35,9 @@ export class ObjectAnimation<T> {
     newPos: { roomX: number; roomY: number; roomZ: number },
     data: T
   ) {
-    if (this._diff != null) {
-      this._enqueued.push({
-        currentPosition: currentPos,
-        newPosition: newPos,
-        data: data,
-      });
-      return;
+    if (this._finishCurrent != null) {
+      this._finishCurrent();
+      this._finishCurrent = undefined;
     }
 
     this._callbacks.onStart(data);
@@ -66,6 +65,7 @@ export class ObjectAnimation<T> {
 
       cancel();
     };
+    this._finishCurrent = handleFinish;
 
     this._callbacks.onUpdatePosition(
       {

src/objects/avatar/Avatar.ts

@@ -44,6 +44,8 @@ export class Avatar extends RoomObject implements IMoveable, IScreenPositioned {
   private _onDoubleClick: HitEventHandler | undefined = undefined;
   private _onPointerDown: HitEventHandler | undefined = undefined;
   private _onPointerUp: HitEventHandler | undefined = undefined;
+  private _onPointerOver: HitEventHandler | undefined = undefined;
+  private _onPointerOut: HitEventHandler | undefined = undefined;
 
   constructor({
     look,
@@ -135,6 +137,24 @@ export class Avatar extends RoomObject implements IMoveable, IScreenPositioned {
     this._updateEventHandlers();
   }
 
+  public get onPointerOver() {
+    return this._onPointerOver;
+  }
+
+  public set onPointerOver(value) {
+    this._onPointerOver = value;
+    this._updateEventHandlers();
+  }
+
+  public get onPointerOut() {
+    return this._onPointerOut;
+  }
+
+  public set onPointerOut(value) {
+    this._onPointerOut = value;
+    this._updateEventHandlers();
+  }
+
   /**
    * The x position of the avatar in the room.
    * The y-Axis is marked in the following graphic:
@@ -288,12 +308,12 @@ export class Avatar extends RoomObject implements IMoveable, IScreenPositioned {
    * for placing UI relative to the user.
    */
   get screenPosition() {
-    const worldTransform = this._avatarSprites.worldTransform;
+    const worldTransform = this._avatarSprites.getGlobalPosition();
     if (worldTransform == null) return;
 
     return {
-      x: worldTransform.tx,
-      y: worldTransform.ty,
+      x: worldTransform.x,
+      y: worldTransform.y,
     };
   }
 
@@ -376,14 +396,14 @@ export class Avatar extends RoomObject implements IMoveable, IScreenPositioned {
       this._placeholderSprites.dependencies = {
         animationTicker: this.animationTicker,
         avatarLoader: this.avatarLoader,
-        hitDetection: this.hitDetection,
+        eventManager: this.eventManager,
       };
     }
 
     this._loadingAvatarSprites.dependencies = {
       animationTicker: this.animationTicker,
       avatarLoader: this.avatarLoader,
-      hitDetection: this.hitDetection,
+      eventManager: this.eventManager,
     };
 
     this._updateAvatarSprites();
@@ -454,12 +474,16 @@ export class Avatar extends RoomObject implements IMoveable, IScreenPositioned {
       this._placeholderSprites.onDoubleClick = this._onDoubleClick;
       this._placeholderSprites.onPointerDown = this._onPointerDown;
       this._placeholderSprites.onPointerUp = this._onPointerUp;
+      this._placeholderSprites.onPointerOut = this._onPointerOut;
+      this._placeholderSprites.onPointerOver = this._onPointerOver;
     }
 
     this._loadingAvatarSprites.onClick = this._onClick;
     this._loadingAvatarSprites.onDoubleClick = this._onDoubleClick;
     this._loadingAvatarSprites.onPointerDown = this._onPointerDown;
     this._loadingAvatarSprites.onPointerUp = this._onPointerUp;
+    this._loadingAvatarSprites.onPointerOut = this._onPointerOut;
+    this._loadingAvatarSprites.onPointerOver = this._onPointerOver;
   }
 
   private _getPlaceholderLookOptions(): LookOptions {