Skip to content

Commit 1f4313f

Browse files
pocroianupocroianu
committed
chg: dev: Refactoring
1 parent e2fed1c commit 1f4313f

File tree

8 files changed

+178
-32
lines changed

8 files changed

+178
-32
lines changed

‎src/index.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
* Created By Geani Pocroianu on 11/6/19 8:35 PM
33
*/
44

5-
import {MyFacade} from "./modules/facade/my-facade";
65
import {Keys} from "./modules/static/keys";
6+
import {MainFacade} from "./modules/facade/main-facade";
77

88
export class Main {
99

10-
private _facade: MyFacade;
10+
private _facade: MainFacade;
1111

1212
constructor() {
13-
this._facade = new MyFacade(Keys.FACADE_KEY);
13+
this._facade = new MainFacade(Keys.FACADE_KEY);
1414
}
1515

1616
}

‎src/modules/commands/load-pixi-spine-command.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ export class LoadPixiSpineCommand extends SimpleCommand {
1111
execute(notification: puremvc.INotification): void {
1212
super.execute(notification);
1313

14+
console.log('Spine Loaded');
15+
1416
// Loading the spine into the PIXI loader
1517
PIXI.loader
1618
.add('spine', notification.getBody().spineName)

src/modules/facade/my-facade.ts renamed to src/modules/facade/main-facade.ts

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,18 @@
55
import Facade = puremvc.Facade;
66
import {LoadPixiSpineCommand} from "../commands/load-pixi-spine-command";
77
import {Notifications} from "../static/notifications";
8-
import {BackgroundAnimationProxy} from "../proxy/background-animation-proxy";
98
import {Keys} from "../static/keys";
10-
import {MediatorNames, ProxiesNames, ViewsNames} from "../static/names";
9+
import {ProxiesNames,} from "../static/names";
1110
import {MainView} from "../view/main-view";
1211
import View = puremvc.View;
12+
import {SpineAnimationProxy} from "../proxy/spine-animation-proxy";
1313

14-
export class MyFacade extends Facade {
14+
export class MainFacade extends Facade {
1515

1616
/**
1717
* Returns the instance of MyFacade
1818
*/
19-
public static getInstance(): MyFacade {
19+
public static getInstance(): MainFacade {
2020
if (Keys.FACADE_KEY === undefined) {
2121
return undefined;
2222
}
@@ -27,7 +27,10 @@ export class MyFacade extends Facade {
2727
* @inheritDoc
2828
*/
2929
initializeFacade(): void {
30-
super.initializeFacade();
30+
this.initializeView();
31+
this.initializeModel();
32+
this.initializeController();
33+
this.registerCommands();
3134
this.initializeModules();
3235
}
3336

@@ -36,7 +39,7 @@ export class MyFacade extends Facade {
3639
*/
3740
initializeModel(): void {
3841
super.initializeModel();
39-
this.registerProxy(new BackgroundAnimationProxy(ProxiesNames.BACKGROUND_ANIMATION_PROXY_NAME));
42+
this.registerProxy(new SpineAnimationProxy(ProxiesNames.SPINE_ANIMATION_PROXY));
4043
}
4144

4245
/**
@@ -48,14 +51,13 @@ export class MyFacade extends Facade {
4851
this.view = MainView.getInstance(Keys.FACADE_KEY);
4952
}
5053

51-
/**
52-
* @inheritDoc
53-
*/
5454
initializeController(): void {
5555
super.initializeController();
56-
this.registerCommand(Notifications.LOAD_PIXI_SPINE, LoadPixiSpineCommand);
5756
}
5857

58+
protected registerCommands(): void {
59+
this.registerCommand(Notifications.LOAD_PIXI_SPINE, LoadPixiSpineCommand);
60+
}
5961

6062
/**
6163
* Initializes the modules

‎src/modules/mediators/spine-animation-mediator.ts‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/*
2+
* Created By Geani Pocroianu on 11/13/19 9:04 PM
3+
*/
4+
5+
import Mediator = puremvc.Mediator;
6+
import {Notifications} from "../static/notifications";
7+
import {SpineAnimationUiComponent} from "../ui-components/spine-animation-ui-component";
8+
import {ProxiesNames} from "../static/names";
9+
import {SpineAnimationProxy} from "../proxy/spine-animation-proxy";
10+
import {MainFacade} from "../facade/main-facade";
11+
12+
export class SpineAnimationMediator extends Mediator {
13+
14+
protected _spineAnimationProxy: SpineAnimationProxy;
15+
16+
/**
17+
* Initializes the proxies needed for this mediator
18+
*/
19+
protected initializeProxies(): void {
20+
if (this._spineAnimationProxy === undefined) {
21+
this._spineAnimationProxy = MainFacade.getInstance().retrieveProxy(ProxiesNames.SPINE_ANIMATION_PROXY) as SpineAnimationProxy;
22+
}
23+
}
24+
25+
/**
26+
* @inheritDoc
27+
* @param viewComponent
28+
*/
29+
setViewComponent(viewComponent: any): void {
30+
super.setViewComponent(viewComponent);
31+
}
32+
33+
/**
34+
* @inheritDoc
35+
*/
36+
getViewComponent(): SpineAnimationUiComponent {
37+
return super.getViewComponent();
38+
}
39+
40+
/**
41+
* @inheritDoc
42+
*/
43+
listNotificationInterests(): string[] {
44+
return [
45+
Notifications.SEND_SPINE_RESOURCES,
46+
Notifications.INITIALIZE_MODULES];
47+
}
48+
49+
/**
50+
* @inheritDoc
51+
* @param notification
52+
*/
53+
handleNotification(notification: puremvc.INotification): void {
54+
super.handleNotification(notification);
55+
switch (notification.getName()) {
56+
case Notifications.INITIALIZE_MODULES:
57+
this.initializeProxies();
58+
this.loadSpine();
59+
break;
60+
case Notifications.SEND_SPINE_RESOURCES:
61+
this.onSpineLoaded(notification.getBody().spine);
62+
break;
63+
}
64+
}
65+
66+
protected loadSpine(): void {
67+
this.sendNotification(Notifications.LOAD_PIXI_SPINE,
68+
{
69+
spineName: this._spineAnimationProxy.animationName
70+
});
71+
}
72+
73+
protected onSpineLoaded(spine): void {
74+
this.getViewComponent().initializeSpineAnimation(spine);
75+
}
76+
77+
}

src/modules/proxy/background-animation-proxy.ts renamed to src/modules/proxy/spine-animation-proxy.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
import Proxy = puremvc.Proxy;
66

7-
export class BackgroundAnimationProxy extends Proxy {
7+
export class SpineAnimationProxy extends Proxy {
88

99
public animationName: string = 'assets/Background_FrontalGarden_Landscape.json';
1010

‎src/modules/static/names.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
*/
44

55
export class MediatorNames {
6-
public static BACKGROUND_ANIMATION_VIEW_NAME: string = "BackgroundAnimationMediator";
6+
public static SPINE_ANIMATION_MEDIATOR: string = "BackgroundAnimationMediator";
77
}
88

99
export class ProxiesNames {
10-
public static BACKGROUND_ANIMATION_PROXY_NAME: string = "BackgroundAnimationProxy";
10+
public static SPINE_ANIMATION_PROXY: string = "SpineAnimationProxy";
1111
}
1212

13-
export class ViewsNames {
14-
public static BACKGROUND_ANIMATION_NAME: string = "BackgroundAnimationView";
15-
}
13+
export class UiComponentsNames {
14+
public static SPINE_ANIMATION_UI_COMPONENT: string = "BackgroundAnimationView";
15+
}

‎src/modules/ui-components/spine-animation-ui-component.ts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/*
2+
* Created By Geani Pocroianu on 11/13/19 9:05 PM
3+
*/
4+
5+
import Container = PIXI.Container;
6+
import Spine = PIXI.spine.Spine;
7+
8+
export class SpineAnimationUiComponent extends Container {
9+
10+
protected _spineAnimation: Spine;
11+
12+
constructor() {
13+
super();
14+
}
15+
16+
public initializeSpineAnimation(spine: Spine): void {
17+
// Creating the pixi spine
18+
this._spineAnimation = spine;
19+
20+
// Setting the spine's position
21+
this._spineAnimation.position.set(1000, 1000);
22+
this._spineAnimation.skeleton.setSkin(this._spineAnimation.spineData.skins[1]);
23+
24+
// Adding the spine to the display
25+
this.addChild(this._spineAnimation);
26+
27+
console.log('Spine: ');
28+
console.log(this._spineAnimation);
29+
30+
// Playing the animation
31+
let animationName: string = this._spineAnimation.spineData.animations[0].name;
32+
this._spineAnimation.state.setAnimation(0, animationName, true);
33+
34+
}
35+
36+
}

‎src/modules/view/main-view.ts‎

Lines changed: 42 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,15 @@ import Container = PIXI.Container;
77
import WebGLRenderer = PIXI.WebGLRenderer;
88
import CanvasRenderer = PIXI.CanvasRenderer;
99
import {Parameters} from "../static/parameters";
10+
import {SpineAnimationMediator} from "../mediators/spine-animation-mediator";
11+
import {SpineAnimationUiComponent} from "../ui-components/spine-animation-ui-component";
12+
import {MediatorNames} from "../static/names";
1013

1114
export class MainView extends View {
1215

1316
private _pixiStage: Container;
1417
private _pixiRenderer: WebGLRenderer | CanvasRenderer;
1518

16-
initializeView(): void {
17-
super.initializeView();
18-
this._pixiRenderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, Parameters.PIXI_APPLICATION_SETTINGS);
19-
document.body.appendChild(this._pixiRenderer.view);
20-
21-
// create the root of the scene graph
22-
this._pixiStage = new PIXI.Container();
23-
this.addGraphics();
24-
}
25-
2619
/**
2720
*
2821
* @param key
@@ -34,8 +27,40 @@ export class MainView extends View {
3427
return View.instanceMap[key] as MainView;
3528
}
3629

30+
/**
31+
* @inheritDoc
32+
*/
33+
initializeView(): void {
34+
super.initializeView();
35+
this.createPixiApplication();
36+
this.registerMediators();
37+
this.addGraphics();
38+
this.startRendering();
39+
}
40+
41+
protected registerMediators(): void {
42+
let spineAnimationUiComponent: Container = new SpineAnimationUiComponent();
43+
this.registerMediator(new SpineAnimationMediator(MediatorNames.SPINE_ANIMATION_MEDIATOR, spineAnimationUiComponent));
44+
this.addUiComponent(spineAnimationUiComponent);
45+
}
46+
47+
protected addUiComponent(uiComponent: Container): void {
48+
this._pixiStage.addChild(uiComponent);
49+
}
50+
51+
/**
52+
* Creates the PIXI Application
53+
*/
54+
protected createPixiApplication(): void {
55+
this._pixiRenderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, Parameters.PIXI_APPLICATION_SETTINGS);
56+
document.body.appendChild(this._pixiRenderer.view);
57+
58+
// create the root of the scene graph
59+
this._pixiStage = new PIXI.Container();
60+
}
61+
3762

38-
addGraphics(): void {
63+
protected addGraphics(): void {
3964
let graphics = new PIXI.Graphics();
4065

4166
// set a fill and line style
@@ -66,17 +91,21 @@ export class MainView extends View {
6691
graphics.drawCircle(470, 90, 60);
6792
graphics.endFill();
6893

69-
7094
this._pixiStage.addChild(graphics);
7195

96+
}
97+
98+
/**
99+
* Starts the rendering process of the PIXI Application
100+
*/
101+
protected startRendering(): void {
72102
let animate = () => {
73103
this._pixiRenderer.render(this._pixiStage);
74104
requestAnimationFrame(animate);
75105
};
76106

77107
// run the render loop
78108
animate();
79-
80109
}
81110

82111

0 commit comments

Comments
 (0)