@ngfx/ui
Version:
Angular UI library for gaming and creative applications
455 lines (445 loc) • 29.3 kB
JavaScript
import { Injectable, EventEmitter, Component, Input, HostBinding, HostListener, NgModule, Directive, ElementRef, ViewChild } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
class NgFxController {
constructor() {
this.surfaces = {};
this.onEvent = new EventEmitter();
}
createSurface(id, controls) {
this.surfaces[id] = {
id: id,
controls: controls
};
}
getSurface(id) {
return this.surfaces[id];
}
destroySurface(id) {
delete this.surfaces[id];
}
}
NgFxController.decorators = [
{ type: Injectable },
];
NgFxController.ctorParameters = () => [];
class NgFxButtonComponent {
constructor(_controller, _sanitizer) {
this._controller = _controller;
this._sanitizer = _sanitizer;
}
get transform() {
return this.sanitize(this.control.transform) || this.sanitize('');
}
get gridArea() {
return this.sanitize(this.control.gridArea) || this.sanitize('');
}
get placeSelf() {
return this.sanitize(this.control.placeSelf) || this.sanitize('');
}
onMouseup(event) {
this.onHold = false;
this.control.currentValue = false;
this.control.hasUserInput = false;
window.clearInterval(this._holdInterval);
this._controller.onEvent.emit({
type: 'change',
control: this.control
});
}
onMousedown(event) {
this.onHold = true;
this._holdInterval = window.setInterval(() => {
this.setActive();
}, 200);
this.setActive();
}
onTouchStart(e) {
this.onMousedown(e);
}
onTouchEnd(e) {
this.onMouseup(e);
}
setActive() {
this.control.currentValue = true;
this.control.hasUserInput = true;
this._controller.onEvent.emit({
type: 'change',
control: this.control
});
}
hasName() {
return this.control.name !== undefined && this.control.name.length > 0;
}
sanitize(style) {
return this._sanitizer.bypassSecurityTrustStyle(style);
}
}
NgFxButtonComponent.decorators = [
{ type: Component, args: [{
selector: 'ngfx-button, [ngfx-button]',
template: "<div class=\"ngfx__title\" [hidden]=\"!hasName()\"><span class=\"control__name\">{{control.name.charAt(0).toUpperCase()}}</span> <span class=\"slave__indicator\" [ngClass]=\"{\'is--visible\': control.hasRemoteInput === true }\"></span></div><div class=\"ngfx__button\" [ngClass]=\"{\'is--active\' : control.currentValue === true }\"></div>",
styles: [":host {\n display: flex;\n flex-direction: column;\n justify-content: left;\n}\n\n:host .ngfx__title {\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: center;\n -webkit-transform: translateY(-4px);\n transform: translateY(-4px);\n}\n\n:host .ngfx__title .control__name {\n color: rgba(255, 255, 255, 0.3);\n font-size: 12px;\n font-weight: 700;\n}\n\n:host .ngfx__title .slave__indicator {\n width: 8px;\n height: 8px;\n border-radius: 50% 50%;\n background: rgba(255, 255, 255, 0.5);\n -webkit-transform: translateX(4px) translateY(3px);\n transform: translateX(4px) translateY(3px);\n display: none;\n}\n\n:host .ngfx__title .slave__indicator.is--visible {\n display: block;\n}\n\n:host .ngfx__button {\n width: 100%;\n min-height: 32px;\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-radius: 14px;\n cursor: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAACEUlEQVRYhe2Z646CMBBGTwusl/d/VnUV6P6Yjq0V5KJISfZLSCMBPYxfp2XGOOd4QwYo/GH9YZJrHND6o/HH7B8t37iv8qNCKkQKY6JR4Wvg5sdJMhMjXAI7Pxr/41OjZQgPUQO/TAAfC2yAAxJVENBPyPrxBlzGfO8Y4AqBtYj/llCBwJ4R+F4NAf8gsPC5qPZJo31BbPLyoi7tgCNhoiwtnQ8HYN93UR+wRnbOpHpHDrHdHgnYk7qASySy34aN1SIBe0q7KbAh2GAtWAg2PJIsRCnw3p/7hmeH5BCWQ3wyBi4R7y6VuuaoIayowCNwp8kz0Z1NgQvkKXKwQqoWYSshAP+shjNeFQTgknWzwpAcfsNlCVvE3IEtUFjEv1tRoW8JW9HmgE36epOzHB54U/oHXlqaf9NaQo4ygMtlKzlWmwNulnx1X0KNRaouLXn7WKtMjWaJmvyBa7yHAa4rwozVDUIebpAnyDEvq21r/aDqLQ+tLEPEFgPXiDVy2h8XCNO9HJtaQEueOUxA3UVe4pMpsANOdJf+vynjGU4kC1vXJKuROu2aE9DSUyvu63GoydeoYBa8qBG/asroDXvCSrOk1AZnXmSsXFoGus29MLCIjW3KWCTSm2jKxKqQspZaaU4dOW17XRloxDzcPLMTmjYWY3V9YZwitbGozcVJmgscgyh0wWP0VPovNIT27WxL/QG7cp5Q+WnBUwAAAABJRU5ErkJggg==\") 0 0, pointer;\n}\n\n:host .ngfx__button.is--active {\n background: rgba(255, 255, 255, 0.1);\n border: 2px solid rgba(255, 255, 255, 0.5);\n}\n"]
},] },
];
NgFxButtonComponent.ctorParameters = () => [
{ type: NgFxController },
{ type: DomSanitizer }
];
NgFxButtonComponent.propDecorators = {
control: [{ type: Input, args: ['control',] }],
transform: [{ type: HostBinding, args: ['style.transform',] }],
gridArea: [{ type: HostBinding, args: ['style.grid-area',] }],
placeSelf: [{ type: HostBinding, args: ['style.place-self',] }],
onMouseup: [{ type: HostListener, args: ['mouseup', ['$event'],] }],
onMousedown: [{ type: HostListener, args: ['mousedown', ['$event'],] }],
onTouchStart: [{ type: HostListener, args: ['touchstart', ['$event'],] }],
onTouchEnd: [{ type: HostListener, args: ['touchend', ['$event'],] }]
};
class NgFxButtonModule {
}
NgFxButtonModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
declarations: [NgFxButtonComponent],
exports: [NgFxButtonComponent]
},] },
];
class NgFxDraggableDirective {
constructor(_el, _controller) {
this._el = _el;
this._controller = _controller;
this._elem = _el.nativeElement;
}
ngOnInit() {
const nodeList = (((this._elem.getElementsByClassName('ngfx__handle'))));
this._touchItem = null;
this._handle = nodeList[0];
this.control.height = this._elem.clientHeight;
this.control.width = this._elem.clientWidth;
if (this.control.orient === 'is--hor') {
this.control.currentValue = 0;
this.control.position = 'translate(' + 0 + 'px' + ',' + 0 + 'px' + ')';
}
else if (this.control.orient === 'is--vert') {
this.control.currentValue = 0;
this.control.position = 'translate(' + 0 + 'px' + ',' + 0 + 'px' + ')';
}
else if (this.control.orient === 'is--joystick') {
this.control.currentValue = [0, 0];
this.control.x = this.control.y = 76;
this.control.position = 'translate(' + 76 + 'px' + ',' + 76 + 'px' + ')';
}
this._lastPos = { transform: this.control.position };
this.setActualPosition(this.control.position);
}
onMouseLeave(e) {
}
onMouseEnter(e) {
if (this.control.isActive) {
this.control.hasUserInput = true;
}
}
onTouchStart(e) {
this.control.hasUserInput = true;
this.onTouchDown(e);
}
onTouchDown(e) {
e.preventDefault();
this.control.isActive = true;
this.control.hasUserInput = true;
this._rect = this._elem.getBoundingClientRect();
this.control.height = this._elem.clientHeight;
this.control.width = this._elem.clientWidth;
this._elem.addEventListener('touchmove', this.onTouchMove.bind(this));
this._elem.addEventListener('touchend', this.onMouseUp.bind(this));
if (this._touchItem === null) {
this._touchItem = e.touches.length - 1;
}
this.control.x = e.touches[this._touchItem].pageX - this._rect.left - this._handle.clientWidth / 2;
this.control.y = e.touches[this._touchItem].pageY - this._rect.top - this._handle.clientWidth / 2;
this.setPosition(this.control.x, this.control.y);
}
onMouseDown(e) {
e.preventDefault();
this.control.isActive = true;
this.control.hasUserInput = true;
this._rect = this._elem.getBoundingClientRect();
this.control.height = this._elem.clientHeight;
this.control.width = this._elem.clientWidth;
this.control.x = e.offsetX;
this.control.y = e.offsetY;
this._elem.addEventListener('mousemove', this.onMouseMove.bind(this));
this._elem.addEventListener('mouseup', this.onMouseUp.bind(this));
window.addEventListener('mousemove', this.onMouseMove.bind(this));
window.addEventListener('mouseup', this.onMouseUp.bind(this));
this.setPosition(this.control.x, this.control.y);
}
onTouchMove(e) {
e.preventDefault();
this._handle.style.opacity = '0.8';
if (this._touchItem === null) {
this._touchItem = e.touches.length - 1;
}
this.control.x = e.touches[this._touchItem].pageX - this._rect.left - 22;
this.control.y = e.touches[this._touchItem].pageY - this._rect.top - 66;
this.setPosition(this.control.x, this.control.y);
if (this.control.orient === 'is--hor') {
this.control.currentValue = this.scale(this.control.x, 0, this.control.width - 44, (this.control.min), (this.control.max));
}
else if (this.control.orient === 'is--vert') {
this.control.currentValue = this.scale(this.control.y, 0, this.control.height - 44, (this.control.min), (this.control.max));
}
else if (this.control.orient === 'is--joystick') {
this.control.currentValue = [
this.scale(this.control.x, 0, this.control.width - 44, this.control.min[0], this.control.max[0]),
this.scale(this.control.y, 0, this.control.height - 44, this.control.min[1], this.control.max[1])
];
}
this.control.timeStamp = e.timeStamp;
this.onEvent();
}
onMouseMove(e) {
const parent = (((e.target)).parentNode);
if (!this.control.isActive) {
return;
}
if (this.control.isActive && parent === this._elem) {
this._handle.style.opacity = '0.8';
this.control.x = e.offsetX;
this.control.y = e.offsetY;
}
else {
this._handle.style.opacity = '0.8';
this.control.x = (this._elem.getBoundingClientRect().left - e.offsetX) * -1;
this.control.y = (this._elem.getBoundingClientRect().top - e.offsetY) * -1;
}
if (this.control.hasUserInput && this.control.isActive) {
this.setPosition(this.control.x, this.control.y);
if (this.control.orient === 'is--hor') {
this.control.currentValue = this.scale(this.control.x, 0, this.control.width - 44, (this.control.min), (this.control.max));
}
if (this.control.orient === 'is--vert') {
this.control.currentValue = this.scale(this.control.y, 0, this.control.height - 44, (this.control.min), (this.control.max));
}
if (this.control.orient === 'is--joystick') {
this.control.currentValue = [
this.scale(this.control.x, 0, this.control.width - 44, this.control.min[0], this.control.max[0]),
this.scale(this.control.y, 0, this.control.height - 44, this.control.min[1], this.control.max[1])
];
}
this.control.timeStamp = e.timeStamp;
this.onEvent();
}
}
onMouseUp(e) {
this.control.isActive = false;
this.control.hasUserInput = false;
this._handle.style.opacity = '0.3';
if ('ontouchstart' in document.documentElement) {
this._touchItem = null;
}
else {
this._elem.removeEventListener('mousemove', this.onMouseMove.bind(this));
this._elem.removeEventListener('mouseup', this.onMouseUp.bind(this));
}
if (this.control.orient === 'is--joystick' && this.control.snapToCenter === true) {
const center = this.getCenter([0, this.control.width - this._handle.offsetWidth], [0, this.control.height - this._handle.offsetHeight]);
this.control.x = center[0];
this.control.y = center[1];
this.setPosition(center[0], center[1]);
}
}
onTouchEnd(e) {
this.onMouseUp(e);
}
onEvent() {
if (this.control.isActive) {
this._controller.onEvent.emit({
type: 'change',
endFrame: true,
control: this.control
});
}
}
getCenter(xRange, yRange) {
const cX = xRange[1] - (xRange[1] - xRange[0]) / 2;
const cY = yRange[1] - (yRange[1] - yRange[0]) / 2;
return [cX, cY];
}
distance(dot1, dot2) {
const x1 = dot1[0];
const y1 = dot1[1];
const x2 = dot2[0];
const y2 = dot2[1];
return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
}
scale(v, min, max, gmin, gmax) {
return ((v - min) / (max - min)) * (gmax - gmin) + gmin;
}
circularBounds(x, y, xRange, yRange) {
const center = this.getCenter(xRange, yRange);
const dist = this.distance([x, y], center);
const radius = xRange[1] - center[0];
if (dist <= radius) {
return [x, y];
}
else {
x = x - center[0];
y = y - center[1];
const radians = Math.atan2(y, x);
return [Math.cos(radians) * radius + center[0], Math.sin(radians) * radius + center[1]];
}
}
clamp(value, range) {
return Math.max(Math.min(value, range[1]), range[0]);
}
setActualPosition(pos) {
const transformRegex = new RegExp(/(\d+(\.\d+)?)/g);
const positions = pos.match(transformRegex);
this._handle.style.transform = 'matrix3d(1,0,0.00,0,0.00,1,0.00,0,0,0,1,0,' + positions[0] + ',' + positions[1] + ',0,1)';
}
setPosition(x, y) {
if (this.control.orient === 'is--joystick') {
this._joystickPos = this.circularBounds(this.control.x, this.control.y, [0, this.control.width - this._handle.offsetWidth], [0, this.control.height - this._handle.offsetHeight]);
this.control.x = this.clamp(this._joystickPos[0], [0, this.control.width - this._handle.offsetWidth]);
this.control.y = this.clamp(this._joystickPos[1], [0, this.control.height - this._handle.offsetHeight]);
this.control.position = 'translate(' + this.control.x + 'px' + ',' + this.control.y + 'px' + ')';
this.setActualPosition(this.control.position);
}
else {
if (x <= 0) {
this.control.x = 0;
}
else if (x > this._elem.clientWidth - this._handle.offsetWidth) {
this.control.x = this._elem.clientWidth - this._handle.offsetWidth;
}
else {
this.control.x = x;
}
if (y <= 0) {
this.control.y = 0;
}
else if (y > this._elem.clientHeight - this._handle.offsetHeight) {
this.control.y = this._elem.clientHeight - this._handle.offsetHeight;
}
else {
this.control.y = y;
}
this.control.position = 'translate(' + this.control.x + 'px' + ',' + this.control.y + 'px' + ')';
this.setActualPosition(this.control.position);
}
}
}
NgFxDraggableDirective.decorators = [
{ type: Directive, args: [{
selector: '[ngfxDraggable]'
},] },
];
NgFxDraggableDirective.ctorParameters = () => [
{ type: ElementRef },
{ type: NgFxController }
];
NgFxDraggableDirective.propDecorators = {
control: [{ type: Input, args: ['control',] }],
onMouseLeave: [{ type: HostListener, args: ['mouseleave', ['$event'],] }],
onMouseEnter: [{ type: HostListener, args: ['mouseenter', ['$event'],] }],
onTouchStart: [{ type: HostListener, args: ['touchstart', ['$event'],] }],
onMouseDown: [{ type: HostListener, args: ['mousedown', ['$event'],] }],
onMouseUp: [{ type: HostListener, args: ['mouseup', ['$event'],] }],
onTouchEnd: [{ type: HostListener, args: ['touchend', ['$event'],] }]
};
class NgFxSliderComponent {
constructor(_sanitizer) {
this._sanitizer = _sanitizer;
}
get transform() {
return this.sanitize(this.control.transform) || this.sanitize('');
}
get gridArea() {
return this.sanitize(this.control.gridArea) || this.sanitize('');
}
get placeSelf() {
return this.sanitize(this.control.placeSelf) || this.sanitize('');
}
hasName() {
return this.control.name !== undefined && this.control.name.length > 0;
}
sanitize(style) {
return this._sanitizer.bypassSecurityTrustStyle(style);
}
}
NgFxSliderComponent.decorators = [
{ type: Component, args: [{
selector: 'ngfx-slider, [ngfx-slider]',
template: "<div class=\"ngfx__slider\" [ngClass]=\"{\'is--hor\' : control.orient === \'is--hor\',\n \'is--vert\' : control.orient === \'is--vert\',\n \'is--joystick\' : control.orient === \'is--joystick\'}\"><div class=\"ngfx__title\" [hidden]=\"!hasName()\"><span class=\"control__name\">{{control.name.charAt(0).toUpperCase()}}</span> <span class=\"slave__indicator\" [ngClass]=\"{\'is--visible\': control.hasRemoteInput === true }\"></span></div><div class=\"ngfx__draggable\" ngfxDraggable [control]=\"control\" [ngClass]=\"{\'is--active\': control.hasUserInput === true }\"><div class=\"ngfx__range\"><div class=\"ngfx__handle\"></div></div></div></div>",
styles: ["/**\n * Convert font-size from px to rem with px fallback\n *\n * @param $size - the value in pixel you want to convert\n *\n * e.g. p {@include fontSize(12px);}\n *\n */\n:host {\n display: block;\n}\n\n:host:after {\n content: \'\';\n display: table;\n clear: both;\n}\n\n:host .ngfx__slider .ngfx__title {\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: center;\n -webkit-transform: translateY(0px);\n transform: translateY(0px);\n}\n\n:host .ngfx__slider .ngfx__title .control__name {\n color: rgba(255, 255, 255, 0.3);\n font-size: 12px;\n font-weight: 700;\n}\n\n:host .ngfx__slider .ngfx__title .slave__indicator {\n width: 8px;\n height: 8px;\n border-radius: 50% 50%;\n background: rgba(255, 255, 255, 0.5);\n -webkit-transform: translateX(4px) translateY(3px);\n transform: translateX(4px) translateY(3px);\n display: none;\n}\n\n:host .ngfx__slider .ngfx__title .slave__indicator.is--visible {\n display: block;\n}\n\n:host .ngfx__slider .ngfx__draggable {\n display: block;\n z-index: 1000;\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-radius: 12px;\n -webkit-transform: translateY(8px);\n transform: translateY(8px);\n}\n\n:host .ngfx__slider .ngfx__draggable.is--active {\n background: rgba(255, 255, 255, 0.1);\n border: 2px solid rgba(255, 255, 255, 0.5);\n}\n\n:host .ngfx__slider .ngfx__draggable .ngfx__range {\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n:host .ngfx__slider .ngfx__draggable .ngfx__handle {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: url(\"data:image/svg+xml;charset=UTF-8,%3c?xml version=\'1.0\' encoding=\'utf-8\'?%3e%3c!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version=\'1.1\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' x=\'0px\' y=\'0px\' viewBox=\'0 0 512 512\' style=\'enable-background:new 0 0 512 512;\' xml:space=\'preserve\'%3e%3cstyle type=\'text/css\'%3e .st0%7bfill:none;stroke:%23FFFFFF;stroke-width:8;stroke-miterlimit:10;%7d .st1%7bdisplay:none;%7d .st2%7bdisplay:inline;fill:none;stroke:%23FFFFFF;stroke-width:8;stroke-miterlimit:10;%7d %3c/style%3e%3cg id=\'Layer_1\'%3e%3ccircle class=\'st0\' cx=\'256\' cy=\'256\' r=\'245.2\'/%3e%3c/g%3e%3cg id=\'Layer_2\' class=\'st1\'%3e%3cline class=\'st2\' x1=\'256\' y1=\'3.7\' x2=\'256\' y2=\'508.3\'/%3e%3c/g%3e%3cg id=\'Layer_3\' class=\'st1\'%3e%3cline class=\'st2\' x1=\'508.3\' y1=\'256\' x2=\'3.7\' y2=\'256\'/%3e%3c/g%3e%3c/svg%3e\");\n background-repeat: no-repeat;\n transition: -webkit-transform 0.175;\n transition: transform 0.175;\n transition: transform 0.175, -webkit-transform 0.175;\n pointer-events: none;\n opacity: 0.3;\n}\n\n:host .ngfx__slider.is--hor {\n width: 200px;\n height: 32px;\n}\n\n:host .ngfx__slider.is--hor .ngfx__draggable {\n width: 200px;\n height: 32px;\n border-radius: 14px;\n cursor: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAACEUlEQVRYhe2Z646CMBBGTwusl/d/VnUV6P6Yjq0V5KJISfZLSCMBPYxfp2XGOOd4QwYo/GH9YZJrHND6o/HH7B8t37iv8qNCKkQKY6JR4Wvg5sdJMhMjXAI7Pxr/41OjZQgPUQO/TAAfC2yAAxJVENBPyPrxBlzGfO8Y4AqBtYj/llCBwJ4R+F4NAf8gsPC5qPZJo31BbPLyoi7tgCNhoiwtnQ8HYN93UR+wRnbOpHpHDrHdHgnYk7qASySy34aN1SIBe0q7KbAh2GAtWAg2PJIsRCnw3p/7hmeH5BCWQ3wyBi4R7y6VuuaoIayowCNwp8kz0Z1NgQvkKXKwQqoWYSshAP+shjNeFQTgknWzwpAcfsNlCVvE3IEtUFjEv1tRoW8JW9HmgE36epOzHB54U/oHXlqaf9NaQo4ygMtlKzlWmwNulnx1X0KNRaouLXn7WKtMjWaJmvyBa7yHAa4rwozVDUIebpAnyDEvq21r/aDqLQ+tLEPEFgPXiDVy2h8XCNO9HJtaQEueOUxA3UVe4pMpsANOdJf+vynjGU4kC1vXJKuROu2aE9DSUyvu63GoydeoYBa8qBG/asroDXvCSrOk1AZnXmSsXFoGus29MLCIjW3KWCTSm2jKxKqQspZaaU4dOW17XRloxDzcPLMTmjYWY3V9YZwitbGozcVJmgscgyh0wWP0VPovNIT27WxL/QG7cp5Q+WnBUwAAAABJRU5ErkJggg==\") 22 22, pointer;\n}\n\n:host .ngfx__slider.is--hor .ngfx__draggable .ngfx__handle {\n background: url(\"data:image/svg+xml;charset=UTF-8,%3c?xml version=\'1.0\' encoding=\'utf-8\'?%3e%3c!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version=\'1.1\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' x=\'0px\' y=\'0px\' viewBox=\'0 0 512 512\' style=\'enable-background:new 0 0 512 512;\' xml:space=\'preserve\'%3e%3cstyle type=\'text/css\'%3e .st0%7bdisplay:none;%7d .st1%7bdisplay:inline;fill:none;stroke:%23FFFFFF;stroke-width:8;stroke-miterlimit:10;%7d .st2%7bfill:none;stroke:%23FFFFFF;stroke-width:8;stroke-miterlimit:10;%7d %3c/style%3e%3cg id=\'Layer_1\' class=\'st0\'%3e%3ccircle class=\'st1\' cx=\'256\' cy=\'256\' r=\'245.2\'/%3e%3c/g%3e%3cg id=\'Layer_2\'%3e%3cline class=\'st2\' x1=\'256\' y1=\'3.7\' x2=\'256\' y2=\'508.3\'/%3e%3c/g%3e%3cg id=\'Layer_3\' class=\'st0\'%3e%3cline class=\'st1\' x1=\'508.3\' y1=\'256\' x2=\'3.7\' y2=\'256\'/%3e%3c/g%3e%3c/svg%3e\");\n background-size: 44px 32px;\n background-position: 50% 0px;\n}\n\n:host .ngfx__slider.is--vert {\n width: 32px;\n height: 200px;\n}\n\n:host .ngfx__slider.is--vert .ngfx__draggable {\n width: 32px;\n height: 200px;\n border-radius: 14px;\n cursor: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAACEUlEQVRYhe2Z646CMBBGTwusl/d/VnUV6P6Yjq0V5KJISfZLSCMBPYxfp2XGOOd4QwYo/GH9YZJrHND6o/HH7B8t37iv8qNCKkQKY6JR4Wvg5sdJMhMjXAI7Pxr/41OjZQgPUQO/TAAfC2yAAxJVENBPyPrxBlzGfO8Y4AqBtYj/llCBwJ4R+F4NAf8gsPC5qPZJo31BbPLyoi7tgCNhoiwtnQ8HYN93UR+wRnbOpHpHDrHdHgnYk7qASySy34aN1SIBe0q7KbAh2GAtWAg2PJIsRCnw3p/7hmeH5BCWQ3wyBi4R7y6VuuaoIayowCNwp8kz0Z1NgQvkKXKwQqoWYSshAP+shjNeFQTgknWzwpAcfsNlCVvE3IEtUFjEv1tRoW8JW9HmgE36epOzHB54U/oHXlqaf9NaQo4ygMtlKzlWmwNulnx1X0KNRaouLXn7WKtMjWaJmvyBa7yHAa4rwozVDUIebpAnyDEvq21r/aDqLQ+tLEPEFgPXiDVy2h8XCNO9HJtaQEueOUxA3UVe4pMpsANOdJf+vynjGU4kC1vXJKuROu2aE9DSUyvu63GoydeoYBa8qBG/asroDXvCSrOk1AZnXmSsXFoGus29MLCIjW3KWCTSm2jKxKqQspZaaU4dOW17XRloxDzcPLMTmjYWY3V9YZwitbGozcVJmgscgyh0wWP0VPovNIT27WxL/QG7cp5Q+WnBUwAAAABJRU5ErkJggg==\") 22 0, pointer;\n}\n\n:host .ngfx__slider.is--vert .ngfx__draggable .ngfx__handle {\n background: url(\"data:image/svg+xml;charset=UTF-8,%3c?xml version=\'1.0\' encoding=\'utf-8\'?%3e%3c!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version=\'1.1\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' x=\'0px\' y=\'0px\' viewBox=\'0 0 512 512\' style=\'enable-background:new 0 0 512 512;\' xml:space=\'preserve\'%3e%3cstyle type=\'text/css\'%3e .st0%7bdisplay:none;%7d .st1%7bdisplay:inline;fill:none;stroke:%23FFFFFF;stroke-width:8;stroke-miterlimit:10;%7d .st2%7bfill:none;stroke:%23FFFFFF;stroke-width:8;stroke-miterlimit:10;%7d %3c/style%3e%3cg id=\'Layer_1\' class=\'st0\'%3e%3ccircle class=\'st1\' cx=\'256\' cy=\'256\' r=\'245.2\'/%3e%3c/g%3e%3cg id=\'Layer_2\' class=\'st0\'%3e%3cline class=\'st1\' x1=\'256\' y1=\'3.7\' x2=\'256\' y2=\'508.3\'/%3e%3c/g%3e%3cg id=\'Layer_3\'%3e%3cline class=\'st2\' x1=\'508.3\' y1=\'256\' x2=\'3.7\' y2=\'256\'/%3e%3c/g%3e%3c/svg%3e\");\n background-size: 32px 44px;\n background-position: 0px 50%;\n}\n\n:host .ngfx__slider.is--joystick {\n width: 200px;\n height: auto;\n}\n\n:host .ngfx__slider.is--joystick .ngfx__draggable {\n width: 200px;\n height: 200px;\n border-radius: 50%;\n cursor: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAACEUlEQVRYhe2Z646CMBBGTwusl/d/VnUV6P6Yjq0V5KJISfZLSCMBPYxfp2XGOOd4QwYo/GH9YZJrHND6o/HH7B8t37iv8qNCKkQKY6JR4Wvg5sdJMhMjXAI7Pxr/41OjZQgPUQO/TAAfC2yAAxJVENBPyPrxBlzGfO8Y4AqBtYj/llCBwJ4R+F4NAf8gsPC5qPZJo31BbPLyoi7tgCNhoiwtnQ8HYN93UR+wRnbOpHpHDrHdHgnYk7qASySy34aN1SIBe0q7KbAh2GAtWAg2PJIsRCnw3p/7hmeH5BCWQ3wyBi4R7y6VuuaoIayowCNwp8kz0Z1NgQvkKXKwQqoWYSshAP+shjNeFQTgknWzwpAcfsNlCVvE3IEtUFjEv1tRoW8JW9HmgE36epOzHB54U/oHXlqaf9NaQo4ygMtlKzlWmwNulnx1X0KNRaouLXn7WKtMjWaJmvyBa7yHAa4rwozVDUIebpAnyDEvq21r/aDqLQ+tLEPEFgPXiDVy2h8XCNO9HJtaQEueOUxA3UVe4pMpsANOdJf+vynjGU4kC1vXJKuROu2aE9DSUyvu63GoydeoYBa8qBG/asroDXvCSrOk1AZnXmSsXFoGus29MLCIjW3KWCTSm2jKxKqQspZaaU4dOW17XRloxDzcPLMTmjYWY3V9YZwitbGozcVJmgscgyh0wWP0VPovNIT27WxL/QG7cp5Q+WnBUwAAAABJRU5ErkJggg==\") 0 0, pointer;\n}\n\n:host .ngfx__slider.is--joystick .ngfx__draggable .ngfx__handle {\n position: absolute;\n background-size: 44px 44px;\n width: 44px;\n height: 44px;\n}\n"]
},] },
];
NgFxSliderComponent.ctorParameters = () => [
{ type: DomSanitizer }
];
NgFxSliderComponent.propDecorators = {
control: [{ type: Input, args: ['control',] }],
draggable: [{ type: ViewChild, args: [NgFxDraggableDirective,] }],
transform: [{ type: HostBinding, args: ['style.transform',] }],
gridArea: [{ type: HostBinding, args: ['style.grid-area',] }],
placeSelf: [{ type: HostBinding, args: ['style.place-self',] }]
};
class NgFxSliderModule {
}
NgFxSliderModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
declarations: [NgFxDraggableDirective, NgFxSliderComponent],
exports: [NgFxDraggableDirective, NgFxSliderComponent]
},] },
];
class NgFxSurfaceComponent {
constructor(_controller, _sanitizer) {
this._controller = _controller;
this._sanitizer = _sanitizer;
this.controlMap = new Array();
}
ngOnChanges(changes) {
if (changes["controller"]) {
this.controlMap = this.mapToControls(changes["controller"].currentValue);
}
}
mapToControls(key) {
return Object.keys(this._controller.surfaces[key].controls).map((prop) => {
return this._controller.surfaces[key].controls[prop];
});
}
sanitize(style) {
return this._sanitizer.bypassSecurityTrustStyle(style);
}
ngOnInit() { }
}
NgFxSurfaceComponent.decorators = [
{ type: Component, args: [{
selector: 'ngfx-surface, [ngfx-surface]',
template: "<div class=\"control__group\" [style.display]=\"sanitize(display)\" [style.grid]=\"sanitize(grid)\" [style.grid-gap]=\"sanitize(gridGap)\"><ng-container *ngFor=\"let control of controlMap\"><ngfx-slider *ngIf=\"control.type === \'slider\'\" [control]=\"control\" class=\"control__pane\"></ngfx-slider><ngfx-button *ngIf=\"control.type === \'button\'\" [control]=\"control\" class=\"control__pane\"></ngfx-button></ng-container></div>",
styles: ["/**\n * Convert font-size from px to rem with px fallback\n *\n * @param $size - the value in pixel you want to convert\n *\n * e.g. p {@include fontSize(12px);}\n *\n */\n:host {\n display: block;\n overflow: hidden;\n}\n\n:host:after {\n content: \'\';\n display: table;\n clear: both;\n}\n\n.control__group {\n width: 100%;\n height: 100vh;\n overflow: hidden;\n display: grid;\n}\n\n.control__group:after {\n content: \'\';\n display: table;\n clear: both;\n}\n"]
},] },
];
NgFxSurfaceComponent.ctorParameters = () => [
{ type: NgFxController },
{ type: DomSanitizer }
];
NgFxSurfaceComponent.propDecorators = {
controller: [{ type: Input, args: ['controller',] }],
grid: [{ type: Input, args: ['grid',] }],
gridGap: [{ type: Input, args: ['gridGap',] }],
display: [{ type: Input, args: ['display',] }]
};
class NgFxSurfaceModule {
}
NgFxSurfaceModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, NgFxSliderModule, NgFxButtonModule],
declarations: [NgFxSurfaceComponent],
exports: [NgFxSurfaceComponent]
},] },
];
export { NgFxController, NgFxButtonModule, NgFxButtonComponent, NgFxSliderModule, NgFxDraggableDirective, NgFxSliderComponent, NgFxSurfaceModule, NgFxSurfaceComponent };