WIP: Prepare package for generic display list

.gitignore

@@ -4,6 +4,7 @@ coverage
 dist/lib
 dist-test
 lib
+lib-example
 lib-test
 node_modules
 *.as

README.md

@@ -61,6 +61,10 @@ Usage
 ---
 
 ```typescript
+/// <reference path="node_modules/@robotlegsjs/createjs/definitions/createjs.d.ts" />
+
+import "reflect-metadata";
+
 import { Context, MVCSBundle } from "@robotlegsjs/core";
 
 import { ContextView, CreateJSBundle } from "@robotlegsjs/createjs";

definitions/createjs.d.ts

@@ -0,0 +1,17 @@
+// ------------------------------------------------------------------------------
+//  Copyright (c) 2017-present, RobotlegsJS. All Rights Reserved.
+//
+//  NOTICE: You are permitted to use, modify, and distribute this file
+//  in accordance with the terms of the license agreement accompanying it.
+// ------------------------------------------------------------------------------
+
+/**
+ * Augment CreateJS module to recognize EventDispatcher patch.
+ */
+declare namespace createjs {
+    interface IEventDispatcher {
+        once(type: string, listener: Function, thisObject?: any, useCapture?: boolean, priority?: number): void;
+    }
+
+    export interface EventDispatcher extends IEventDispatcher {}
+}

example/Game.ts

@@ -5,6 +5,10 @@
 //  in accordance with the terms of the license agreement accompanying it.
 // ------------------------------------------------------------------------------
 
+/// <reference path="../definitions/createjs.d.ts" />
+
+import "reflect-metadata";
+
 import { Context, MVCSBundle } from "@robotlegsjs/core";
 
 import { ContextView, CreateJSBundle } from "../src";

example/index.ts

@@ -5,8 +5,6 @@
 //  in accordance with the terms of the license agreement accompanying it.
 // ------------------------------------------------------------------------------
 
-import "reflect-metadata";
-
 import { Game } from "./Game";
 
 (<any>window).initGame = () => {

example/view/RobotlegsView.ts

@@ -10,6 +10,7 @@ export class RobotlegsView extends createjs.Container {
         super();
 
         this.loadLogo();
+        this.enable();
     }
 
     private loadLogo(): void {
@@ -36,8 +37,11 @@ export class RobotlegsView extends createjs.Container {
         graphics.drawRect(bitmap.x, bitmap.y, logo.width, logo.height);
 
         this.hitArea = area;
+    }
 
+    private enable(): void {
         this.mouseEnabled = true;
         this.mouseChildren = false;
+        this.cursor = "pointer";
     }
 }

example/view/SmileyView.ts

@@ -15,6 +15,7 @@ export class SmileyView extends createjs.Container {
 
         this.drawSmiley();
         this.move();
+        this.enable();
     }
 
     private drawSmiley(): void {
@@ -54,4 +55,10 @@ export class SmileyView extends createjs.Container {
         this.y = Math.max(this.y, this._radius);
         this.y = Math.min(this.y, 400 - this._radius);
     }
+
+    private enable(): void {
+        this.mouseEnabled = true;
+        this.mouseChildren = false;
+        this.cursor = "pointer";
+    }
 }

src/robotlegs/bender/bundles/createjs/CreateJSBundle.ts

@@ -17,6 +17,8 @@ import { StageCrawlerExtension } from "../../extensions/viewManager/StageCrawler
 import { StageObserverExtension } from "../../extensions/viewManager/StageObserverExtension";
 import { ViewManagerExtension } from "../../extensions/viewManager/ViewManagerExtension";
 
+import { applyCreateJSPatch } from "./patch/createjs-patch";
+
 /**
  * For that Classic Robotlegs flavour
  *
@@ -59,7 +61,9 @@ export class CreateJSBundle implements IBundle {
     /* Private Functions                                                          */
     /*============================================================================*/
 
-    private handleContextView(): void {
+    private handleContextView(contextView: ContextView): void {
+        applyCreateJSPatch(<any>contextView.view);
+
         this._context.configure(ContextViewListenerConfig);
     }
 

src/robotlegs/bender/extensions/contextView/createjsPatch/createjs-patch.ts → src/robotlegs/bender/bundles/createjs/patch/createjs-patch.ts

@@ -10,28 +10,32 @@
  * - emit "added"/"removed" events on stage
  */
 
+import "./eventDispatcher-patch";
+
+import { Event } from "@robotlegsjs/core";
+
 function isConnectedToStage(stage: createjs.Stage, displayObject: createjs.DisplayObject): boolean {
     return displayObject.stage === stage;
 }
 
 function emitAddedEvent(stage: createjs.Stage, target: createjs.DisplayObject): void {
-    let event: createjs.Event = new createjs.Event("added", true, false);
+    let event: Event = new Event("addedToStage", true);
 
     event.data = target;
 
-    stage.dispatchEvent(event);
+    target.dispatchEvent(event);
 
     if (target instanceof createjs.Container) {
         target.children.forEach(child => emitAddedEvent(stage, child));
     }
 }
 
 function emitRemovedEvent(stage: createjs.Stage, target: createjs.DisplayObject): void {
-    let event: createjs.Event = new createjs.Event("removed", true, false);
+    let event: Event = new Event("removedFromStage", true);
 
     event.data = target;
 
-    stage.dispatchEvent(event);
+    target.dispatchEvent(event);
 
     if (target instanceof createjs.Container) {
         target.children.forEach(child => emitRemovedEvent(stage, child));

src/robotlegs/bender/bundles/createjs/patch/eventDispatcher-patch.ts

@@ -0,0 +1,21 @@
+// ------------------------------------------------------------------------------
+//  Copyright (c) 2017-present, RobotlegsJS. All Rights Reserved.
+//
+//  NOTICE: You are permitted to use, modify, and distribute this file
+//  in accordance with the terms of the license agreement accompanying it.
+// ------------------------------------------------------------------------------
+
+/**
+ * Patch PIXI event handling.
+ *
+ * - Proxy PIXI events to be compatible with EventDispatcher
+ * - Implements event bubbling on `dispatchEvent` when `bubbles` is true.
+ */
+
+const EventDispatcherMixin = {
+    once(type: string, listener: Function, thisObject?: any, useCapture?: boolean, priority?: number): void {
+        this.on(type, listener, thisObject, true, null, useCapture);
+    }
+};
+
+Object.assign(createjs.EventDispatcher.prototype, EventDispatcherMixin);

src/robotlegs/bender/extensions/contextView/ContextViewExtension.ts

@@ -10,8 +10,6 @@ import { instanceOfType, IContext, IExtension, IInjector, ILogger } from "@robot
 import { IContextView } from "./api/IContextView";
 import { ContextView } from "./impl/ContextView";
 
-import { applyCreateJSPatch } from "./createjsPatch/createjs-patch";
-
 /**
  * <p>This Extension waits for a ContextView to be added as a configuration
  * and maps it into the context's injector.</p>
@@ -51,8 +49,6 @@ export class ContextViewExtension implements IExtension {
         } else {
             this._logger.debug("Mapping {0} as contextView", [contextView.view]);
 
-            applyCreateJSPatch(contextView.view);
-
             this._injector.bind(IContextView).toConstantValue(contextView);
         }
     }

src/robotlegs/bender/extensions/contextView/api/IContextView.ts

@@ -5,7 +5,9 @@
 //  in accordance with the terms of the license agreement accompanying it.
 // ------------------------------------------------------------------------------
 
+import { IDisplayObjectContainer } from "./IDisplayObjectContainer";
+
 export let IContextView = Symbol("IContextView");
 export interface IContextView {
-    view: createjs.Stage;
+    view: IDisplayObjectContainer;
 }

src/robotlegs/bender/extensions/contextView/api/IDisplayObject.ts

@@ -0,0 +1,15 @@
+// ------------------------------------------------------------------------------
+//  Copyright (c) 2017-present, RobotlegsJS. All Rights Reserved.
+//
+//  NOTICE: You are permitted to use, modify, and distribute this file
+//  in accordance with the terms of the license agreement accompanying it.
+// ------------------------------------------------------------------------------
+
+import { IEventDispatcher } from "@robotlegsjs/core";
+
+import { IDisplayObjectContainer } from "./IDisplayObjectContainer";
+
+export let IDisplayObject = Symbol("IDisplayObject");
+export interface IDisplayObject extends IEventDispatcher {
+    parent: IDisplayObjectContainer;
+}

src/robotlegs/bender/extensions/contextView/api/IDisplayObjectContainer.ts

@@ -0,0 +1,15 @@
+// ------------------------------------------------------------------------------
+//  Copyright (c) 2017-present, RobotlegsJS. All Rights Reserved.
+//
+//  NOTICE: You are permitted to use, modify, and distribute this file
+//  in accordance with the terms of the license agreement accompanying it.
+// ------------------------------------------------------------------------------
+
+import { IDisplayObject } from "./IDisplayObject";
+
+export let IDisplayObjectContainer = Symbol("IDisplayObjectContainer");
+export interface IDisplayObjectContainer extends IDisplayObject {
+    children: IDisplayObject[];
+
+    contains(child: IDisplayObject): boolean;
+}

src/robotlegs/bender/extensions/contextView/impl/ContextView.ts

@@ -8,12 +8,13 @@
 import { IConfig } from "@robotlegsjs/core";
 
 import { IContextView } from "../api/IContextView";
+import { IDisplayObjectContainer } from "../api/IDisplayObjectContainer";
 
 /**
  * The Context View represents the root Container for a Context
  */
 export class ContextView implements IContextView, IConfig {
-    private _view: createjs.Stage;
+    private _view: IDisplayObjectContainer;
 
     /*============================================================================*/
     /* Constructor                                                                */
@@ -23,7 +24,7 @@ export class ContextView implements IContextView, IConfig {
      * The Context View represents the root Container for a Context
      * @param view The root Container for this Context
      */
-    constructor(view: createjs.Stage) {
+    constructor(view: IDisplayObjectContainer) {
         if (view !== null && view !== undefined) {
             this._view = view;
         } else {
@@ -43,7 +44,7 @@ export class ContextView implements IContextView, IConfig {
     /**
      * The root Container for this Context
      */
-    public get view(): createjs.Stage {
+    public get view(): IDisplayObjectContainer {
         return this._view;
     }
 }