pixi-emote-selector
Version:
💬😜 Emote Selector for pixi.js
273 lines • 11.2 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.EmoteSelector = void 0;
var PIXI = __importStar(require("pixi.js"));
var IS_MOBILE = /Mobi/i.test(window.navigator.userAgent);
var EmoteSelector = /** @class */ (function (_super) {
__extends(EmoteSelector, _super);
function EmoteSelector(opts) {
var _this = _super.call(this) || this;
_this.selectedIndex = -1;
_this.size = 110;
_this.distanceFromCenter = 40;
_this.margin = 5;
_this.animationTime = 100;
_this.selectedAlpha = 1;
_this.unselectedAlpha = 0.6;
_this.lineColor = 0xffffff;
_this.hoverColor = 0xffffff;
_this.isOpen = false;
_this.onTouchEndCallback = function () {
_this.close();
};
_this.onMouseDownCallback = function (ev) {
if (ev.button === 2) {
_this.open(ev.offsetX, ev.offsetY);
}
};
_this.onMouseUpCallback = function (ev) {
ev.preventDefault();
if (ev.button === 2) {
_this.close();
}
};
_this.disableContextMenu = function (ev) {
ev.preventDefault();
};
_this.options = opts;
var option1 = _this.getOptionGraphics(0);
option1.angle = -45;
_this.addChild(option1);
var option2 = _this.getOptionGraphics(1);
option2.angle = -45;
_this.addChild(option2);
var option3 = _this.getOptionGraphics(2);
option3.angle = -45;
_this.addChild(option3);
var option4 = _this.getOptionGraphics(3);
option4.angle = -45;
_this.addChild(option4);
option1.position.x -= _this.size - _this.distanceFromCenter + (_this.margin * 2);
option2.position.y -= _this.size - _this.distanceFromCenter + (_this.margin * 2);
option2.scale.x = -1;
option3.position.y += _this.size - _this.distanceFromCenter + (_this.margin * 2);
option3.scale.y = -1;
option4.position.x += _this.size - _this.distanceFromCenter + (_this.margin * 2);
option4.scale.set(-1);
_this.selectionOptions = [option1, option2, option3, option4];
var options = [option1, option2, option3, option4];
if (opts.options) {
opts.options.forEach(function (icon, i) {
var optionBackground = options[i];
var child = _this.addChild(icon);
child.position.x = optionBackground.x - child.width / 2;
child.position.y = optionBackground.y - child.height / 2;
_this.selectionOptions.push(child);
});
}
/**
* Close button
*/
var closeButton = new PIXI.Graphics();
_this.setLineStyle(closeButton);
closeButton.beginFill(0xffffff);
closeButton.drawCircle(0, 0, _this.distanceFromCenter - _this.margin * 2);
closeButton.interactive = true;
_this.addChild(closeButton);
// add mobile button on top of closeButton
if (IS_MOBILE) {
closeButton.alpha = 0;
closeButton.on("pointerdown", function (e) { return _this.open(_this.x, _this.y); });
closeButton.on("pointerup", function (e) { return _this.close(); });
if (opts.mobileButton) {
var mobileButton = _this.addChild(opts.mobileButton);
mobileButton.x -= (mobileButton.width / 2);
mobileButton.y -= (mobileButton.height / 2);
}
closeButton.on("pointerover", function () {
// unselect previous selection
_this.clear();
closeButton.tint = _this.hoverColor;
_this.selectedIndex = -1;
});
closeButton.on("pointerout", function () {
closeButton.tint = 0xffffff;
});
_this.selectionOptions.forEach(function (option) { return option.visible = false; });
}
else {
_this.visible = false;
closeButton.on("pointerover", function () {
// unselect previous selection
_this.clear();
closeButton.tint = _this.hoverColor;
closeButton.alpha = _this.selectedAlpha;
_this.selectedIndex = -1;
});
closeButton.on("pointerout", function () {
closeButton.tint = 0xffffff;
closeButton.alpha = _this.unselectedAlpha;
});
closeButton.alpha = _this.unselectedAlpha;
}
_this.on("added", function () {
document.addEventListener("contextmenu", _this.disableContextMenu);
document.addEventListener("mousedown", _this.onMouseDownCallback);
document.addEventListener("mouseup", _this.onMouseUpCallback);
document.addEventListener("touchend", _this.onTouchEndCallback);
});
_this.on("removed", function () {
document.removeEventListener("contextmenu", _this.disableContextMenu);
document.removeEventListener("mousedown", _this.onMouseDownCallback);
document.removeEventListener("mouseup", _this.onMouseUpCallback);
document.removeEventListener("touchend", _this.onTouchEndCallback);
});
return _this;
}
EmoteSelector.prototype.clear = function () {
// unselect previous selection
if (this.selectedOption) {
this.selectedOption.tint = 0xffffff;
this.selectedOption.alpha = this.unselectedAlpha;
this.selectedIndex = -1;
}
};
EmoteSelector.prototype.setLineStyle = function (graphics) {
graphics.lineStyle(3, this.lineColor, 1);
};
EmoteSelector.prototype.getOptionGraphics = function (index) {
var _this = this;
var option = new PIXI.Graphics();
this.setLineStyle(option);
option.alpha = this.unselectedAlpha;
option.beginFill(0xffffff);
option.moveTo(-this.distanceFromCenter, 0);
option.lineTo(-this.size, 0);
option.arcTo(-this.size, -this.size, 0, -this.size, this.size);
option.lineTo(0, -this.distanceFromCenter);
option.arcTo(-this.distanceFromCenter, -this.distanceFromCenter, -this.distanceFromCenter, 0, this.distanceFromCenter);
this.addChild(option);
option.position.set(0, 0);
option.interactive = true;
option.pivot.x = -this.size / 2;
option.pivot.y = -this.size / 2;
var onPointerOver = function () {
if (_this.isOpen) {
// unselect previous selection
_this.clear();
option.tint = _this.hoverColor;
option.alpha = _this.selectedAlpha;
_this.selectedIndex = index;
_this.selectedOption = option;
}
};
option.on("touchmove", function (e) {
if (option.containsPoint(e.data.global)) {
onPointerOver();
}
});
option.on("pointerover", function () {
onPointerOver();
});
return option;
};
EmoteSelector.prototype.destroy = function () {
document.removeEventListener("contextmenu", this.disableContextMenu);
document.removeEventListener("mousedown", this.onMouseDownCallback);
document.removeEventListener("mouseup", this.onMouseUpCallback);
};
EmoteSelector.prototype.open = function (positionX, positionY) {
this.isOpen = true;
if (IS_MOBILE) {
this.selectionOptions.forEach(function (option) { return option.visible = true; });
}
else {
this.visible = true;
}
// this.scale.set(1);
// this.alpha = 1;
this.clear();
var ticker = PIXI.Ticker.shared;
var initialTime;
this.position.x = positionX;
this.position.y = positionY;
// this._show = () => {
// if (initialTime === undefined) {
// initialTime = ticker.lastTime;
// }
// const t = (ticker.lastTime - initialTime) / this.animationTime;
// this.scale.set(easing.expoOut(t));
// if (t >= 1) {
// ticker.remove(this._show!);
// this._show = undefined;
// }
// };
// ticker.add(this._show);
};
EmoteSelector.prototype.close = function () {
this.isOpen = false;
var ticker = PIXI.Ticker.shared;
if (IS_MOBILE) {
this.selectionOptions.forEach(function (option) { return option.visible = false; });
}
else {
this.visible = false;
}
// this.scale.set(0);
// this.alpha = 0;
// if (this._show) { ticker.remove(this._show) }
// if (this._hide) { ticker.remove(this._hide) }
if (this.selectedIndex !== -1) {
this.options.onItemSelected(this.selectedIndex);
this.clear();
}
var initialTime;
// this._hide = () => {
// if (initialTime === undefined) {
// initialTime = ticker.lastTime;
// }
// const t = (ticker.lastTime - initialTime) / (this.animationTime / 3);
// this.scale.set(1 - easing.expoOut(t));
// if (t >= 1) {
// ticker.remove(this._hide!);
// this._hide = undefined;
// }
// };
// ticker.add(this._hide);
};
return EmoteSelector;
}(PIXI.Container));
exports.EmoteSelector = EmoteSelector;
//# sourceMappingURL=index.js.map