@aexol/slothking-diagram - npm Package Compare versions

Comparing version 0.1.17 to 0.1.18

lib/EditableText.js

 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
-class EditableText extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
+var React = require("react");
+var EditableText = (function (_super) {
+    __extends(EditableText, _super);
+    function EditableText() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
             editing: false
         };
+        return _this;
     }
-    render() {
-        const { onChange, text } = this.props;
-        const { editing } = this.state;
-        return (React.createElement("div", { onClick: () => {
-                this.setState({
+    EditableText.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, onChange = _a.onChange, text = _a.text;
+        var editing = this.state.editing;
+        return (React.createElement("div", { onClick: function () {
+                _this.setState({
                     editing: !editing
@@ -22,5 +35,6 @@ });
             ' '));
-    }
-}
+    };
+    return EditableText;
+}(React.Component));
 exports.EditableText = EditableText;
 //# sourceMappingURL=EditableText.js.map

lib/Graph.js

 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || Object.assign || function(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;
+};
+var __generator = (this && this.__generator) || function (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 = y[op[0] & 2 ? "return" : op[0] ? "throw" : "next"]) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [0, 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 __values = (this && this.__values) || function (o) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
+    if (m) return m.call(o);
+    return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
-let styles = require('./index.css');
-const SpaceBarMenu_1 = require("./SpaceBarMenu");
-const SimpleNode_1 = require("./SimpleNode");
-const GraphDefs_1 = require("./GraphDefs");
-const Link_1 = require("./Link");
-const Port_1 = require("./Port");
-const Props_1 = require("./Props");
-const utils_1 = require("./utils");
-const render_1 = require("./render");
-class Graph extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = Object.assign({}, GraphDefs_1.GraphInitialState);
-        this.nodes = (nodes) => {
-            const processData = function* (data) {
-                for (var n of data) {
-                    yield n;
-                    if (n.nodes && n.nodes.length) {
-                        yield* processData(n.nodes);
+var React = require("react");
+var styles = require('./index.css');
+var SpaceBarMenu_1 = require("./SpaceBarMenu");
+var SimpleNode_1 = require("./SimpleNode");
+var GraphDefs_1 = require("./GraphDefs");
+var Link_1 = require("./Link");
+var Port_1 = require("./Port");
+var Props_1 = require("./Props");
+var utils_1 = require("./utils");
+var render_1 = require("./render");
+var Graph = (function (_super) {
+    __extends(Graph, _super);
+    function Graph() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = __assign({}, GraphDefs_1.GraphInitialState);
+        _this.nodes = function (nodes) {
+            var processData = function (data) {
+                var _i, data_1, n;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _i = 0, data_1 = data;
+                            _a.label = 1;
+                        case 1:
+                            if (!(_i < data_1.length)) return [3, 5];
+                            n = data_1[_i];
+                            return [4, n];
+                        case 2:
+                            _a.sent();
+                            if (!(n.nodes && n.nodes.length)) return [3, 4];
+                            return [5, __values(processData(n.nodes))];
+                        case 3:
+                            _a.sent();
+                            _a.label = 4;
+                        case 4:
+                            _i++;
+                            return [3, 1];
+                        case 5: return [2];
                     }
-                }
+                });
             };
-            let allNodes = processData(nodes);
-            return [...allNodes];
+            var allNodes = processData(nodes);
+            return allNodes.slice();
         };
-        this.deleteLinks = (id) => {
-            let { nodes = [] } = this.nodes(this.state.nodes).find((n) => n.id === id);
-            let deletedNodes = [id, ...this.nodes(nodes).map((n) => n.id)];
-            console.log(deletedNodes, this.state.links);
-            const links = {
-                links: this.state.links.filter((l) => !deletedNodes.includes(l.from.nodeId) && !deletedNodes.includes(l.to.nodeId))
+        _this.deleteLinks = function (id) {
+            var _a = _this.nodes(_this.state.nodes).find(function (n) { return n.id === id; }).nodes, nodes = _a === void 0 ? [] : _a;
+            var deletedNodes = [id].concat(_this.nodes(nodes).map(function (n) { return n.id; }));
+            console.log(deletedNodes, _this.state.links);
+            var links = {
+                links: _this.state.links.filter(function (l) { return !deletedNodes.includes(l.from.nodeId) && !deletedNodes.includes(l.to.nodeId); })
             };
@@ -39,30 +112,30 @@ console.log(links);
         };
-        this.deleteNode = (id) => {
-            return Object.assign({}, this.deleteLinks(id), utils_1.deepNodeUpdate({ nodes: this.state.nodes, id: id, remove: true }));
+        _this.deleteNode = function (id) {
+            return __assign({}, _this.deleteLinks(id), utils_1.deepNodeUpdate({ nodes: _this.state.nodes, id: id, remove: true }));
         };
-        this.updateNode = (nodes, id, node) => {
-            return utils_1.deepNodeUpdate({ nodes, id, node });
+        _this.updateNode = function (nodes, id, node) {
+            return utils_1.deepNodeUpdate({ nodes: nodes, id: id, node: node });
         };
-        this.bX = (x) => -x + this.background.offsetLeft + this.background.offsetWidth;
-        this.bY = (y) => -y + this.background.offsetTop + this.background.offsetHeight;
-        this.aX = (x) => x + this.background.offsetLeft;
-        this.aY = (y) => y + this.background.offsetTop;
-        this.oX = (x) => x - this.background.offsetLeft;
-        this.oY = (y) => y - this.background.offsetTop;
-        this.toggleSpace = (spacePressed) => {
-            this.setState({
-                spacePressed,
-                spaceX: this.state.mouseX,
-                spaceY: this.state.mouseY
+        _this.bX = function (x) { return -x + _this.background.offsetLeft + _this.background.offsetWidth; };
+        _this.bY = function (y) { return -y + _this.background.offsetTop + _this.background.offsetHeight; };
+        _this.aX = function (x) { return x + _this.background.offsetLeft; };
+        _this.aY = function (y) { return y + _this.background.offsetTop; };
+        _this.oX = function (x) { return x - _this.background.offsetLeft; };
+        _this.oY = function (y) { return y - _this.background.offsetTop; };
+        _this.toggleSpace = function (spacePressed) {
+            _this.setState({
+                spacePressed: spacePressed,
+                spaceX: _this.state.mouseX,
+                spaceY: _this.state.mouseY
             });
         };
-        this.addNode = (node) => {
-            this.setState((state) => {
-                const { expand, nodes, spaceX, spaceY } = state;
-                let newNode = Object.assign({}, node, { id: utils_1.generateId(), x: spaceX, y: spaceY, nodes: [] });
-                let updateNodes = {};
+        _this.addNode = function (node) {
+            _this.setState(function (state) {
+                var expand = state.expand, nodes = state.nodes, spaceX = state.spaceX, spaceY = state.spaceY;
+                var newNode = __assign({}, node, { id: utils_1.generateId(), x: spaceX, y: spaceY, nodes: [] });
+                var updateNodes = {};
                 if (expand) {
-                    const oldNodeNodes = this.nodes(nodes).find((n) => n.id === expand).nodes;
-                    updateNodes = this.updateNode(nodes, expand, {
-                        nodes: [...oldNodeNodes, newNode]
+                    var oldNodeNodes = _this.nodes(nodes).find(function (n) { return n.id === expand; }).nodes;
+                    updateNodes = _this.updateNode(nodes, expand, {
+                        nodes: oldNodeNodes.concat([newNode])
                     });
@@ -72,3 +145,3 @@ }
                     updateNodes = {
-                        nodes: [...state.nodes, newNode]
+                        nodes: state.nodes.concat([newNode])
                     };
@@ -79,16 +152,17 @@ }
         };
-        this.cloneNode = (node) => {
-            this.addNode(Object.assign({}, node, { id: utils_1.generateId(), inputs: node.inputs.map((i) => (Object.assign({}, i, { id: utils_1.generateId() }))), outputs: node.outputs.map((i) => (Object.assign({}, i, { id: utils_1.generateId() }))) }));
+        _this.cloneNode = function (node) {
+            _this.addNode(__assign({}, node, { id: utils_1.generateId(), inputs: node.inputs.map(function (i) { return (__assign({}, i, { id: utils_1.generateId() })); }), outputs: node.outputs.map(function (i) { return (__assign({}, i, { id: utils_1.generateId() })); }) }));
         };
-        this.reset = (updateState = {}) => {
-            this.setState(Object.assign({ action: GraphDefs_1.Action.Nothing, activePort: null, activeNode: null, selected: null }, updateState));
+        _this.reset = function (updateState) {
+            if (updateState === void 0) { updateState = {}; }
+            _this.setState(__assign({ action: GraphDefs_1.Action.Nothing, activePort: null, activeNode: null, selected: null }, updateState));
         };
-        this.portDown = (x, y, portId, id) => {
-            this.setState({
+        _this.portDown = function (x, y, portId, id) {
+            _this.setState({
                 action: GraphDefs_1.Action.ConnectPort,
                 activePort: {
-                    x,
-                    y,
-                    id,
-                    portId,
+                    x: x,
+                    y: y,
+                    id: id,
+                    portId: portId,
                     endX: x,
@@ -99,12 +173,11 @@ endY: y
         };
-        this.portUp = (x, y, portId, id) => {
-            const { activePort } = this.state;
+        _this.portUp = function (x, y, portId, id) {
+            var activePort = _this.state.activePort;
             if (activePort && activePort.portId !== portId) {
-                const { id: nodeId, portId: activePortId } = activePort;
-                this.reset({
-                    links: [
-                        ...this.state.links,
+                var nodeId = activePort.id, activePortId = activePort.portId;
+                _this.reset({
+                    links: _this.state.links.concat([
                         {
                             from: {
-                                nodeId,
+                                nodeId: nodeId,
                                 portId: activePortId
@@ -114,24 +187,24 @@ },
                                 nodeId: id,
-                                portId
+                                portId: portId
                             }
                         }
-                    ]
+                    ])
                 });
             }
         };
-        this.addPort = (port) => {
-            const updatedNode = this.nodes(this.state.nodes).find((n) => n.id === this.state.selected);
-            this.setState((state) => (Object.assign({}, this.updateNode(state.nodes, state.selected, Object.assign({}, updatedNode, { inputs: [
-                    ...updatedNode.inputs,
-                    Object.assign({}, port, { id: utils_1.generateId() })
-                ] })))));
+        _this.addPort = function (port) {
+            var updatedNode = _this.nodes(_this.state.nodes).find(function (n) { return n.id === _this.state.selected; });
+            _this.setState(function (state) { return (__assign({}, _this.updateNode(state.nodes, state.selected, __assign({}, updatedNode, { inputs: updatedNode.inputs.concat([
+                    __assign({}, port, { id: utils_1.generateId() })
+                ]) })))); });
         };
-        this.updatePortPositions = (x, y, portId, id, output) => {
-            this.setState((state) => {
-                const modifyState = (portMode) => {
-                    let n = this.nodes(state.nodes).find((n) => n.id === id);
-                    let ports = n[portMode].map((p) => (p.id === portId ? Object.assign({}, p, { x, y }) : p));
-                    return this.updateNode(state.nodes, id, {
-                        [portMode]: ports
-                    });
+        _this.updatePortPositions = function (x, y, portId, id, output) {
+            _this.setState(function (state) {
+                var modifyState = function (portMode) {
+                    var n = _this.nodes(state.nodes).find(function (n) { return n.id === id; });
+                    var ports = n[portMode].map(function (p) { return (p.id === portId ? __assign({}, p, { x: x, y: y }) : p); });
+                    return _this.updateNode(state.nodes, id, (_a = {},
+                        _a[portMode] = ports,
+                        _a));
+                    var _a;
                 };
@@ -146,60 +219,60 @@ if (output) {
         };
-        this.renderMainPorts = (node, ports, output) => {
-            return ports.map((i) => (React.createElement(Port_1.Port, { name: i.name, key: i.id, portDown: (x, y) => {
-                    this.portDown(x, y, i.id, node.id);
-                }, portUp: (x, y) => {
-                    this.portUp(x, y, i.id, node.id);
-                }, portPosition: (x, y) => {
-                    this.updatePortPositions(x, y, i.id, node.id, output);
-                }, output: !output })));
+        _this.renderMainPorts = function (node, ports, output) {
+            return ports.map(function (i) { return (React.createElement(Port_1.Port, { name: i.name, key: i.id, portDown: function (x, y) {
+                    _this.portDown(x, y, i.id, node.id);
+                }, portUp: function (x, y) {
+                    _this.portUp(x, y, i.id, node.id);
+                }, portPosition: function (x, y) {
+                    _this.updatePortPositions(x, y, i.id, node.id, output);
+                }, output: !output })); });
         };
-        this.renderExpandedNodePorts = (node) => {
-            const { inputs, outputs } = node;
+        _this.renderExpandedNodePorts = function (node) {
+            var inputs = node.inputs, outputs = node.outputs;
             return (React.createElement("div", { className: styles.DependencyExpand, style: {
                     pointerEvents: 'none'
                 } },
-                React.createElement("div", { className: styles.DependencyInputs }, this.renderMainPorts(node, inputs, false)),
-                React.createElement("div", { className: styles.DependencyOutputs }, this.renderMainPorts(node, outputs, true))));
+                React.createElement("div", { className: styles.DependencyInputs }, _this.renderMainPorts(node, inputs, false)),
+                React.createElement("div", { className: styles.DependencyOutputs }, _this.renderMainPorts(node, outputs, true))));
         };
-        this.renderNodes = (nodes) => {
-            return nodes.filter((node) => node.id !== this.state.expand).map((node) => (React.createElement(SimpleNode_1.Node, Object.assign({}, node, { key: node.id, id: node.id, selected: this.state.selected === node.id, addPort: this.addPort, portDown: this.portDown, portUp: this.portUp, portPosition: (x, y, portId, id, output) => {
-                    this.updatePortPositions(x, y, portId, id, output);
-                }, nodeDown: (id, x, y) => {
-                    this.setState({
+        _this.renderNodes = function (nodes) {
+            return nodes.filter(function (node) { return node.id !== _this.state.expand; }).map(function (node) { return (React.createElement(SimpleNode_1.Node, __assign({}, node, { key: node.id, id: node.id, selected: _this.state.selected === node.id, addPort: _this.addPort, portDown: _this.portDown, portUp: _this.portUp, portPosition: function (x, y, portId, id, output) {
+                    _this.updatePortPositions(x, y, portId, id, output);
+                }, nodeDown: function (id, x, y) {
+                    _this.setState({
                         action: GraphDefs_1.Action.MoveNode,
-                        activeNode: { id, x: x - this.state.mouseX, y: y - this.state.mouseY },
+                        activeNode: { id: id, x: x - _this.state.mouseX, y: y - _this.state.mouseY },
                         selected: node.id
                     });
-                }, nodeUp: (id) => {
-                    this.reset({
+                }, nodeUp: function (id) {
+                    _this.reset({
                         selected: node.id
                     });
-                } }))));
+                } }))); });
         };
-        this.expandNode = (selectedNode) => {
+        _this.expandNode = function (selectedNode) {
             console.log('selectedNode');
-            this.setState((state) => ({
+            _this.setState(function (state) { return ({
                 expand: selectedNode,
-                path: [...state.path, selectedNode],
+                path: state.path.concat([selectedNode]),
                 selected: null
-            }));
+            }); });
         };
-        this.shrinkNode = (selectedNode) => {
-            let path = this.state.path;
+        _this.shrinkNode = function (selectedNode) {
+            var path = _this.state.path;
             path.pop();
-            let expand = path[path.length - 1];
-            this.setState({
-                expand,
-                path,
+            var expand = path[path.length - 1];
+            _this.setState({
+                expand: expand,
+                path: path,
                 selected: selectedNode
             });
         };
-        this.spaceBarCategories = () => {
-            const { categories } = this.props;
-            let spaceBarCategories = categories.map((c) => (Object.assign({}, c, { items: c.items.map((i) => ({
+        _this.spaceBarCategories = function () {
+            var categories = _this.props.categories;
+            var spaceBarCategories = categories.map(function (c) { return (__assign({}, c, { items: c.items.map(function (i) { return ({
                     name: i.name,
-                    action: () => {
-                        this.addNode(Object.assign({}, i, { id: utils_1.generateId(), inputs: i.inputs.map((input) => (Object.assign({}, input, { id: utils_1.generateId() }))), outputs: i.outputs.map((output) => (Object.assign({}, output, { id: utils_1.generateId() }))) }));
+                    action: function () {
+                        _this.addNode(__assign({}, i, { id: utils_1.generateId(), inputs: i.inputs.map(function (input) { return (__assign({}, input, { id: utils_1.generateId() })); }), outputs: i.outputs.map(function (output) { return (__assign({}, output, { id: utils_1.generateId() })); }) }));
                     }
-                })) })));
+                }); }) })); });
             spaceBarCategories = [
@@ -211,4 +284,4 @@ {
                             name: 'save',
-                            action: () => {
-                                this.serialize();
+                            action: function () {
+                                _this.serialize();
                             }
@@ -220,8 +293,8 @@ }
                     name: 'node',
-                    items: this.state.selected
+                    items: _this.state.selected
                         ? [
                             {
                                 name: 'expand',
-                                action: () => {
-                                    this.expandNode(this.state.selected);
+                                action: function () {
+                                    _this.expandNode(_this.state.selected);
                                 }
@@ -231,4 +304,4 @@ },
                                 name: 'delete',
-                                action: () => {
-                                    this.setState((state) => (Object.assign({}, this.deleteNode(state.selected), { selected: null })));
+                                action: function () {
+                                    _this.setState(function (state) { return (__assign({}, _this.deleteNode(state.selected), { selected: null })); });
                                 }
@@ -238,13 +311,13 @@ },
                                 name: 'duplicate',
-                                action: () => {
-                                    this.cloneNode(this.nodes(this.state.nodes).find((n) => n.id === this.state.selected));
+                                action: function () {
+                                    _this.cloneNode(_this.nodes(_this.state.nodes).find(function (n) { return n.id === _this.state.selected; }));
                                 }
                             }
                         ]
-                        : this.state.expand
+                        : _this.state.expand
                             ? [
                                 {
                                     name: 'back',
-                                    action: () => {
-                                        this.shrinkNode(this.state.expand);
+                                    action: function () {
+                                        _this.shrinkNode(_this.state.expand);
                                     }
@@ -254,40 +327,45 @@ }
                             : []
-                },
-                ...spaceBarCategories
-            ];
+                }
+            ].concat(spaceBarCategories);
             return spaceBarCategories;
         };
-        this.serialize = () => {
-            const { serialize } = this.props;
+        _this.serialize = function () {
+            var serialize = _this.props.serialize;
             if (serialize) {
-                serialize(this.state.nodes, this.state.links);
+                serialize(_this.state.nodes, _this.state.links);
             }
         };
+        return _this;
     }
-    get p() {
-        if (this.state.activePort) {
-            const { x, y, endX, endY } = this.state.activePort;
-            return {
-                x: this.oX(x),
-                y: this.oY(y),
-                endX: this.oX(endX),
-                endY: this.oY(endY)
-            };
-        }
-        return this.state.activePort;
-    }
-    componentDidMount() {
-        document.addEventListener('keydown', (e) => {
-            if (e.keyCode === 32 && !this.state.spacePressed) {
-                this.toggleSpace(true);
+    Object.defineProperty(Graph.prototype, "p", {
+        get: function () {
+            if (this.state.activePort) {
+                var _a = this.state.activePort, x = _a.x, y = _a.y, endX = _a.endX, endY = _a.endY;
+                return {
+                    x: this.oX(x),
+                    y: this.oY(y),
+                    endX: this.oX(endX),
+                    endY: this.oY(endY)
+                };
             }
+            return this.state.activePort;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Graph.prototype.componentDidMount = function () {
+        var _this = this;
+        document.addEventListener('keydown', function (e) {
+            if (e.keyCode === 32 && !_this.state.spacePressed) {
+                _this.toggleSpace(true);
+            }
         });
-        document.addEventListener('keyup', (e) => {
+        document.addEventListener('keyup', function (e) {
             if (e.keyCode === 32) {
-                this.toggleSpace(false);
+                _this.toggleSpace(false);
             }
         });
-        document.addEventListener('mousemove', (e) => {
-            this.setState((state) => {
-                let stateUpdate = {
+        document.addEventListener('mousemove', function (e) {
+            _this.setState(function (state) {
+                var stateUpdate = {
                     mouseX: e.clientX,
@@ -297,3 +375,3 @@ mouseY: e.clientY
                 if (state.action === GraphDefs_1.Action.MoveNode) {
-                    stateUpdate = Object.assign({}, stateUpdate, this.updateNode(state.nodes, state.activeNode.id, {
+                    stateUpdate = __assign({}, stateUpdate, _this.updateNode(state.nodes, state.activeNode.id, {
                         x: e.clientX + state.activeNode.x,
@@ -304,7 +382,7 @@ y: e.clientY + state.activeNode.y
                 if (state.action === GraphDefs_1.Action.ConnectPort) {
-                    stateUpdate = Object.assign({}, stateUpdate, { activePort: Object.assign({}, state.activePort, { endX: e.clientX, endY: e.clientY }) });
+                    stateUpdate = __assign({}, stateUpdate, { activePort: __assign({}, state.activePort, { endX: e.clientX, endY: e.clientY }) });
                 }
                 if (state.action === GraphDefs_1.Action.Pan) {
-                    let { nodes } = state;
-                    stateUpdate = Object.assign({}, stateUpdate, { nodes: nodes.map((n) => (Object.assign({}, n, { x: n.x + e.movementX, y: n.y + e.movementY }))) });
+                    var nodes = state.nodes;
+                    stateUpdate = __assign({}, stateUpdate, { nodes: nodes.map(function (n) { return (__assign({}, n, { x: n.x + e.movementX, y: n.y + e.movementY })); }) });
                 }
@@ -314,23 +392,24 @@ return stateUpdate;
         });
-    }
-    render() {
-        let { nodes, expand, links } = this.state;
-        let selectedNode = this.state.selected || this.state.expand;
+    };
+    Graph.prototype.render = function () {
+        var _this = this;
+        var _a = this.state, nodes = _a.nodes, expand = _a.expand, links = _a.links;
+        var selectedNode = this.state.selected || this.state.expand;
         if (expand) {
             nodes = this.nodes(nodes);
-            let expandNode = nodes.find((n) => n.id === expand);
+            var expandNode = nodes.find(function (n) { return n.id === expand; });
             nodes = expandNode.nodes;
             nodes = nodes || [];
-            nodes = [...nodes, Object.assign({}, expandNode, { x: this.aX(0), y: this.aY(0) })];
+            nodes = nodes.concat([__assign({}, expandNode, { x: this.aX(0), y: this.aY(0) })]);
         }
-        links = links.filter((l) => nodes.find((n) => n.id === l.from.nodeId) && nodes.find((n) => n.id === l.to.nodeId));
-        nodes = nodes.map((n) => (Object.assign({}, n, { inputs: n.inputs.map((i) => (Object.assign({}, i, { connected: !!links.find((l) => l.from.portId === i.id || l.to.portId === i.id) }))), outputs: n.outputs.map((i) => (Object.assign({}, i, { connected: !!links.find((l) => l.from.portId === i.id || l.to.portId === i.id) }))) })));
-        return (React.createElement("div", { ref: (ref) => {
-                this.background = ref;
-            }, className: styles.DependencyBackground, onMouseDown: (e) => {
-                this.setState({
+        links = links.filter(function (l) { return nodes.find(function (n) { return n.id === l.from.nodeId; }) && nodes.find(function (n) { return n.id === l.to.nodeId; }); });
+        nodes = nodes.map(function (n) { return (__assign({}, n, { inputs: n.inputs.map(function (i) { return (__assign({}, i, { connected: !!links.find(function (l) { return l.from.portId === i.id || l.to.portId === i.id; }) })); }), outputs: n.outputs.map(function (i) { return (__assign({}, i, { connected: !!links.find(function (l) { return l.from.portId === i.id || l.to.portId === i.id; }) })); }) })); });
+        return (React.createElement("div", { ref: function (ref) {
+                _this.background = ref;
+            }, className: styles.DependencyBackground, onMouseDown: function (e) {
+                _this.setState({
                     action: GraphDefs_1.Action.Pan
                 });
-            }, onMouseUp: (e) => {
-                this.reset();
+            }, onMouseUp: function (e) {
+                _this.reset();
             } },
@@ -340,3 +419,3 @@ React.createElement("div", { className: styles.DependencyNodes },
                 expand &&
-                    this.renderExpandedNodePorts(this.nodes(this.state.nodes).find((n) => n.id === expand)),
+                    this.renderExpandedNodePorts(this.nodes(this.state.nodes).find(function (n) { return n.id === expand; })),
                 React.createElement("svg", { style: {
@@ -356,14 +435,15 @@ width: '100%',
             this.state.spacePressed && (React.createElement(SpaceBarMenu_1.SpaceBarMenu, { x: this.state.spaceX, y: this.state.spaceY, categories: this.spaceBarCategories() })),
-            selectedNode && (React.createElement(Props_1.Props, { node: this.nodes(this.state.nodes).find((n) => n.id === selectedNode), onChange: (selected) => {
-                    this.setState((state) => {
-                        return this.updateNode(state.nodes, selected.id, selected);
+            selectedNode && (React.createElement(Props_1.Props, { node: this.nodes(this.state.nodes).find(function (n) { return n.id === selectedNode; }), onChange: function (selected) {
+                    _this.setState(function (state) {
+                        return _this.updateNode(state.nodes, selected.id, selected);
                     });
-                }, canExpand: !!this.state.selected, canShrink: !this.state.selected && this.state.path.length > 1, onExpand: () => {
-                    this.expandNode(selectedNode);
-                }, onShrink: () => {
-                    this.shrinkNode(this.state.expand);
+                }, canExpand: !!this.state.selected, canShrink: !this.state.selected && this.state.path.length > 1, onExpand: function () {
+                    _this.expandNode(selectedNode);
+                }, onShrink: function () {
+                    _this.shrinkNode(_this.state.expand);
                 } }))));
-    }
-}
+    };
+    return Graph;
+}(React.Component));
 exports.Graph = Graph;
 //# sourceMappingURL=Graph.js.map

lib/Link.js

 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
-const buildSquarePath = (x1, y1, x2, y2) => {
-    let centerX = (x1 + x2) / 2.0;
+var React = require("react");
+var buildSquarePath = function (x1, y1, x2, y2) {
+    var centerX = (x1 + x2) / 2.0;
     return [x1, y1, centerX, y1, centerX, y2, x2, y2];
 };
-class LinkWidget extends React.Component {
-    render() {
-        const { start: { x: x1, y: y1 }, end: { x: x2, y: y2 } } = this.props;
-        return React.createElement("path", { fill: "none", stroke: "#959595", strokeWidth: "2", d: `M ${buildSquarePath(x1, y1, x2, y2).join(",")}` });
+var LinkWidget = (function (_super) {
+    __extends(LinkWidget, _super);
+    function LinkWidget() {
+        return _super !== null && _super.apply(this, arguments) || this;
     }
-}
+    LinkWidget.prototype.render = function () {
+        var _a = this.props, _b = _a.start, x1 = _b.x, y1 = _b.y, _c = _a.end, x2 = _c.x, y2 = _c.y;
+        return React.createElement("path", { fill: "none", stroke: "#959595", strokeWidth: "2", d: "M " + buildSquarePath(x1, y1, x2, y2).join(",") });
+    };
+    return LinkWidget;
+}(React.Component));
 exports.LinkWidget = LinkWidget;
 //# sourceMappingURL=Link.js.map

lib/Node.js

 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || Object.assign || function(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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-let styles = require('./index.css');
-const React = require("react");
-const classnames = require("classnames");
-const Port_1 = require("./Port");
-class Node extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
+var styles = require('./index.css');
+var React = require("react");
+var classnames = require("classnames");
+var Port_1 = require("./Port");
+var Node = (function (_super) {
+    __extends(Node, _super);
+    function Node() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
             input: ''
         };
+        return _this;
     }
-    render() {
-        const { id, name, inputs, outputs, x = 0, y = 0, nodeDown, nodeUp, portUp, portDown, portPosition, addPort, selected = false, editable = false } = this.props;
-        const { input } = this.state;
-        return (React.createElement("div", { className: classnames({
-                [styles.DependencyNode]: true,
-                [styles.DependencyNodeSelected]: selected
-            }), style: {
+    Node.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, id = _a.id, name = _a.name, inputs = _a.inputs, outputs = _a.outputs, _b = _a.x, x = _b === void 0 ? 0 : _b, _c = _a.y, y = _c === void 0 ? 0 : _c, nodeDown = _a.nodeDown, nodeUp = _a.nodeUp, portUp = _a.portUp, portDown = _a.portDown, portPosition = _a.portPosition, addPort = _a.addPort, _d = _a.selected, selected = _d === void 0 ? false : _d, _e = _a.editable, editable = _e === void 0 ? false : _e;
+        var input = this.state.input;
+        return (React.createElement("div", { className: classnames((_f = {},
+                _f[styles.DependencyNode] = true,
+                _f[styles.DependencyNodeSelected] = selected,
+                _f)), style: {
                 top: y,
                 left: x,
                 pointerEvents: 'all'
-            }, ref: (ref) => (this.node = ref), onMouseDown: (e) => {
+            }, ref: function (ref) { return (_this.node = ref); }, onMouseDown: function (e) {
                 e.stopPropagation();
                 nodeDown(id, x, y);
-            }, onMouseUp: (e) => {
+            }, onMouseUp: function (e) {
                 e.stopPropagation();
@@ -33,10 +54,10 @@ nodeUp(id);
             React.createElement("div", { className: styles.DependencyNodePorts },
-                inputs.map((i) => (React.createElement(Port_1.Port, Object.assign({ portUp: (x, y) => {
+                inputs.map(function (i) { return (React.createElement(Port_1.Port, __assign({ portUp: function (x, y) {
                         portUp(x, y, i.id, id);
-                    }, portDown: (x, y) => {
+                    }, portDown: function (x, y) {
                         portDown(x, y, i.id, id);
-                    }, portPosition: (x, y, output) => {
+                    }, portPosition: function (x, y, output) {
                         portPosition(x, y, i.id, id, output);
-                    }, key: i.name }, i)))),
-                editable && (React.createElement("form", { onSubmit: (e) => {
+                    }, key: i.name }, i))); }),
+                editable && (React.createElement("form", { onSubmit: function (e) {
                         e.preventDefault();
@@ -48,17 +69,19 @@ addPort({
                     } },
-                    React.createElement("input", { type: "text", placeholder: "Add input...", value: input, className: styles.DependencyNodePortInputAdd, onChange: (e) => {
-                            this.setState({
+                    React.createElement("input", { type: "text", placeholder: "Add input...", value: input, className: styles.DependencyNodePortInputAdd, onChange: function (e) {
+                            _this.setState({
                                 input: e.target.value
                             });
                         } }))),
-                outputs.map((i) => (React.createElement(Port_1.Port, Object.assign({ portUp: (x, y) => {
+                outputs.map(function (i) { return (React.createElement(Port_1.Port, __assign({ portUp: function (x, y) {
                         portUp(x, y, i.id, id);
-                    }, portDown: (x, y) => {
+                    }, portDown: function (x, y) {
                         portDown(x, y, i.id, id);
-                    }, portPosition: (x, y, output) => {
+                    }, portPosition: function (x, y, output) {
                         portPosition(x, y, i.id, id, output);
-                    }, output: true, key: i.name }, i)))))));
-    }
-}
+                    }, output: true, key: i.name }, i))); }))));
+        var _f;
+    };
+    return Node;
+}(React.Component));
 exports.Node = Node;
 //# sourceMappingURL=Node.js.map

lib/Port.js

 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-let styles = require('./index.css');
-const React = require("react");
-const classnames = require("classnames");
-class Port extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.portPosition = () => {
-            const { portPosition, output = false } = this.props;
-            portPosition(this.port.offsetLeft + this.port.offsetWidth / 2, this.port.offsetTop + this.port.offsetHeight / 2, output);
+var styles = require('./index.css');
+var React = require("react");
+var classnames = require("classnames");
+var Port = (function (_super) {
+    __extends(Port, _super);
+    function Port() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.portPosition = function () {
+            var _a = _this.props, portPosition = _a.portPosition, _b = _a.output, output = _b === void 0 ? false : _b;
+            portPosition(_this.port.offsetLeft + _this.port.offsetWidth / 2, _this.port.offsetTop + _this.port.offsetHeight / 2, output);
         };
+        return _this;
     }
-    componentDidMount() {
+    Port.prototype.componentDidMount = function () {
         if (!this.props.unpluggable) {
             this.portPosition();
         }
-    }
-    render() {
-        const { name, portDown, portUp, connected = false, output = false, unpluggable } = this.props;
-        return (React.createElement("div", { className: classnames({
-                [styles.DependencyNodePort]: true
-            }), style: {
+    };
+    Port.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, name = _a.name, portDown = _a.portDown, portUp = _a.portUp, _b = _a.connected, connected = _b === void 0 ? false : _b, _c = _a.output, output = _c === void 0 ? false : _c, unpluggable = _a.unpluggable;
+        return (React.createElement("div", { className: classnames((_d = {},
+                _d[styles.DependencyNodePort] = true,
+                _d)), style: {
                 flexDirection: output ? 'row' : 'row-reverse'
             } },
-            React.createElement("div", { className: classnames({
-                    [styles.DependencyNodePortName]: true,
-                    [styles.DependencyNodePortNameOutput]: output
-                }) }, name),
-            !unpluggable && (React.createElement("div", { ref: (ref) => {
-                    if (ref && this.port !== ref) {
-                        this.port = ref;
+            React.createElement("div", { className: classnames((_e = {},
+                    _e[styles.DependencyNodePortName] = true,
+                    _e[styles.DependencyNodePortNameOutput] = output,
+                    _e)) }, name),
+            !unpluggable && (React.createElement("div", { ref: function (ref) {
+                    if (ref && _this.port !== ref) {
+                        _this.port = ref;
                     }
                 }, style: {
                     pointerEvents: 'all'
-                }, onMouseDown: (e) => {
+                }, onMouseDown: function (e) {
                     e.stopPropagation();
                     portDown(e.clientX, e.clientY);
-                }, onMouseUp: (e) => {
+                }, onMouseUp: function (e) {
                     e.stopPropagation();
                     portUp(e.clientX, e.clientY);
-                }, className: classnames({
-                    [styles.DependencyNodePortDot]: true,
-                    [styles.DependencyNodePortDotOutput]: output,
-                    [styles.DependencyNodePortDotInput]: !output,
-                    [styles.DependencyNodePortDotConnected]: connected
-                }) }))));
-    }
-}
+                }, className: classnames((_f = {},
+                    _f[styles.DependencyNodePortDot] = true,
+                    _f[styles.DependencyNodePortDotOutput] = output,
+                    _f[styles.DependencyNodePortDotInput] = !output,
+                    _f[styles.DependencyNodePortDotConnected] = connected,
+                    _f)) }))));
+        var _d, _e, _f;
+    };
+    return Port;
+}(React.Component));
 exports.Port = Port;
 //# sourceMappingURL=Port.js.map

lib/Props.js

 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || Object.assign || function(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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
-let styles = require('./index.css');
-class Props extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.changePorts = (port) => {
-            const { onChange, node } = this.props;
-            return node[port].map((i) => (React.createElement("div", { className: styles.PropsPort, key: i.id },
-                React.createElement("input", { className: styles.PropsPortInput, type: "text", value: i.name, onChange: (e) => {
-                        onChange(Object.assign({}, node, { [port]: node[port].map((input) => (input.name === i.name ? Object.assign({}, i, { name: e.target.value }) : input)) }));
-                    } }))));
+var React = require("react");
+var styles = require('./index.css');
+var Props = (function (_super) {
+    __extends(Props, _super);
+    function Props() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.changePorts = function (port) {
+            var _a = _this.props, onChange = _a.onChange, node = _a.node;
+            return node[port].map(function (i) { return (React.createElement("div", { className: styles.PropsPort, key: i.id },
+                React.createElement("input", { className: styles.PropsPortInput, type: "text", value: i.name, onChange: function (e) {
+                        onChange(__assign({}, node, (_a = {}, _a[port] = node[port].map(function (input) { return (input.name === i.name ? __assign({}, i, { name: e.target.value }) : input); }), _a)));
+                        var _a;
+                    } }))); });
         };
+        return _this;
     }
-    render() {
-        const { canExpand, canShrink, node, onChange } = this.props;
-        return (React.createElement("div", { onMouseUp: (e) => e.stopPropagation(), className: styles.Props },
+    Props.prototype.render = function () {
+        var _a = this.props, canExpand = _a.canExpand, canShrink = _a.canShrink, node = _a.node, onChange = _a.onChange;
+        return (React.createElement("div", { onMouseUp: function (e) { return e.stopPropagation(); }, className: styles.Props },
             React.createElement("div", { className: styles.PropsPort },
-                React.createElement("input", { className: styles.PropsPortInput, type: "text", value: node.name, onChange: (e) => {
-                        onChange(Object.assign({}, node, { name: e.target.value }));
+                React.createElement("input", { className: styles.PropsPortInput, type: "text", value: node.name, onChange: function (e) {
+                        onChange(__assign({}, node, { name: e.target.value }));
                     } })),
@@ -27,5 +48,6 @@ this.changePorts('inputs'),
             canShrink && React.createElement("div", { onClick: this.props.onShrink }, "Back")));
-    }
-}
+    };
+    return Props;
+}(React.Component));
 exports.Props = Props;
 //# sourceMappingURL=Props.js.map

lib/render/Links.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
-const __1 = require("..");
-exports.renderLinks = (links, nodes, oX, oY) => links.map((l) => {
-    let { x: startX, y: startY, inputs: startInputs, outputs: startOutputs } = nodes.find((n) => n.id === l.from.nodeId);
-    let { x: startPortX, y: startPortY } = [...startInputs, ...startOutputs].find((i) => i.id === l.from.portId);
-    let { x: endX, y: endY, inputs: endInputs, outputs: endOutputs } = nodes.find((n) => n.id === l.to.nodeId);
-    let { x: endPortX, y: endPortY } = [...endInputs, ...endOutputs].find((i) => i.id === l.to.portId);
-    return (React.createElement(__1.LinkWidget, { key: `${l.from.portId}-${l.to.portId}`, start: {
-            x: oX(startX + startPortX),
-            y: oY(startY + startPortY)
-        }, end: {
-            x: oX(endX + endPortX),
-            y: oY(endY + endPortY)
-        } }));
-});
+var React = require("react");
+var __1 = require("..");
+exports.renderLinks = function (links, nodes, oX, oY) {
+    return links.map(function (l) {
+        var _a = nodes.find(function (n) { return n.id === l.from.nodeId; }), startX = _a.x, startY = _a.y, startInputs = _a.inputs, startOutputs = _a.outputs;
+        var _b = startInputs.concat(startOutputs).find(function (i) { return i.id === l.from.portId; }), startPortX = _b.x, startPortY = _b.y;
+        var _c = nodes.find(function (n) { return n.id === l.to.nodeId; }), endX = _c.x, endY = _c.y, endInputs = _c.inputs, endOutputs = _c.outputs;
+        var _d = endInputs.concat(endOutputs).find(function (i) { return i.id === l.to.portId; }), endPortX = _d.x, endPortY = _d.y;
+        return (React.createElement(__1.LinkWidget, { key: l.from.portId + "-" + l.to.portId, start: {
+                x: oX(startX + startPortX),
+                y: oY(startY + startPortY)
+            }, end: {
+                x: oX(endX + endPortX),
+                y: oY(endY + endPortY)
+            } }));
+    });
+};
 //# sourceMappingURL=Links.js.map

lib/SimpleNode.js

 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || Object.assign || function(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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-let styles = require('./SimpleNode.css');
-const React = require("react");
-const classnames = require("classnames");
-const Port_1 = require("./Port");
-class Node extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
+var styles = require('./SimpleNode.css');
+var React = require("react");
+var classnames = require("classnames");
+var Port_1 = require("./Port");
+var Node = (function (_super) {
+    __extends(Node, _super);
+    function Node() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
             input: ''
         };
+        return _this;
     }
-    render() {
-        const { id, name, type, inputs, outputs, x = 0, y = 0, nodeDown, nodeUp, portUp, portDown, portPosition, selected = false } = this.props;
-        return (React.createElement("div", { className: classnames({
-                [styles.DependencySimpleNode]: true,
-                [styles.DependencySimpleNodeSelected]: selected
-            }), style: {
+    Node.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, id = _a.id, name = _a.name, type = _a.type, inputs = _a.inputs, outputs = _a.outputs, _b = _a.x, x = _b === void 0 ? 0 : _b, _c = _a.y, y = _c === void 0 ? 0 : _c, nodeDown = _a.nodeDown, nodeUp = _a.nodeUp, portUp = _a.portUp, portDown = _a.portDown, portPosition = _a.portPosition, _d = _a.selected, selected = _d === void 0 ? false : _d;
+        return (React.createElement("div", { className: classnames((_e = {},
+                _e[styles.DependencySimpleNode] = true,
+                _e[styles.DependencySimpleNodeSelected] = selected,
+                _e)), style: {
                 top: y,
                 left: x,
                 pointerEvents: 'all'
-            }, ref: (ref) => (this.node = ref), onMouseDown: (e) => {
+            }, ref: function (ref) { return (_this.node = ref); }, onMouseDown: function (e) {
                 e.stopPropagation();
                 nodeDown(id, x, y);
-            }, onMouseUp: (e) => {
+            }, onMouseUp: function (e) {
                 e.stopPropagation();
                 nodeUp(id);
             } },
-            inputs.map((i) => (React.createElement(Port_1.Port, Object.assign({ portUp: (x, y) => {
+            inputs.map(function (i) { return (React.createElement(Port_1.Port, __assign({ portUp: function (x, y) {
                     portUp(x, y, i.id, id);
-                }, portDown: (x, y) => {
+                }, portDown: function (x, y) {
                     portDown(x, y, i.id, id);
-                }, portPosition: (x, y, output) => {
+                }, portPosition: function (x, y, output) {
                     portPosition(x, y, i.id, id, output);
-                }, key: i.name }, i)))),
+                }, key: i.name }, i))); }),
             React.createElement("div", { className: styles.DependencySimpleNodeTitle },
                 React.createElement("div", { className: styles.DependencySimpleNodeName }, name),
                 React.createElement("div", { className: styles.DependencySimpleNodeType }, type)),
-            outputs.map((i) => (React.createElement(Port_1.Port, Object.assign({ portUp: (x, y) => {
+            outputs.map(function (i) { return (React.createElement(Port_1.Port, __assign({ portUp: function (x, y) {
                     portUp(x, y, i.id, id);
-                }, portDown: (x, y) => {
+                }, portDown: function (x, y) {
                     portDown(x, y, i.id, id);
-                }, portPosition: (x, y, output) => {
+                }, portPosition: function (x, y, output) {
                     portPosition(x, y, i.id, id, output);
-                }, output: true, key: i.name }, i))))));
-    }
-}
+                }, output: true, key: i.name }, i))); })));
+        var _e;
+    };
+    return Node;
+}(React.Component));
 exports.Node = Node;
 //# sourceMappingURL=SimpleNode.js.map

lib/SpaceBarMenu.js

 "use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || Object.assign || function(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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = require("react");
-let styles = require('./SpaceBarMenu.css');
-const Categories = ({ categories, category, onMouseOver, top, style, refFunction }) => (React.createElement("div", { className: styles.SpaceBarCategories, style: Object.assign({ marginTop: top ? -70 : 70 }, style), ref: refFunction }, categories.map((c, cindex) => (React.createElement("div", { key: cindex, style: {
-        position: 'relative'
-    }, className: styles.SpaceBarCategory },
-    React.createElement("div", { className: styles.SpaceBarCategoryName, onMouseOver: () => {
-            onMouseOver(c.name);
-        } }, c.name),
-    category === c.name && (React.createElement("div", { className: styles.SpaceBarItems }, c.items.map((i, index) => (React.createElement("div", { className: styles.SpaceBarItem, key: index, onClick: () => {
-            i.action();
-        } }, i.name))))))))));
-class SpaceBarMenu extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
+var React = require("react");
+var styles = require('./SpaceBarMenu.css');
+var Categories = function (_a) {
+    var categories = _a.categories, category = _a.category, onMouseOver = _a.onMouseOver, top = _a.top, style = _a.style, refFunction = _a.refFunction;
+    return (React.createElement("div", { className: styles.SpaceBarCategories, style: __assign({ marginTop: top ? -70 : 70 }, style), ref: refFunction }, categories.map(function (c, cindex) { return (React.createElement("div", { key: cindex, style: {
+            position: 'relative'
+        }, className: styles.SpaceBarCategory },
+        React.createElement("div", { className: styles.SpaceBarCategoryName, onMouseOver: function () {
+                onMouseOver(c.name);
+            } }, c.name),
+        category === c.name && (React.createElement("div", { className: styles.SpaceBarItems }, c.items.map(function (i, index) { return (React.createElement("div", { className: styles.SpaceBarItem, key: index, onClick: function () {
+                i.action();
+            } }, i.name)); }))))); })));
+};
+var SpaceBarMenu = (function (_super) {
+    __extends(SpaceBarMenu, _super);
+    function SpaceBarMenu() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
             category: null,
             menuWidth: 0
         };
+        return _this;
     }
-    componentDidMount() {
+    SpaceBarMenu.prototype.componentDidMount = function () {
         this.setState({ menuWidth: this.menu.offsetWidth });
         console.log(this.menu.offsetWidth);
-    }
-    render() {
-        const { x, y, categories } = this.props;
-        const { category } = this.state;
+    };
+    SpaceBarMenu.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, x = _a.x, y = _a.y, categories = _a.categories;
+        var category = this.state.category;
         return (React.createElement("div", { className: styles.SpaceBarMenu, style: {
@@ -35,24 +59,25 @@ position: 'fixed',
                 pointerEvents: 'all'
-            }, onMouseUp: (e) => {
+            }, onMouseUp: function (e) {
                 e.stopPropagation();
-            }, onMouseDown: (e) => {
+            }, onMouseDown: function (e) {
                 e.stopPropagation();
             } },
-            React.createElement(Categories, { categories: categories.filter((c, i) => i % 2 === 0), category: category, onMouseOver: (e) => {
-                    this.setState({
+            React.createElement(Categories, { categories: categories.filter(function (c, i) { return i % 2 === 0; }), category: category, onMouseOver: function (e) {
+                    _this.setState({
                         category: e
                     });
-                }, top: false, style: { marginLeft: -this.state.menuWidth / 2.0 }, refFunction: (ref) => {
+                }, top: false, style: { marginLeft: -this.state.menuWidth / 2.0 }, refFunction: function (ref) {
                     if (ref) {
-                        this.menu = ref;
+                        _this.menu = ref;
                     }
                 } }),
-            React.createElement(Categories, { refFunction: () => { }, categories: categories.filter((c, i) => i % 2 !== 0), category: category, onMouseOver: (e) => {
-                    this.setState({
+            React.createElement(Categories, { refFunction: function () { }, categories: categories.filter(function (c, i) { return i % 2 !== 0; }), category: category, onMouseOver: function (e) {
+                    _this.setState({
                         category: e
                     });
                 }, top: true, style: { marginLeft: -this.state.menuWidth / 2.0 } })));
-    }
-}
+    };
+    return SpaceBarMenu;
+}(React.Component));
 exports.SpaceBarMenu = SpaceBarMenu;
 //# sourceMappingURL=SpaceBarMenu.js.map

lib/utils.js

 "use strict";
+var __assign = (this && this.__assign) || Object.assign || function(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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateId = () => new Array(crypto.getRandomValues(new Uint8Array(4))).join('-');
-exports.deepNodeUpdate = ({ nodes, id, node, remove }) => {
-    const processData = (data, id) => {
+exports.generateId = function () { return new Array(crypto.getRandomValues(new Uint8Array(4))).join('-'); };
+exports.deepNodeUpdate = function (_a) {
+    var nodes = _a.nodes, id = _a.id, node = _a.node, remove = _a.remove;
+    var processData = function (data, id) {
         for (var no = 0; no < data.length; no++) {
-            let n = data[no];
+            var n = data[no];
             if (n.id === id) {
@@ -13,3 +22,3 @@ if (remove) {
                 else {
-                    data[no] = Object.assign({}, n, node);
+                    data[no] = __assign({}, n, node);
                 }
@@ -22,3 +31,3 @@ }
     };
-    let data = [...nodes];
+    var data = nodes.slice();
     processData(data, id);
@@ -25,0 +34,0 @@ return {

package.json

 {
   "name": "@aexol/slothking-diagram",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "private": false,
@@ -5,0 +5,0 @@ "publishConfig": {

tsconfig.json

 {
   "compilerOptions": {
     "sourceMap": true,
-    "target": "es6",
+    "target": "es5",
     "jsx": "react",
@@ -6,0 +6,0 @@ "module": "commonjs",

No alert changes

Improved metrics

Total package byte prevSize

238244

increased by5.46%

Lines of code

4574

increased by5.27%

No dependency changes