connect-platform-test
Version:
A platform to build backened code mostly in a visual manner.
663 lines (553 loc) • 179 kB
JavaScript
webpackJsonp(["main"],{
/***/ "./src/$$_lazy_route_resource lazy recursive":
/***/ (function(module, exports) {
function webpackEmptyAsyncContext(req) {
// Here Promise.resolve().then() is used instead of new Promise() to prevent
// uncatched exception popping up in devtools
return Promise.resolve().then(function() {
throw new Error("Cannot find module '" + req + "'.");
});
}
webpackEmptyAsyncContext.keys = function() { return []; };
webpackEmptyAsyncContext.resolve = webpackEmptyAsyncContext;
module.exports = webpackEmptyAsyncContext;
webpackEmptyAsyncContext.id = "./src/$$_lazy_route_resource lazy recursive";
/***/ }),
/***/ "./src/app/app.component.css":
/***/ (function(module, exports) {
module.exports = ""
/***/ }),
/***/ "./src/app/app.component.html":
/***/ (function(module, exports) {
module.exports = "<router-outlet></router-outlet>\n"
/***/ }),
/***/ "./src/app/app.component.ts":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return AppComponent; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__("./node_modules/@angular/core/esm5/core.js");
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var AppComponent = (function () {
function AppComponent() {
this.title = 'app';
}
AppComponent = __decorate([
Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["n" /* Component */])({
selector: 'app-root',
template: __webpack_require__("./src/app/app.component.html"),
styles: [__webpack_require__("./src/app/app.component.css")]
})
], AppComponent);
return AppComponent;
}());
/***/ }),
/***/ "./src/app/app.module.ts":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return AppModule; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_platform_browser__ = __webpack_require__("./node_modules/@angular/platform-browser/esm5/platform-browser.js");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_platform_browser_animations__ = __webpack_require__("./node_modules/@angular/platform-browser/esm5/animations.js");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__angular_core__ = __webpack_require__("./node_modules/@angular/core/esm5/core.js");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__angular_forms__ = __webpack_require__("./node_modules/@angular/forms/esm5/forms.js");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__angular_common__ = __webpack_require__("./node_modules/@angular/common/esm5/common.js");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__angular_common_http__ = __webpack_require__("./node_modules/@angular/common/esm5/http.js");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__angular_router__ = __webpack_require__("./node_modules/@angular/router/esm5/router.js");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__angular_flex_layout__ = __webpack_require__("./node_modules/@angular/flex-layout/esm5/flex-layout.es5.js");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8_ng2_ace_editor__ = __webpack_require__("./node_modules/ng2-ace-editor/index.js");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__app_component__ = __webpack_require__("./src/app/app.component.ts");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__components_editor_editor_component__ = __webpack_require__("./src/app/components/editor/editor.component.ts");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_11__components_editor_pane_pane_component__ = __webpack_require__("./src/app/components/editor/pane/pane.component.ts");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__components_editor_card_card_component__ = __webpack_require__("./src/app/components/editor/card/card.component.ts");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_13__services_editor_service__ = __webpack_require__("./src/app/services/editor.service.ts");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_14__services_registry_service__ = __webpack_require__("./src/app/services/registry.service.ts");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_15__components_editor_bar_bar_component__ = __webpack_require__("./src/app/components/editor/bar/bar.component.ts");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_16__services_backend_service__ = __webpack_require__("./src/app/services/backend.service.ts");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_17__components_editor_pin_pin_component__ = __webpack_require__("./src/app/components/editor/pin/pin.component.ts");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_18__components_editor_link_link_component__ = __webpack_require__("./src/app/components/editor/link/link.component.ts");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_19__services_editor_model_service__ = __webpack_require__("./src/app/services/editor-model.service.ts");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_20__components_editor_code_code_component__ = __webpack_require__("./src/app/components/editor/code/code.component.ts");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_21__components_editor_general_general_component__ = __webpack_require__("./src/app/components/editor/general/general.component.ts");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_22__components_editor_adder_adder_component__ = __webpack_require__("./src/app/components/editor/adder/adder.component.ts");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_23__components_home_home_component__ = __webpack_require__("./src/app/components/home/home.component.ts");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_24__components_home_nodes_nodes_component__ = __webpack_require__("./src/app/components/home/nodes/nodes.component.ts");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_25__components_shared_overlay_overlay_component__ = __webpack_require__("./src/app/components/shared/overlay/overlay.component.ts");
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var routes = [
{ path: '', component: __WEBPACK_IMPORTED_MODULE_23__components_home_home_component__["a" /* HomeComponent */] },
{ path: 'editor', component: __WEBPACK_IMPORTED_MODULE_10__components_editor_editor_component__["a" /* EditorComponent */] },
];
var AppModule = (function () {
function AppModule() {
}
AppModule = __decorate([
Object(__WEBPACK_IMPORTED_MODULE_2__angular_core__["J" /* NgModule */])({
declarations: [
__WEBPACK_IMPORTED_MODULE_9__app_component__["a" /* AppComponent */],
__WEBPACK_IMPORTED_MODULE_10__components_editor_editor_component__["a" /* EditorComponent */],
__WEBPACK_IMPORTED_MODULE_11__components_editor_pane_pane_component__["a" /* PaneComponent */],
__WEBPACK_IMPORTED_MODULE_12__components_editor_card_card_component__["a" /* CardComponent */],
__WEBPACK_IMPORTED_MODULE_15__components_editor_bar_bar_component__["a" /* BarComponent */],
__WEBPACK_IMPORTED_MODULE_17__components_editor_pin_pin_component__["a" /* PinComponent */],
__WEBPACK_IMPORTED_MODULE_18__components_editor_link_link_component__["a" /* LinkComponent */],
__WEBPACK_IMPORTED_MODULE_20__components_editor_code_code_component__["a" /* CodeComponent */],
__WEBPACK_IMPORTED_MODULE_21__components_editor_general_general_component__["a" /* GeneralComponent */],
__WEBPACK_IMPORTED_MODULE_22__components_editor_adder_adder_component__["a" /* AdderComponent */],
__WEBPACK_IMPORTED_MODULE_23__components_home_home_component__["a" /* HomeComponent */],
__WEBPACK_IMPORTED_MODULE_24__components_home_nodes_nodes_component__["a" /* NodesComponent */],
__WEBPACK_IMPORTED_MODULE_25__components_shared_overlay_overlay_component__["a" /* OverlayComponent */],
],
imports: [
__WEBPACK_IMPORTED_MODULE_6__angular_router__["c" /* RouterModule */].forRoot(routes, { enableTracing: false }),
__WEBPACK_IMPORTED_MODULE_0__angular_platform_browser__["a" /* BrowserModule */],
__WEBPACK_IMPORTED_MODULE_1__angular_platform_browser_animations__["a" /* BrowserAnimationsModule */],
__WEBPACK_IMPORTED_MODULE_7__angular_flex_layout__["a" /* FlexLayoutModule */],
__WEBPACK_IMPORTED_MODULE_8_ng2_ace_editor__["a" /* AceEditorModule */],
__WEBPACK_IMPORTED_MODULE_3__angular_forms__["a" /* FormsModule */],
__WEBPACK_IMPORTED_MODULE_5__angular_common_http__["b" /* HttpClientModule */],
],
schemas: [__WEBPACK_IMPORTED_MODULE_2__angular_core__["I" /* NO_ERRORS_SCHEMA */]],
bootstrap: [__WEBPACK_IMPORTED_MODULE_9__app_component__["a" /* AppComponent */]],
providers: [
__WEBPACK_IMPORTED_MODULE_4__angular_common__["f" /* Location */], { provide: __WEBPACK_IMPORTED_MODULE_4__angular_common__["g" /* LocationStrategy */], useClass: __WEBPACK_IMPORTED_MODULE_4__angular_common__["j" /* PathLocationStrategy */] },
__WEBPACK_IMPORTED_MODULE_16__services_backend_service__["a" /* BackendService */], __WEBPACK_IMPORTED_MODULE_14__services_registry_service__["a" /* RegistryService */], __WEBPACK_IMPORTED_MODULE_19__services_editor_model_service__["a" /* EditorModelService */], __WEBPACK_IMPORTED_MODULE_13__services_editor_service__["b" /* EditorService */]
]
})
], AppModule);
return AppModule;
}());
/***/ }),
/***/ "./src/app/components/editor/adder/adder.component.css":
/***/ (function(module, exports) {
module.exports = ".holder {\n position: relative;\n width: 24px;\n height: 24px;\n\n display: -webkit-box;\n\n display: -ms-flexbox;\n\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n\n padding: 0;\n font-size: 18px;\n\n cursor: pointer;\n opacity: .25;\n border: 1px solid #FFFFFF;\n border-radius: 32px;\n -webkit-transition: opacity .3s, width .3s, margin-top .3s;\n transition: opacity .3s, width .3s, margin-top .3s;\n}\n\n.holder span {\n opacity: 1;\n -webkit-transition: opacity .1s;\n transition: opacity .1s;\n}\n\n.holder editor-pin {\n position: absolute;\n right: 6px;\n top: 50%;\n margin-top: -7px;\n opacity: 0;\n -webkit-transition: opacity .3s;\n transition: opacity .3s;\n}\n\n.holder:hover {\n opacity: 1;\n}\n\n/*** active state ***/\n\n.holder.active {\n width: 100%;\n}\n\n.holder.active span {\n opacity: 0;\n}\n\n.holder.active editor-pin {\n opacity: 1;\n}\n\n/*** reset state ***/\n\n.holder.reset {\n opacity: 0;\n margin-top: -34px;\n -webkit-transition: none;\n transition: none;\n}\n\n.holder.reset span {\n -webkit-transition: none;\n transition: none;\n}\n\n.holder.reset editor-pin {\n -webkit-transition: none;\n transition: none;\n}\n\n/*** switch style ***/\n\n.holder.switch {\n border-color: #FFC400;\n background: #212121;\n}\n\n.holder.switch span {\n color: #FFC400;\n}\n\n/*** expr style ***/\n\n.holder.expr {\n border: none;\n margin-top: 12px;\n width: 14px;\n height: 14px;\n\n font-size: 12px;\n margin-bottom: 8px;\n}\n\n.holder.expr editor-pin {\n opacity: 1;\n right: auto;\n left: 0px;\n}\n\n/*** output & control style ***/\n\n.holder.control {\n border-color: #FFC400;\n color: #FFC400;\n}\n\n.holder.output editor-pin,\n.holder.control editor-pin {\n right: auto;\n left: 6px;\n}\n"
/***/ }),
/***/ "./src/app/components/editor/adder/adder.component.html":
/***/ (function(module, exports) {
module.exports = "<div [class]=\"'holder ' + style\"\n [ngClass]=\"{'active': state==states.activate, 'reset': state==states.reset}\"\n (click)=\"activate()\">\n <span>+</span>\n <editor-pin [controlStyle]=\"controlStyle\"></editor-pin>\n</div>\n"
/***/ }),
/***/ "./src/app/components/editor/adder/adder.component.ts":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return AdderComponent; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__("./node_modules/@angular/core/esm5/core.js");
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var AdderStates;
(function (AdderStates) {
AdderStates[AdderStates["initial"] = 0] = "initial";
AdderStates[AdderStates["activate"] = 1] = "activate";
AdderStates[AdderStates["reset"] = 2] = "reset";
})(AdderStates || (AdderStates = {}));
var AdderComponent = (function () {
function AdderComponent() {
this.states = AdderStates;
this.state = AdderStates.initial;
this.add = new __WEBPACK_IMPORTED_MODULE_0__angular_core__["v" /* EventEmitter */]();
}
AdderComponent.prototype.ngOnInit = function () {
};
AdderComponent.prototype.activate = function () {
var _this = this;
this.state = AdderStates.activate;
setTimeout(function () { return _this.reset(); }, 300);
};
AdderComponent.prototype.reset = function () {
var _this = this;
this.state = AdderStates.reset;
this.add.emit();
setTimeout(function () { return _this.state = AdderStates.initial; }, 300);
};
Object.defineProperty(AdderComponent.prototype, "controlStyle", {
get: function () {
return this.style == 'switch' || this.style == 'control';
},
enumerable: true,
configurable: true
});
__decorate([
Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["D" /* Input */])(),
__metadata("design:type", Object)
], AdderComponent.prototype, "style", void 0);
__decorate([
Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Q" /* Output */])(),
__metadata("design:type", __WEBPACK_IMPORTED_MODULE_0__angular_core__["v" /* EventEmitter */])
], AdderComponent.prototype, "add", void 0);
AdderComponent = __decorate([
Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["n" /* Component */])({
selector: 'editor-adder',
template: __webpack_require__("./src/app/components/editor/adder/adder.component.html"),
styles: [__webpack_require__("./src/app/components/editor/adder/adder.component.css")]
}),
__metadata("design:paramtypes", [])
], AdderComponent);
return AdderComponent;
}());
/***/ }),
/***/ "./src/app/components/editor/bar/bar.component.css":
/***/ (function(module, exports) {
module.exports = ".holder {\n background: #424242;\n position: absolute;\n top: 0;\n height: 100vh;\n width: 156px;\n z-index: 1000;\n -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);\n box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);\n}\n\n.holder.left {\n left: 0;\n}\n\n.holder.right {\n right: 0;\n}\n\n.inner {\n position: absolute;\n top: 16px;\n bottom: 16px;\n left: 16px;\n right: 16px;\n}\n"
/***/ }),
/***/ "./src/app/components/editor/bar/bar.component.html":
/***/ (function(module, exports) {
module.exports = "<div class=\"holder\" [ngClass]=\"{'right': position == 'right', 'left': position == 'left'}\">\n <div class=\"inner\">\n <ng-content></ng-content>\n </div>\n</div>\n"
/***/ }),
/***/ "./src/app/components/editor/bar/bar.component.ts":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return BarComponent; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__("./node_modules/@angular/core/esm5/core.js");
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var BarComponent = (function () {
function BarComponent() {
this.position = 'left';
}
BarComponent.prototype.ngOnInit = function () {
};
__decorate([
Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["D" /* Input */])(),
__metadata("design:type", String)
], BarComponent.prototype, "position", void 0);
BarComponent = __decorate([
Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["n" /* Component */])({
selector: 'editor-bar',
template: __webpack_require__("./src/app/components/editor/bar/bar.component.html"),
styles: [__webpack_require__("./src/app/components/editor/bar/bar.component.css")]
}),
__metadata("design:paramtypes", [])
], BarComponent);
return BarComponent;
}());
/***/ }),
/***/ "./src/app/components/editor/card/card.component.css":
/***/ (function(module, exports) {
module.exports = ".holder {\n position: absolute;\n width: 156px;\n height: 156px;\n background: #424242;\n cursor: pointer;\n -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5);\n box-shadow: 0 2px 6px rgba(0,0,0,0.5);\n -webkit-transition: height .1s linear, -webkit-box-shadow .3s, -webkit-transform .3s;\n transition: height .1s linear, -webkit-box-shadow .3s, -webkit-transform .3s;\n transition: box-shadow .3s, transform .3s, height .1s linear;\n transition: box-shadow .3s, transform .3s, height .1s linear, -webkit-box-shadow .3s, -webkit-transform .3s;\n}\n\n.holder.picked {\n z-index: 999;\n}\n\n.holder.initial {\n -webkit-transition: none;\n transition: none;\n}\n\n.holder:hover:not(.selected) {\n -webkit-box-shadow: 0 6px 8px rgba(0,0,0,0.5);\n box-shadow: 0 6px 8px rgba(0,0,0,0.5);\n}\n\n.holder.selected:not(.value) {\n -webkit-box-shadow: 0 0px 0px 2px #40c4ff, 0 0px 32px #0064b7;\n box-shadow: 0 0px 0px 2px #40c4ff, 0 0px 32px #0064b7;\n}\n\n.holder .inner {\n padding: 12px;\n}\n\n.input, .output {\n margin-bottom: 8px;\n font-size: 13px;\n}\n\n.input editor-pin {\n margin-right: 6px;\n}\n\n.input input, .path input {\n display: inline;\n background: none;\n border: none;\n outline: none;\n max-width: 96px;\n font-family: inherit;\n font-size: 13px;\n color: white;\n}\n\n.target {\n text-align: center;\n line-height: 12px;\n margin-bottom: 8px;\n}\n\n.case {\n margin-bottom: 8px;\n}\n\n.output {\n text-align: right;\n}\n\n.output.control {\n color: #FFC400;\n}\n\n.output editor-pin {\n margin-left: 6px;\n}\n\n.path {\n text-align: center;\n}\n\n.path input {\n text-align: center;\n color: #00BFA5;\n margin-bottom: 8px;\n min-width: 100%;\n}\n\n.input.placeholder {\n padding: 2px 0;\n}\n\n.add-more {\n width: 12px;\n height: 12px;\n text-align: center;\n border: 1px solid white;\n border-radius: 24px;\n font-size: 10px;\n opacity: .5;\n cursor: pointer;\n -webkit-transition: all .2s ease-in-out;\n transition: all .2s ease-in-out;\n}\n\n.add-more:hover {\n opacity: 1;\n}\n\n.case .add-more {\n width: 22px;\n height: 22px;\n font-size: 16px;\n color: #FFC400;\n border-color: #FFC400;\n background: #212121;\n}\n\n.path-suggest {\n position: absolute;\n left: 16px;\n right: 16px;\n text-align: center;\n background: #424242;\n -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5);\n box-shadow: 0 2px 6px rgba(0,0,0,0.5);\n font-size: 13px;\n font-weight: light;\n}\n\n.path-suggest .item {\n padding: 8px 0;\n cursor: pointer;\n color: #9e9e9e;\n -webkit-transition: color .3s;\n transition: color .3s;\n}\n\n.path-suggest .item:hover {\n color: #00BFA5;\n}\n"
/***/ }),
/***/ "./src/app/components/editor/card/card.component.html":
/***/ (function(module, exports) {
module.exports = "<div class=\"holder\"\n [ngClass]=\"{'initial': _newBorn, 'picked': picked, 'selected': selected,\n 'expr': type==types.expr, 'value': type==types.value, 'switch': type==types.switch, 'call':type==types.call}\"\n [ngStyle]=\"{'left.px': node.box.left, 'top.px': node.box.top, 'width.px': node.box.width, 'height.px': node.box.height}\"\n (mousedown)=\"pick($event)\"\n (mouseup)=\"unpick()\">\n\n <ng-container *ngIf=\"type == types.expr\">\n <div class=\"inner\" #inner>\n <div #inputs>\n <ng-container *ngFor=\"let in of node.in.items\">\n <div class=\"input\">\n <editor-pin [pin]=\"in.pin\"></editor-pin>\n <input type=\"text\"\n [value]=\"in.label\"\n (focus)=\"inputFocus($event)\"\n (blur)=\"sanitizeInput(in)\"\n (keyup)=\"inputChange(in, $event)\"\n (change)=\"inputChange(in, $event)\">\n </div>\n </ng-container>\n <editor-adder style=\"expr\" (add)=\"newInput()\"></editor-adder>\n </div>\n <div class=\"expr-code\">\n <editor-code [(code)]=\"node.code\" [pin]=\"node.result\"></editor-code>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"type == types.value\">\n <div class=\"inner\" #inner>\n <editor-code\n [selected]=\"selected\"\n [(code)]=\"node.code\"\n [pin]=\"node.result\"></editor-code>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"type == types.switch\">\n <div class=\"inner\" #inner>\n <div class=\"target\">\n <editor-pin [pin]=\"node.target\"></editor-pin>\n </div>\n <div #cases class=\"cases\">\n <ng-container *ngFor=\"let control of node.control.items\">\n <div class=\"case\" (focusout)=\"sanitizeControl(control)\">\n <editor-code [shadow]=\"false\" [(code)]=\"control.label\" [pin]=\"control.pin\"></editor-code>\n </div>\n </ng-container>\n <editor-adder style=\"switch\" (add)=\"newCase()\"></editor-adder>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"type == types.call\">\n <div class=\"inner\" #inner>\n <div class=\"path\">\n <input type=\"text\"\n (focus)=\"_suggesting=true\"\n (focusout)=\"_suggesting=false\"\n [(ngModel)]=\"node.path\"/>\n </div>\n <div class=\"path-suggest\" *ngIf=\"suggestPaths\">\n <div class=\"item\" *ngFor=\"let path of suggestPaths\" (mousedown)=\"node.path=path\">\n {{ path }}\n </div>\n </div>\n\n <div #inputs>\n <ng-container *ngFor=\"let in of node.in.items\">\n <div class=\"input\">\n <editor-pin [pin]=\"in.pin\"></editor-pin>\n <span type=\"text\">{{in.label}}</span>\n </div>\n </ng-container>\n </div>\n\n <div #outputs>\n <ng-container *ngFor=\"let out of node.out.items\">\n <div class=\"output\">\n <span type=\"text\">{{out.label}}</span>\n <editor-pin [pin]=\"out.pin\"></editor-pin>\n </div>\n </ng-container>\n </div>\n\n <div #controls>\n <ng-container *ngFor=\"let control of node.control.items\">\n <div class=\"output control\">\n <span type=\"text\">{{control.label}}</span>\n <editor-pin [pin]=\"control.pin\"></editor-pin>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container>\n</div>\n"
/***/ }),
/***/ "./src/app/components/editor/card/card.component.ts":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CardComponent; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__("./node_modules/@angular/core/esm5/core.js");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__services_editor_service__ = __webpack_require__("./src/app/services/editor.service.ts");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__services_editor_model_service__ = __webpack_require__("./src/app/services/editor-model.service.ts");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__services_registry_service__ = __webpack_require__("./src/app/services/registry.service.ts");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__models_node_model__ = __webpack_require__("./src/app/models/node.model.ts");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__models_value_model__ = __webpack_require__("./src/app/models/value.model.ts");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__models_expr_model__ = __webpack_require__("./src/app/models/expr.model.ts");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__models_switch_model__ = __webpack_require__("./src/app/models/switch.model.ts");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__models_box_model__ = __webpack_require__("./src/app/models/box.model.ts");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__models_call_model__ = __webpack_require__("./src/app/models/call.model.ts");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__util_decompose_code__ = __webpack_require__("./src/app/util/decompose-code.ts");
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var CardType;
(function (CardType) {
CardType[CardType["value"] = 0] = "value";
CardType[CardType["expr"] = 1] = "expr";
CardType[CardType["switch"] = 2] = "switch";
CardType[CardType["call"] = 3] = "call";
})(CardType || (CardType = {}));
var CardComponent = (function () {
function CardComponent(editor, model, registry) {
this.editor = editor;
this.model = model;
this.registry = registry;
this.types = CardType;
this._newBorn = true;
this._suggesting = null;
}
CardComponent.prototype.ngOnInit = function () {
var _this = this;
this.node.component = this;
this._interval = setInterval(function () { return _this._setHeight(); }, 200);
setTimeout(function () { _this._newBorn = false; }, 500);
if (this.node instanceof __WEBPACK_IMPORTED_MODULE_9__models_call_model__["a" /* Call */]) {
var call_1 = this.node;
if (this.registry.isRegistered(call_1.path) && !call_1.signature) {
call_1.signature = this.registry.signature(call_1.path);
}
call_1.subscribe(__WEBPACK_IMPORTED_MODULE_9__models_call_model__["b" /* CallEvents */].pathChange, function (path) {
_this.model.removeNodeLinks(call_1);
if (_this.registry.isRegistered(path)) {
call_1.signature = _this.registry.signature(path);
}
else {
call_1.signature = {
path: path,
inputs: [],
outputs: [],
controlOutputs: [],
};
}
});
}
};
CardComponent.prototype.ngOnDestroy = function () {
clearInterval(this._interval);
};
CardComponent.prototype._setHeight = function () {
if (this.type == CardType.value)
this.node.box.height = 0;
else if (this.type == CardType.expr)
this.node.box.height = this.inner.nativeElement.offsetHeight - 24;
else
this.node.box.height = this.inner.nativeElement.offsetHeight;
};
CardComponent.prototype.pick = function (event) {
event.node = this.node;
this.editor.pickEvent(event);
};
CardComponent.prototype.unpick = function () {
if (this.picked)
this.editor.unpickEvent();
};
Object.defineProperty(CardComponent.prototype, "picked", {
get: function () {
return this.editor.isPicked(this.node);
},
enumerable: true,
configurable: true
});
Object.defineProperty(CardComponent.prototype, "selected", {
get: function () {
return this.editor.isSelected(this.node);
},
enumerable: true,
configurable: true
});
Object.defineProperty(CardComponent.prototype, "type", {
get: function () {
if (this.node instanceof __WEBPACK_IMPORTED_MODULE_5__models_value_model__["a" /* Value */])
return CardType.value;
if (this.node instanceof __WEBPACK_IMPORTED_MODULE_6__models_expr_model__["a" /* Expr */])
return CardType.expr;
if (this.node instanceof __WEBPACK_IMPORTED_MODULE_7__models_switch_model__["a" /* Switch */])
return CardType.switch;
if (this.node instanceof __WEBPACK_IMPORTED_MODULE_9__models_call_model__["a" /* Call */])
return CardType.call;
},
enumerable: true,
configurable: true
});
Object.defineProperty(CardComponent.prototype, "box", {
get: function () {
if (this.inner)
return __WEBPACK_IMPORTED_MODULE_8__models_box_model__["a" /* Box */].fromElement(this.inner.nativeElement);
},
enumerable: true,
configurable: true
});
CardComponent.prototype.inputFocus = function (event) {
if (event.target.value.length > 0) {
this.focusedInputVal = event.target.value;
if (this.type == CardType.expr) {
var expr = this.node;
this.decomposedFIVal = Object(__WEBPACK_IMPORTED_MODULE_10__util_decompose_code__["a" /* decomposeCode */])(expr.code, this.focusedInputVal);
}
}
else
this.decomposedFIVal = null;
};
CardComponent.prototype.inputChange = function (input, event) {
var newVal = event.target.value;
input.label = newVal;
if (this.decomposedFIVal) {
if (this.type == CardType.expr) {
var expr = this.node;
expr.code = Object(__WEBPACK_IMPORTED_MODULE_10__util_decompose_code__["b" /* recomposeCode */])(this.decomposedFIVal, newVal);
}
this.focusedInputVal = newVal;
}
};
Object.defineProperty(CardComponent.prototype, "suggestPaths", {
get: function () {
var call = this.node;
if (this._suggesting)
return this.registry.allPaths
.filter(function (path) { return path.startsWith(call.path); })
.slice(0, 8);
else
return null;
},
enumerable: true,
configurable: true
});
CardComponent.prototype.newCase = function () {
if (this.type == CardType.switch) {
this.node.cases.add('');
}
};
CardComponent.prototype.newInput = function () {
if (this.type == CardType.expr) {
this.node.in.add('');
}
};
CardComponent.prototype.sanitizeInput = function (input) {
if (input.cleared) {
this.model.removePinLinks(input.pin);
this.node.in.remove(input);
}
};
CardComponent.prototype.sanitizeControl = function (control) {
if (control.cleared) {
this.model.removePinLinks(control.pin);
this.node.control.remove(control);
}
};
CardComponent.prototype.keypress = function (event) {
if (event.keyCode == 27) {
if (this.editor.isSelected(this.node))
this.editor.deselect();
if (this._suggesting)
this._suggesting = false;
}
};
__decorate([
Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["D" /* Input */])(),
__metadata("design:type", __WEBPACK_IMPORTED_MODULE_4__models_node_model__["a" /* Node */])
], CardComponent.prototype, "node", void 0);
__decorate([
Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["_11" /* ViewChild */])('inner'),
__metadata("design:type", __WEBPACK_IMPORTED_MODULE_0__angular_core__["t" /* ElementRef */])
], CardComponent.prototype, "inner", void 0);
__decorate([
Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["_11" /* ViewChild */])('inputs'),
__metadata("design:type", __WEBPACK_IMPORTED_MODULE_0__angular_core__["t" /* ElementRef */])
], CardComponent.prototype, "inputs", void 0);
__decorate([
Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["y" /* HostListener */])('document:keyup', ['$event']),
__metadata("design:type", Function),
__metadata("design:paramtypes", [KeyboardEvent]),
__metadata("design:returntype", void 0)
], CardComponent.prototype, "keypress", null);
CardComponent = __decorate([
Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["n" /* Component */])({
selector: 'editor-card',
template: __webpack_require__("./src/app/components/editor/card/card.component.html"),
styles: [__webpack_require__("./src/app/components/editor/card/card.component.css")]
}),
__metadata("design:paramtypes", [__WEBPACK_IMPORTED_MODULE_1__services_editor_service__["b" /* EditorService */],
__WEBPACK_IMPORTED_MODULE_2__services_editor_model_service__["a" /* EditorModelService */],
__WEBPACK_IMPORTED_MODULE_3__services_registry_service__["a" /* RegistryService */]])
], CardComponent);
return CardComponent;
}());
/***/ }),
/***/ "./src/app/components/editor/code/code.component.css":
/***/ (function(module, exports) {
module.exports = ".holder {\n background: #212121;\n border: 1px solid white;\n padding: 4px;\n border-radius: 13px;\n margin: 0;\n position: relative;\n}\n\n.holder.shadow {\n -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5);\n box-shadow: 0 2px 6px rgba(0,0,0,0.5);\n -webkit-transition: -webkit-box-shadow .3s;\n transition: -webkit-box-shadow .3s;\n transition: box-shadow .3s;\n transition: box-shadow .3s, -webkit-box-shadow .3s;\n}\n\n.holder.shadow:hover:not(.selected) {\n -webkit-box-shadow: 0 6px 18px rgba(0,0,0,0.5);\n box-shadow: 0 6px 18px rgba(0,0,0,0.5);\n}\n\n.holder.selected {\n -webkit-box-shadow: 0 0px 0px 1px #40c4ff, 0 0px 32px #0064b7;\n box-shadow: 0 0px 0px 1px #40c4ff, 0 0px 32px #0064b7;\n}\n\n.holder.control {\n border-color: #FFC400;\n}\n\n.ace-holder {\n margin-right: 20px;\n}\n\nace-editor {\n}\n\neditor-pin {\n position: absolute;\n right: 6px;\n top: 50%;\n margin-top: -7px;\n}\n"
/***/ }),
/***/ "./src/app/components/editor/code/code.component.html":
/***/ (function(module, exports) {
module.exports = "<div class=\"holder\" [ngClass]=\"{'control': pin.type == pin.types.control, 'shadow': shadow, 'selected': selected}\">\n <div class=\"ace-holder\">\n <ace-editor mode=\"javascript\"\n [(text)]=\"_code\"\n [options]=\"options\"\n style='min-height:16px;'></ace-editor>\n </div>\n <editor-pin [pin]=\"pin\"></editor-pin>\n</div>\n"
/***/ }),
/***/ "./src/app/components/editor/code/code.component.ts":
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CodeComponent; });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__("./node_modules/@angular/core/esm5/core.js");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__models_pin_model__ = __webpack_require__("./src/app/models/pin.model.ts");
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var CodeComponent = (function () {
function CodeComponent() {
this.selected = false;
this.code = '';
this.shadow = true;
this.codeChange = new __WEBPACK_IMPORTED_MODULE_0__angular_core__["v" /* EventEmitter */]();
this.options = {
showGutter: false,
maxLines: Infinity,
tabSize: 2,
};
}
CodeComponent.prototype.ngOnInit = function () {
};
Object.defineProperty(CodeComponent.prototype, "_code", {
get: function () { return this.code; },
set: function (code) {
this.code = code;
this.codeChange.emit(code);
},
enumerable: true,
configurable: true
});
__decorate([
Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["D" /* Input */])(),
__metadata("design:type", Boolean)
], CodeComponent.prototype, "selected", void 0);
__decorate([
Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["D" /* Input */])(),
__metadata("design:type", String)
], CodeComponent.prototype, "code", void 0);
__decorate([
Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["D" /* Input */])(),
__metadata("design:type", Boolean)
], CodeComponent.prototype, "shadow", void 0);
__decorate([
Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["D" /* Input */])(),
__metadata("design:type", __WEBPACK_IMPORTED_MODULE_1__models_pin_model__["a" /* Pin */])
], CodeComponent.prototype, "pin", void 0);
__decorate([
Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Q" /* Output */])(),
__metadata("design:type", __WEBPACK_IMPORTED_MODULE_0__angular_core__["v" /* EventEmitter */])
], CodeComponent.prototype, "codeChange", void 0);
CodeComponent = __decorate([
Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["n" /* Component */])({
selector: 'editor-code',
template: __webpack_require__("./src/app/components/editor/code/code.component.html"),
styles: [__webpack_require__("./src/app/components/editor/code/code.component.css")]
}),
__metadata("design:paramtypes", [])
], CodeComponent);
return CodeComponent;
}());
/***/ }),
/***/ "./src/app/components/editor/editor.component.css":
/***/ (function(module, exports) {
module.exports = ".container {\n background: #212121;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\nimg {\n position: absolute;\n top: 50vh;\n left: 50vw;\n margin-left: -512px;\n margin-top: -412px;\n}\n\nimg.loading {\n -webkit-animation:spin 2s ease-in-out infinite;\n animation:spin 2s ease-in-out infinite;\n}\n\nimg.loading.reverse {\n -webkit-animation:spin-reverse 2s ease-in-out infinite;\n animation:spin-reverse 2s ease-in-out infinite;\n}\n\n.pin-list {\n margin-top: 32px;\n width: 120px;\n}\n\n.pin-list .title {\n font-weight: 600;\n font-size: 14px;\n color: #757575;\n margin-bottom: 8px;\n}\n\n.pin-list .item {\n border: 1px solid white;\n height: 16px;\n padding: 4px 8px;\n padding-top: 2px;\n padding-bottom: 6px;\n border-radius: 32px;\n line-height: 14px;\n margin: 8px 0;\n position: relative;\n}\n\n.pin-list .item editor-pin {\n position: absolute;\n right: 6px;\n top: 50%;\n margin-top: -7px;\n}\n\n.pin-list .item input {\n display: inline;\n background: none;\n border: none;\n outline: none;\n max-width: 102px;\n font-family: inherit;\n font-size: 13px;\n color: white;\n}\n\n.pin-list.outputs {\n text-align: right;\n direction: rtl;\n}\n\n.pin-list .item.output editor-pin {\n right: auto;\n left: 6px;\n}\n\n.pin-list .item.control {\n border-color: #FFC400;\n}\n\n.pin-list .item.control input {\n color: #FFC400;\n}\n\n.out-pins {\n position: absolute;\n bottom: 0px;\n}\n\n@-webkit-keyframes spin { 100% {-webkit-transform:rotate(720deg);transform:rotate(720deg); } }\n\n@keyframes spin { 100% {-webkit-transform:rotate(720deg);transform:rotate(720deg); } }\n\n@-webkit-keyframes spin-reverse { 100% {-webkit-transform:rotate(-720deg);transform:rotate(-720deg); } }\n\n@keyframes spin-reverse { 100% {-webkit-transform:rotate(-720deg);transform:rotate(-720deg); } }\n\n.main-action-holder {\n background: #424242;\n z-index: 1000;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 112px;\n}\n\n.main-action {\n width: 96px;\n height: 96px;\n\n display: -webkit-box;\n\n display: -ms-flexbox;\n\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n\n margin: 0 auto;\n border: 4px solid white;\n border-radius: 96px;\n font-size: 72px;\n cursor: pointer;\n opacity: .25;\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n\n -webkit-transition: all .3s;\n\n transition: all .3s;\n}\n\n.main-action:hover {\n opacity: 1;\n}\n\n.main-action.delete {\n -webkit-transform: rotate(135deg);\n transform: rotate(135deg);\n opacity: 1;\n}\n\n.action-list {\n margin-top: 24px;\n text-align: center;\n}\n\n.action-list.main {\n -webkit-transform: translateY(80px);\n transform: translateY(80px);\n -webkit-transition: -webkit-transform .3s;\n transition: -webkit-transform .3s;\n transition: transform .3s;\n transition: transform .3s, -webkit-transform .3s;\n}\n\n.action-list.main.wd {\n -webkit-transform: translateY(0px);\n transform: translateY(0px);\n}\n\n.add-nodes {\n z-index: 10;\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n opacity: 0;\n\n -webkit-transition: opacity .3s, -webkit-transform .3s;\n\n transition: opacity .3s, -webkit-transform .3s;\n\n transition: transform .3s, opacity .3s;\n\n transition: transform .3s, opacity .3s, -webkit-transform .3s;\n}\n\n.add-nodes.active {\n -webkit-transform: translateY(104px);\n transform: translateY(104px);\n opacity: 1;\n}\n\neditor-bar .button {\n padding: 2px;\n padding-bottom: 3px;\n border: 1px solid white;\n border-radius: 32px;\n font-size: 14px;\n margin: 8px 0;\n cursor: pointer;\n opacity: .5;\n\n -webkit-transition: opacity .3s;\n\n transition: opacity .3s;\n}\n\neditor-bar .button:hover {\n opacity: 1;\n}\n\neditor-bar .action-list.bottom {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n}\n\n.overlay-path {\n color: #00BFA5;\n}\n"
/***/ }),
/***/ "./src/app/components/editor/editor.component.html":
/***/ (function(module, exports) {
module.exports = "<div class=\"container\" [@container]=\"\">\n <img src=\"assets/logo-backdrop.svg\" [ngClass]=\"{'loading': communicating, 'reverse' : reverting}\"/>\n <editor-bar position=\"left\">\n <editor-general></editor-general>\n\n <div class=\"inputs pin-list\">\n <div class=\"title\">inputs</div>\n <ng-container *ngFor=\"let in of model.in.items\">\n <div class=\"input item\">\n <input type=\"text\"\n (blur)=\"sanitizeInput(in)\"\n [(ngModel)]=\"in.label\"/>\n <editor-pin [pin]=\"in.pin\"></editor-pin>\n </div>\n </ng-container>\n <editor-adder (add)=\"newInput()\"></editor-adder>\n </div>\n\n <div class=\"configs pin-list\">\n <div class=\"title\">configs</div>\n <ng-container *ngFor=\"let conf of model.config.items\">\n <div class=\"config item\">\n <input type=\"text\"\n (blur)=\"sanitizeConfig(conf)\"\n [(ngModel)]=\"conf.label\"/>\n <editor-pin [pin]=\"conf.pin\"></editor-pin>\n </div>\n </ng-container>\n <editor-adder (add)=\"newConfig()\"></editor-adder>\n </div>\n\n <div class=\"action-list bottom main\" [ngClass]=\"{'wd' : model.id}\">\n <div class=\"button\" (click)=\"save()\">Save</div>\n <div class=\"button\" routerLink=\"/\">Home</div>\n <br/><br/>\n <div class=\"button\" (click)=\"confirmDeletion()\">Delete</div>\n </div>\n </editor-bar>\n\n <editor-pane></editor-pane>\n\n <ng-container *ngFor=\"let link of model.links\">\n <editor-link [link]=\"link\"></editor-link>\n </ng-container>\n\n <editor-bar position=\"right\">\n <div class=\"main-action-holder\">\n <div\n [ngClass]=\"{'delete': state == states.adding || state == states.selected }\"\n (click)=\"mainAction()\"\n class=\"main-action\">+</div>\n </div>\n\n <div class=\"action-list add-nodes\" [ngClass]=\"{'active': state == states.adding}\">\n <div class=\"button value\" (click)=\"newValue()\">value</div>\n <div class=\"button expr\" (click)=\"newExpr()\">expression</div>\n <div class=\"button switch\" (click)=\"newSwitch()\">switch</div>\n <div class=\"button call\" (click)=\"newCall()\">call</div>\n </div>\n\n <div class=\"out-pins\">\n\n <div class=\"outputs pin-list\">\n <div class=\"title\">outputs</div>\n <ng-container *ngFor=\"let out of model.out.items\">\n <div class=\"output item\">\n <editor-pin [pin]=\"out.pin\"></editor-pin>\n <input type=\"text\"\n (blur)=\"sanitizeOutput(out)\"\n [(ngModel)]=\"out.label\"/>\n </div>\n </ng-container>\n <editor-adder (add)=\"newOutput()\" style=\"output\"></editor-adder>\n </div>\n\n <div class=\"controls outputs pin-list\">\n <div class=\"title\">control outputs</div>\n <ng-container *ngFor=\"let ctrl of model.control.items\">\n <div class=\"control output item\">\n <editor-pin [pin]=\"ctrl.pin\" [controlStyle]=\"true\"></editor-pin>\n <input type=\"text\"\n (blur)=\"sanitizeControl(ctrl)\"\n [(ngModel)]=\"ctrl.label\"/>\n </div>\n </ng-container>\n <editor-adder (add)=\"newControl()\" style=\"control\"></editor-adder>\n </div>\n\n </div>\n </editor-bar>\n</div>\n\n\n<overlay #deleteOverlay>\n <overlay-title>Confirm Deletion</overlay-title>\n <overlay-content>\n Are you sure you want to delete node\n <span class=\"overlay-path\">{{model.path}}</span>?\n <br/>\n This process cannot be undone. Additionally, nodes\n that depend on it