implement integration with createjs

Author: tiagoschenkel

CHANGELOG.md

@@ -0,0 +1,25 @@
+# RobotlegsJS CreateJS Changelog:
+
+## Robotlegs-CreateJS 1.0.0
+
+### v1.0.0 - Planned stable version
+
+- [x] Add instructions of how to install the **@robotlegsjs/createjs** package into **README.md**.
+
+- [ ] Use [**Function Types**](https://www.typescriptlang.org/docs/handbook/functions.html) for handlers and callbacks instead of generic **Function** type.
+
+- [ ] Evaluate if **IMediator** interface should be mandatory.
+
+- [x] Update **Prettier** rules:
+
+  - [x] **printWidth** should be around **140** characters per line.
+
+- [ ] Improve Code Coverage to reach 100%.
+
+- [ ] Migrate [original documentation](https://github.com/robotlegs/robotlegs-framework/blob/master/src/readme.md) and adapt it to TypeScript and CreateJS.
+
+## Robotlegs-CreateJS 0.2.0
+
+### v0.2.0
+
+- Added integration with `createjs` library (see #1).

example/Game.ts

@@ -0,0 +1,62 @@
+// ------------------------------------------------------------------------------
+//  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 { Context, MVCSBundle } from "@robotlegsjs/core";
+
+import { ContextView, CreateJSBundle } from "../src";
+
+import { MyConfig } from "./config/MyConfig";
+
+import { RobotlegsView } from "./view/RobotlegsView";
+
+export class Game {
+
+    private _canvas: HTMLCanvasElement;
+    private _stage: createjs.Stage;
+
+    private _context: Context;
+
+    constructor () {
+        this.init();
+    }
+
+    private init(): void {
+        this._canvas = <HTMLCanvasElement>(document.getElementById("canvas"));
+        this._stage = new createjs.Stage(this._canvas);
+
+        this._context = new Context();
+        this._context.install(MVCSBundle, CreateJSBundle).
+            configure(new ContextView(this._stage)).
+            configure(MyConfig).
+            initialize();
+
+        // enable touch interactions if supported on the current device:
+        createjs.Touch.enable(this._stage);
+
+        // enabled mouse over / out events
+        this._stage.enableMouseOver(10);
+        this._stage.mouseMoveOutside = true; // keep tracking the mouse even when it leaves the canvas
+
+        let robotlegs: RobotlegsView = new RobotlegsView();
+
+        robotlegs.x = this._canvas.width / 2;
+        robotlegs.y = this._canvas.height / 2;
+
+        this._stage.addChild(robotlegs);
+
+        window.addEventListener("resize", this.handleResize.bind(this));
+        createjs.Ticker.addEventListener("tick", this.tick.bind(this));
+    }
+
+    private handleResize(): void {
+        this._stage.update();
+    }
+
+    private tick(event: Object): void {
+        this._stage.update(event);
+    }
+}

example/config/MyConfig.ts

@@ -0,0 +1,27 @@
+// ------------------------------------------------------------------------------
+//  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 { inject, injectable, IConfig } from "@robotlegsjs/core";
+
+import { IMediatorMap } from "../../src/index";
+
+import { RobotlegsMediator } from "../mediator/RobotlegsMediator";
+import { SmileyMediator } from "../mediator/SmileyMediator";
+
+import { RobotlegsView } from "../view/RobotlegsView";
+import { SmileyView } from "../view/SmileyView";
+
+@injectable()
+export class MyConfig implements IConfig {
+    @inject(IMediatorMap)
+    private _mediatorMap: IMediatorMap;
+
+    public configure(): void {
+        this._mediatorMap.map(RobotlegsView).toMediator(RobotlegsMediator);
+        this._mediatorMap.map(SmileyView).toMediator(SmileyMediator);
+    }
+}

example/index.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 "reflect-metadata";
+
+import { Game } from "./Game";
+
+(<any>window).initGame = () => {
+    let game: Game = new Game();
+    (<any>window).game = game;
+};

example/mediator/RobotlegsMediator.ts

@@ -0,0 +1,28 @@
+// ------------------------------------------------------------------------------
+//  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 { Mediator } from "../../src/index";
+
+import { RobotlegsView } from "../view/RobotlegsView";
+import { SmileyView } from "../view/SmileyView";
+
+export class RobotlegsMediator extends Mediator<RobotlegsView> {
+    public initialize(): void {
+        console.log("RobotlegsMediator initialized!");
+
+        this.view.on("click", this.onClick, this);
+    }
+
+    public onClick(event: createjs.Event): void {
+        let radius: number = 50 + Math.random() * 50;
+        this.view.stage.addChild(new SmileyView(radius));
+    }
+
+    public destroy(): void {
+        console.log("RobotlegsMediator destroyed!");
+    }
+}

example/mediator/SmileyMediator.ts

@@ -0,0 +1,26 @@
+// ------------------------------------------------------------------------------
+//  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 { Mediator } from "../../src/index";
+
+import { SmileyView } from "../view/SmileyView";
+
+export class SmileyMediator extends Mediator<SmileyView> {
+    public initialize(): void {
+        console.log("SmileyMediator initialized!");
+
+        this.view.on("click", this.onClick, this);
+    }
+
+    public onClick(event: createjs.Event): void {
+        this.view.parent.removeChild(this.view);
+    }
+
+    public destroy(): void {
+        console.log("SmileyMediator destroyed!");
+    }
+}

example/view/RobotlegsView.ts

@@ -0,0 +1,43 @@
+// ------------------------------------------------------------------------------
+//  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.
+// ------------------------------------------------------------------------------
+
+export class RobotlegsView extends createjs.Container {
+    constructor() {
+        super();
+
+        this.loadLogo();
+    }
+
+    private loadLogo(): void {
+        let logo: HTMLImageElement = new Image();
+
+        logo.onload = this.logoLoaded.bind(this);
+        logo.crossOrigin = "anonymous";
+        logo.src = "images/robotlegs.png";
+    }
+
+    private logoLoaded(event: Event): void {
+        let logo: HTMLImageElement = <HTMLImageElement>event.target;
+        let bitmap: createjs.Bitmap = new createjs.Bitmap(event.target);
+
+        bitmap.x = -(logo.width / 2);
+        bitmap.y = -(logo.height / 2);
+
+        this.addChild(bitmap);
+
+        let area: createjs.Shape = new createjs.Shape();
+        let graphics: createjs.Graphics = area.graphics;
+
+        graphics.beginFill("#f00");
+        graphics.drawRect(bitmap.x, bitmap.y, logo.width, logo.height);
+
+        this.hitArea = area;
+
+        this.mouseEnabled = true;
+        this.mouseChildren = false;
+    }
+}

example/view/SmileyView.ts

@@ -0,0 +1,51 @@
+// ------------------------------------------------------------------------------
+//  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.
+// ------------------------------------------------------------------------------
+
+export class SmileyView extends createjs.Container {
+    private _radius: number;
+
+    constructor(radius: number) {
+        super();
+
+        this._radius = Math.max(radius, 50);
+
+        this.drawSmiley();
+        this.move();
+    }
+
+    private drawSmiley(): void {
+        let shape: createjs.Shape = new createjs.Shape();
+        let graphics: createjs.Graphics = shape.graphics;
+
+        // Head
+        graphics.setStrokeStyle(10, "round", "round");
+        graphics.beginStroke("#000");
+        graphics.beginFill("#FC0");
+        graphics.drawCircle(0, 0, this._radius);
+
+        // Mouth
+        graphics.beginFill("FC0");
+        graphics.arc(0, 0, this._radius * 0.65, 0, Math.PI, false);
+
+        // Right eye
+        graphics.beginStroke("FC0");
+        graphics.beginFill("#000");
+        graphics.drawCircle(-(this._radius / 3), -(this._radius / 4), this._radius / 8);
+
+        // Left eye
+        graphics.beginStroke("FC0");
+        graphics.beginFill("#000");
+        graphics.drawCircle(this._radius / 3, -(this._radius / 4), this._radius / 8);
+
+        this.addChild(shape);
+    }
+
+    private move(): void {
+        this.x = Math.random() * 960;
+        this.y = Math.random() * 400;
+    }
+}

karma.conf.js

@@ -0,0 +1,77 @@
+process.env.TEST = true;
+process.env.NODE_ENV = "test";
+
+const webpackConfig = require("./webpack.config.js")({ production: false, karma: true });
+
+delete webpackConfig.entry;
+
+module.exports = config => {
+
+  var configuration = {
+    basePath: "",
+    frameworks: [
+      "mocha",
+      "chai",
+      "sinon",
+      "es6-shim"
+    ],
+    files: [
+      { pattern: "node_modules/reflect-metadata/Reflect.js", include: true },
+      { pattern: "node_modules/bluebird/js/browser/bluebird.js", include: true },
+      { pattern: "node_modules/createjs/builds/1.0.0/createjs.js", include: true },
+      { pattern: "./test/**/**/**.test.ts", include: true },
+      { pattern: '**/*.map', served: true, included: false, watched: true }
+    ],
+    preprocessors: {
+      "./**/**/**/**.ts": ["sourcemap"],
+      "./test/**/**/**.test.ts": ["webpack"]
+    },
+    webpack: webpackConfig,
+    webpackMiddleware: {
+      noInfo: true
+    },
+    plugins: [
+      "karma-webpack",
+      "karma-sourcemap-writer",
+      "karma-sourcemap-loader",
+      "karma-remap-istanbul",
+      "karma-mocha-reporter",
+      "karma-mocha",
+      "karma-chai",
+      "karma-sinon",
+      "karma-es6-shim",
+      "karma-coverage-istanbul-reporter"
+    ],
+    reporters: (
+      config.singleRun ?
+        ["dots", "mocha", "coverage-istanbul"] :
+        ["dots", "mocha"]
+    ),
+    coverageIstanbulReporter: {
+      reports: ["html", "lcov", "lcovonly", "text-summary"],
+      dir: "coverage",
+      fixWebpackSourcePaths: true,
+      "report-config": {
+        html: {
+          subdir: "html-report"
+        }
+      }
+    },
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: [],
+    browserNoActivityTimeout: 50000
+  };
+
+  if (process.env.TRAVIS) {
+    configuration.browsers.push("PhantomJS");
+    configuration.plugins.push("karma-phantomjs-launcher");
+  } else {
+    configuration.browsers.push("PhantomJS");
+    configuration.plugins.push("karma-phantomjs-launcher");
+  }
+
+  config.set(configuration);
+};