Commit 9079fb65 authored by rockyl's avatar rockyl

完成栈式视图动效功能

parent 9c1b9a40
...@@ -14845,7 +14845,7 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate: ...@@ -14845,7 +14845,7 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate:
var globalLoader = new Loader(); var globalLoader = new Loader();
//# sourceMappingURL=Loader.js.map //# sourceMappingURL=Loader.js.map
var padding$1 = 10; var padding$1 = 50;
var styleFields = { var styleFields = {
color: 'fillStyle', color: 'fillStyle',
stroke: 'lineWidth', stroke: 'lineWidth',
...@@ -14872,6 +14872,9 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate: ...@@ -14872,6 +14872,9 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate:
_this._italic = false; _this._italic = false;
_this._bold = false; _this._bold = false;
_this._border = false; _this._border = false;
_this._shadowColor = '#000';
_this._shadowBlur = 0;
_this._shadowOffset = new ObservablePoint(_this.onShadowOffsetChange, _this);
_this.realLines = []; _this.realLines = [];
_this._instanceType = "TextFieldNode"; _this._instanceType = "TextFieldNode";
var canvas = document.createElement('canvas'); var canvas = document.createElement('canvas');
...@@ -15160,6 +15163,68 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate: ...@@ -15160,6 +15163,68 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate:
enumerable: true, enumerable: true,
configurable: true configurable: true
}); });
Object.defineProperty(TextField.prototype, "shadowColor", {
get: function () {
return this._shadowColor;
},
set: function (value) {
if (this._shadowColor != value) {
this._shadowColor = value;
this.dirty = true;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(TextField.prototype, "shadowBlur", {
get: function () {
return this._shadowColor;
},
set: function (value) {
if (this._shadowBlur != value) {
this._shadowBlur = value;
this.dirty = true;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(TextField.prototype, "shadowOffset", {
get: function () {
return this._shadowOffset;
},
set: function (value) {
if (this._shadowOffset != value) {
this._shadowOffset = value;
this.dirty = true;
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(TextField.prototype, "shadowOffsetX", {
get: function () {
return this.position.x;
},
set: function (value) {
this._shadowOffset.x = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TextField.prototype, "shadowOffsetY", {
get: function () {
return this.position.y;
},
set: function (value) {
this._shadowOffset.y = value;
},
enumerable: true,
configurable: true
});
TextField.prototype.onShadowOffsetChange = function () {
this.dirty = true;
};
TextField.prototype._setupFont = function (font, size, bold, italic) { TextField.prototype._setupFont = function (font, size, bold, italic) {
var fontStyle = size; var fontStyle = size;
fontStyle += "px "; fontStyle += "px ";
...@@ -15354,6 +15419,12 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate: ...@@ -15354,6 +15419,12 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate:
} }
} }
ctx.setTransform(1, 0, 0, 1, tx + padding$1, padding$1); ctx.setTransform(1, 0, 0, 1, tx + padding$1, padding$1);
if (this._shadowBlur > 0) {
ctx.shadowBlur = this._shadowBlur;
ctx.shadowColor = this._shadowColor;
ctx.shadowOffsetX = this._shadowOffset.x;
ctx.shadowOffsetY = this._shadowOffset.y;
}
s._prepContext(ctx); s._prepContext(ctx);
var lineH = s._lineSpacing + s.size; var lineH = s._lineSpacing + s.size;
var upY = 0; var upY = 0;
...@@ -16828,58 +16899,353 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate: ...@@ -16828,58 +16899,353 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate:
}(Container)); }(Container));
//# sourceMappingURL=Node.js.map //# sourceMappingURL=Node.js.map
function playViewEffect(name, params, mutex, lastView, view, container, callback) {
var effect = name ? effects[name] : effects.simple;
effect = effect || effects.simple;
effect(params || {}, mutex, lastView, view, container, callback);
}
var effects = {
simple: function (params, mutex, lastView, view, container, callback) {
if (mutex) {
container.removeChild(lastView);
}
else {
if (lastView && !view) {
container.removeChild(lastView);
}
}
if (view) {
view.visible = true;
}
callback();
},
fade: function (params, mutex, lastView, view, container, callback) {
var _a = params.duration, duration = _a === void 0 ? 300 : _a;
if (mutex) {
fadeOut(function () {
fadeIn(callback);
});
}
else {
fadeIn(callback);
}
function fadeOut(callback) {
if (lastView) {
Tween.get(lastView, null, null, true)
.to({ alpha: 0 }, duration)
.call(function () {
container.removeChild(lastView);
lastView.alpha = 1;
callback();
});
}
else {
callback();
}
}
function fadeIn(callback) {
if (view) {
view.visible = true;
view.alpha = 0;
Tween.get(view, null, null, true)
.to({ alpha: 1 }, params.duration || 300)
.call(function () {
callback();
});
}
else {
callback();
}
}
},
flew: function (params, mutex, lastView, view, container, callback) {
var _a = params.duration, duration = _a === void 0 ? 300 : _a, _b = params.direction, direction = _b === void 0 ? 'top' : _b, _c = params.ease, ease = _c === void 0 ? 'backOut' : _c;
var _d = exports.gameStage.stage, width = _d.width, height = _d.height;
var outPos = {};
switch (direction) {
case 'left':
outPos.x = -width;
break;
case 'right':
outPos.x = width;
break;
case 'top':
outPos.y = -height;
break;
case 'bottom':
outPos.y = height;
break;
}
var inEase = ease;
var outEase = ease.indexOf('Out') ? ease.replace('Out', 'In') : ease.replace('In', 'Out');
if (mutex) {
flewOut(function () {
flewIn(callback);
});
}
else {
if (lastView && !view) {
flewOut(callback);
}
else {
flewIn(callback);
}
}
function flewOut(callback) {
if (lastView) {
Tween.get(lastView, null, null, true)
.to(outPos, duration, Ease[outEase])
.call(function () {
container.removeChild(lastView);
injectProp(lastView, outPos);
callback();
});
}
else {
callback();
}
}
function flewIn(callback) {
if (view) {
var inPos = {
x: view.x,
y: view.y,
};
view.visible = true;
injectProp(view, outPos);
Tween.get(view, null, null, true)
.to(inPos, duration, Ease[inEase])
.call(function () {
callback();
});
}
else {
callback();
}
}
},
hulu: function (params, mutex, lastView, view, container, callback) {
var _a = params.duration, duration = _a === void 0 ? 300 : _a, _b = params.ease, ease = _b === void 0 ? 'backOut' : _b, _c = params.x, x = _c === void 0 ? 0 : _c, _d = params.y, y = _d === void 0 ? 0 : _d;
var inEase = ease;
var outEase = ease.indexOf('Out') ? ease.replace('Out', 'In') : ease.replace('In', 'Out');
var outPos = {
x: parseInt(x),
y: parseInt(y),
scaleX: 0, scaleY: 0,
};
if (mutex) {
huluOut(function () {
huluIn(callback);
});
}
else {
if (lastView && !view) {
huluOut(callback);
}
else {
huluIn(callback);
}
}
function huluOut(callback) {
if (lastView) {
outPos.x -= lastView.width / 2;
outPos.y -= lastView.height / 2;
Tween.get(lastView, null, null, true)
.to(outPos, duration, Ease[outEase])
.call(function () {
container.removeChild(lastView);
injectProp(lastView, outPos);
callback();
});
}
else {
callback();
}
}
function huluIn(callback) {
if (view) {
var inPos = {
x: view.x,
y: view.y,
scaleX: 1, scaleY: 1
};
view.anchorX = view.width / 2;
view.anchorY = view.height / 2;
outPos.x -= view.width / 2;
outPos.y -= view.height / 2;
view.visible = true;
injectProp(view, outPos);
Tween.get(view, null, null, true)
.to(inPos, duration, Ease[inEase])
.call(function () {
callback();
});
}
else {
callback();
}
}
},
zoom: function (params, mutex, lastView, view, container, callback) {
var _a = params.duration, duration = _a === void 0 ? 300 : _a, _b = params.ease, ease = _b === void 0 ? 'backOut' : _b;
var inEase = ease;
var outEase = ease.indexOf('Out') ? ease.replace('Out', 'In') : ease.replace('In', 'Out');
if (mutex) {
zoomOut(function () {
zoomIn(callback);
});
}
else {
if (lastView && !view) {
zoomOut(callback);
}
else {
zoomIn(callback);
}
}
function zoomOut(callback) {
if (lastView) {
Tween.get(lastView, null, null, true)
.to({ scaleX: 0, scaleY: 0 }, duration, Ease[outEase])
.call(function () {
container.removeChild(lastView);
injectProp(view, { scaleX: 0, scaleY: 0 });
callback();
});
}
else {
callback();
}
}
function zoomIn(callback) {
if (view) {
view.anchorX = view.width / 2;
view.anchorY = view.height / 2;
view.visible = true;
injectProp(view, { scaleX: 0, scaleY: 0 });
Tween.get(view, null, null, true)
.to({ scaleX: 1, scaleY: 1 }, duration, Ease[inEase])
.call(function () {
callback();
});
}
else {
callback();
}
}
},
};
var StackContainer = (function (_super) { var StackContainer = (function (_super) {
tslib_1.__extends(StackContainer, _super); tslib_1.__extends(StackContainer, _super);
function StackContainer(mutex) { function StackContainer(mutex, inserted) {
if (mutex === void 0) { mutex = true; } if (mutex === void 0) { mutex = true; }
if (inserted === void 0) { inserted = 0; }
var _this = _super.call(this) || this; var _this = _super.call(this) || this;
_this._stack = []; _this._stack = [];
_this._inserted = 0;
_this._mutex = mutex; _this._mutex = mutex;
_this._inserted = inserted;
_this.percentWidth = 100; _this.percentWidth = 100;
_this.percentHeight = 100; _this.percentHeight = 100;
_this.mouseEnabled = false; _this.mouseEnabled = false;
_this.addEventListener(Event.START, function () {
_this.mouseChildren = false;
});
_this.addEventListener(Event.COMPLETE, function () {
_this.mouseChildren = true;
});
return _this; return _this;
} }
StackContainer.prototype.push = function (view, options, dispatch) { Object.defineProperty(StackContainer.prototype, "childNum", {
if (dispatch === void 0) { dispatch = true; } get: function () {
if (this._mutex && this.children.length > 0) { var len = this.children.length;
this._stack.push(this.removeChildAt(0)); return len > 0 ? len - this._inserted : 0;
} },
enumerable: true,
configurable: true
});
StackContainer.prototype.push = function (view, options, playEffect, callback) {
var _this = this;
if (playEffect === void 0) { playEffect = true; }
var action = 'push';
var lastView;
if (this._mutex && this.childNum > 0) {
lastView = this.getChildAt(0);
this._stack.push(lastView);
}
view.visible = false;
this.addChild(view); this.addChild(view);
if (dispatch) { var data = { action: action, view: view, lastView: lastView, options: options, hasView: true };
this.dispatchEvent('change', { action: 'push', view: view, options: options }); this.dispatchEvent(Event.START, data);
} playViewEffect(playEffect ? options ? options.effect : null : null, options ? options.effectParams : {}, this._mutex, lastView, view, this, function () {
}; _this.dispatchEvent(Event.COMPLETE, data);
StackContainer.prototype.replace = function (view, options) { callback && callback();
if (this.pop(false)) { });
this.push(view, options, false);
this.dispatchEvent('change', { action: 'replace', view: view, options: options });
}
}; };
StackContainer.prototype.pop = function (dispatch) { StackContainer.prototype.pop = function (options, playEffect, callback) {
if (dispatch === void 0) { dispatch = true; } var _this = this;
var len = this.children.length; if (playEffect === void 0) { playEffect = true; }
var action = 'pop';
var len = this.childNum;
if (len <= 0) { if (len <= 0) {
return false; return false;
} }
this.removeChildAt(len - 1); var lastView = this.getChildAt(this.children.length - 1);
var view;
if (this._mutex) { if (this._mutex) {
this.addChild(this._stack.pop()); view = this._stack.pop();
} view.visible = false;
if (dispatch) { this.addChild(view);
this.dispatchEvent('change', { action: 'pop' });
} }
var data = { action: action, view: view, lastView: lastView, options: options, hasView: len > 1 };
this.dispatchEvent(Event.START, data);
playViewEffect(playEffect ? options ? options.effect : null : null, options ? options.effectParams : {}, this._mutex, lastView, view, this, function () {
_this.dispatchEvent(Event.COMPLETE, data);
callback && callback();
});
return true; return true;
}; };
StackContainer.prototype.popAll = function (view, options) { StackContainer.prototype.replace = function (view, options, playEffect, callback) {
this.removeChildren(); var _this = this;
if (playEffect === void 0) { playEffect = true; }
var action = 'replace';
var len = this.childNum;
if (len <= 0) {
return false;
}
var lastView = this.getChildAt(len - 1);
view.visible = false;
this.addChild(view);
var data = { action: action, view: view, lastView: lastView, options: options, hasView: len > 1 };
this.dispatchEvent(Event.START, data);
playViewEffect(playEffect ? options ? options.effect : null : null, options ? options.effectParams : {}, this._mutex, lastView, view, this, function () {
_this.dispatchEvent(Event.COMPLETE, data);
callback && callback();
});
};
StackContainer.prototype.popAll = function (view, options, playEffect, callback) {
var _this = this;
if (playEffect === void 0) { playEffect = true; }
var action = 'popAll';
var lastView = this.getChildAt(0);
var len = this.childNum;
while (this.children.length > 1) {
this.removeChildAt(1);
}
if (this._mutex) { if (this._mutex) {
this._stack.splice(0); this._stack.splice(0);
} }
if (view) { if (view) {
this.push(view, options, false); view.visible = false;
this.addChild(view);
} }
this.dispatchEvent('change', { action: 'popAll', view: view, options: options }); var data = { action: action, view: view, lastView: lastView, options: options, hasView: len > 1 };
this.dispatchEvent(Event.START, data);
playViewEffect(playEffect ? options ? options.effect : null : null, options ? options.effectParams : {}, this._mutex, lastView, view, this, function () {
_this.dispatchEvent(Event.COMPLETE, data);
callback && callback();
});
}; };
return StackContainer; return StackContainer;
}(Node$1)); }(Node$1));
...@@ -19770,29 +20136,40 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate: ...@@ -19770,29 +20136,40 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate:
} }
Toast.prototype.show = function (props) { Toast.prototype.show = function (props) {
if (props === void 0) { props = {}; } if (props === void 0) { props = {}; }
if (!props.text) { return tslib_1.__awaiter(this, void 0, void 0, function () {
return; var contentView, lab, text, _a, padding, _b, duration, _c, showDuration, _d, hideDuration;
} return tslib_1.__generator(this, function (_e) {
var contentView = this.getContent(props.viewName); switch (_e.label) {
var lab = contentView.getChildByName('lab'); case 0:
if (!lab) { if (!props.text) {
console.warn('[lab] child no exists on toast view'); return [2];
return; }
} return [4, this.getContent(props.viewName)];
var text = props.text, _a = props.padding, padding = _a === void 0 ? 10 : _a, _b = props.duration, duration = _b === void 0 ? 1000 : _b, _c = props.showDuration, showDuration = _c === void 0 ? 300 : _c, _d = props.hideDuration, hideDuration = _d === void 0 ? 200 : _d; case 1:
lab.text = text; contentView = _e.sent();
lab.x = lab.y = padding; lab = contentView.getChildByName('lab');
this.width = contentView.width = lab.width + padding * 2; if (!lab) {
this.height = contentView.height = lab.height + padding * 2; console.warn('[lab] child no exists on toast view');
if (!contentView.visible) { return [2];
contentView.visible = true; }
contentView.alpha = 0; text = props.text, _a = props.padding, padding = _a === void 0 ? 10 : _a, _b = props.duration, duration = _b === void 0 ? 1000 : _b, _c = props.showDuration, showDuration = _c === void 0 ? 300 : _c, _d = props.hideDuration, hideDuration = _d === void 0 ? 200 : _d;
} lab.text = text;
Tween.get(contentView, null, null, true) lab.x = lab.y = padding;
.to({ alpha: 1 }, showDuration) this.width = contentView.width = lab.width + padding * 2;
.wait(duration) this.height = contentView.height = lab.height + padding * 2;
.to({ alpha: 0 }, hideDuration) if (!contentView.visible) {
.call(this.removeContentView, this); contentView.visible = true;
contentView.alpha = 0;
}
Tween.get(contentView, null, null, true)
.to({ alpha: 1 }, showDuration)
.wait(duration)
.to({ alpha: 0 }, hideDuration)
.call(this.removeContentView, this);
return [2];
}
});
});
}; };
Toast.prototype.hide = function (animation, hideDuration) { Toast.prototype.hide = function (animation, hideDuration) {
if (animation === void 0) { animation = true; } if (animation === void 0) { animation = true; }
...@@ -19816,36 +20193,46 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate: ...@@ -19816,36 +20193,46 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate:
this._content = null; this._content = null;
}; };
Toast.prototype.getContent = function (viewName) { Toast.prototype.getContent = function (viewName) {
var view; return tslib_1.__awaiter(this, void 0, void 0, function () {
if (this.children.length == 0) { var view, bg, lab;
if (viewName) { return tslib_1.__generator(this, function (_a) {
view = this._gameStage.instantiateView(viewName); switch (_a.label) {
} case 0:
if (!view) { if (!(this.children.length == 0)) return [3, 3];
if (!this._contentSample) { if (!viewName) return [3, 2];
this._contentSample = new Node$1(); return [4, this._gameStage.instantiateView(viewName)];
var bg = new Rect(); case 1:
bg.borderRadius = 10; view = _a.sent();
bg.percentWidth = 100; _a.label = 2;
bg.percentHeight = 100; case 2:
bg.fillColor = 'black'; if (!view) {
bg.alpha = 0.7; if (!this._contentSample) {
this._contentSample.addChild(bg); this._contentSample = new Node$1();
var lab = new Label(); bg = new Rect();
lab.name = 'lab'; bg.borderRadius = 10;
lab.fillColor = 'white'; bg.percentWidth = 100;
lab.size = 30; bg.percentHeight = 100;
this._contentSample.addChild(lab); bg.fillColor = 'black';
bg.alpha = 0.7;
this._contentSample.addChild(bg);
lab = new Label();
lab.name = 'lab';
lab.fillColor = 'white';
lab.size = 30;
this._contentSample.addChild(lab);
}
view = this._contentSample;
}
this._content = view;
this.addChild(view);
return [3, 4];
case 3:
view = this.getChildAt(0);
_a.label = 4;
case 4: return [2, view];
} }
view = this._contentSample; });
} });
this._content = view;
this.addChild(view);
}
else {
view = this.getChildAt(0);
}
return view;
}; };
return Toast; return Toast;
}(Node$1)); }(Node$1));
...@@ -20662,17 +21049,15 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate: ...@@ -20662,17 +21049,15 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate:
_this.percentWidth = 100; _this.percentWidth = 100;
_this.percentHeight = 100; _this.percentHeight = 100;
_this.mouseEnabled = false; _this.mouseEnabled = false;
var blackLayer = _this._blackLayer = new Rect();
var loadingView = _this._loadingView = new Container(); var loadingView = _this._loadingView = new Container();
_this.addChild(_this._sceneContainer = new StackContainer()); _this.addChild(_this._sceneContainer = new StackContainer());
_this.addChild(blackLayer); _this.addChild(_this._popupContainer = new StackContainer(false, 1));
_this.addChild(_this._popupContainer = new StackContainer());
_this.addChild(_this._toast = new Toast(_this)); _this.addChild(_this._toast = new Toast(_this));
_this.addChild(loadingView); _this.addChild(loadingView);
var blackLayer = _this._blackLayer = new Rect();
blackLayer.name = 'blackLayer'; blackLayer.name = 'blackLayer';
blackLayer.percentWidth = 100; blackLayer.width = stage.width;
blackLayer.percentHeight = 100; blackLayer.height = stage.height;
blackLayer.visible = false;
blackLayer.fillColor = 0; blackLayer.fillColor = 0;
blackLayer.alpha = 0.7; blackLayer.alpha = 0.7;
loadingView.percentWidth = 100; loadingView.percentWidth = 100;
...@@ -20680,7 +21065,8 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate: ...@@ -20680,7 +21065,8 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate:
loadingView.visible = false; loadingView.visible = false;
_this._sceneContainer.name = 'scene-container'; _this._sceneContainer.name = 'scene-container';
_this._popupContainer.name = 'popup-container'; _this._popupContainer.name = 'popup-container';
_this._popupContainer.addEventListener('change', _this.onPopupContainerChange, _this); _this._popupContainer.addEventListener(Event.START, _this.onPopupContainerStart, _this);
_this._popupContainer.addEventListener(Event.COMPLETE, _this.onPopupContainerComplete, _this);
return _this; return _this;
} }
Object.defineProperty(GameStage.prototype, "sceneContainer", { Object.defineProperty(GameStage.prototype, "sceneContainer", {
...@@ -20883,25 +21269,42 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate: ...@@ -20883,25 +21269,42 @@ var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate:
GameStage.prototype.getViewConfigByName = function (name) { GameStage.prototype.getViewConfigByName = function (name) {
return arrayFind(this._config.views, function (view) { return view.name === name; }); return arrayFind(this._config.views, function (view) { return view.name === name; });
}; };
GameStage.prototype.setBlackLayerVisible = function (visible) { GameStage.prototype.onPopupContainerStart = function (e) {
this._blackLayer.visible = visible; var _a = e.data, action = _a.action, view = _a.view, lastView = _a.lastView, options = _a.options, hasView = _a.hasView;
}; var target = e.target;
GameStage.prototype.onPopupContainerChange = function (e) {
var _a = e.data, action = _a.action, view = _a.view, options = _a.options;
switch (action) { switch (action) {
case 'push': case 'push':
case 'replace': case 'replace':
case 'popAll': case 'popAll':
if (options && options.center) { if (options && options.center) {
view.horizonCenter = 0; view.x = (target.width - view.width) / 2;
view.verticalCenter = 0; view.y = (target.height - view.height) / 2;
} }
break; break;
} }
this.setBlackLayerVisible(this._popupContainer.children.length > 0); var blackLayer = this._blackLayer;
var pParent = blackLayer.parent;
if (hasView) {
target.addChildAt(blackLayer, target.childNum - 1 - (view ? 0 : 1));
if (!pParent) {
blackLayer.alpha = 0;
Tween.get(blackLayer, null, null, true)
.to({ alpha: 0.7 }, 300);
}
}
else if (pParent) {
Tween.get(blackLayer, null, null, true)
.to({ alpha: 0 }, 300)
.call(function () {
pParent.removeChild(blackLayer);
});
}
};
GameStage.prototype.onPopupContainerComplete = function (e) {
}; };
return GameStage; return GameStage;
}(Node$1)); }(Node$1));
//# sourceMappingURL=GameStage.js.map
var template = "\n<div class=\"zeroing-loading-wrapper\">\n\t<div class=\"zeroing-loading-content\">\n\t</div>\n</div>\n"; var template = "\n<div class=\"zeroing-loading-wrapper\">\n\t<div class=\"zeroing-loading-content\">\n\t</div>\n</div>\n";
var style = "\n.zeroing-loading-wrapper{\n\tposition: absolute;\n\ttop:0;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n\tdisplay: flex;\n\tdisplay: -webkit-flex;\n\tjustify-content: center;\n\t-webkit-justify-content: center;\n\talign-items: center;\n\t-webkit-align-items: center;\n}\n@keyframes part-body\n{\n\t0%,40% {transform: scale(1);}\n\t20% {transform: scale(1.5);}\n}\n.zeroing-loading-part {\n\ttransform-origin: 2px 12px;\n\tposition: absolute;\n}\n.zeroing-loading-part-body{\n\tbackground-color: dimgray;\n\twidth: 4px;\n\theight: 6px;\n\tborder-radius: 2px;\n\ttransform-origin: 2px 6px;\n\tanimation: part-body 1500ms linear infinite;\n}\n"; var style = "\n.zeroing-loading-wrapper{\n\tposition: absolute;\n\ttop:0;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n\tdisplay: flex;\n\tdisplay: -webkit-flex;\n\tjustify-content: center;\n\t-webkit-justify-content: center;\n\talign-items: center;\n\t-webkit-align-items: center;\n}\n@keyframes part-body\n{\n\t0%,40% {transform: scale(1);}\n\t20% {transform: scale(1.5);}\n}\n.zeroing-loading-part {\n\ttransform-origin: 2px 12px;\n\tposition: absolute;\n}\n.zeroing-loading-part-body{\n\tbackground-color: dimgray;\n\twidth: 4px;\n\theight: 6px;\n\tborder-radius: 2px;\n\ttransform-origin: 2px 6px;\n\tanimation: part-body 1500ms linear infinite;\n}\n";
......
This source diff could not be displayed because it is too large. You can view the blob instead.
{"id":"engine","url":"engine.e5b21b3c107402bf145ed205181b96d7c501b51f.js"} {"id":"engine","url":"engine.741a07d921ba996527afc8c11ef426f24ada0932.js"}
\ No newline at end of file \ No newline at end of file
...@@ -12,7 +12,7 @@ const fs = require('fs'); ...@@ -12,7 +12,7 @@ const fs = require('fs');
const tslibWrapper = 'var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate: __decorate,__param: __param,__metadata: __metadata,__awaiter: __awaiter,__generator: __generator,__exportStar: __exportStar,__values: __values,__read: __read,__spread: __spread,__spreadArrays: __spreadArrays,__await: __await,__asyncGenerator: __asyncGenerator,__asyncDelegator: __asyncDelegator,__asyncValues: __asyncValues,__makeTemplateObject: __makeTemplateObject,__importStar: __importStar,__importDefault: __importDefault};' const tslibWrapper = 'var tslib = {__extends: __extends,__assign: __assign,__rest: __rest,__decorate: __decorate,__param: __param,__metadata: __metadata,__awaiter: __awaiter,__generator: __generator,__exportStar: __exportStar,__values: __values,__read: __read,__spread: __spread,__spreadArrays: __spreadArrays,__await: __await,__asyncGenerator: __asyncGenerator,__asyncDelegator: __asyncDelegator,__asyncValues: __asyncValues,__makeTemplateObject: __makeTemplateObject,__importStar: __importStar,__importDefault: __importDefault};'
const tslibCode = fs.readFileSync(__dirname + '/scripts/tslib.min.js'); const tslibCode = fs.readFileSync(__dirname + '/scripts/tslib.min.js');
const options = { export default {
input: 'src/index.ts', input: 'src/index.ts',
output: [ output: [
{ {
...@@ -23,7 +23,7 @@ const options = { ...@@ -23,7 +23,7 @@ const options = {
tslib: 'tslib' tslib: 'tslib'
}, },
banner: tslibCode + '\n' + tslibWrapper, banner: tslibCode + '\n' + tslibWrapper,
} },
], ],
plugins: [ plugins: [
progress(), progress(),
...@@ -32,12 +32,7 @@ const options = { ...@@ -32,12 +32,7 @@ const options = {
//useTsconfigDeclarationDir: true, //useTsconfigDeclarationDir: true,
}), }),
commonjs(), commonjs(),
process.env.BUILD === 'production' && uglify({})
], ],
external: ['tslib'], external: ['tslib'],
}; };
if(process.env.BUILD === 'production'){
options.plugins.push(uglify({}));
}
export default options;
import {SCALE_MODES, TEXT_ALIGN, TEXT_lINETYPE, VERTICAL_ALIGN} from "../const"; import {SCALE_MODES, TEXT_ALIGN, TEXT_lINETYPE, VERTICAL_ALIGN} from "../const";
import Texture from "../texture/Texture"; import Texture from "../texture/Texture";
import {getRGBA, hex2string} from "../utils/index"; import {getRGBA, hex2string} from "../utils/index";
import {Rectangle} from "../math/index"; import {ObservablePoint, Rectangle} from "../math/index";
import Sprite from "../display/Sprite"; import Sprite from "../display/Sprite";
import {Event} from "../events/index"; import {Event} from "../events/index";
//文本canvas上xy的偏移量 //文本canvas上xy的偏移量
const padding = 10; const padding = 50;
const styleFields = { const styleFields = {
color: 'fillStyle', color: 'fillStyle',
...@@ -486,6 +486,86 @@ export class TextField extends Sprite { ...@@ -486,6 +486,86 @@ export class TextField extends Sprite {
private _border: boolean = false; private _border: boolean = false;
/**
* 设置或获取阴影颜色
* @property property
* @public
* @since 1.0.6
* @param value
*/
public set shadowColor(value: string) {
if (this._shadowColor != value) {
this._shadowColor = value;
this.dirty = true;
}
}
public get shadowColor(): string {
return this._shadowColor;
}
private _shadowColor: string = '#000';
/**
* 设置或获取阴影模糊度
* @property property
* @public
* @since 1.0.6
* @param value
*/
public set shadowBlur(value: number) {
if (this._shadowBlur != value) {
this._shadowBlur = value;
this.dirty = true;
}
}
public get shadowBlur(): number {
return this._shadowColor;
}
private _shadowBlur: number = 0;
/**
* 设置或获取阴影偏移
* @property property
* @public
* @since 1.0.6
* @param value
*/
public set shadowOffset(value: ObservablePoint) {
if (this._shadowOffset != value) {
this._shadowOffset = value;
this.dirty = true;
}
}
public get shadowOffset(): ObservablePoint {
return this._shadowOffset;
}
get shadowOffsetX(): number {
return this.position.x;
}
set shadowOffsetX(value: number) {
this._shadowOffset.x = value;
}
get shadowOffsetY(): number {
return this.position.y;
}
set shadowOffsetY(value: number) {
this._shadowOffset.y = value;
}
private _shadowOffset: ObservablePoint = new ObservablePoint(this.onShadowOffsetChange, this);
private onShadowOffsetChange() {
this.dirty = true;
}
private _setupFont(font, size, bold, italic) { private _setupFont(font, size, bold, italic) {
let fontStyle: any = size; let fontStyle: any = size;
fontStyle += "px "; fontStyle += "px ";
...@@ -588,7 +668,7 @@ export class TextField extends Sprite { ...@@ -588,7 +668,7 @@ export class TextField extends Sprite {
if (!text) { if (!text) {
s.canvas.width = 0; s.canvas.width = 0;
s.canvas.height = 0; s.canvas.height = 0;
if(!this._width && !this._height){ if (!this._width && !this._height) {
s._localBoundsSelf.clear(); s._localBoundsSelf.clear();
} }
this.anchorTexture = {x: 0, y: 0}; this.anchorTexture = {x: 0, y: 0};
...@@ -728,6 +808,12 @@ export class TextField extends Sprite { ...@@ -728,6 +808,12 @@ export class TextField extends Sprite {
} }
} }
ctx.setTransform(1, 0, 0, 1, tx + padding, padding); ctx.setTransform(1, 0, 0, 1, tx + padding, padding);
if (this._shadowBlur > 0) {
ctx.shadowBlur = this._shadowBlur;
ctx.shadowColor = this._shadowColor;
ctx.shadowOffsetX = this._shadowOffset.x;
ctx.shadowOffsetY = this._shadowOffset.y;
}
s._prepContext(ctx); s._prepContext(ctx);
let lineH = s._lineSpacing + s.size; let lineH = s._lineSpacing + s.size;
//如果有_textHeight,就需要应用竖直对齐 //如果有_textHeight,就需要应用竖直对齐
......
...@@ -18,6 +18,7 @@ import {bind, createStore} from "./mvvm/index"; ...@@ -18,6 +18,7 @@ import {bind, createStore} from "./mvvm/index";
import {registerCustomModules} from "./custom-module"; import {registerCustomModules} from "./custom-module";
import {dealPageRemainTime, dealPxEnv} from "../px-logics"; import {dealPageRemainTime, dealPxEnv} from "../px-logics";
import Container from "../../2d/display/Container"; import Container from "../../2d/display/Container";
import {Event} from "../../2d/events/Event";
/** /**
* 游戏舞台 * 游戏舞台
...@@ -48,19 +49,17 @@ export class GameStage extends Node { ...@@ -48,19 +49,17 @@ export class GameStage extends Node {
this.percentHeight = 100; this.percentHeight = 100;
this.mouseEnabled = false; this.mouseEnabled = false;
let blackLayer = this._blackLayer = new Rect();
let loadingView = this._loadingView = new Container(); let loadingView = this._loadingView = new Container();
this.addChild(this._sceneContainer = new StackContainer()); this.addChild(this._sceneContainer = new StackContainer());
this.addChild(blackLayer); this.addChild(this._popupContainer = new StackContainer(false, 1));
this.addChild(this._popupContainer = new StackContainer());
this.addChild(this._toast = new Toast(this)); this.addChild(this._toast = new Toast(this));
this.addChild(loadingView); this.addChild(loadingView);
let blackLayer = this._blackLayer = new Rect();
blackLayer.name = 'blackLayer'; blackLayer.name = 'blackLayer';
blackLayer.percentWidth = 100; blackLayer.width = stage.width;
blackLayer.percentHeight = 100; blackLayer.height = stage.height;
blackLayer.visible = false;
blackLayer.fillColor = 0; blackLayer.fillColor = 0;
blackLayer.alpha = 0.7; blackLayer.alpha = 0.7;
...@@ -71,7 +70,8 @@ export class GameStage extends Node { ...@@ -71,7 +70,8 @@ export class GameStage extends Node {
this._sceneContainer.name = 'scene-container'; this._sceneContainer.name = 'scene-container';
this._popupContainer.name = 'popup-container'; this._popupContainer.name = 'popup-container';
this._popupContainer.addEventListener('change', this.onPopupContainerChange, this); this._popupContainer.addEventListener(Event.START, this.onPopupContainerStart, this);
this._popupContainer.addEventListener(Event.COMPLETE, this.onPopupContainerComplete, this);
} }
/** /**
...@@ -272,29 +272,41 @@ export class GameStage extends Node { ...@@ -272,29 +272,41 @@ export class GameStage extends Node {
return arrayFind(this._config.views, view => view.name === name); return arrayFind(this._config.views, view => view.name === name);
} }
/** onPopupContainerStart(e) {
* 设置半透明层是否可见 const {action, view, lastView, options, hasView} = e.data;
* @param visible const target = <StackContainer>e.target;
*/
setBlackLayerVisible(visible) {
this._blackLayer.visible = visible;
}
onPopupContainerChange(e) {
const {action, view, options} = e.data;
switch (action) { switch (action) {
case 'push': case 'push':
case 'replace': case 'replace':
case 'popAll': case 'popAll':
if (options && options.center) { if (options && options.center) {
view.horizonCenter = 0; view.x = (target.width - view.width) / 2;
view.verticalCenter = 0; view.y = (target.height - view.height) / 2;
} }
break; break;
} }
this.setBlackLayerVisible(this._popupContainer.children.length > 0); let blackLayer = this._blackLayer;
let pParent = blackLayer.parent;
if (hasView) {
target.addChildAt(blackLayer, target.childNum - 1 - (view ? 0 : 1));
if (!pParent) {
blackLayer.alpha = 0;
Tween.get(blackLayer, null, null, true)
.to({alpha: 0.7}, 300);
}
} else if (pParent) {
Tween.get(blackLayer, null, null, true)
.to({alpha: 0}, 300)
.call(() => {
pParent.removeChild(blackLayer);
});
}
}
onPopupContainerComplete(e){
} }
lazyLoadAllAssets = async () => { lazyLoadAllAssets = async () => {
......
...@@ -4,6 +4,8 @@ ...@@ -4,6 +4,8 @@
import {DisplayObject} from "../../2d/display/index"; import {DisplayObject} from "../../2d/display/index";
import {Node} from "./nodes/Node"; import {Node} from "./nodes/Node";
import {Event} from "../../2d/events/Event";
import {playViewEffect} from "./view-effects";
/** /**
* 栈式视图容器 * 栈式视图容器
...@@ -11,77 +13,164 @@ import {Node} from "./nodes/Node"; ...@@ -11,77 +13,164 @@ import {Node} from "./nodes/Node";
export class StackContainer extends Node { export class StackContainer extends Node {
private _mutex: boolean; private _mutex: boolean;
private _stack = []; private _stack = [];
private _inserted = 0;
constructor(mutex = true) { constructor(mutex = true, inserted = 0) {
super(); super();
this._mutex = mutex; this._mutex = mutex;
this._inserted = inserted;
this.percentWidth = 100; this.percentWidth = 100;
this.percentHeight = 100; this.percentHeight = 100;
this.mouseEnabled = false; this.mouseEnabled = false;
this.addEventListener(Event.START, () => {
this.mouseChildren = false;
});
this.addEventListener(Event.COMPLETE, () => {
this.mouseChildren = true;
});
}
get childNum() {
let len = this.children.length;
return len > 0 ? len - this._inserted : 0;
} }
/** /**
* 推入视图 * 推入视图
* @param view * @param view
* @param options * @param options
* @param dispatch * @param playEffect
* @param callback
*/ */
push(view: DisplayObject, options?, dispatch = true) { push(view: DisplayObject, options?, playEffect = true, callback?) {
if (this._mutex && this.children.length > 0) { const action = 'push';
this._stack.push(this.removeChildAt(0));
let lastView;
if (this._mutex && this.childNum > 0) {
lastView = this.getChildAt(0);
this._stack.push(lastView);
} }
view.visible = false;
this.addChild(view); this.addChild(view);
if (dispatch) { let data = {action, view, lastView, options, hasView: true};
this.dispatchEvent('change', {action: 'push', view, options}); this.dispatchEvent(Event.START, data);
} playViewEffect(
playEffect ? options ? options.effect : null : null,
options ? options.effectParams : {},
this._mutex, lastView, view, this,
() => {
this.dispatchEvent(Event.COMPLETE, data);
callback && callback();
}
)
} }
/** /**
* 替换顶层视图 * 撤出视图
* @param view
* @param options * @param options
* @param playEffect
* @param callback
*/ */
replace(view: DisplayObject, options?) { pop(options?, playEffect = true, callback?) {
if (this.pop(false)) { const action = 'pop';
this.push(view, options, false);
this.dispatchEvent('change', {action: 'replace', view, options}); let len = this.childNum;
if (len <= 0) {
return false;
}
let lastView = this.getChildAt(this.children.length - 1);
let view;
if (this._mutex) {
view = this._stack.pop();
view.visible = false;
this.addChild(view);
} }
let data = {action, view, lastView, options, hasView: len > 1};
this.dispatchEvent(Event.START, data);
playViewEffect(
playEffect ? options ? options.effect : null : null,
options ? options.effectParams : {},
this._mutex, lastView, view, this,
() => {
this.dispatchEvent(Event.COMPLETE, data);
callback && callback();
}
);
return true;
} }
/** /**
* 撤出视图 * 替换顶层视图
* @param view
* @param options
* @param playEffect
* @param callback
*/ */
pop(dispatch = true) { replace(view: DisplayObject, options?, playEffect = true, callback?) {
let len = this.children.length; const action = 'replace';
let len = this.childNum;
if (len <= 0) { if (len <= 0) {
return false; return false;
} }
this.removeChildAt(len - 1); let lastView = this.getChildAt(len - 1);
if (this._mutex) {
this.addChild(this._stack.pop()); view.visible = false;
} this.addChild(view);
if (dispatch) {
this.dispatchEvent('change', {action: 'pop'}); let data = {action, view, lastView, options, hasView: len > 1};
} this.dispatchEvent(Event.START, data);
return true; playViewEffect(
playEffect ? options ? options.effect : null : null,
options ? options.effectParams : {},
this._mutex, lastView, view, this,
() => {
this.dispatchEvent(Event.COMPLETE, data);
callback && callback();
}
)
} }
/** /**
* 撤出全部视图 * 撤出全部视图
* @param view * @param view
* @param options * @param options
* @param playEffect
* @param callback
*/ */
popAll(view?: DisplayObject, options?) { popAll(view?: DisplayObject, options?, playEffect = true, callback?) {
this.removeChildren(); const action = 'popAll';
let lastView = this.getChildAt(0);
let len = this.childNum;
while (this.children.length > 1) {
this.removeChildAt(1);
}
if (this._mutex) { if (this._mutex) {
this._stack.splice(0); this._stack.splice(0);
} }
if (view) {
this.push(view, options, false); if(view){
view.visible = false;
this.addChild(view);
} }
this.dispatchEvent('change', {action: 'popAll', view, options});
let data = {action, view, lastView, options, hasView: len > 1};
this.dispatchEvent(Event.START, data);
playViewEffect(
playEffect ? options ? options.effect : null : null,
options ? options.effectParams : {},
this._mutex, lastView, view, this,
() => {
this.dispatchEvent(Event.COMPLETE, data);
callback && callback();
}
)
} }
} }
...@@ -23,12 +23,12 @@ export class Toast extends Node { ...@@ -23,12 +23,12 @@ export class Toast extends Node {
this.verticalCenter = 0; this.verticalCenter = 0;
} }
show(props: any = {}) { async show(props: any = {}) {
if (!props.text) { if (!props.text) {
return; return;
} }
let contentView = this.getContent(props.viewName); let contentView = await this.getContent(props.viewName);
let lab = contentView.getChildByName('lab'); let lab = contentView.getChildByName('lab');
if (!lab) { if (!lab) {
console.warn('[lab] child no exists on toast view'); console.warn('[lab] child no exists on toast view');
...@@ -72,12 +72,12 @@ export class Toast extends Node { ...@@ -72,12 +72,12 @@ export class Toast extends Node {
this._content = null; this._content = null;
} }
private getContent(viewName) { private async getContent(viewName) {
let view; let view;
if (this.children.length == 0) { if (this.children.length == 0) {
if (viewName) { if (viewName) {
view = this._gameStage.instantiateView(viewName); view = await this._gameStage.instantiateView(viewName);
} }
if (!view) { if (!view) {
if (!this._contentSample) { if (!this._contentSample) {
......
/**
* Created by rockyl on 2020-05-04.
*/
import {Tween} from "../../2d/tween/Tween";
import {gameStage} from "../launcher";
import {injectProp} from "../utils/index";
import {Ease} from "../../2d/tween/Ease";
export function playViewEffect(name, params, mutex, lastView, view, container, callback) {
let effect = name ? effects[name] : effects.simple;
effect = effect || effects.simple;
effect(params || {}, mutex, lastView, view, container, callback);
}
const effects = {
simple(params, mutex, lastView, view, container, callback) {
if (mutex) {
container.removeChild(lastView);
}else{
if (lastView && !view) {
container.removeChild(lastView);
}
}
if(view){
view.visible = true;
}
callback();
},
fade(params, mutex, lastView, view, container, callback) {
const {duration = 300} = params;
if (mutex) {
fadeOut(() => {
fadeIn(callback);
})
} else {
fadeIn(callback);
}
function fadeOut(callback) {
if (lastView) {
Tween.get(lastView, null, null, true)
.to({alpha: 0}, duration)
.call(() => {
container.removeChild(lastView);
lastView.alpha = 1;
callback();
});
} else {
callback();
}
}
function fadeIn(callback) {
if (view) {
view.visible = true;
view.alpha = 0;
Tween.get(view, null, null, true)
.to({alpha: 1}, params.duration || 300)
.call(() => {
callback();
});
} else {
callback();
}
}
},
flew(params, mutex, lastView, view, container, callback) {
const {duration = 300, direction = 'top', ease = 'backOut'} = params;
const {stage: {width, height}} = gameStage;
let outPos: any = {};
switch (direction) {
case 'left':
outPos.x = -width;
break;
case 'right':
outPos.x = width;
break;
case 'top':
outPos.y = -height;
break;
case 'bottom':
outPos.y = height;
break;
}
let inEase = ease;
let outEase = ease.indexOf('Out') ? ease.replace('Out', 'In') : ease.replace('In', 'Out');
if (mutex) {
flewOut(() => {
flewIn(callback);
})
} else {
if (lastView && !view) {
flewOut(callback)
} else {
flewIn(callback);
}
}
function flewOut(callback) {
if (lastView) {
Tween.get(lastView, null, null, true)
.to(outPos, duration, Ease[outEase])
.call(() => {
container.removeChild(lastView);
injectProp(lastView, outPos);
callback();
});
} else {
callback();
}
}
function flewIn(callback) {
if (view) {
let inPos: any = {
x: view.x,
y: view.y,
};
view.visible = true;
injectProp(view, outPos);
Tween.get(view, null, null, true)
.to(inPos, duration, Ease[inEase])
.call(() => {
callback();
});
} else {
callback();
}
}
},
hulu(params, mutex, lastView, view, container, callback) {
const {duration = 300, ease = 'backOut', x = 0, y = 0} = params;
let inEase = ease;
let outEase = ease.indexOf('Out') ? ease.replace('Out', 'In') : ease.replace('In', 'Out');
let outPos = {
x: parseInt(x),
y: parseInt(y),
scaleX: 0, scaleY: 0,
};
if (mutex) {
huluOut(() => {
huluIn(callback);
})
} else {
if (lastView && !view) {
huluOut(callback)
} else {
huluIn(callback);
}
}
function huluOut(callback) {
if (lastView) {
outPos.x -= lastView.width / 2;
outPos.y -= lastView.height / 2;
Tween.get(lastView, null, null, true)
.to(outPos, duration, Ease[outEase])
.call(() => {
container.removeChild(lastView);
injectProp(lastView, outPos);
callback();
});
} else {
callback();
}
}
function huluIn(callback) {
if (view) {
let inPos: any = {
x: view.x,
y: view.y,
scaleX: 1, scaleY: 1
};
view.anchorX = view.width / 2;
view.anchorY = view.height / 2;
outPos.x -= view.width / 2;
outPos.y -= view.height / 2;
view.visible = true;
injectProp(view, outPos);
Tween.get(view, null, null, true)
.to(inPos, duration, Ease[inEase])
.call(() => {
callback();
});
} else {
callback();
}
}
},
zoom(params, mutex, lastView, view, container, callback) {
const {duration = 300, ease = 'backOut'} = params;
let inEase = ease;
let outEase = ease.indexOf('Out') ? ease.replace('Out', 'In') : ease.replace('In', 'Out');
if (mutex) {
zoomOut(() => {
zoomIn(callback);
})
} else {
if (lastView && !view) {
zoomOut(callback)
} else {
zoomIn(callback);
}
}
function zoomOut(callback) {
if (lastView) {
Tween.get(lastView, null, null, true)
.to({scaleX: 0, scaleY: 0}, duration, Ease[outEase])
.call(() => {
container.removeChild(lastView);
injectProp(view, {scaleX: 0, scaleY: 0});
callback();
});
} else {
callback();
}
}
function zoomIn(callback) {
if (view) {
view.anchorX = view.width / 2;
view.anchorY = view.height / 2;
view.visible = true;
injectProp(view, {scaleX: 0, scaleY: 0});
Tween.get(view, null, null, true)
.to({scaleX: 1, scaleY: 1}, duration, Ease[inEase])
.call(() => {
callback();
});
} else {
callback();
}
}
},
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment