-
Notifications
You must be signed in to change notification settings - Fork 14
/
containerPolyfill.ts
129 lines (109 loc) · 4.05 KB
/
containerPolyfill.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import { YogaLayout } from "./YogaLayout";
import Container = PIXI.Container;
declare module "pixi.js" {
export interface Container {
/**
* True to enable flex for direct children. See also: flexRecursive
*/
flex: boolean;
/**
* True to enable flex for ALL children. See also: flex
*/
flexRecursive: boolean;
}
}
export function applyContainerPolyfill() {
Object.defineProperty(Container.prototype, "flex", {
get(): boolean {
return this.__flex;
},
set(newFlex: boolean): void {
if (!this.flex && newFlex) {
this.children.forEach(child => {
this.yoga.addChild(child.yoga);
if (this.flexRecursive && child instanceof PIXI.Container) {
child.flexRecursive = true;
}
});
this.emit(YogaLayout.NEED_LAYOUT_UPDATE);
}
if (this.flex && !newFlex) {
this.children.forEach(child => {
this.yoga.removeChild(child.yoga);
});
}
this.__flex = newFlex;
}
});
Object.defineProperty(Container.prototype, "flexRecursive", {
get(): boolean {
return this.__flexRecursive;
},
set(newFlex: boolean): void {
this.__flexRecursive = newFlex;
this.flex = newFlex;
}
});
const addChild = Container.prototype.addChild;
const removeChildren = Container.prototype.removeChildren;
const addChildAt = Container.prototype.addChildAt;
const removeChild = Container.prototype.removeChild;
const containerUpdateTransform = Container.prototype.updateTransform;
Container.prototype.addChild = function (...children) {
if (children.length === 1) {
const child = children[0];
if (this.flex) {
child.yoga = child.yoga || new YogaLayout(child);
child.__hasYoga = true;
this.yoga.addChild(child.yoga);
}
if (this.flexRecursive && child instanceof PIXI.Container) {
child.flexRecursive = true;
}
this.emit(YogaLayout.NEED_LAYOUT_UPDATE);
}
return addChild.call(this, ...children) as any;
}
Container.prototype.addChildAt = function (child, index) {
if (this.flex) {
child.yoga = child.yoga || new YogaLayout(child);
this.__hasYoga = true;
this.yoga.addChild(child.yoga, index);
}
if (this.flexRecursive && child instanceof PIXI.Container) {
child.flexRecursive = true;
}
this.emit(YogaLayout.NEED_LAYOUT_UPDATE);
return addChildAt.call(this, child, index) as any;
}
Container.prototype.removeChild = function (...children) {
if (children.length === 1) {
const child = children[0];
if (this.flex) {
this.yoga.removeChild(child.yoga);
}
this.emit(YogaLayout.NEED_LAYOUT_UPDATE);
}
return removeChild.call(this, ...children) as any;
}
Container.prototype.removeChildren = function (beginIndex, endIndex) {
if (this.flex) {
const begin = beginIndex || 0;
const end = typeof endIndex === 'number' ? endIndex : this.children.length;
const range = end - begin;
if (range > 0 && range <= end) {
const removed = this.children.slice(begin, range);
removed.forEach(child => this.yoga.removeChild(child.yoga))
}
this.emit(YogaLayout.NEED_LAYOUT_UPDATE);
}
return removeChildren.call(this, beginIndex, endIndex) as any;
}
Container.prototype.updateTransform = function () {
if ((this.flex || this.flexRecursive || this.__hasYoga) && this.yoga.isRoot) {
this.checkIfBoundingBoxChanged();
this.updateYogaLayout();
}
return containerUpdateTransform.call(this)
}
}