cytoscape-angular
Version:
Angular 12+ components for cytoscape charting.
2,132 lines • 132 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('primeng/progressspinner'), require('primeng/overlaypanel'), require('primeng/api'), require('primeng/dropdown'), require('@angular/forms'), require('primeng/button'), require('primeng/fieldset'), require('primeng/inputswitch'), require('primeng/tooltip'), require('primeng/inputtext'), require('primeng/autocomplete'), require('primeng/progressbar'), require('primeng/spinner')) :
typeof define === 'function' && define.amd ? define('cytoscape-angular', ['exports', '@angular/core', '@angular/common', 'primeng/progressspinner', 'primeng/overlaypanel', 'primeng/api', 'primeng/dropdown', '@angular/forms', 'primeng/button', 'primeng/fieldset', 'primeng/inputswitch', 'primeng/tooltip', 'primeng/inputtext', 'primeng/autocomplete', 'primeng/progressbar', 'primeng/spinner'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['cytoscape-angular'] = {}, global.ng.core, global.ng.common, global.i2$1, global.i1$1, global.i2$3, global.i7, global.ng.forms, global.i8, global.i3, global.i4, global.i5, global.i6, global.i2$2, global.progressbar, global.spinner));
}(this, (function (exports, i0, i2, i2$1, i1$1, i2$3, i7, i1, i8, i3, i4, i5, i6, i2$2, progressbar, spinner) { 'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () {
return e[k];
}
});
}
});
}
n['default'] = e;
return Object.freeze(n);
}
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
var i2__namespace$3 = /*#__PURE__*/_interopNamespace(i2$3);
var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$2);
var _c0$2 = ["cyGraph"];
function CytoscapeGraphComponent_p_progressSpinner_0_Template(rf, ctx) {
if (rf & 1) {
i0__namespace.ɵɵelement(0, "p-progressSpinner", 3);
}
}
/**
* The API is a little odd to provide flexibility.
* EITHER bind to cyOptions (type CytoscapeOptions), to control the options yourself
* OR this component will build a CytoscapeOptions internally by using all the other inputs.
* If cyOptions is supplied, all other inputs are ignored.
* The cyOptions container (HTML element) is always ignored and set internally.
*/
var CytoscapeGraphComponent = /** @class */ (function () {
function CytoscapeGraphComponent() {
this.debug = false;
this.showToolbar = true;
this.loading = false;
}
CytoscapeGraphComponent.prototype.ngOnChanges = function (changes) {
console.log('cytoscape graph component ngOnChanges. changes:', JSON.stringify(changes));
if (changes["style"]) {
console.log('changes["style"]:', JSON.stringify(changes["style"]));
this.runWhileLoading(this.updateStyles.bind(this));
}
};
CytoscapeGraphComponent.prototype.centerElements = function (selector) {
if (!this.cy) {
return;
}
var elems = this.cy.$(selector);
this.cy.center(elems);
};
CytoscapeGraphComponent.prototype.zoomToElement = function (selector, level) {
if (level === void 0) { level = 3; }
var _a, _b;
var position = (_b = (_a = this.cy) === null || _a === void 0 ? void 0 : _a.$(selector)) === null || _b === void 0 ? void 0 : _b.position();
if (!position) {
console.warn("Cannot zoom to " + selector);
}
this.cy.zoom({
level: level,
position: position
});
};
CytoscapeGraphComponent.prototype.render = function () {
this.runWhileLoading(this.rerender.bind(this));
};
CytoscapeGraphComponent.prototype.runWhileLoading = function (f) {
var _this = this;
this.loading = true;
setTimeout(function () {
f();
setTimeout(function () {
_this.loading = false;
}, 30);
}, 0);
};
CytoscapeGraphComponent.prototype.updateStyles = function () {
if (this.cy && this.style) {
this.cy.style(this.style);
}
};
CytoscapeGraphComponent.prototype.rerender = function () {
//TODO : this takes a heavy-handed approach, refine for performance
if (!this.cyGraph) {
console.warn("No cyGraph found");
return;
}
var cyOptions = this.cyOptions || {
// ignored, use nodes and edges
// elements: this.elements,
autolock: this.autolock,
autoungrabify: this.autoungrabify,
autounselectify: this.autounselectify,
boxSelectionEnabled: this.boxSelectionEnabled,
container: this.cyGraph.nativeElement,
desktopTapThreshold: this.desktopTapThreshold,
hideEdgesOnViewport: this.hideEdgesOnViewport,
hideLabelsOnViewport: this.hideLabelsOnViewport,
layout: this.layoutOptions,
maxZoom: this.maxZoom,
minZoom: this.minZoom,
motionBlur: this.motionBlur,
motionBlurOpacity: this.motionBlurOpacity,
pan: this.pan,
panningEnabled: this.panningEnabled,
pixelRatio: this.pixelRatio,
selectionType: this.selectionType,
style: this.style,
styleEnabled: this.styleEnabled,
textureOnViewport: this.textureOnViewport,
touchTapThreshold: this.touchTapThreshold,
userPanningEnabled: this.userPanningEnabled,
userZoomingEnabled: this.userZoomingEnabled,
wheelSensitivity: this.wheelSensitivity,
zoomingEnabled: this.zoomingEnabled,
zoom: this.zoom,
};
// TODO do reset() instead?
this.cy = cytoscape(cyOptions);
this.cy.startBatch();
this.cy.boxSelectionEnabled(this.boxSelectionEnabled);
this.cy.nodes().remove();
this.cy.edges().remove();
if (this.nodes) {
this.cy.add(this.nodes);
}
if (this.edges) {
this.cy.add(this.edges);
}
this.cy.endBatch();
if (this.layoutOptions) {
this.cy.layout(this.layoutOptions).run();
}
};
return CytoscapeGraphComponent;
}());
CytoscapeGraphComponent.ɵfac = function CytoscapeGraphComponent_Factory(t) { return new (t || CytoscapeGraphComponent)(); };
CytoscapeGraphComponent.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: CytoscapeGraphComponent, selectors: [["cytoscape-graph"]], viewQuery: function CytoscapeGraphComponent_Query(rf, ctx) {
if (rf & 1) {
i0__namespace.ɵɵviewQuery(_c0$2, 5);
}
if (rf & 2) {
var _t = void 0;
i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.cyGraph = _t.first);
}
}, inputs: { debug: "debug", nodes: "nodes", edges: "edges", autolock: "autolock", autoungrabify: "autoungrabify", autounselectify: "autounselectify", boxSelectionEnabled: "boxSelectionEnabled", desktopTapThreshold: "desktopTapThreshold", hideEdgesOnViewport: "hideEdgesOnViewport", hideLabelsOnViewport: "hideLabelsOnViewport", layoutOptions: "layoutOptions", maxZoom: "maxZoom", minZoom: "minZoom", motionBlur: "motionBlur", motionBlurOpacity: "motionBlurOpacity", pan: "pan", panningEnabled: "panningEnabled", pixelRatio: "pixelRatio", selectionType: "selectionType", style: "style", styleEnabled: "styleEnabled", textureOnViewport: "textureOnViewport", touchTapThreshold: "touchTapThreshold", userPanningEnabled: "userPanningEnabled", userZoomingEnabled: "userZoomingEnabled", wheelSensitivity: "wheelSensitivity", zoom: "zoom", zoomingEnabled: "zoomingEnabled", showToolbar: "showToolbar" }, features: [i0__namespace.ɵɵNgOnChangesFeature], decls: 3, vars: 1, consts: [["class", "spinner", "strokeWidth", "4", "fill", "#EEEEEE", "animationDuration", ".5s", 4, "ngIf"], [1, "graphWrapper"], ["cyGraph", ""], ["strokeWidth", "4", "fill", "#EEEEEE", "animationDuration", ".5s", 1, "spinner"]], template: function CytoscapeGraphComponent_Template(rf, ctx) {
if (rf & 1) {
i0__namespace.ɵɵtemplate(0, CytoscapeGraphComponent_p_progressSpinner_0_Template, 1, 0, "p-progressSpinner", 0);
i0__namespace.ɵɵelement(1, "div", 1, 2);
}
if (rf & 2) {
i0__namespace.ɵɵproperty("ngIf", ctx.loading);
}
}, directives: [i2__namespace.NgIf, i2__namespace$1.ProgressSpinner], styles: [".spinner[_ngcontent-%COMP%] {\n position: absolute;\n left: '350px';\n z-index: 10;\n width: '250px';\n height: '250px';\n }\n @keyframes ui-progress-spinner-color {\n 100%,\n 0% {\n stroke: #d62d20;\n }\n 40% {\n stroke: #0057e7;\n }\n 66% {\n stroke: #008744;\n }\n 80%,\n 90% {\n stroke: #ffa700;\n }\n }\n .graphWrapper[_ngcontent-%COMP%] {\n height: 100%;\n width: 100%;\n }"] });
(function () {
(typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CytoscapeGraphComponent, [{
type: i0.Component,
args: [{
selector: 'cytoscape-graph',
template: "\n <p-progressSpinner *ngIf=\"loading\" class=\"spinner\" strokeWidth=\"4\" fill=\"#EEEEEE\" animationDuration=\".5s\"></p-progressSpinner>\n <div #cyGraph class=\"graphWrapper\">\n </div>\n ",
styles: ["\n .spinner {\n position: absolute;\n left: '350px';\n z-index: 10;\n width: '250px';\n height: '250px';\n }\n @keyframes ui-progress-spinner-color {\n 100%,\n 0% {\n stroke: #d62d20;\n }\n 40% {\n stroke: #0057e7;\n }\n 66% {\n stroke: #008744;\n }\n 80%,\n 90% {\n stroke: #ffa700;\n }\n }\n .graphWrapper {\n height: 100%;\n width: 100%;\n }"
]
}]
}], function () { return []; }, { cyGraph: [{
type: i0.ViewChild,
args: ['cyGraph']
}], debug: [{
type: i0.Input
}], nodes: [{
type: i0.Input
}], edges: [{
type: i0.Input
}], autolock: [{
type: i0.Input
}], autoungrabify: [{
type: i0.Input
}], autounselectify: [{
type: i0.Input
}], boxSelectionEnabled: [{
type: i0.Input
}], desktopTapThreshold: [{
type: i0.Input
}], hideEdgesOnViewport: [{
type: i0.Input
}], hideLabelsOnViewport: [{
type: i0.Input
}], layoutOptions: [{
type: i0.Input
}], maxZoom: [{
type: i0.Input
}], minZoom: [{
type: i0.Input
}], motionBlur: [{
type: i0.Input
}], motionBlurOpacity: [{
type: i0.Input
}], pan: [{
type: i0.Input
}], panningEnabled: [{
type: i0.Input
}], pixelRatio: [{
type: i0.Input
}], selectionType: [{
type: i0.Input
}], style: [{
type: i0.Input
}], styleEnabled: [{
type: i0.Input
}], textureOnViewport: [{
type: i0.Input
}], touchTapThreshold: [{
type: i0.Input
}], userPanningEnabled: [{
type: i0.Input
}], userZoomingEnabled: [{
type: i0.Input
}], wheelSensitivity: [{
type: i0.Input
}], zoom: [{
type: i0.Input
}], zoomingEnabled: [{
type: i0.Input
}], showToolbar: [{
type: i0.Input
}] });
})();
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise */
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);
};
function __extends(d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
var __assign = function () {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __rest(s, e) {
var t = {};
for (var p in s)
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
function __decorate(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;
}
function __param(paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); };
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
return Reflect.metadata(metadataKey, metadataValue);
}
function __awaiter(thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try {
step(generator.next(value));
}
catch (e) {
reject(e);
} }
function rejected(value) { try {
step(generator["throw"](value));
}
catch (e) {
reject(e);
} }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function () { if (t[0] & 1)
throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f)
throw new TypeError("Generator is already executing.");
while (_)
try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
return t;
if (y = 0, t)
op = [op[0] & 2, t.value];
switch (op[0]) {
case 0:
case 1:
t = op;
break;
case 4:
_.label++;
return { value: op[1], done: false };
case 5:
_.label++;
y = op[1];
op = [0];
continue;
case 7:
op = _.ops.pop();
_.trys.pop();
continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
_ = 0;
continue;
}
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
_.label = op[1];
break;
}
if (op[0] === 6 && _.label < t[1]) {
_.label = t[1];
t = op;
break;
}
if (t && _.label < t[2]) {
_.label = t[2];
_.ops.push(op);
break;
}
if (t[2])
_.ops.pop();
_.trys.pop();
continue;
}
op = body.call(thisArg, _);
}
catch (e) {
op = [6, e];
y = 0;
}
finally {
f = t = 0;
}
if (op[0] & 5)
throw op[1];
return { value: op[0] ? op[1] : void 0, done: true };
}
}
var __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];
});
function __exportStar(m, o) {
for (var p in m)
if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
__createBinding(o, m, p);
}
function __values(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m)
return m.call(o);
if (o && typeof o.length === "number")
return {
next: function () {
if (o && i >= o.length)
o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
}
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m)
return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
ar.push(r.value);
}
catch (error) {
e = { error: error };
}
finally {
try {
if (r && !r.done && (m = i["return"]))
m.call(i);
}
finally {
if (e)
throw e.error;
}
}
return ar;
}
/** @deprecated */
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
/** @deprecated */
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++)
s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
}
function __spreadArray(to, from, pack) {
if (pack || arguments.length === 2)
for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar)
ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || from);
}
function __await(v) {
return this instanceof __await ? (this.v = v, this) : new __await(v);
}
function __asyncGenerator(thisArg, _arguments, generator) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var g = generator.apply(thisArg, _arguments || []), i, q = [];
return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
function verb(n) { if (g[n])
i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
function resume(n, v) { try {
step(g[n](v));
}
catch (e) {
settle(q[0][3], e);
} }
function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
function fulfill(value) { resume("next", value); }
function reject(value) { resume("throw", value); }
function settle(f, v) { if (f(v), q.shift(), q.length)
resume(q[0][0], q[0][1]); }
}
function __asyncDelegator(o) {
var i, p;
return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
}
function __asyncValues(o) {
if (!Symbol.asyncIterator)
throw new TypeError("Symbol.asyncIterator is not defined.");
var m = o[Symbol.asyncIterator], i;
return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
}
function __makeTemplateObject(cooked, raw) {
if (Object.defineProperty) {
Object.defineProperty(cooked, "raw", { value: raw });
}
else {
cooked.raw = raw;
}
return cooked;
}
;
var __setModuleDefault = Object.create ? (function (o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function (o, v) {
o["default"] = v;
};
function __importStar(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;
}
function __importDefault(mod) {
return (mod && mod.__esModule) ? mod : { default: mod };
}
function __classPrivateFieldGet(receiver, state, kind, f) {
if (kind === "a" && !f)
throw new TypeError("Private accessor was defined without a getter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
throw new TypeError("Cannot read private member from an object whose class did not declare it");
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
}
function __classPrivateFieldSet(receiver, state, value, kind, f) {
if (kind === "m")
throw new TypeError("Private method is not writable");
if (kind === "a" && !f)
throw new TypeError("Private accessor was defined without a setter");
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
throw new TypeError("Cannot write private member to an object whose class did not declare it");
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
}
var BaseLayoutOptionsImpl = /** @class */ (function () {
function BaseLayoutOptionsImpl() {
}
BaseLayoutOptionsImpl.prototype.ready = function (e) {
// tslint:disable-next-line:no-console
console.debug("layout ready, cytoscape.LayoutEventObject: " + JSON.stringify(e)); // on layoutready
};
BaseLayoutOptionsImpl.prototype.stop = function (e) {
// tslint:disable-next-line:no-console
console.debug("layout stop, cytoscape.LayoutEventObject: " + JSON.stringify(e)); // on layoutstop
};
return BaseLayoutOptionsImpl;
}());
var NullLayoutOptionsImpl = /** @class */ (function (_super) {
__extends(NullLayoutOptionsImpl, _super);
function NullLayoutOptionsImpl() {
var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
_this.name = 'null';
return _this;
}
return NullLayoutOptionsImpl;
}(BaseLayoutOptionsImpl));
var AnimateLayoutOptionsImpl = /** @class */ (function (_super) {
__extends(AnimateLayoutOptionsImpl, _super);
function AnimateLayoutOptionsImpl() {
var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
// the zoom level to set (prob want fit = false if set)
_this.zoom = null;
// the pan level to set (prob want fit = false if set)
_this.pan = null;
// whether to transition the node positions
_this.animate = false;
// duration of animation in ms if enabled
_this.animationDuration = 500;
// easing of animation if enabled
_this.animationEasing = undefined;
// a function that determines whether the node should be animated.
// All nodes animated by default on animate enabled. Non-animated nodes are
// positioned immediately when the layout starts
_this.animateFilter = function (node, i) { return true; };
return _this;
}
return AnimateLayoutOptionsImpl;
}(BaseLayoutOptionsImpl));
var PresetLayoutOptionsImpl = /** @class */ (function (_super) {
__extends(PresetLayoutOptionsImpl, _super);
function PresetLayoutOptionsImpl() {
var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
_this.name = 'preset';
// transform a given node position. Useful for changing flow direction in discrete layouts
_this.transform = function (node, position) { return position; };
return _this;
}
return PresetLayoutOptionsImpl;
}(AnimateLayoutOptionsImpl));
var ShapedLayoutOptionsImpl = /** @class */ (function (_super) {
__extends(ShapedLayoutOptionsImpl, _super);
function ShapedLayoutOptionsImpl() {
var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
// whether to fit to viewport
_this.fit = true;
// fit padding
_this.padding = 30;
// constrain layout bounds
_this.boundingBox = null;
// prevents node overlap, may overflow boundingBox if not enough space
_this.avoidOverlap = true;
// Excludes the label when calculating node bounding boxes for the layout algorithm
_this.nodeDimensionsIncludeLabels = false;
// Applies a multiplicative factor (>0) to expand or compress the overall area that the nodes take up
_this.spacingFactor = 1.75;
// a sorting function to order the nodes; e.g. function(a, b){ return a.data('weight') - b.data('weight') }
_this.sort = null;
// transform a given node position. Useful for changing flow direction in discrete layouts
_this.transform = function (node, position) { return position; };
return _this;
}
return ShapedLayoutOptionsImpl;
}(AnimateLayoutOptionsImpl));
var GridLayoutOptionsImpl = /** @class */ (function (_super) {
__extends(GridLayoutOptionsImpl, _super);
function GridLayoutOptionsImpl() {
var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
_this.name = 'grid';
// extra spacing around nodes when avoidOverlap: true
_this.avoidOverlapPadding = 10;
// uses all available space on false, uses minimal space on true
_this.condense = false;
// force num of rows in the grid
_this.rows = null;
// force num of columns in the grid
_this.cols = null;
// returns { row, col } for element
// (node: NodeSingular) => return { row: number; col: number; }
_this.position = null;
return _this;
}
return GridLayoutOptionsImpl;
}(ShapedLayoutOptionsImpl));
var RandomLayoutOptionsImpl = /** @class */ (function (_super) {
__extends(RandomLayoutOptionsImpl, _super);
function RandomLayoutOptionsImpl() {
var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
_this.name = 'random';
_this.fit = true;
_this.padding = 20;
// constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
_this.boundingBox = null;
// transform a given node position. Useful for changing flow direction in discrete layouts
_this.transform = function (node, position) { return position; };
return _this;
}
return RandomLayoutOptionsImpl;
}(AnimateLayoutOptionsImpl));
var CircleLayoutOptionsImpl = /** @class */ (function (_super) {
__extends(CircleLayoutOptionsImpl, _super);
function CircleLayoutOptionsImpl() {
var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
_this.name = 'circle';
_this.startAngle = 3 / 2 * Math.PI; // where nodes start in radians
_this.sweep = null; // how many radians should be between the first and last node (defaults to full circle)
return _this;
}
return CircleLayoutOptionsImpl;
}(ShapedLayoutOptionsImpl));
// Note: "radius" is not part of concentric, imperfect extension
var ConcentricLayoutOptionsImpl = /** @class */ (function () {
function ConcentricLayoutOptionsImpl() {
this.name = 'concentric';
// where nodes start in radians, e.g. 3 / 2 * Math.PI,
this.startAngle = 3 / 2 * Math.PI;
// height of layout area (overrides container height)
this.height = null;
// width of layout area (overrides container width)
this.width = null;
}
ConcentricLayoutOptionsImpl.prototype.concentric = function (node) {
return 0;
};
ConcentricLayoutOptionsImpl.prototype.levelWidth = function (node) {
return 0;
};
return ConcentricLayoutOptionsImpl;
}());
var BreadthFirstLayoutOptionsImpl = /** @class */ (function (_super) {
__extends(BreadthFirstLayoutOptionsImpl, _super);
function BreadthFirstLayoutOptionsImpl() {
var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
_this.name = 'breadthfirst';
// whether the tree is directed downwards (or edges can point in any direction if false)
_this.directed = false;
// put depths in concentric circles if true, put depths top down if false
_this.circle = false;
// whether to shift nodes down their natural BFS depths in order to avoid upwards edges (DAGS only)
_this.maximal = false;
_this.grid = false; // whether to create an even grid into which the DAG is placed (circle:false only)
return _this;
}
return BreadthFirstLayoutOptionsImpl;
}(ShapedLayoutOptionsImpl));
var CoseLayoutOptionsImpl = /** @class */ (function (_super) {
__extends(CoseLayoutOptionsImpl, _super);
function CoseLayoutOptionsImpl() {
var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
_this.name = 'cose';
// Number of iterations between consecutive screen positions update
_this.refresh = 20;
// Randomize the initial positions of the nodes (true) or use existing positions (false)
_this.randomize = false;
// Extra spacing between components in non-compound graphs
_this.componentSpacing = 40;
// Node repulsion (overlapping) multiplier
_this.nodeOverlap = 4;
// Nesting factor (multiplier) to compute ideal edge length for nested edges
_this.nestingFactor = 1.2;
// Gravity force (constant)
_this.gravity = 1;
// Maximum number of iterations to perform
_this.numIter = 1000;
// Initial temperature (maximum node displacement)
_this.initialTemp = 1000;
// Cooling factor (how the temperature is reduced between consecutive iterations
_this.coolingFactor = 0.99;
// Lower temperature threshold (below this point the layout will end)
_this.minTemp = 1.0;
// Node repulsion (non overlapping) multiplier
_this.nodeRepulsion = function (node) { return 2048; };
// Ideal edge (non nested) length
_this.idealEdgeLength = function (edge) { return 32; };
// Divisor to compute edge forces
_this.edgeElasticity = function (edge) { return 32; };
return _this;
}
return CoseLayoutOptionsImpl;
}(ShapedLayoutOptionsImpl));
var DagreLayoutOptionsImpl = /** @class */ (function (_super) {
__extends(DagreLayoutOptionsImpl, _super);
function DagreLayoutOptionsImpl() {
var _this = _super.call(this) || this;
_this.name = 'dagre';
_this.nodeSep = null; // the separation between adjacent nodes in the same rank
_this.edgeSep = null; // the separation between adjacent edges in the same rank
_this.rankSep = null; // the separation between each rank in the layout
// TB for top to bottom flow, 'LR' for left to right
_this.rankDir = 'TB';
// Type of algorithm to assign a rank to each node in the input graph.
// Possible values: 'network-simplex', 'tight-tree' or 'longest-path'
_this.ranker = null;
// number of ranks to keep between the source and target of the edge
_this.minLen = function (edge) { return 1; };
_this.edgeWeight = function (edge) { return 1; }; // higher weight edges are generally made shorter and straighter than lower weight edges
return _this;
}
return DagreLayoutOptionsImpl;
}(ShapedLayoutOptionsImpl));
var FormInfo = /** @class */ (function () {
function FormInfo(title, fieldsets, showSubmitButton, submitText, disableSubmitOnFormInvalid,
/* if the model has a property that isn't in a fieldset, but it in an fieldset created by the form */
otherFieldsetTitle) {
if (showSubmitButton === void 0) { showSubmitButton = false; }
if (submitText === void 0) { submitText = 'Submit'; }
if (disableSubmitOnFormInvalid === void 0) { disableSubmitOnFormInvalid = false; }
if (otherFieldsetTitle === void 0) { otherFieldsetTitle = null; }
this.title = title;
this.fieldsets = fieldsets;
this.showSubmitButton = showSubmitButton;
this.submitText = submitText;
this.disableSubmitOnFormInvalid = disableSubmitOnFormInvalid;
this.otherFieldsetTitle = otherFieldsetTitle;
}
return FormInfo;
}());
var FieldsetInfo = /** @class */ (function () {
function FieldsetInfo(legend, fieldInfos, displayOnlyIfProperties) {
this.legend = legend;
this.fieldInfos = fieldInfos;
this.displayOnlyIfProperties = displayOnlyIfProperties;
}
FieldsetInfo.prototype.showFieldsetForModel = function (model) {
var e_1, _a, e_2, _b;
if (!this.displayOnlyIfProperties) {
return true;
}
try {
for (var _c = __values(this.fieldInfos), _d = _c.next(); !_d.done; _d = _c.next()) {
var fieldInfo = _d.value;
try {
for (var _e = (e_2 = void 0, __values(Object.keys(model))), _f = _e.next(); !_f.done; _f = _e.next()) {
var modelProperty = _f.value;
if (fieldInfo.modelProperty === modelProperty) {
return true;
}
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
}
finally { if (e_2) throw e_2.error; }
}
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
}
finally { if (e_1) throw e_1.error; }
}
return false;
};
return FieldsetInfo;
}());
var FieldInfo = /** @class */ (function () {
function FieldInfo(/* label to show the user next to the field, can be a function for i18n/dynamic labels */ label,
/* The form has a model, this is the name of the property on the form's model object that this field */
modelProperty,
/* computed from the model property type by default */
type,
/* The tooltip to display on hover */
tooltip,
/* The list of Angular Form Validators for the control or a function that returns such an array */
validators,
/* disable the field if it's not valid */
disableWhenInvalid,
/* If true and model[modelProperty] is undefined, don't create a field.*/
hideWhenNoModelProperty,
/* Input only - by default the label is used as a placeholder and floats (how to downcast in a template?) */
placeholder,
/* Input only - same as HTML input (how to downcast in a template?) */
inputType,
/* Input only - same as HTML input (how to downcast in a template?) */
inputSize,
/* Select only either an array of object or the name of a model property or function that is/returns an array of objects */
options,
/* In an options object, what field to display to the user (or function that returns a string
given the option object and the model) */
optionArrayLabelField,
/* In an options object, what field to return for the value of the option
(or function that returns a string given the option object and the model) */
optionArrayValueField) {
if (disableWhenInvalid === void 0) { disableWhenInvalid = false; }
if (hideWhenNoModelProperty === void 0) { hideWhenNoModelProperty = true; }
if (inputType === void 0) { inputType = 'text'; }
if (inputSize === void 0) { inputSize = 8; }
this.label = label;
this.modelProperty = modelProperty;
this.type = type;
this.tooltip = tooltip;
this.validators = validators;
this.disableWhenInvalid = disableWhenInvalid;
this.hideWhenNoModelProperty = hideWhenNoModelProperty;
this.placeholder = placeholder;
this.inputType = inputType;
this.inputSize = inputSize;
this.options = options;
this.optionArrayLabelField = optionArrayLabelField;
this.optionArrayValueField = optionArrayValueField;
this.fieldTypes = {};
}
FieldInfo.prototype.fieldType = function (model) {
var cached = this.fieldTypes[this.modelProperty];
if (cached) {
return cached;
}
else {
var fieldValueType = typeof model[this.modelProperty];
var result = this.type ? this.type : (this.options ? 'options' : fieldValueType);
this.fieldTypes[this.modelProperty] = result;
return result;
}
};
FieldInfo.prototype.setValue = function (newValue, model, modelChange) {
model[this.modelProperty] = newValue;
modelChange.emit({ property: this.modelProperty, value: newValue });
};
return FieldInfo;
}());
function FluidFormComponent_ng_container_1_p_fieldset_1_div_2_ng_container_2_Template(rf, ctx) {
if (rf & 1) {
i0__namespace.ɵɵelementContainerStart(0);
i0__namespace.ɵɵelementStart(1, "span", 10);
i0__namespace.ɵɵtext(2);
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵelement(3, "p-inputSwitch", 11);
i0__namespace.ɵɵelementContainerEnd();
}
if (rf & 2) {
var fieldInfo_r5 = i0__namespace.ɵɵnextContext().$implicit;
i0__namespace.ɵɵadvance(2);
i0__namespace.ɵɵtextInterpolate1(" ", fieldInfo_r5.label, " ");
i0__namespace.ɵɵadvance(1);
i0__namespace.ɵɵpropertyInterpolate("name", fieldInfo_r5.modelProperty);
i0__namespace.ɵɵpropertyInterpolate("pTooltip", fieldInfo_r5.tooltip);
i0__namespace.ɵɵpropertyInterpolate("formControlName", fieldInfo_r5.modelProperty);
}
}
function FluidFormComponent_ng_container_1_p_fieldset_1_div_2_ng_container_3_Template(rf, ctx) {
if (rf & 1) {
i0__namespace.ɵɵelementContainerStart(0);
i0__namespace.ɵɵelementStart(1, "span", 12);
i0__namespace.ɵɵelement(2, "input", 13);
i0__namespace.ɵɵelementStart(3, "label", 14);
i0__namespace.ɵɵtext(4);
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵelementContainerEnd();
}
if (rf & 2) {
var fieldInfo_r5 = i0__namespace.ɵɵnextContext().$implicit;
i0__namespace.ɵɵadvance(2);
i0__namespace.ɵɵpropertyInterpolate("id", fieldInfo_r5.modelProperty);
i0__namespace.ɵɵpropertyInterpolate("name", fieldInfo_r5.modelProperty);
i0__namespace.ɵɵpropertyInterpolate("formControlName", fieldInfo_r5.modelProperty);
i0__namespace.ɵɵproperty("pTooltip", fieldInfo_r5.tooltip)("type", fieldInfo_r5.inputType)("size", fieldInfo_r5.inputSize);
i0__namespace.ɵɵadvance(1);
i0__namespace.ɵɵpropertyInterpolate("for", fieldInfo_r5.modelProperty);
i0__namespace.ɵɵadvance(1);
i0__namespace.ɵɵtextInterpolate(fieldInfo_r5.label);
}
}
function FluidFormComponent_ng_container_1_p_fieldset_1_div_2_ng_container_4_Template(rf, ctx) {
if (rf & 1) {
i0__namespace.ɵɵelementContainerStart(0);
i0__namespace.ɵɵelementStart(1, "span", 12);
i0__namespace.ɵɵelement(2, "p-dropdown", 15);
i0__namespace.ɵɵelementStart(3, "label", 14);
i0__namespace.ɵɵtext(4);
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵelementContainerEnd();
}
if (rf & 2) {
var fieldInfo_r5 = i0__namespace.ɵɵnextContext().$implicit;
i0__namespace.ɵɵadvance(2);
i0__namespace.ɵɵpropertyInterpolate("formControlName", fieldInfo_r5.modelProperty);
i0__namespace.ɵɵproperty("name", fieldInfo_r5.modelProperty)("options", fieldInfo_r5.options)("optionLabel", fieldInfo_r5.optionArrayLabelField)("pTooltip", fieldInfo_r5.tooltip);
i0__namespace.ɵɵadvance(1);
i0__namespace.ɵɵpropertyInterpolate("for", fieldInfo_r5.modelProperty);
i0__namespace.ɵɵadvance(1);
i0__namespace.ɵɵtextInterpolate(fieldInfo_r5.label);
}
}
function FluidFormComponent_ng_container_1_p_fieldset_1_div_2_Template(rf, ctx) {
if (rf & 1) {
i0__namespace.ɵɵelementStart(0, "div", 7);
i0__namespace.ɵɵelementStart(1, "div", 8);
i0__namespace.ɵɵtemplate(2, FluidFormComponent_ng_container_1_p_fieldset_1_div_2_ng_container_2_Template, 4, 4, "ng-container", 9);
i0__namespace.ɵɵtemplate(3, FluidFormComponent_ng_container_1_p_fieldset_1_div_2_ng_container_3_Template, 5, 8, "ng-container", 9);
i0__namespace.ɵɵtemplate(4, FluidFormComponent_ng_container_1_p_fieldset_1_div_2_ng_container_4_Template, 5, 7, "ng-container", 9);
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵelementEnd();
}
if (rf & 2) {
var fieldInfo_r5 = ctx.$implicit;
var ctx_r4 = i0__namespace.ɵɵnextContext(3);
i0__namespace.ɵɵadvance(2);
i0__namespace.ɵɵproperty("ngIf", fieldInfo_r5.fieldType(ctx_r4.model) === "boolean");
i0__namespace.ɵɵadvance(1);
i0__namespace.ɵɵproperty("ngIf", fieldInfo_r5.fieldType(ctx_r4.model) === "string" || fieldInfo_r5.fieldType(ctx_r4.model) === "number");
i0__namespace.ɵɵadvance(1);
i0__namespace.ɵɵproperty("ngIf", fieldInfo_r5.fieldType(ctx_r4.model) === "options");
}
}
function FluidFormComponent_ng_container_1_p_fieldset_1_Template(rf, ctx) {
if (rf & 1) {
i0__namespace.ɵɵelementStart(0, "p-fieldset", 4);
i0__namespace.ɵɵelementStart(1, "div", 5);
i0__namespace.ɵɵtemplate(2, FluidFormComponent_ng_container_1_p_fieldset_1_div_2_Template, 5, 3, "div", 6);
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵelementEnd();
}
if (rf & 2) {
var fieldSetInfo_r2 = i0__namespace.ɵɵnextContext().$implicit;
i0__namespace.ɵɵpropertyInterpolate("legend", fieldSetInfo_r2.legend);
i0__namespace.ɵɵadvance(2);
i0__namespace.ɵɵproperty("ngForOf", fieldSetInfo_r2.fieldInfos);
}
}
function FluidFormComponent_ng_container_1_Template(rf, ctx) {
if (rf & 1) {
i0__namespace.ɵɵelementContainerStart(0);
i0__namespace.ɵɵtemplate(1, FluidFormComponent_ng_container_1_p_fieldset_1_Template, 3, 2, "p-fieldset", 3);
i0__namespace.ɵɵelementContainerEnd();
}
if (rf & 2) {
var fieldSetInfo_r2 = ctx.$implicit;
var ctx_r0 = i0__namespace.ɵɵnextContext();
i0__namespace.ɵɵadvance(1);
i0__namespace.ɵɵproperty("ngIf", fieldSetInfo_r2.showFieldsetForModel(ctx_r0.model));
}
}
function FluidFormComponent_button_2_Template(rf, ctx) {
if (rf & 1) {
var _r14_1 = i0__namespace.ɵɵgetCurrentView();
i0__namespace.ɵɵelementStart(0, "button", 16);
i0__namespace.ɵɵlistener("submit", function FluidFormComponent_button_2_Template_button_submit_0_listener() { i0__namespace.ɵɵrestoreView(_r14_1); var ctx_r13 = i0__namespace.ɵɵnextContext(); return ctx_r13.onSubmit(); });
i0__namespace.ɵɵtext(1);
i0__namespace.ɵɵelementEnd();
}
if (rf & 2) {
var ctx_r1 = i0__namespace.ɵɵnextContext();
i0__namespace.ɵɵproperty("disabled", ctx_r1.formInfo.disableSubmitOnFormInvalid && !ctx_r1.formGroup.valid);
i0__namespace.ɵɵadvance(1);
i0__namespace.ɵɵtextInterpolate(ctx_r1.formInfo.submitText || "Submit");
}
}
var FluidFormComponent = /** @class */ (function () {
function FluidFormComponent() {
this.modelChange = new i0.EventEmitter();
}
FluidFormComponent.prototype.ngOnInit = function () {
var _this = this;
console.debug('FluidFormComponent this.formInfo:', JSON.stringify(this.formInfo));
var controls = {};
this.formInfo.fieldsets.forEach(function (fieldsetInfo) {
fieldsetInfo.fieldInfos.forEach(function (fieldInfo) {
var modelValue = _this.model[fieldInfo.modelProperty];
// console.log('fieldInfo.modelProperty:', fieldInfo.modelProperty, ', modelValue:', modelValue)
var validators = typeof fieldInfo.validators === 'function' ? fieldInfo.validators() : fieldInfo.validators;
var asyncValidators = typeof fieldInfo.asyncValidators === 'function' ? fieldInfo.asyncValidators() : fieldInfo.asyncValidators;
var updateOn = fieldInfo.updateOn;
var formControl = new i1.FormControl(modelValue, { validators: validators, asyncValidators: asyncValidators, updateOn: updateOn });
formControl.valueChanges.subscribe(function (change) {
console.debug('form control change ', JSON.stringify(change), ' for prop ', fieldInfo.modelProperty, ', changing current model value ', _this.model[fieldInfo.modelProperty], ' to ', change);
fieldInfo.setValue(change, _this.model, _this.modelChange);
});
controls[fieldInfo.modelProperty] = formControl;
});
});
this.formGroup = new i1.FormGroup(controls);
};
FluidFormComponent.prototype.ngOnChanges = function (changes) {
var e_1, _b;
var _a;
console.debug('ngOnChanges fluid-form changes:', JSON.stringify(changes));
if (changes['model']) {
var model = changes['model'].currentValue;
try {
for (var _c = __values(Object.keys(model)), _d = _c.next(); !_d.done; _d = _c.next()) {
var key = _d.value;
console.debug('ngOnChanges model key copying to form:', key);
var control = (_a = this.formGroup) === null || _a === void 0 ? void 0 : _a.controls[key];
control ? control.setValue(model[key], { emitEvent: false }) : console.warn('no control for model key ', key);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
}
finally { if (e_1) throw e_1.error; }
}
}
};
FluidFormComponent.prototype.ngAfterViewInit = function () {
// console.debug("ngAfterViewInit")
};
FluidFormComponent.prototype.ngAfterViewChecked = function () {
// console.debug("ngAfterViewChecked")
};
FluidFormComponent.prototype.onSubmit = function () {
console.log("Form submitted");
};
return FluidFormComponent;
}());
FluidFormComponent.ɵfac = function FluidFormComponent_Factory(t) { return new (t || FluidFormComponent)(); };
FluidFormComponent.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: FluidFormComponent, selectors: [["cyng-fluid-form"]], inputs: { model: "model", modelProperty: "modelProperty", formInfo: "formInfo" }, outputs: { modelChange: "modelChange" }, features: [i0__namespace.ɵɵNgOnChangesFeature], decls: 3, vars: 4, consts: [[3, "formGroup", "title", "ngSubmit"], [4, "ngFor", "ngForOf"], ["pButton", "", 3, "disabled", "submit", 4, "ngIf"], ["class", "fieldset", 3, "legend", 4, "ngIf"], [1, "fieldset", 3, "legend"], [1, "ui-g", "ui-fluid"], ["class", "ui-g-12 ui-md-4 field", 4, "ngFor", "ngForOf"], [1, "ui-g-12", "ui-md-4", "field"], [1, "ui-inputgroup"], [4, "ngIf"], [1, "ui-chkbox-label"], [3, "name", "pTooltip", "formControlName"], [1, "ui-float-label"], ["pInputText", "", 3, "id", "name", "formControlName", "pTooltip", "type", "size"], [3, "for"], [3, "formControlName", "name", "options", "optionLabel", "pTooltip"], ["pButton", "", 3, "disabled", "submit"]], template: function FluidFormComponent_Template(rf, ctx) {
if (rf & 1) {
i0__namespace.ɵɵelementStart(0, "form", 0);
i0__namespace.ɵɵlistener("ngSubmit", function FluidFormComponent_Template_form_ngSubmit_0_listener() { return ctx.onSubmit(); });
i0__namespace.ɵɵtemplate(1, FluidFormComponent_ng_container_1_Template, 2, 1, "ng-container", 1);
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵtemplate(2, FluidFormComponent_button_2_Template, 2, 2, "button", 2);
}
if (rf & 2) {
i0__namespace.ɵɵproperty("formGroup", ctx.formGroup)("title", ctx.formInfo == null ? null : ctx.formInfo.title);
i0__namespace.ɵɵadvance(1);
i0__namespace.ɵɵproperty("ngForOf", ctx.formInfo == null ? null : ctx.formInfo.fieldsets);
i0__namespace.ɵɵadvance(1);
i0__namespace.ɵɵproperty("ngIf", ctx.formInfo.showSubmitButton);
}
}, directives: [i1__namespace.ɵNgNoValidate, i1__namespace.NgControlStatusGroup, i1__namespace.FormGroupDirective, i2__namespace.NgForOf, i2__namespace.NgIf, i3__namespace.Fieldset, i4__namespace.InputSwitch, i5__namespace.Tooltip, i1__namespace.NgControlStatus, i1__namespace.FormControlName, i1__namespace.DefaultValueAccessor, i6__namespace.InputText, i7__namespace.Dropdown, i8__namespace.ButtonDirective], styles: [".ui-chkbox-label[_ngcontent-%COMP%] {\n padding-right: 0.5em;\n }\n\n .ui-dropdown-label[_ngcontent-%COMP%] {\n align-self: center;\n padding-right: 0.5em\n }\n\n .field[_ngcontent-%COMP%]:nth-child(n+4) {\n margin-top: 1em; // otherwise overlap betwen a field and a floating label of the field below it\n }\n\n .fieldset[_ngcontent-%COMP%] {\n }"] });
(function () {
(typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(FluidFormComponent, [{
type: i0.Component,
args: [{
selector: 'cyng-fluid-form',
template: "\n <form [formGroup]=\"formGroup\" [title]=\"formInfo?.title\" (ngSubmit)=\"onSubmit()\">\n <ng-container *ngFor=\"let fieldSetInfo of formInfo?.fieldsets\">\n <p-fieldset *ngIf=\"fieldSetInfo.showFieldsetForModel(model)\" class=\"fieldset\" legend=\"{{fieldSetInfo.legend}}\">\n <div class=\"ui-g ui-fluid\">\n <div class=\"ui-g-12 ui-md-4 field\" *ngFor=\"let fieldInfo of fieldSetInfo.fieldInfos\">\n <div class=\"ui-inputgroup\">\n <ng-container *ngIf=\"fieldInfo.fieldType(model) === 'boolean'\">\n <span class=\"ui-chkbox-label\">\n {{fieldInfo.label}}\n </span>\n <p-inputSwitch\n name=\"{{fieldInfo.modelProperty}}\"\n pTooltip=\"{{fieldInfo.tooltip}}\"\n formControlName=\"{{fieldInfo.modelProperty}}\"\n >\n </p-inputSwitch>\n </ng-container>\n <ng-container\n *ngIf=\"fieldInfo.fieldType(model) === 'string' || fieldInfo.fieldType(model) === 'number'\">\n <span class=\"ui-float-label\">\n <input pInputText\n id=\"{{fieldInfo.modelProperty}}\"\n name=\"{{fieldInfo.modelProperty}}\"\n formControlName=\"{{fieldInfo.modelProperty}}\"\n [pTooltip]=\"fieldInfo.tooltip\"\n [type]=\"fieldInfo.inputType\"\n [size]=\"fieldInfo.inputSize\"\n />\n <label for=\"{{fieldInfo.modelProperty}}\">{{fieldInfo.label}}</label>\n </span>\n </ng-container>\n <ng-container *ngIf=\"fieldInfo.fieldType(model) === 'options'\">\n <span class=\"ui-float-label\">\n <p-dropdown\n formControlName=\"{{fieldInfo.modelProperty}}\"\n [name]=\"fieldInfo.modelProperty\"\n [options]=\"fieldInfo.options\"\n [optionLabel]=\"fieldInfo.optionArrayLabelField\"\n [pTooltip]=\"fieldInfo.tooltip\"\n ></p-dropdown>\n <label for=\"{{fieldInfo.modelProperty}}\">{{fieldInfo.label}}</label>\n </span>\n </ng-container>\n </div>\n </div>\n </div>\n </p-fieldset>\n </ng-container>\n </form>\n <button *ngIf=\"formInfo.showSubmitButton\" pButton\n [disabled]=\"formInfo.disableSubmitOnFormInvalid && !formGroup.valid\"\n (submit)=\"onSubmit()\">{{formInfo.submitText || 'Submit' }}</button>\n ",
styles: ["\n .ui-chkbox-label {\n padding-right: 0.5em;\n }\n\n .ui-dropdown-label {\n align-self: center;\n padding-right: 0.5em\n }\n\n .field:nth-child(n+4) {\n margin-top: 1em; // otherwise overlap betwen a field and a floating label of the field below it\n }\n\n .fieldset {\n }\n "]
}]
}], function () { return []; }, { model: [{
type: i0.Input
}], modelChange: [{
type: i0.Output
}], modelProperty: [{
type: i0.Input
}], formInfo: [{
type: i0.Input
}] });
})();
var _c0$1 = ["layoutForm"];
var CytoscapeLayoutToolComponent = /** @class */ (function () {
function CytoscapeLayoutToolComponent() {
this.changed = false;
this.layoutOptionsChange = new i0.EventEmitter();
this.layoutOptionsList = [
new BreadthFirstLayoutOptionsImpl(),
new CoseLayoutOptionsImpl(),
new DagreLayoutOptionsImpl(),
new CircleLayoutOptionsImpl(),
new ConcentricLayoutOptionsImpl(),
new GridLayoutOptionsImpl(),
new PresetLayoutOptionsImpl(),
new RandomLayoutOptionsImpl(),
new NullLayoutOptionsImpl(),
];
}
Object.defineProperty(CytoscapeLayoutToolComponent.prototype, "layoutOptions", {
get: function () {
return this._layoutOptions;
},
set: function (value) {
console.log("set layoutOptions: " + (value === null || value === void 0 ? void 0 : value.name));
this._layoutOptions = value;
},
enumerable: false,
configurable: true
});
CytoscapeLayoutToolComponent.prototype.ngOnInit = function () {
this.formInfo = CytoscapeLayoutToolComponent.createLayoutFormInfo();
var layoutOptionsSelect = this.layoutOptionsList[5];
console.log('setting the initial selected layout, default: ', layoutOptionsSelect.name);
if (this.layoutOptions) {
console.log("setting the initial selected layout based on input/output layout " + JSON.stringify(this.layoutOptions));
this.addOrReplaceInLayoutOptionsList(this.layoutOptions);
}
console.log('Initializing this.selectedLayoutInfo with layoutOptionsSelect ', JSON.stringify(layoutOptionsSelect));
};
CytoscapeLayoutToolComponent.prototype.ngOnChanges = function (changes) {
console.log('ngOnChanges layout changes:', JSON.stringify(changes));
if (changes['layoutOptions']) {
}
};
CytoscapeLayoutToolComponent.prototype.onLayoutModelChange = function () {
console.log('Layout model change: ', JSON.stringify(this.layoutOptions));
this.changed = true;
};
CytoscapeLayoutToolComponent.prototype.onFormModelChange = function () {
console.log('onFormModelChange');
this.changed = true;
};
CytoscapeLayoutToolComponent.prototype.onApplyLayout = function () {
this.changed = false;
this.layoutOptionsChange.emit(this.layoutOptions);
};
CytoscapeLayoutToolComponent.prototype.addOrReplaceInLayoutOptionsList = function (layoutOptions) {
var matchingOptions = this.layoutOptionsList.find(function (selectOption) { return selectOption.name === layoutOptions.name; });
if (matchingOptions) {
console.log('got matching layoutOptions: ', JSON.stringify(matchingOptions));
this.layoutOptionsList.splice(this.layoutOptionsList.indexOf(matchingOptions), 1, layoutOptions);
}
else {
console.info("Did you pass a new kind of layout? The layout name " + name + " was not found, adding a new one to the top of the list.");
this.layoutOptionsList.unshift(layoutOptions);
}
};
CytoscapeLayoutToolComponent.createLayoutFormInfo = function () {
var fit = new FieldInfo('Fit', 'fit', 'boolean', 'Whether to fit to viewport');
var padding = new FieldInfo('Padding', 'padding', 'number', 'When fit to viewport, padding inside the viewport.');
var fitFieldset = new FieldsetInfo('Fit', [
fit, padding
], ['fit']);
var zoom = new FieldInfo('Zoom', 'zoom', 'number', 'the zoom level to set (likely want fit = false if set)');
var pan = new FieldInfo('Pan', 'pan', 'number', 'the pan level to set (likely want fit = false if set)');
var animate = new FieldInfo('Animate', "animate", 'boolean', "whether to transition the node positions");
var animationDuration = new FieldInfo("Animation Duration", 'animationDuration', 'number', "duration of animation in ms if enabled");
var animationEasing = new FieldInfo("Animation Easing", 'animationEasing', 'number', "easing of animation if enabled");
var animationFieldset = new FieldsetInfo('Animation', [
zoom, pan, animate, animationDuration, animationEasing
], ['animate']);
var avoidOverlap = new FieldInfo('Avoid Overlap', 'avoidOverlap', 'boolean', 'prevents node overlap, may overflow boundingBox if not enough space');
var spacingFactor = new FieldInfo('Spacing Factor', 'spacingFactor', 'number', 'Applies a multiplicative factor (>0) to expand or compress the overall area that the nodes take up');
var nodeDimensionsIncludeLabels = new FieldInfo('Node Dimensions Include Labels', 'nodeDimensionsIncludeLabels', 'boolean', 'Excludes the label when calculating node bounding boxes for the layout algorithm');
var shapedFieldset = new FieldsetInfo('Shaped', [
avoidOverlap, spacingFactor, nodeDimensionsIncludeLabels
], ['avoidOverlap']);
var directed = new FieldInfo('Directed', 'breadthFirst', 'boolean', 'whether the tree is breadthFirst downwards (or edges can point in any direction if false)');
var circle = new FieldInfo('Circle', 'circle', 'boolean', 'put depths in concentric circles if true, put depths top down if false');
var maximalAdjustments = new FieldInfo('Maximal Adjustments', 'maximalAdjustments', 'number', 'how many times to try to position the nodes in a maximal way (i.e. no backtracking)');
var maximal = new FieldInfo('Maximal', 'maximal', 'boolean', 'whether to shift nodes down their natural BFS depths in order to avoid upwards edges (DAGS only)');
var grid = new FieldInfo('Grid', 'grid', 'boolean', 'whether to shift nodes down their natural BFS depths in order to avoid upwards edges (DAGS only)');
var roots = new FieldInfo('Roots', 'roots', 'string', 'the roots of the trees');
var breadthFirstFieldset = new FieldsetInfo('Breadth First', [
directed, circle, maximalAdjustments, maximal, grid, roots
], ['breadthFirst']);
var nodeSep = new FieldInfo('Node Separation', 'nodeSep', 'number', 'the separation between adjacent nodes in the same rank');
var edgeSep = new FieldInfo('Edge Separation', 'edgeSep', 'number', 'the separation between adjacent edges in the same rank');
var rankSep = new FieldInfo('Rank Separation', 'rankSep', 'number', 'the separation between each rank in the layout');
var ranker = new FieldInfo('Ranker', 'ranker', 'options', 'Type of algorithm to assign a rank to each node in the input graph.');
ranker.options = [
{ name: '', label: '' },
{ name: 'network-simplex', label: 'network-simplex' },
{ name: 'tight-tree', label: 'tight-tree' },
{ name: 'longest-path', label: 'longest-path' }
];
var dagreFieldset = new FieldsetInfo('Dagre', [
nodeSep, edgeSep, rankSep, ranker
], ['nodeSep']);
var animationThreshold = new FieldInfo('Animation Threshold', 'animationThreshold', 'number', 'The layout animates only after this many milliseconds when animate is true (prevents flashing on fast runs)');
var refresh = new FieldInfo('Refresh', 'refresh', 'number', 'Number of iterations between consecutive screen positions update');
var randomize = new FieldInfo('Randomize', 'randomize', 'boolean', 'Randomize the initial positions of the nodes (true) or use existing positions (false)');
var componentSpacing = new FieldInfo('Component Spacing', 'componentSpacing', 'number', 'Extra spacing between components in non-compound graphs');
var nodeOverlap = new FieldInfo('Node Overlap', 'nodeOverlap', 'number', 'Node repulsion (overlapping) multiplier');
var nestingFactor = new FieldInfo('Nesting Factor', 'nestingFactor', 'number', 'Nesting factor (multiplier) to compute ideal edge length for nested edges');
var gravity = new FieldInfo('Gravity', 'gravity', 'number', 'Gravity force (constant)');
var numIter = new FieldInfo('Max Iterations', 'numIter', 'number', 'Maximum number of iterations to perform');
var initialTemp = new FieldInfo('Initial Temp', 'initialTemp', 'number', 'Initial temperature (maximum node displacement)');
var coolingFactor = new FieldInfo('Cooling Factor', 'coolingFactor', 'number', 'Cooling factor (how the temperature is reduced between consecutive iterations');
var minTemp = new FieldInfo('Min. Temp', 'minTemp', 'number', 'Lower temperature threshold (below this point the layout will end)');
var coseFieldset = new FieldsetInfo('COSE', [
animationThreshold, refresh, randomize, componentSpacing, nodeOverlap, nestingFactor, gravity, numIter,
initialTemp, coolingFactor, minTemp
], ['coolingFactor']);
var avoidOverlapPadding = new FieldInfo('avoidOverlapPadding', 'avoidOverlapPadding', 'number', 'extra spacing around nodes when avoidOverlap: true');
var condense = new FieldInfo('condense', 'condense', 'boolean', 'uses all available space on false, uses minimal space on true');
var rows = new FieldInfo('Rows', 'rows', 'number', 'force num of rows in the grid');
var cols = new FieldInfo('Columns', 'cols', 'number', 'force num of columns in the grid');
var gridFieldset = new FieldsetInfo('Grid', [
avoidOverlapPadding, condense, rows, cols
], ['cols']);
var radius = new FieldInfo('Radius', 'radius', 'number', 'the radius of the circle');
var startAngle = new FieldInfo('Start Angle', 'startAngle', 'number', 'where nodes start in radians (default:3 / 2 * Math.PI)');
var sweep = new FieldInfo('Sweep', 'sweep', 'number', 'how many radians should be between the first and last node (defaults to full circle)');
var clockwise = new FieldInfo('Clockwise', 'clockwise', 'number', 'whether the layout should go clockwise (true) or counterclockwise/anticlockwise (false)');
var circularFieldSet = new FieldsetInfo('Circular', [
radius, startAngle, sweep, clockwise
], ['clockwise']);
var equidistant = new FieldInfo('Equidistant', 'equidistant', 'boolean', 'whether levels have an equal radial distance betwen them, may cause bounding box overflow');
var minNodeSpacing = new FieldInfo('Min. Node Spacing', 'minNodeSpacing', 'number', 'min spacing between outside of nodes (used for radius adjustment)');
var height = new FieldInfo('Height', 'height', 'number', '');
var width = new FieldInfo('Width', 'width', 'number', '');
var concentricFieldSet = new FieldsetInfo('Concentric', [
equidistant, minNodeSpacing, startAngle, height, width
], ['equidistant']);
//boundingBox: undefined // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
return new FormInfo('Layout', [
breadthFirstFieldset, coseFieldset, dagreFieldset, gridFieldset, circularFieldSet, concentricFieldSet,
fitFieldset, animationFieldset, shapedFieldset
], false);
};
return CytoscapeLayoutToolComponent;
}());
CytoscapeLayoutToolComponent.LAYOUT_FORM_INFO = CytoscapeLayoutToolComponent.createLayoutFormInfo();
CytoscapeLayoutToolComponent.ɵfac = function CytoscapeLayoutToolComponent_Factory(t) { return new (t || CytoscapeLayoutToolComponent)(); };
CytoscapeLayoutToolComponent.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: CytoscapeLayoutToolComponent, selectors: [["cytoscape-layout-tool"]], viewQuery: function CytoscapeLayoutToolComponent_Query(rf, ctx) {
if (rf & 1) {
i0__namespace.ɵɵviewQuery(_c0$1, 5);
}
if (rf & 2) {
var _t = void 0;
i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.layoutForm = _t.first);
}
}, inputs: { layoutOptions: "layoutOptions" }, outputs: { layoutOptionsChange: "layoutOptionsChange" }, features: [i0__namespace.ɵɵNgOnChangesFeature], decls: 8, vars: 5, consts: [[2, "display", "flex"], [1, "layout-header"], ["name", "selectedLayoutInfo", "optionLabel", "name", 1, "layout-dropdown", 3, "options", "ngModel", "ngModelChange"], ["pButton", "", "label", "Apply", 1, "apply-button", 3, "disabled", "click"], [3, "model", "formInfo", "modelChange"]], template: function CytoscapeLayoutToolComponent_Template(rf, ctx) {
if (rf & 1) {
i0__namespace.ɵɵelementStart(0, "div");
i0__namespace.ɵɵelementStart(1, "div", 0);
i0__namespace.ɵɵelementStart(2, "div", 1);
i0__namespace.ɵɵtext(3, "Edit Layout");
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵelementStart(4, "p-dropdown", 2);
i0__namespace.ɵɵlistener("ngModelChange", function CytoscapeLayoutToolComponent_Template_p_dropdown_ngModelChange_4_listener($event) { return ctx.layoutOptions = $event; })("ngModelChange", function CytoscapeLayoutToolComponent_Template_p_dropdown_ngModelChange_4_listener() { return ctx.onLayoutModelChange(); });
i0__namespace.ɵɵtext(5, " >");
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵelementStart(6, "button", 3);
i0__namespace.ɵɵlistener("click", function CytoscapeLayoutToolComponent_Template_button_click_6_listener() { return ctx.onApplyLayout(); });
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵelementStart(7, "cyng-fluid-form", 4);
i0__namespace.ɵɵlistener("modelChange", function CytoscapeLayoutToolComponent_Template_cyng_fluid_form_modelChange_7_listener() { return ctx.onFormModelChange(); });
i0__namespace.ɵɵelementEnd();
}
if (rf & 2) {
i0__namespace.ɵɵadvance(4);
i0__namespace.ɵɵproperty("options", ctx.layoutOptionsList)("ngModel", ctx.layoutOptions);
i0__namespace.ɵɵadvance(2);
i0__namespace.ɵɵproperty("disabled", !ctx.changed);
i0__namespace.ɵɵadvance(1);
i0__namespace.ɵɵproperty("model", ctx.layoutOptions)("formInfo", ctx.formInfo);
}
}, directives: [i7__namespace.Dropdown, i1__namespace.NgControlStatus, i1__namespace.NgModel, i8__namespace.ButtonDirective, FluidFormComponent], styles: ["[_nghost-%COMP%] {\n width: 400px;\n height: 2em;\n }\n\n .layout-header[_ngcontent-%COMP%] {\n width: 100%;\n height: 20px;\n }\n\n .layout-dropdown[_ngcontent-%COMP%] {\n padding-right: 10px;\n }\n\n input[_ngcontent-%COMP%]:disabled {\n background-color: rgba(204, 204, 204, .33);\n }"] });
(function () {
(typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CytoscapeLayoutToolComponent, [{
type: i0.Component,
args: [{
selector: 'cytoscape-layout-tool',
styles: [
"\n :host {\n width: 400px;\n height: 2em;\n }\n\n .layout-header {\n width: 100%;\n height: 20px;\n }\n\n .layout-dropdown {\n padding-right: 10px;\n }\n\n input:disabled {\n background-color: rgba(204, 204, 204, .33);\n }\n "
],
template: "\n <div>\n <div style=\"display: flex;\">\n <div class=\"layout-header\">Edit Layout</div>\n </div>\n <p-dropdown class=\"layout-dropdown\"\n name=\"selectedLayoutInfo\"\n [options]=\"layoutOptionsList\"\n [(ngModel)]=\"layoutOptions\"\n optionLabel=\"name\"\n (ngModelChange)=\"onLayoutModelChange()\">\n ></p-dropdown>\n <button class=\"apply-button\" pButton label=\"Apply\" [disabled]=\"!changed\" (click)=\"onApplyLayout()\"></button>\n </div>\n <cyng-fluid-form [model]=\"layoutOptions\" [formInfo]=\"formInfo\" (modelChange)=\"onFormModelChange()\"></cyng-fluid-form>\n "
}]
}], function () { return []; }, { layoutForm: [{
type: i0.ViewChild,
args: ['layoutForm']
}], layoutOptions: [{
type: i0.Input
}], layoutOptionsChange: [{
type: i0.Output
}] });
})();
var StyleFieldInfo = /** @class */ (function (_super) {
__extends(StyleFieldInfo, _super);
function StyleFieldInfo(styleName, type, hint, options) {
var _this = _super.call(this, styleName, styleName, type, hint) || this;
_this.options = options;
return _this;
}
StyleFieldInfo.prototype.fieldType = function (model) {
switch (this.type) {
case 'percent':
return 'number';
case 'ShapePolygonPoints':
case 'NodeShape':
case 'LineStyle':
case 'TextTransformation':
case 'FontStyle':
case 'FontWeight':
case 'Colour':
return 'string';
default:
return _super.prototype.fieldType.call(this, model);
}
};
return StyleFieldInfo;
}(FieldInfo));
function createStyleCoreFormInfo() {
return new FormInfo('Core Styles', [
new FieldsetInfo('Background', [
new StyleFieldInfo('active-bg-color', 'Colour', 'The colour of the indicator shown when the background is grabbed by the user.'),
new StyleFieldInfo('active-bg-opacity', 'number', 'The opacity of the active background indicator.'),
new StyleFieldInfo('active-bg-size', 'number', 'The size of the active background indicator..')
]),
new FieldsetInfo('Selection Box', [
new StyleFieldInfo('selection-box-color', 'Colour', 'The background colour of the selection box used for drag selection.'),
new StyleFieldInfo('selection-box-border-color', 'Colour', 'The colour of the border of the selection box used for drag selection.'),
new StyleFieldInfo('selection-box-border-width', 'number', 'The size of the border on the selection box.'),
new StyleFieldInfo('selection-box-opacity', 'number', 'The opacity of the selection box.'),
new StyleFieldInfo('', 'number', '')
]),
new FieldsetInfo('Texture During Viewport Gestures', [
new StyleFieldInfo('outside-texture-bg-color', 'Colour', 'The colour of the area outside the viewport texture when initOptions.textureOnViewport === true.'),
new StyleFieldInfo('outside-texture-bg-opacity', 'number', 'The opacity of the area outside the viewport texture.'),
]),
], false);
}
function fieldSorter(field1, field2) {
if (!field1) {
return field2 ? 1 : 0;
}
else if (!field2) {
return -1;
}
else {
var label1 = typeof field1.label === 'function' ? field1.label() : field1.label;
var label2 = typeof field2.label === 'function' ? field2.label() : field2.label;
return label1.localeCompare(label2);
}
}
function createStyleEdgeFieldSets() {
var fieldsetInfos = [];
return fieldsetInfos;
}
function createStyleNodeFieldSets() {
var fieldsetInfos = [];
var nodeFieldInfos = [];
nodeFieldInfos.push(new StyleFieldInfo('label', 'string', 'The text to display for an element’s label.'));
nodeFieldInfos.push(new StyleFieldInfo('source-label', 'string', 'The text to display for a node’s source label.'));
nodeFieldInfos.push(new StyleFieldInfo('target-label', 'string', 'The text to display for a node’s target label.'));
nodeFieldInfos.push(new StyleFieldInfo('color', 'Colour', 'The colour of the element’s label.'));
nodeFieldInfos.push(new StyleFieldInfo('font-family', 'string', 'A comma-separated list of font names to use on the label text.'));
/**
* https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
*/
nodeFieldInfos.push(new StyleFieldInfo('font-size', 'string', 'The size of the label text.'));
/**
* https://developer.mozilla.org/en-US/docs/Web/CSS/font-style
*/
nodeFieldInfos.push(new StyleFieldInfo('font-style', 'FontStyle', 'A CSS font style to be applied to the label text.'));
nodeFieldInfos.push(new StyleFieldInfo('font-weight', 'FontWeight', 'A CSS font weight to be applied to the label text.'));
nodeFieldInfos.push(new StyleFieldInfo('text-max-width', 'string', 'The maximum width for wrapped text, applied when "text-wrap" is set to wrap. For only manual newlines (i.e.\\n), set a very large value like 1000px such that only your newline characters would apply.'));
var textWrapStyleFieldInfo = new StyleFieldInfo('text-wrap', 'options', 'A wrapping style to apply to the label text; may be "none" for no wrapping (including manual newlines ) or "wrap" for manual and/ or autowrapping.');
textWrapStyleFieldInfo.options = [
{ label: 'none', value: 'none' },
{ label: 'wrap', value: 'wrap' },
{ label: 'ellipsis', value: 'ellipsis' }
];
nodeFieldInfos.push(textWrapStyleFieldInfo);
/**
* Node label alignment:
*/
nodeFieldInfos.push(new StyleFieldInfo('text-halign', 'options', 'The vertical alignment of a node’s label.', [
{ name: '', label: '' },
{ label: 'left', value: 'left' },
{ label: 'center', value: 'center' },
{ labe: 'right', value: 'right' }
]));
nodeFieldInfos.push(new StyleFieldInfo('text-valign', 'options', 'The vertical alignment of a node’s label.', [
{ name: '', label: '' },
{ label: 'top', value: 'top' },
{ label: 'center', value: 'center' },
{ label: 'bottom', value: 'bottom' }
]));
nodeFieldInfos.push(new StyleFieldInfo('text-opacity', 'number', 'The opacity of the label text, including its outline.'));
nodeFieldInfos.push(new StyleFieldInfo('text-transform', 'TextTransformation', 'A transformation to apply to the label text.'));
fieldsetInfos.push(new FieldsetInfo('Label', nodeFieldInfos));
nodeFieldInfos = [];
nodeFieldInfos.push(new StyleFieldInfo('content', 'string', 'The CSS content field'));
nodeFieldInfos.push(new StyleFieldInfo('width', 'string', 'The width of the node’s body. This property can take on the special value label so the width is automatically based on the node’s label.'));
nodeFieldInfos.push(new StyleFieldInfo('height', 'string', 'The height of the node’s body. This property can take on the special value label so the height is automatically based on the node’s label.'));
nodeFieldInfos.push(new StyleFieldInfo('background-color', 'Colour', 'The colour of the node’s body.'));
nodeFieldInfos.push(new StyleFieldInfo('background-blacken', 'number', ' Blackens the node’s body for values from 0 to 1; whitens the node’s body for values from 0 to -1.'));
nodeFieldInfos.push(new StyleFieldInfo('background-opacity', 'number', 'The opacity level of the node’s background colour.'));
nodeFieldInfos.push(new StyleFieldInfo('border-width', 'string', 'The size of the node’s border.'));
nodeFieldInfos.push(new StyleFieldInfo('border-style', 'LineStyle', 'The style of the node’s border.'));
nodeFieldInfos.push(new StyleFieldInfo('border-color', 'Colour', 'The colour of the node’s border.'));
nodeFieldInfos.push(new StyleFieldInfo('border-opacity', 'percent', 'The opacity of the node’s border. A value between [0 1].'));
nodeFieldInfos.push(new StyleFieldInfo('shape', 'NodeShape', 'The shape of the node’s body.'));
nodeFieldInfos.push(new StyleFieldInfo('shape-polygon-points', 'ShapePolygonPoints', ''));
nodeFieldInfos.push(new StyleFieldInfo('overlay-color', 'Colour', 'The colour of the overlay on top of nodes or edges.'));
nodeFieldInfos.push(new StyleFieldInfo('overlay-padding', 'string', 'The area outside of the element within which the overlay is shown.'));
nodeFieldInfos.push(new StyleFieldInfo('overlay-opacity', 'number', 'The opacity of the overlay.'));
nodeFieldInfos.push(new StyleFieldInfo('padding-left', 'string', ' Padding increases node dimensions by adding spacing around the label of nodes whose heights and widths are the value \'label\', or it can be used to add spacing between a compound node parent and its children.'));
nodeFieldInfos.push(new StyleFieldInfo('padding-right', 'string', ' Padding increases node dimensions by adding spacing around the label of nodes whose heights and widths are the value \'label\', or it can be used to add spacing between a compound node parent and its children.'));
nodeFieldInfos.push(new StyleFieldInfo('padding-top', 'string', ' Padding increases node dimensions by adding spacing around the label of nodes whose heights and widths are the value \'label\', or it can be used to add spacing between a compound node parent and its children.'));
nodeFieldInfos.push(new StyleFieldInfo('padding-bottom', 'string', ' Padding increases node dimensions by adding spacing around the label of nodes whose heights and widths are the value \'label\', or it can be used to add spacing between a compound node parent and its children.'));
fieldsetInfos.push(new FieldsetInfo('Node', nodeFieldInfos));
nodeFieldInfos = [];
/**
* Edge label alignment:
*/
nodeFieldInfos.push(new StyleFieldInfo('source-text-offset', 'number', 'For the source label of an edge, how far from the source node the label should be placed.'));
nodeFieldInfos.push(new StyleFieldInfo('target-text-offset', 'number', 'For the target label of an edge, how far from the target node the label should be placed.'));
/**
* Margins:
*/
nodeFieldInfos.push(new StyleFieldInfo('text-margin-x', 'number', 'A margin that shifts the label along the x- axis.'));
nodeFieldInfos.push(new StyleFieldInfo('text-margin-y', 'number', 'A margin that shifts the label along the y- axis.'));
nodeFieldInfos.push(new StyleFieldInfo('source-text-margin-x', 'number', '(For the source label of an edge.)'));
nodeFieldInfos.push(new StyleFieldInfo('source-text-margin-y', 'number', '(For the source label of an edge.)'));
nodeFieldInfos.push(new StyleFieldInfo('target-text-margin-x', 'number', '(For the target label of an edge.)'));
nodeFieldInfos.push(new StyleFieldInfo('target-text-margin-y', 'number', '(For the target label of an edge.)'));
/**
* Rotating text:
*/
nodeFieldInfos.push(new StyleFieldInfo('text-rotation', 'number', 'A rotation angle that is applied to the label. For edges, the special value autorotate can be used to align the label to the edge. For nodes, the label is rotated along its anchor point on the node, so a label margin may help for some usecases. The special value none can be used to denote 0deg. Rotations works best with left- to - right text.'));
nodeFieldInfos.push(new StyleFieldInfo('source-text-rotation', 'number', '(For the source label of an edge.)'));
nodeFieldInfos.push(new StyleFieldInfo('target-text-rotation', 'number', '(For the target label of an edge.)'));
/**
* Outline:
*/
nodeFieldInfos.push(new StyleFieldInfo('text-outline-color', 'Colour', 'The colour of the outline around the element’s label text.'));
nodeFieldInfos.push(new StyleFieldInfo('text-outline-opacity', 'number', 'The opacity of the outline on label text.'));
nodeFieldInfos.push(new StyleFieldInfo('text-outline-width', 'string', 'The size of the outline on label text.'));
/**
* Shadow:
*/
nodeFieldInfos.push(new StyleFieldInfo('text-shadow-blur', 'number', 'The shadow blur distance.'));
nodeFieldInfos.push(new StyleFieldInfo('text-shadow-color', 'Colour', 'The colour of the shadow.'));
nodeFieldInfos.push(new StyleFieldInfo('text-shadow-offset-x', 'number', 'The x offset relative to the text where the shadow will be displayed, can be negative. If you set blur to 0, add an offset to view your shadow.'));
nodeFieldInfos.push(new StyleFieldInfo('text-shadow-offset-y', 'number', 'The y offset relative to the text where the shadow will be displayed, can be negative. If you set blur to 0, add an offset to view your shadow.'));
nodeFieldInfos.push(new StyleFieldInfo('text-shadow-opacity', 'number', 'The opacity of the shadow on the text; the shadow is disabled for 0 (default value).'));
/**
* Background:
*/
nodeFieldInfos.push(new StyleFieldInfo('text-background-padding', 'string', 'The padding provides visual spacing between the text and the edge of the background.'));
nodeFieldInfos.push(new StyleFieldInfo('text-background-color', 'Colour', 'A colour to apply on the text background.'));
nodeFieldInfos.push(new StyleFieldInfo('text-background-opacity', 'number', 'The opacity of the label background; the background is disabled for 0 (default value).'));
nodeFieldInfos.push(new StyleFieldInfo('text-background-shape', 'options', 'The shape to use for the label background.', [
{ name: '', label: '' },
{ label: 'rectangle', value: 'rectangle' },
{ label: 'roundrectangle', value: 'roundrectangle' }
]));
nodeFieldInfos.push(new StyleFieldInfo('text-border-opacity', 'number', 'The width of the border around the label; the border is disabled for 0 (default value).'));
nodeFieldInfos.push(new StyleFieldInfo('text-border-width', 'number', 'The width of the border around the label.'));
nodeFieldInfos.push(new StyleFieldInfo('text-border-style', 'LineStyle', 'The style of the border around the label.'));
nodeFieldInfos.push(new StyleFieldInfo('text-border-color', 'Colour', 'The colour of the border around the label.'));
fieldsetInfos.push(new FieldsetInfo('Advanced Text', nodeFieldInfos));
nodeFieldInfos = [];
/**
* Interactivity:
*/
nodeFieldInfos.push(new StyleFieldInfo('min-zoomed-font-size', 'number', 'If zooming makes the effective font size of the label smaller than this, then no label is shown.Note that because of performance optimisations, the label may be shown at font sizes slightly smaller than this value. This effect is more pronounced at larger screen pixel ratios. However, it is guaranteed that the label will be shown at sizes equal to or greater than the value specified.'));
nodeFieldInfos.push(new StyleFieldInfo('text-events', 'options', 'Whether events should occur on an element if the label receives an event. You may want a style applied to the text onactive so you know the text is activatable.', [
{ label: 'yes', value: 'yes' },
{ label: 'no', value: 'no' }
]));
fieldsetInfos.push(new FieldsetInfo('Interactivity', nodeFieldInfos));
return fieldsetInfos;
}
/**
* Defaults to a blank node
*/
var StylesheetImpl = /** @class */ (function () {
function StylesheetImpl(selector, style) {
if (selector === void 0) { selector = 'node'; }
if (style === void 0) { style = {}; }
this.selector = selector;
this.style = style;
}
return StylesheetImpl;
}());
var _c0 = ["styleForm"];
var _c1 = ["selectorDropDown"];
function CytoscapeStyleToolComponent_ng_container_20_Template(rf, ctx) {
if (rf & 1) {
i0__namespace.ɵɵelementContainerStart(0);
i0__namespace.ɵɵelementStart(1, "div");
i0__namespace.ɵɵtext(2, " Please select a ");
i0__namespace.ɵɵelementStart(3, "a", 5);
i0__namespace.ɵɵtext(4, "selector");
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵtext(5, " above or type a selector name and click \"Add\" to create a new stylesheet for that selector.");
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵelementContainerEnd();
}
}
function CytoscapeStyleToolComponent_ng_container_21_Template(rf, ctx) {
if (rf & 1) {
var _r6_1 = i0__namespace.ɵɵgetCurrentView();
i0__namespace.ɵɵelementContainerStart(0);
i0__namespace.ɵɵelementStart(1, "cyng-fluid-form", 12);
i0__namespace.ɵɵlistener("modelChange", function CytoscapeStyleToolComponent_ng_container_21_Template_cyng_fluid_form_modelChange_1_listener() { i0__namespace.ɵɵrestoreView(_r6_1); var ctx_r5 = i0__namespace.ɵɵnextContext(); return ctx_r5.onFormModelChange(); });
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵelementContainerEnd();
}
if (rf & 2) {
var ctx_r2 = i0__namespace.ɵɵnextContext();
i0__namespace.ɵɵadvance(1);
i0__namespace.ɵɵproperty("model", ctx_r2.selectedStyleSheet.style)("formInfo", ctx_r2.nodeFormInfo);
}
}
function CytoscapeStyleToolComponent_ng_container_22_Template(rf, ctx) {
if (rf & 1) {
var _r8_1 = i0__namespace.ɵɵgetCurrentView();
i0__namespace.ɵɵelementContainerStart(0);
i0__namespace.ɵɵelementStart(1, "cyng-fluid-form", 12);
i0__namespace.ɵɵlistener("modelChange", function CytoscapeStyleToolComponent_ng_container_22_Template_cyng_fluid_form_modelChange_1_listener() { i0__namespace.ɵɵrestoreView(_r8_1); var ctx_r7 = i0__namespace.ɵɵnextContext(); return ctx_r7.onFormModelChange(); });
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵelementContainerEnd();
}
if (rf & 2) {
var ctx_r3 = i0__namespace.ɵɵnextContext();
i0__namespace.ɵɵadvance(1);
i0__namespace.ɵɵproperty("model", ctx_r3.selectedStyleSheet.style)("formInfo", ctx_r3.edgeFormInfo);
}
}
function CytoscapeStyleToolComponent_ng_container_23_Template(rf, ctx) {
if (rf & 1) {
var _r10_1 = i0__namespace.ɵɵgetCurrentView();
i0__namespace.ɵɵelementContainerStart(0);
i0__namespace.ɵɵelementStart(1, "cyng-fluid-form", 12);
i0__namespace.ɵɵlistener("modelChange", function CytoscapeStyleToolComponent_ng_container_23_Template_cyng_fluid_form_modelChange_1_listener() { i0__namespace.ɵɵrestoreView(_r10_1); var ctx_r9 = i0__namespace.ɵɵnextContext(); return ctx_r9.onFormModelChange(); });
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵelementContainerEnd();
}
if (rf & 2) {
var ctx_r4 = i0__namespace.ɵɵnextContext();
i0__namespace.ɵɵadvance(1);
i0__namespace.ɵɵproperty("model", ctx_r4.selectedStyleSheet.style)("formInfo", ctx_r4.coreFormInfo);
}
}
var _c2 = function () { return { "width": "70%" }; };
var CytoscapeStyleToolComponent = /** @class */ (function () {
function CytoscapeStyleToolComponent() {
this.enableAdd = false;
this.stylesChange = new i0.EventEmitter();
this.styleSelectorChange = new i0.EventEmitter();
this.changed = false;
}
Object.defineProperty(CytoscapeStyleToolComponent.prototype, "styles", {
get: function () {
return this._styles;
},
set: function (styles) {
this._styles = styles;
},
enumerable: false,
configurable: true
});
CytoscapeStyleToolComponent.prototype.ngOnInit = function () {
this.coreFormInfo = createStyleCoreFormInfo();
this.nodeFormInfo = new FormInfo('Node', createStyleNodeFieldSets());
this.edgeFormInfo = new FormInfo('Edge', createStyleEdgeFieldSets());
if (!this.styles) {
this.styles = [new StylesheetImpl()];
}
this.setSelectorsFromStyles(null);
this.selectedStyleSheet = this.selectors[0];
console.log("this.selectors.length:", this.selectors.length);
};
CytoscapeStyleToolComponent.prototype.ngOnChanges = function (changes) {
console.log('ngOnChanges style changes:', JSON.stringify(changes));
if (changes['styles']) {
this.setSelectorsFromStyles(null);
this.selectedStyleSheet = this.selectors[0];
console.log("styles updated this.selectors.length:", this.selectors.length);
}
};
CytoscapeStyleToolComponent.prototype.ngAfterViewInit = function () {
// console.debug("ngAfterViewInit")
};
CytoscapeStyleToolComponent.prototype.ngAfterViewChecked = function () {
// console.debug("ngAfterViewChecked")
};
CytoscapeStyleToolComponent.prototype.onFormModelChange = function () {
console.log('onFormModelChange');
this.changed = true;
};
CytoscapeStyleToolComponent.prototype.onApplyStyle = function () {
this.changed = false;
this.stylesChange.emit(this.styles);
};
CytoscapeStyleToolComponent.prototype.search = function (event) {
var searchString = event.query;
this.setSelectorsFromStyles(searchString);
};
CytoscapeStyleToolComponent.prototype.setSelectorsFromStyles = function (searchString) {
this.selectors = this.styles.filter(function (stylesheet) {
return searchString ? stylesheet.selector.includes(searchString) : true;
});
};
CytoscapeStyleToolComponent.prototype.onAddSelector = function () {
var newStylesheetStyle = new StylesheetImpl();
newStylesheetStyle.selector = this.lastValidSelectorModelText;
console.log('Adding new style with selector:', this.lastValidSelectorModelText);
this.styles.unshift(newStylesheetStyle);
this.selectedStyleSheet = newStylesheetStyle;
};
/*
* The param can be a selector object when the user selects a stylesheet entry from the dropdown and changes the
* selection (which will fire a selection change to let the graph, say, focus on the selected node).
* or the param is text if the user is just typing in the field, which doens't change the selector untl the user
* clicks Add.
*/
CytoscapeStyleToolComponent.prototype.onSelectorModelChange = function (param) {
console.log("selectorModelChanged:" + JSON.stringify(param));
var selector = param.selector ? param.selector : param;
var stylesheet = param.selector ? param : this.getStylesheetForSelector(selector);
if (stylesheet) {
if (this.changed) {
this.onApplyStyle();
}
this.styleSelectorChange.emit(selector);
}
else {
this.enableAdd = this.isValidSelector(selector);
if (this.enableAdd) {
this.lastValidSelectorModelText = selector;
}
else {
this.lastValidSelectorModelText = null;
}
}
};
CytoscapeStyleToolComponent.prototype.getStylesheetForSelector = function (selectorName) {
this.selectors.forEach(function (selector) {
if (selector.selector === selectorName) {
return selector;
}
});
return null;
};
CytoscapeStyleToolComponent.prototype.isValidSelector = function (text) {
console.log('isValidSelector:', text);
if ((text === null || text === void 0 ? void 0 : text.startsWith('node')) || (text === null || text === void 0 ? void 0 : text.startsWith('edge')) || (text === null || text === void 0 ? void 0 : text.startsWith('core'))) {
var openBracket = text.indexOf('[');
if (openBracket > -1) {
if (text.indexOf(']') < openBracket) {
return false;
}
}
var openQuote = text.indexOf('\'');
if (openQuote > -1) {
var closeQuote = text.indexOf('\'', openQuote + 1);
if (closeQuote < openQuote) {
return false;
}
}
return true;
}
return false;
};
return CytoscapeStyleToolComponent;
}());
CytoscapeStyleToolComponent.ɵfac = function CytoscapeStyleToolComponent_Factory(t) { return new (t || CytoscapeStyleToolComponent)(); };
CytoscapeStyleToolComponent.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: CytoscapeStyleToolComponent, selectors: [["cytoscape-style-tool"]], viewQuery: function CytoscapeStyleToolComponent_Query(rf, ctx) {
if (rf & 1) {
i0__namespace.ɵɵviewQuery(_c0, 5);
i0__namespace.ɵɵviewQuery(_c1, 5);
}
if (rf & 2) {
var _t = void 0;
i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.styleForm = _t.first);
i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.selectorDropDown = _t.first);
}
}, inputs: { styles: "styles" }, outputs: { stylesChange: "stylesChange", styleSelectorChange: "styleSelectorChange" }, features: [i0__namespace.ɵɵNgOnChangesFeature], decls: 24, vars: 14, consts: [[2, "display", "flex"], [1, "style-header"], [1, "selectors-container"], ["pButton", "", "label", "\u00A0\u00A0Add\u00A0\u00A0", 1, "add-button", 3, "disabled", "click"], ["for", "selectorDropDown"], ["href", "https://js.cytoscape.org/#selectors"], ["id", "selectorDropDown", "placeholder", "Selector", "field", "selector", "dataKey", "selector", "completeOnFocus", "true", "dropdown", "true", "autofocus", "true", 1, "selector-drop-down", 3, "ngModel", "suggestions", "inputStyle", "ngModelChange", "completeMethod"], ["selectorDropDown", ""], [1, "apply-div"], ["pButton", "", "label", "Apply", 1, "apply-button", 3, "disabled", "click"], [1, "selector-span"], [4, "ngIf"], [3, "model", "formInfo", "modelChange"]], template: function CytoscapeStyleToolComponent_Template(rf, ctx) {
if (rf & 1) {
i0__namespace.ɵɵelementStart(0, "div");
i0__namespace.ɵɵelementStart(1, "div", 0);
i0__namespace.ɵɵelementStart(2, "h3", 1);
i0__namespace.ɵɵtext(3, "Edit Styles");
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵelementStart(4, "div", 2);
i0__namespace.ɵɵelementStart(5, "button", 3);
i0__namespace.ɵɵlistener("click", function CytoscapeStyleToolComponent_Template_button_click_5_listener() { return ctx.onAddSelector(); });
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵelementStart(6, "span");
i0__namespace.ɵɵtext(7, "\u00A0\u00A0");
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵelementStart(8, "label", 4);
i0__namespace.ɵɵelementStart(9, "a", 5);
i0__namespace.ɵɵtext(10, "Selectors");
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵelementStart(11, "p-autoComplete", 6, 7);
i0__namespace.ɵɵlistener("ngModelChange", function CytoscapeStyleToolComponent_Template_p_autoComplete_ngModelChange_11_listener($event) { return ctx.selectedStyleSheet = $event; })("completeMethod", function CytoscapeStyleToolComponent_Template_p_autoComplete_completeMethod_11_listener($event) { return ctx.search($event); })("ngModelChange", function CytoscapeStyleToolComponent_Template_p_autoComplete_ngModelChange_11_listener($event) { return ctx.onSelectorModelChange($event); });
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵelement(13, "hr");
i0__namespace.ɵɵelementStart(14, "div", 8);
i0__namespace.ɵɵelementStart(15, "button", 9);
i0__namespace.ɵɵlistener("click", function CytoscapeStyleToolComponent_Template_button_click_15_listener() { return ctx.onApplyStyle(); });
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵelementStart(16, "span", 10);
i0__namespace.ɵɵtext(17, "Selector ");
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵelementStart(18, "span");
i0__namespace.ɵɵtext(19);
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵtemplate(20, CytoscapeStyleToolComponent_ng_container_20_Template, 6, 0, "ng-container", 11);
i0__namespace.ɵɵtemplate(21, CytoscapeStyleToolComponent_ng_container_21_Template, 2, 2, "ng-container", 11);
i0__namespace.ɵɵtemplate(22, CytoscapeStyleToolComponent_ng_container_22_Template, 2, 2, "ng-container", 11);
i0__namespace.ɵɵtemplate(23, CytoscapeStyleToolComponent_ng_container_23_Template, 2, 2, "ng-container", 11);
}
if (rf & 2) {
i0__namespace.ɵɵadvance(5);
i0__namespace.ɵɵproperty("disabled", !ctx.enableAdd);
i0__namespace.ɵɵadvance(6);
i0__namespace.ɵɵstyleMap(i0__namespace.ɵɵpureFunction0(12, _c2));
i0__namespace.ɵɵproperty("ngModel", ctx.selectedStyleSheet)("suggestions", ctx.selectors)("inputStyle", i0__namespace.ɵɵpureFunction0(13, _c2));
i0__namespace.ɵɵadvance(4);
i0__namespace.ɵɵproperty("disabled", !ctx.changed);
i0__namespace.ɵɵadvance(4);
i0__namespace.ɵɵtextInterpolate(ctx.selectedStyleSheet.selector);
i0__namespace.ɵɵadvance(1);
i0__namespace.ɵɵproperty("ngIf", !ctx.selectedStyleSheet);
i0__namespace.ɵɵadvance(1);
i0__namespace.ɵɵproperty("ngIf", ctx.selectedStyleSheet == null ? null : ctx.selectedStyleSheet.selector == null ? null : ctx.selectedStyleSheet.selector.startsWith("node"));
i0__namespace.ɵɵadvance(1);
i0__namespace.ɵɵproperty("ngIf", ctx.selectedStyleSheet == null ? null : ctx.selectedStyleSheet.selector == null ? null : ctx.selectedStyleSheet.selector.startsWith("edge"));
i0__namespace.ɵɵadvance(1);
i0__namespace.ɵɵproperty("ngIf", ctx.selectedStyleSheet == null ? null : ctx.selectedStyleSheet.selector == null ? null : ctx.selectedStyleSheet.selector.startsWith("core"));
}
}, directives: [i8__namespace.ButtonDirective, i2__namespace$2.AutoComplete, i1__namespace.NgControlStatus, i1__namespace.NgModel, i2__namespace.NgIf, FluidFormComponent], styles: [".selectors-container[_ngcontent-%COMP%] {\n display: flex;\n align-items: baseline;\n flex-wrap: nowrap;\n flex-grow: 0;\n }\n\n label[for=\"selectorDropDown\"][_ngcontent-%COMP%] {\n font-size: 125%;\n font-weight: bold;\n }\n\n .selector-drop-down[_ngcontent-%COMP%] {\n flex-grow: 1;\n padding: 10px;\n }\n\n .selector-span[_ngcontent-%COMP%] {\n padding: 10px;\n font-size: 125%;\n font-weight: bold;\n }\n .add-button[_ngcontent-%COMP%] {\n\n }\n .apply-button[_ngcontent-%COMP%] {\n }"] });
(function () {
(typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CytoscapeStyleToolComponent, [{
type: i0.Component,
args: [{
selector: 'cytoscape-style-tool',
template: "\n <div>\n <div style=\"display: flex;\">\n <h3 class=\"style-header\">Edit Styles</h3>\n </div>\n <div class=\"selectors-container\">\n <button class=\"add-button\" pButton label=\" Add \"\n [disabled]=\"!enableAdd\" (click)=\"onAddSelector()\"></button>\n <span> </span>\n <label for=\"selectorDropDown\"><a href=\"https://js.cytoscape.org/#selectors\">Selectors</a></label>\n <p-autoComplete #selectorDropDown id=\"selectorDropDown\" class=\"selector-drop-down\"\n placeholder=\"Selector\"\n [(ngModel)]=\"selectedStyleSheet\"\n [suggestions]=\"selectors\"\n field=\"selector\"\n dataKey=\"selector\"\n completeOnFocus=\"true\"\n dropdown=\"true\"\n autofocus=\"true\"\n [style]=\"{'width':'70%'}\"\n [inputStyle]=\"{'width':'70%'}\"\n (completeMethod)=\"search($event)\"\n (ngModelChange)=\"onSelectorModelChange($event)\">\n </p-autoComplete>\n </div>\n </div>\n <hr>\n <div class=\"apply-div\">\n <button class=\"apply-button\" pButton label=\"Apply\" [disabled]=\"!changed\" (click)=\"onApplyStyle()\"></button>\n <span class=\"selector-span\">Selector </span><span>{{selectedStyleSheet.selector}}</span>\n </div>\n <ng-container *ngIf=\"!selectedStyleSheet\">\n <div> Please select a <a href=\"https://js.cytoscape.org/#selectors\">selector</a> above or type a selector name\n and click \"Add\" to create a new stylesheet for that selector.</div>\n </ng-container>\n <ng-container *ngIf=\"selectedStyleSheet?.selector?.startsWith('node')\">\n <cyng-fluid-form [model]=\"selectedStyleSheet.style\"\n [formInfo]=\"nodeFormInfo\"\n (modelChange)=\"onFormModelChange()\">\n </cyng-fluid-form>\n </ng-container>\n <ng-container *ngIf=\"selectedStyleSheet?.selector?.startsWith('edge')\">\n <cyng-fluid-form [model]=\"selectedStyleSheet.style\"\n [formInfo]=\"edgeFormInfo\"\n (modelChange)=\"onFormModelChange()\">\n </cyng-fluid-form>\n </ng-container>\n <ng-container *ngIf=\"selectedStyleSheet?.selector?.startsWith('core')\">\n <cyng-fluid-form [model]=\"selectedStyleSheet.style\"\n [formInfo]=\"coreFormInfo\"\n (modelChange)=\"onFormModelChange()\">\n </cyng-fluid-form>\n </ng-container>\n ",
styles: ["\n .selectors-container {\n display: flex;\n align-items: baseline;\n flex-wrap: nowrap;\n flex-grow: 0;\n }\n\n label[for=\"selectorDropDown\"] {\n font-size: 125%;\n font-weight: bold;\n }\n\n .selector-drop-down {\n flex-grow: 1;\n padding: 10px;\n }\n\n .selector-span {\n padding: 10px;\n font-size: 125%;\n font-weight: bold;\n }\n .add-button {\n\n }\n .apply-button {\n }\n "]
}]
}], function () { return []; }, { styleForm: [{
type: i0.ViewChild,
args: ['styleForm']
}], selectorDropDown: [{
type: i0.ViewChild,
args: ['selectorDropDown']
}], styles: [{
type: i0.Input
}], stylesChange: [{
type: i0.Output
}], styleSelectorChange: [{
type: i0.Output
}] });
})();
var _CytoscapeGraphToolbarComponent__layoutOptions, _CytoscapeGraphToolbarComponent__styles;
function CytoscapeGraphToolbarComponent_ng_template_3_Template(rf, ctx) {
if (rf & 1) {
var _r9_1 = i0__namespace.ɵɵgetCurrentView();
i0__namespace.ɵɵelementStart(0, "cytoscape-layout-tool", 8);
i0__namespace.ɵɵlistener("layoutOptionsChange", function CytoscapeGraphToolbarComponent_ng_template_3_Template_cytoscape_layout_tool_layoutOptionsChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r9_1); var ctx_r8 = i0__namespace.ɵɵnextContext(); return ctx_r8.layoutOptions = $event; });
i0__namespace.ɵɵelementEnd();
}
if (rf & 2) {
var ctx_r1 = i0__namespace.ɵɵnextContext();
i0__namespace.ɵɵproperty("layoutOptions", ctx_r1.layoutOptions);
}
}
function CytoscapeGraphToolbarComponent_p_button_4_Template(rf, ctx) {
if (rf & 1) {
var _r11_1 = i0__namespace.ɵɵgetCurrentView();
i0__namespace.ɵɵelementStart(0, "p-button", 9);
i0__namespace.ɵɵlistener("click", function CytoscapeGraphToolbarComponent_p_button_4_Template_p_button_click_0_listener($event) { i0__namespace.ɵɵrestoreView(_r11_1); i0__namespace.ɵɵnextContext(); var _r0 = i0__namespace.ɵɵreference(2); return _r0.toggle($event); });
i0__namespace.ɵɵpipe(1, "titlecase");
i0__namespace.ɵɵelementEnd();
}
if (rf & 2) {
var ctx_r2 = i0__namespace.ɵɵnextContext();
i0__namespace.ɵɵclassProp("max-button-width", ctx_r2.direction === "column");
i0__namespace.ɵɵpropertyInterpolate1("label", "", i0__namespace.ɵɵpipeBind1(1, 3, ctx_r2.layoutOptions.name), " Layout");
}
}
function CytoscapeGraphToolbarComponent_ng_template_7_Template(rf, ctx) {
if (rf & 1) {
var _r13_1 = i0__namespace.ɵɵgetCurrentView();
i0__namespace.ɵɵelementStart(0, "cytoscape-style-tool", 10);
i0__namespace.ɵɵlistener("stylesChange", function CytoscapeGraphToolbarComponent_ng_template_7_Template_cytoscape_style_tool_stylesChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r13_1); var ctx_r12 = i0__namespace.ɵɵnextContext(); return ctx_r12.styles = $event; })("stylesChange", function CytoscapeGraphToolbarComponent_ng_template_7_Template_cytoscape_style_tool_stylesChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r13_1); var ctx_r14 = i0__namespace.ɵɵnextContext(); return ctx_r14.onStylesChange($event); })("styleSelectorChange", function CytoscapeGraphToolbarComponent_ng_template_7_Template_cytoscape_style_tool_styleSelectorChange_0_listener($event) { i0__namespace.ɵɵrestoreView(_r13_1); var ctx_r15 = i0__namespace.ɵɵnextContext(); return ctx_r15.onStyleSelectorChange($event); });
i0__namespace.ɵɵelementEnd();
}
if (rf & 2) {
var ctx_r4 = i0__namespace.ɵɵnextContext();
i0__namespace.ɵɵproperty("styles", ctx_r4.styles);
}
}
function CytoscapeGraphToolbarComponent_p_button_8_Template(rf, ctx) {
if (rf & 1) {
var _r17_1 = i0__namespace.ɵɵgetCurrentView();
i0__namespace.ɵɵelementStart(0, "p-button", 11);
i0__namespace.ɵɵlistener("click", function CytoscapeGraphToolbarComponent_p_button_8_Template_p_button_click_0_listener($event) { i0__namespace.ɵɵrestoreView(_r17_1); i0__namespace.ɵɵnextContext(); var _r3 = i0__namespace.ɵɵreference(6); return _r3.toggle($event); });
i0__namespace.ɵɵelementEnd();
}
if (rf & 2) {
var ctx_r5 = i0__namespace.ɵɵnextContext();
i0__namespace.ɵɵclassProp("max-button-width", ctx_r5.direction === "column");
}
}
function CytoscapeGraphToolbarComponent_span_9_Template(rf, ctx) {
if (rf & 1) {
i0__namespace.ɵɵelementStart(0, "span", 12);
i0__namespace.ɵɵtext(1);
i0__namespace.ɵɵelementEnd();
}
if (rf & 2) {
var ctx_r6 = i0__namespace.ɵɵnextContext();
i0__namespace.ɵɵadvance(1);
i0__namespace.ɵɵtextInterpolate1("", ctx_r6.nodes.length, " Nodes \u00A0");
}
}
function CytoscapeGraphToolbarComponent_span_10_Template(rf, ctx) {
if (rf & 1) {
i0__namespace.ɵɵelementStart(0, "span", 12);
i0__namespace.ɵɵtext(1);
i0__namespace.ɵɵelementEnd();
}
if (rf & 2) {
var ctx_r7 = i0__namespace.ɵɵnextContext();
i0__namespace.ɵɵadvance(1);
i0__namespace.ɵɵtextInterpolate1("", ctx_r7.edges.length, " Edges");
}
}
var CytoscapeGraphToolbarComponent = /** @class */ (function () {
function CytoscapeGraphToolbarComponent() {
this.direction = 'row';
_CytoscapeGraphToolbarComponent__layoutOptions.set(this, void 0);
this.layoutOptionsChange = new i0.EventEmitter();
_CytoscapeGraphToolbarComponent__styles.set(this, void 0);
this.stylesChange = new i0.EventEmitter();
this.styleSelectorChange = new i0.EventEmitter();
}
Object.defineProperty(CytoscapeGraphToolbarComponent.prototype, "layoutOptions", {
get: function () {
return __classPrivateFieldGet(this, _CytoscapeGraphToolbarComponent__layoutOptions, "f");
},
set: function (value) {
console.log("Graph toolbar gets new layout options " + JSON.stringify(value));
__classPrivateFieldSet(this, _CytoscapeGraphToolbarComponent__layoutOptions, value, "f");
this.layoutOptionsChange.emit(__classPrivateFieldGet(this, _CytoscapeGraphToolbarComponent__layoutOptions, "f"));
},
enumerable: false,
configurable: true
});
Object.defineProperty(CytoscapeGraphToolbarComponent.prototype, "styles", {
get: function () {
return __classPrivateFieldGet(this, _CytoscapeGraphToolbarComponent__styles, "f");
},
set: function (styles) {
__classPrivateFieldSet(this, _CytoscapeGraphToolbarComponent__styles, styles, "f");
this.stylesChange.emit(__classPrivateFieldGet(this, _CytoscapeGraphToolbarComponent__styles, "f"));
},
enumerable: false,
configurable: true
});
CytoscapeGraphToolbarComponent.prototype.ngOnInit = function () {
};
CytoscapeGraphToolbarComponent.prototype.onStyleSelectorChange = function (selector) {
console.log("onStyleSelectorChange: selector");
this.styleSelectorChange.emit(selector);
};
CytoscapeGraphToolbarComponent.prototype.onStylesChange = function (stylesheet) {
console.log("onStylesChange");
this.styles = stylesheet;
};
return CytoscapeGraphToolbarComponent;
}());
_CytoscapeGraphToolbarComponent__layoutOptions = new WeakMap(), _CytoscapeGraphToolbarComponent__styles = new WeakMap();
CytoscapeGraphToolbarComponent.ɵfac = function CytoscapeGraphToolbarComponent_Factory(t) { return new (t || CytoscapeGraphToolbarComponent)(); };
CytoscapeGraphToolbarComponent.ɵcmp = /*@__PURE__*/ i0__namespace.ɵɵdefineComponent({ type: CytoscapeGraphToolbarComponent, selectors: [["cytoscape-graph-toolbar"]], inputs: { nodes: "nodes", edges: "edges", direction: "direction", layoutOptions: "layoutOptions", styles: "styles", showLayoutToolbarButton: "showLayoutToolbarButton", showStyleToolbarButton: "showStyleToolbarButton", showToolbarButtons: "showToolbarButtons" }, outputs: { layoutOptionsChange: "layoutOptionsChange", stylesChange: "stylesChange", styleSelectorChange: "styleSelectorChange" }, decls: 11, vars: 12, consts: [[1, "toolbar-container"], [3, "dismissable", "showCloseIcon"], ["layoutToolbaroverlay", ""], ["pTemplate", ""], ["pTooltip", "Layout Settings...", "icon", "pi pi-sliders-v", 3, "label", "max-button-width", "click", 4, "ngIf"], ["styleToolbaroverlay", ""], ["label", "Style", "pTooltip", "Styling...", "icon", "pi pi-palette", 3, "max-button-width", "click", 4, "ngIf"], ["class", "graph-data", 4, "ngIf"], [3, "layoutOptions", "layoutOptionsChange"], ["pTooltip", "Layout Settings...", "icon", "pi pi-sliders-v", 3, "label", "click"], [3, "styles", "stylesChange", "styleSelectorChange"], ["label", "Style", "pTooltip", "Styling...", "icon", "pi pi-palette", 3, "click"], [1, "graph-data"]], template: function CytoscapeGraphToolbarComponent_Template(rf, ctx) {
if (rf & 1) {
i0__namespace.ɵɵelementStart(0, "div", 0);
i0__namespace.ɵɵelementStart(1, "p-overlayPanel", 1, 2);
i0__namespace.ɵɵtemplate(3, CytoscapeGraphToolbarComponent_ng_template_3_Template, 1, 1, "ng-template", 3);
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵtemplate(4, CytoscapeGraphToolbarComponent_p_button_4_Template, 2, 5, "p-button", 4);
i0__namespace.ɵɵelementStart(5, "p-overlayPanel", 1, 5);
i0__namespace.ɵɵtemplate(7, CytoscapeGraphToolbarComponent_ng_template_7_Template, 1, 1, "ng-template", 3);
i0__namespace.ɵɵelementEnd();
i0__namespace.ɵɵtemplate(8, CytoscapeGraphToolbarComponent_p_button_8_Template, 1, 2, "p-button", 6);
i0__namespace.ɵɵtemplate(9, CytoscapeGraphToolbarComponent_span_9_Template, 2, 1, "span", 7);
i0__namespace.ɵɵtemplate(10, CytoscapeGraphToolbarComponent_span_10_Template, 2, 1, "span", 7);
i0__namespace.ɵɵelementEnd();
}
if (rf & 2) {
i0__namespace.ɵɵclassProp("row-layout", ctx.direction === "row")("column-layout", ctx.direction === "column");
i0__namespace.ɵɵadvance(1);
i0__namespace.ɵɵproperty("dismissable", true)("showCloseIcon", true);
i0__namespace.ɵɵadvance(3);
i0__namespace.ɵɵproperty("ngIf", ctx.showToolbarButtons);
i0__namespace.ɵɵadvance(1);
i0__namespace.ɵɵproperty("dismissable", true)("showCloseIcon", true);
i0__namespace.ɵɵadvance(3);
i0__namespace.ɵɵproperty("ngIf", ctx.showToolbarButtons);
i0__namespace.ɵɵadvance(1);
i0__namespace.ɵɵproperty("ngIf", ctx.nodes);
i0__namespace.ɵɵadvance(1);
i0__namespace.ɵɵproperty("ngIf", ctx.edges);
}
}, directives: [i1__namespace$1.OverlayPanel, i2__namespace$3.PrimeTemplate, i2__namespace.NgIf, CytoscapeLayoutToolComponent, i8__namespace.Button, i5__namespace.Tooltip, CytoscapeStyleToolComponent], pipes: [i2__namespace.TitleCasePipe], styles: [".toolbar-container[_ngcontent-%COMP%] {\n display: flex;\n }\n\n .row-layout[_ngcontent-%COMP%] {\n flex-direction: row;\n align-items: center;\n padding-bottom: 4px;\n }\n\n .column-layout[_ngcontent-%COMP%] {\n flex-direction: column;\n align-items: stretch;\n justify-content: flex-start;\n padding-left: 4px;\n }\n\n p-button[_ngcontent-%COMP%] {\n padding-bottom: 4px;\n padding-right: 4px;\n }"] });
(function () {
(typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CytoscapeGraphToolbarComponent, [{
type: i0.Component,
args: [{
// tslint:disable-next-line:component-selector
selector: 'cytoscape-graph-toolbar',
template: "\n <div class=\"toolbar-container\"\n [class.row-layout]=\"direction === 'row'\"\n [class.column-layout]=\"direction === 'column'\">\n <p-overlayPanel #layoutToolbaroverlay\n [dismissable]=\"true\" [showCloseIcon]=\"true\"\n >\n <ng-template pTemplate>\n <cytoscape-layout-tool [(layoutOptions)]=\"layoutOptions\"></cytoscape-layout-tool>\n </ng-template>\n </p-overlayPanel>\n <p-button *ngIf=\"showToolbarButtons\"\n label=\"{{layoutOptions.name | titlecase }} Layout\"\n [class.max-button-width]=\"direction === 'column'\"\n pTooltip=\"Layout Settings...\"\n icon=\"pi pi-sliders-v\"\n (click)=\"layoutToolbaroverlay.toggle($event)\"></p-button>\n <p-overlayPanel #styleToolbaroverlay [dismissable]=\"true\" [showCloseIcon]=\"true\">\n <ng-template pTemplate>\n <cytoscape-style-tool\n [(styles)]=\"styles\"\n (stylesChange)=\"onStylesChange($event)\"\n (styleSelectorChange)=\"onStyleSelectorChange($event)\"></cytoscape-style-tool>\n </ng-template>\n </p-overlayPanel>\n <p-button *ngIf=\"showToolbarButtons\"\n [class.max-button-width]=\"direction === 'column'\"\n label=\"Style\"\n pTooltip=\"Styling...\"\n icon=\"pi pi-palette\"\n (click)=\"styleToolbaroverlay.toggle($event)\">\n </p-button>\n <span class=\"graph-data\" *ngIf=\"nodes\">{{nodes.length}} Nodes </span>\n <span class=\"graph-data\" *ngIf=\"edges\">{{edges.length}} Edges</span>\n </div>\n ",
styles: [
"\n .toolbar-container {\n display: flex;\n }\n\n .row-layout {\n flex-direction: row;\n align-items: center;\n padding-bottom: 4px;\n }\n\n .column-layout {\n flex-direction: column;\n align-items: stretch;\n justify-content: flex-start;\n padding-left: 4px;\n }\n\n p-button {\n padding-bottom: 4px;\n padding-right: 4px;\n }\n "
],
}]
}], function () { return []; }, { nodes: [{
type: i0.Input
}], edges: [{
type: i0.Input
}], direction: [{
type: i0.Input
}], layoutOptions: [{
type: i0.Input
}], layoutOptionsChange: [{
type: i0.Output
}], styles: [{
type: i0.Input
}], stylesChange: [{
type: i0.Output
}], styleSelectorChange: [{
type: i0.Output
}], showLayoutToolbarButton: [{
type: i0.Input
}], showStyleToolbarButton: [{
type: i0.Input
}], showToolbarButtons: [{
type: i0.Input
}] });
})();
var CytoscapeAngularModule = /** @class */ (function () {
function CytoscapeAngularModule() {
}
return CytoscapeAngularModule;
}());
CytoscapeAngularModule.ɵfac = function CytoscapeAngularModule_Factory(t) { return new (t || CytoscapeAngularModule)(); };
CytoscapeAngularModule.ɵmod = /*@__PURE__*/ i0__namespace.ɵɵdefineNgModule({ type: CytoscapeAngularModule });
CytoscapeAngularModule.ɵinj = /*@__PURE__*/ i0__namespace.ɵɵdefineInjector({ imports: [[
i2.CommonModule,
i1.FormsModule,
i1.ReactiveFormsModule,
i8.ButtonModule,
i2.CommonModule,
i7.DropdownModule,
i3.FieldsetModule,
i4.InputSwitchModule,
i6.InputTextModule,
i1$1.OverlayPanelModule,
progressbar.ProgressBarModule,
i2$1.ProgressSpinnerModule,
i5.TooltipModule,
spinner.SpinnerModule,
i2$2.AutoCompleteModule
]] });
(function () {
(typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CytoscapeAngularModule, [{
type: i0.NgModule,
args: [{
declarations: [
CytoscapeGraphComponent,
CytoscapeGraphToolbarComponent,
CytoscapeLayoutToolComponent,
CytoscapeStyleToolComponent,
FluidFormComponent
],
imports: [
i2.CommonModule,
i1.FormsModule,
i1.ReactiveFormsModule,
i8.ButtonModule,
i2.CommonModule,
i7.DropdownModule,
i3.FieldsetModule,
i4.InputSwitchModule,
i6.InputTextModule,
i1$1.OverlayPanelModule,
progressbar.ProgressBarModule,
i2$1.ProgressSpinnerModule,
i5.TooltipModule,
spinner.SpinnerModule,
i2$2.AutoCompleteModule
],
exports: [
CytoscapeGraphComponent,
CytoscapeGraphToolbarComponent,
CytoscapeLayoutToolComponent,
CytoscapeStyleToolComponent
]
}]
}], null, null);
})();
(function () {
(typeof ngJitMode === "undefined" || ngJitMode) && i0__namespace.ɵɵsetNgModuleScope(CytoscapeAngularModule, { declarations: [CytoscapeGraphComponent,
CytoscapeGraphToolbarComponent,
CytoscapeLayoutToolComponent,
CytoscapeStyleToolComponent,
FluidFormComponent], imports: [i2.CommonModule,
i1.FormsModule,
i1.ReactiveFormsModule,
i8.ButtonModule,
i2.CommonModule,
i7.DropdownModule,
i3.FieldsetModule,
i4.InputSwitchModule,
i6.InputTextModule,
i1$1.OverlayPanelModule,
progressbar.ProgressBarModule,
i2$1.ProgressSpinnerModule,
i5.TooltipModule,
spinner.SpinnerModule,
i2$2.AutoCompleteModule], exports: [CytoscapeGraphComponent,
CytoscapeGraphToolbarComponent,
CytoscapeLayoutToolComponent,
CytoscapeStyleToolComponent] });
})();
/*
* Public API Surface of cytoscape-angular
*/
/**
* Generated bundle index. Do not edit.
*/
exports.AnimateLayoutOptionsImpl = AnimateLayoutOptionsImpl;
exports.BreadthFirstLayoutOptionsImpl = BreadthFirstLayoutOptionsImpl;
exports.CircleLayoutOptionsImpl = CircleLayoutOptionsImpl;
exports.ConcentricLayoutOptionsImpl = ConcentricLayoutOptionsImpl;
exports.CoseLayoutOptionsImpl = CoseLayoutOptionsImpl;
exports.CytoscapeAngularModule = CytoscapeAngularModule;
exports.CytoscapeGraphComponent = CytoscapeGraphComponent;
exports.CytoscapeGraphToolbarComponent = CytoscapeGraphToolbarComponent;
exports.CytoscapeLayoutToolComponent = CytoscapeLayoutToolComponent;
exports.CytoscapeStyleToolComponent = CytoscapeStyleToolComponent;
exports.DagreLayoutOptionsImpl = DagreLayoutOptionsImpl;
exports.FieldInfo = FieldInfo;
exports.FieldsetInfo = FieldsetInfo;
exports.FluidFormComponent = FluidFormComponent;
exports.FormInfo = FormInfo;
exports.GridLayoutOptionsImpl = GridLayoutOptionsImpl;
exports.NullLayoutOptionsImpl = NullLayoutOptionsImpl;
exports.PresetLayoutOptionsImpl = PresetLayoutOptionsImpl;
exports.RandomLayoutOptionsImpl = RandomLayoutOptionsImpl;
exports.ShapedLayoutOptionsImpl = ShapedLayoutOptionsImpl;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=cytoscape-angular.umd.js.map