@aexol/slothking-diagram - npm Package Compare versions

Comparing version 0.1.9 to 0.1.10

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 });
-var React = require("react");
-var EditableText = (function (_super) {
-    __extends(EditableText, _super);
-    function EditableText() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = {
+const React = require("react");
+class EditableText extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
             editing: false
         };
-        return _this;
     }
-    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({
+    render() {
+        const { onChange, text } = this.props;
+        const { editing } = this.state;
+        return (React.createElement("div", { onClick: () => {
+                this.setState({
                     editing: !editing
@@ -35,6 +22,5 @@ });
             ' '));
-    };
-    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 });
-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];
+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 allNodes = processData(nodes);
-            return allNodes.slice();
+            let allNodes = processData(nodes);
+            return [...allNodes];
         };
-        _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); })
+        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))
             };
@@ -112,30 +39,30 @@ console.log(links);
         };
-        _this.deleteNode = function (id) {
-            return __assign({}, _this.deleteLinks(id), utils_1.deepNodeUpdate({ nodes: _this.state.nodes, id: id, remove: true }));
+        this.deleteNode = (id) => {
+            return Object.assign({}, this.deleteLinks(id), utils_1.deepNodeUpdate({ nodes: this.state.nodes, id: id, remove: true }));
         };
-        _this.updateNode = function (nodes, id, node) {
-            return utils_1.deepNodeUpdate({ nodes: nodes, id: id, node: node });
+        this.updateNode = (nodes, id, node) => {
+            return utils_1.deepNodeUpdate({ nodes, id, node });
         };
-        _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.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.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 = {};
+        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 = {};
                 if (expand) {
-                    var oldNodeNodes = _this.nodes(nodes).find(function (n) { return n.id === expand; }).nodes;
-                    updateNodes = _this.updateNode(nodes, expand, {
-                        nodes: oldNodeNodes.concat([newNode])
+                    const oldNodeNodes = this.nodes(nodes).find((n) => n.id === expand).nodes;
+                    updateNodes = this.updateNode(nodes, expand, {
+                        nodes: [...oldNodeNodes, newNode]
                     });
@@ -145,3 +72,3 @@ }
                     updateNodes = {
-                        nodes: state.nodes.concat([newNode])
+                        nodes: [...state.nodes, newNode]
                     };
@@ -152,17 +79,16 @@ }
         };
-        _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.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.reset = function (updateState) {
-            if (updateState === void 0) { updateState = {}; }
-            _this.setState(__assign({ action: GraphDefs_1.Action.Nothing, activePort: null, activeNode: null, selected: null }, updateState));
+        this.reset = (updateState = {}) => {
+            this.setState(Object.assign({ action: GraphDefs_1.Action.Nothing, activePort: null, activeNode: null, selected: null }, updateState));
         };
-        _this.portDown = function (x, y, portId, id) {
-            _this.setState({
+        this.portDown = (x, y, portId, id) => {
+            this.setState({
                 action: GraphDefs_1.Action.ConnectPort,
                 activePort: {
-                    x: x,
-                    y: y,
-                    id: id,
-                    portId: portId,
+                    x,
+                    y,
+                    id,
+                    portId,
                     endX: x,
@@ -173,11 +99,12 @@ endY: y
         };
-        _this.portUp = function (x, y, portId, id) {
-            var activePort = _this.state.activePort;
+        this.portUp = (x, y, portId, id) => {
+            const { activePort } = this.state;
             if (activePort && activePort.portId !== portId) {
-                var nodeId = activePort.id, activePortId = activePort.portId;
-                _this.reset({
-                    links: _this.state.links.concat([
+                const { id: nodeId, portId: activePortId } = activePort;
+                this.reset({
+                    links: [
+                        ...this.state.links,
                         {
                             from: {
-                                nodeId: nodeId,
+                                nodeId,
                                 portId: activePortId
@@ -187,24 +114,24 @@ },
                                 nodeId: id,
-                                portId: portId
+                                portId
                             }
                         }
-                    ])
+                    ]
                 });
             }
         };
-        _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.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.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;
+        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
+                    });
                 };
@@ -219,60 +146,60 @@ if (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.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.renderExpandedNodePorts = function (node) {
-            var inputs = node.inputs, outputs = node.outputs;
+        this.renderExpandedNodePorts = (node) => {
+            const { inputs, outputs } = node;
             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 = 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({
+        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({
                         action: GraphDefs_1.Action.MoveNode,
-                        activeNode: { id: id, x: x - _this.state.mouseX, y: y - _this.state.mouseY },
+                        activeNode: { id, x: x - this.state.mouseX, y: y - this.state.mouseY },
                         selected: node.id
                     });
-                }, nodeUp: function (id) {
-                    _this.reset({
+                }, nodeUp: (id) => {
+                    this.reset({
                         selected: node.id
                     });
-                } }))); });
+                } }))));
         };
-        _this.expandNode = function (selectedNode) {
+        this.expandNode = (selectedNode) => {
             console.log('selectedNode');
-            _this.setState(function (state) { return ({
+            this.setState((state) => ({
                 expand: selectedNode,
-                path: state.path.concat([selectedNode]),
+                path: [...state.path, selectedNode],
                 selected: null
-            }); });
+            }));
         };
-        _this.shrinkNode = function (selectedNode) {
-            var path = _this.state.path;
+        this.shrinkNode = (selectedNode) => {
+            let path = this.state.path;
             path.pop();
-            var expand = path[path.length - 1];
-            _this.setState({
-                expand: expand,
-                path: path,
+            let expand = path[path.length - 1];
+            this.setState({
+                expand,
+                path,
                 selected: selectedNode
             });
         };
-        _this.spaceBarCategories = function () {
-            var categories = _this.props.categories;
-            var spaceBarCategories = categories.map(function (c) { return (__assign({}, c, { items: c.items.map(function (i) { return ({
+        this.spaceBarCategories = () => {
+            const { categories } = this.props;
+            let spaceBarCategories = categories.map((c) => (Object.assign({}, c, { items: c.items.map((i) => ({
                     name: i.name,
-                    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() })); }) }));
+                    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() }))) }));
                     }
-                }); }) })); });
+                })) })));
             spaceBarCategories = [
@@ -284,4 +211,4 @@ {
                             name: 'save',
-                            action: function () {
-                                _this.serialize();
+                            action: () => {
+                                this.serialize();
                             }
@@ -293,8 +220,8 @@ }
                     name: 'node',
-                    items: _this.state.selected
+                    items: this.state.selected
                         ? [
                             {
                                 name: 'expand',
-                                action: function () {
-                                    _this.expandNode(_this.state.selected);
+                                action: () => {
+                                    this.expandNode(this.state.selected);
                                 }
@@ -304,4 +231,4 @@ },
                                 name: 'delete',
-                                action: function () {
-                                    _this.setState(function (state) { return (__assign({}, _this.deleteNode(state.selected), { selected: null })); });
+                                action: () => {
+                                    this.setState((state) => (Object.assign({}, this.deleteNode(state.selected), { selected: null })));
                                 }
@@ -311,13 +238,13 @@ },
                                 name: 'duplicate',
-                                action: function () {
-                                    _this.cloneNode(_this.nodes(_this.state.nodes).find(function (n) { return n.id === _this.state.selected; }));
+                                action: () => {
+                                    this.cloneNode(this.nodes(this.state.nodes).find((n) => n.id === this.state.selected));
                                 }
                             }
                         ]
-                        : _this.state.expand
+                        : this.state.expand
                             ? [
                                 {
                                     name: 'back',
-                                    action: function () {
-                                        _this.shrinkNode(_this.state.expand);
+                                    action: () => {
+                                        this.shrinkNode(this.state.expand);
                                     }
@@ -327,45 +254,40 @@ }
                             : []
-                }
-            ].concat(spaceBarCategories);
+                },
+                ...spaceBarCategories
+            ];
             return spaceBarCategories;
         };
-        _this.serialize = function () {
-            var serialize = _this.props.serialize;
+        this.serialize = () => {
+            const { serialize } = this.props;
             if (serialize) {
-                serialize(_this.state.nodes, _this.state.links);
+                serialize(this.state.nodes, this.state.links);
             }
         };
-        return _this;
     }
-    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)
-                };
+    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);
             }
-            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', function (e) {
+        document.addEventListener('keyup', (e) => {
             if (e.keyCode === 32) {
-                _this.toggleSpace(false);
+                this.toggleSpace(false);
             }
         });
-        document.addEventListener('mousemove', function (e) {
-            _this.setState(function (state) {
-                var stateUpdate = {
+        document.addEventListener('mousemove', (e) => {
+            this.setState((state) => {
+                let stateUpdate = {
                     mouseX: e.clientX,
@@ -375,3 +297,3 @@ mouseY: e.clientY
                 if (state.action === GraphDefs_1.Action.MoveNode) {
-                    stateUpdate = __assign({}, stateUpdate, _this.updateNode(state.nodes, state.activeNode.id, {
+                    stateUpdate = Object.assign({}, stateUpdate, this.updateNode(state.nodes, state.activeNode.id, {
                         x: e.clientX + state.activeNode.x,
@@ -382,7 +304,7 @@ y: e.clientY + state.activeNode.y
                 if (state.action === GraphDefs_1.Action.ConnectPort) {
-                    stateUpdate = __assign({}, stateUpdate, { activePort: __assign({}, state.activePort, { endX: e.clientX, endY: e.clientY }) });
+                    stateUpdate = Object.assign({}, stateUpdate, { activePort: Object.assign({}, state.activePort, { endX: e.clientX, endY: e.clientY }) });
                 }
                 if (state.action === GraphDefs_1.Action.Pan) {
-                    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 })); }) });
+                    let { nodes } = state;
+                    stateUpdate = Object.assign({}, stateUpdate, { nodes: nodes.map((n) => (Object.assign({}, n, { x: n.x + e.movementX, y: n.y + e.movementY }))) });
                 }
@@ -392,24 +314,23 @@ return stateUpdate;
         });
-    };
-    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;
+    }
+    render() {
+        let { nodes, expand, links } = this.state;
+        let selectedNode = this.state.selected || this.state.expand;
         if (expand) {
             nodes = this.nodes(nodes);
-            var expandNode = nodes.find(function (n) { return n.id === expand; });
+            let expandNode = nodes.find((n) => n.id === expand);
             nodes = expandNode.nodes;
             nodes = nodes || [];
-            nodes = nodes.concat([__assign({}, expandNode, { x: this.aX(0), y: this.aY(0) })]);
+            nodes = [...nodes, Object.assign({}, expandNode, { x: this.aX(0), y: this.aY(0) })];
         }
-        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({
+        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({
                     action: GraphDefs_1.Action.Pan
                 });
-            }, onMouseUp: function (e) {
-                _this.reset();
+            }, onMouseUp: (e) => {
+                this.reset();
             } },
@@ -419,3 +340,3 @@ React.createElement("div", { className: styles.DependencyNodes },
                 expand &&
-                    this.renderExpandedNodePorts(this.nodes(this.state.nodes).find(function (n) { return n.id === expand; })),
+                    this.renderExpandedNodePorts(this.nodes(this.state.nodes).find((n) => n.id === expand)),
                 React.createElement("svg", { style: {
@@ -435,15 +356,14 @@ 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(function (n) { return n.id === selectedNode; }), onChange: function (selected) {
-                    _this.setState(function (state) {
-                        return _this.updateNode(state.nodes, selected.id, selected);
+            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);
                     });
-                }, 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);
+                }, canExpand: !!this.state.selected, canShrink: !this.state.selected && this.state.path.length > 1, onExpand: () => {
+                    this.expandNode(selectedNode);
+                }, onShrink: () => {
+                    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 });
-var React = require("react");
-var buildSquarePath = function (x1, y1, x2, y2) {
-    var centerX = (x1 + x2) / 2.0;
+const React = require("react");
+const buildSquarePath = (x1, y1, x2, y2) => {
+    let centerX = (x1 + x2) / 2.0;
     return [x1, y1, centerX, y1, centerX, y2, x2, y2];
 };
-var LinkWidget = (function (_super) {
-    __extends(LinkWidget, _super);
-    function LinkWidget() {
-        return _super !== null && _super.apply(this, arguments) || this;
+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(",")}` });
     }
-    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 });
-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 = {
+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 = {
             input: ''
         };
-        return _this;
     }
-    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: {
+    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: {
                 top: y,
                 left: x,
                 pointerEvents: 'all'
-            }, ref: function (ref) { return (_this.node = ref); }, onMouseDown: function (e) {
+            }, ref: (ref) => (this.node = ref), onMouseDown: (e) => {
                 e.stopPropagation();
                 nodeDown(id, x, y);
-            }, onMouseUp: function (e) {
+            }, onMouseUp: (e) => {
                 e.stopPropagation();
@@ -54,10 +33,10 @@ nodeUp(id);
             React.createElement("div", { className: styles.DependencyNodePorts },
-                inputs.map(function (i) { return (React.createElement(Port_1.Port, __assign({ portUp: function (x, y) {
+                inputs.map((i) => (React.createElement(Port_1.Port, Object.assign({ portUp: (x, y) => {
                         portUp(x, y, i.id, id);
-                    }, portDown: function (x, y) {
+                    }, portDown: (x, y) => {
                         portDown(x, y, i.id, id);
-                    }, portPosition: function (x, y, output) {
+                    }, portPosition: (x, y, output) => {
                         portPosition(x, y, i.id, id, output);
-                    }, key: i.name }, i))); }),
-                editable && (React.createElement("form", { onSubmit: function (e) {
+                    }, key: i.name }, i)))),
+                editable && (React.createElement("form", { onSubmit: (e) => {
                         e.preventDefault();
@@ -69,19 +48,17 @@ addPort({
                     } },
-                    React.createElement("input", { type: "text", placeholder: "Add input...", value: input, className: styles.DependencyNodePortInputAdd, onChange: function (e) {
-                            _this.setState({
+                    React.createElement("input", { type: "text", placeholder: "Add input...", value: input, className: styles.DependencyNodePortInputAdd, onChange: (e) => {
+                            this.setState({
                                 input: e.target.value
                             });
                         } }))),
-                outputs.map(function (i) { return (React.createElement(Port_1.Port, __assign({ portUp: function (x, y) {
+                outputs.map((i) => (React.createElement(Port_1.Port, Object.assign({ portUp: (x, y) => {
                         portUp(x, y, i.id, id);
-                    }, portDown: function (x, y) {
+                    }, portDown: (x, y) => {
                         portDown(x, y, i.id, id);
-                    }, portPosition: function (x, y, output) {
+                    }, portPosition: (x, y, output) => {
                         portPosition(x, y, i.id, id, output);
-                    }, output: true, key: i.name }, i))); }))));
-        var _f;
-    };
-    return Node;
-}(React.Component));
+                    }, output: true, key: i.name }, i)))))));
+    }
+}
 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 });
-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);
+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);
         };
-        return _this;
     }
-    Port.prototype.componentDidMount = function () {
+    componentDidMount() {
         if (!this.props.unpluggable) {
             this.portPosition();
         }
-    };
-    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: {
+    }
+    render() {
+        const { name, portDown, portUp, connected = false, output = false, unpluggable } = this.props;
+        return (React.createElement("div", { className: classnames({
+                [styles.DependencyNodePort]: true
+            }), style: {
                 flexDirection: output ? 'row' : 'row-reverse'
             } },
-            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;
+            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;
                     }
                 }, style: {
                     pointerEvents: 'all'
-                }, onMouseDown: function (e) {
+                }, onMouseDown: (e) => {
                     e.stopPropagation();
                     portDown(e.clientX, e.clientY);
-                }, onMouseUp: function (e) {
+                }, onMouseUp: (e) => {
                     e.stopPropagation();
                     portUp(e.clientX, e.clientY);
-                }, 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));
+                }, className: classnames({
+                    [styles.DependencyNodePortDot]: true,
+                    [styles.DependencyNodePortDotOutput]: output,
+                    [styles.DependencyNodePortDotInput]: !output,
+                    [styles.DependencyNodePortDotConnected]: connected
+                }) }))));
+    }
+}
 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 });
-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;
-                    } }))); });
+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)) }));
+                    } }))));
         };
-        return _this;
     }
-    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 },
+    render() {
+        const { canExpand, canShrink, node, onChange } = this.props;
+        return (React.createElement("div", { onMouseUp: (e) => e.stopPropagation(), className: styles.Props },
             React.createElement("div", { className: styles.PropsPort },
-                React.createElement("input", { className: styles.PropsPortInput, type: "text", value: node.name, onChange: function (e) {
-                        onChange(__assign({}, node, { name: e.target.value }));
+                React.createElement("input", { className: styles.PropsPortInput, type: "text", value: node.name, onChange: (e) => {
+                        onChange(Object.assign({}, node, { name: e.target.value }));
                     } })),
@@ -48,6 +27,5 @@ 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 });
-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)
-            } }));
-    });
-};
+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)
+        } }));
+});
 //# 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 });
-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 = {
+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 = {
             input: ''
         };
-        return _this;
     }
-    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: {
+    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: {
                 top: y,
                 left: x,
                 pointerEvents: 'all'
-            }, ref: function (ref) { return (_this.node = ref); }, onMouseDown: function (e) {
+            }, ref: (ref) => (this.node = ref), onMouseDown: (e) => {
                 e.stopPropagation();
                 nodeDown(id, x, y);
-            }, onMouseUp: function (e) {
+            }, onMouseUp: (e) => {
                 e.stopPropagation();
                 nodeUp(id);
             } },
-            inputs.map(function (i) { return (React.createElement(Port_1.Port, __assign({ portUp: function (x, y) {
+            inputs.map((i) => (React.createElement(Port_1.Port, Object.assign({ portUp: (x, y) => {
                     portUp(x, y, i.id, id);
-                }, portDown: function (x, y) {
+                }, portDown: (x, y) => {
                     portDown(x, y, i.id, id);
-                }, portPosition: function (x, y, output) {
+                }, portPosition: (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(function (i) { return (React.createElement(Port_1.Port, __assign({ portUp: function (x, y) {
+            outputs.map((i) => (React.createElement(Port_1.Port, Object.assign({ portUp: (x, y) => {
                     portUp(x, y, i.id, id);
-                }, portDown: function (x, y) {
+                }, portDown: (x, y) => {
                     portDown(x, y, i.id, id);
-                }, portPosition: function (x, y, output) {
+                }, portPosition: (x, y, output) => {
                     portPosition(x, y, i.id, id, output);
-                }, output: true, key: i.name }, i))); })));
-        var _e;
-    };
-    return Node;
-}(React.Component));
+                }, output: true, key: i.name }, i))))));
+    }
+}
 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 });
-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 = {
+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 = {
             category: null,
             menuWidth: 0
         };
-        return _this;
     }
-    SpaceBarMenu.prototype.componentDidMount = function () {
+    componentDidMount() {
         this.setState({ menuWidth: this.menu.offsetWidth });
         console.log(this.menu.offsetWidth);
-    };
-    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;
+    }
+    render() {
+        const { x, y, categories } = this.props;
+        const { category } = this.state;
         return (React.createElement("div", { className: styles.SpaceBarMenu, style: {
@@ -59,25 +35,24 @@ position: 'fixed',
                 pointerEvents: 'all'
-            }, onMouseUp: function (e) {
+            }, onMouseUp: (e) => {
                 e.stopPropagation();
-            }, onMouseDown: function (e) {
+            }, onMouseDown: (e) => {
                 e.stopPropagation();
             } },
-            React.createElement(Categories, { categories: categories.filter(function (c, i) { return i % 2 === 0; }), category: category, onMouseOver: function (e) {
-                    _this.setState({
+            React.createElement(Categories, { categories: categories.filter((c, i) => i % 2 === 0), category: category, onMouseOver: (e) => {
+                    this.setState({
                         category: e
                     });
-                }, top: false, style: { marginLeft: -this.state.menuWidth / 2.0 }, refFunction: function (ref) {
+                }, top: false, style: { marginLeft: -this.state.menuWidth / 2.0 }, refFunction: (ref) => {
                     if (ref) {
-                        _this.menu = ref;
+                        this.menu = ref;
                     }
                 } }),
-            React.createElement(Categories, { refFunction: function () { }, categories: categories.filter(function (c, i) { return i % 2 !== 0; }), category: category, onMouseOver: function (e) {
-                    _this.setState({
+            React.createElement(Categories, { refFunction: () => { }, categories: categories.filter((c, i) => i % 2 !== 0), category: category, onMouseOver: (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 = 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) {
+exports.generateId = () => new Array(crypto.getRandomValues(new Uint8Array(4))).join('-');
+exports.deepNodeUpdate = ({ nodes, id, node, remove }) => {
+    const processData = (data, id) => {
         for (var no = 0; no < data.length; no++) {
-            var n = data[no];
+            let n = data[no];
             if (n.id === id) {
@@ -22,3 +13,3 @@ if (remove) {
                 else {
-                    data[no] = __assign({}, n, node);
+                    data[no] = Object.assign({}, n, node);
                 }
@@ -31,3 +22,3 @@ }
     };
-    var data = nodes.slice();
+    let data = [...nodes];
     processData(data, id);
@@ -34,0 +25,0 @@ return {

package.json

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

tsconfig.json

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

No alert changes

Worsened metrics

Total package byte prevSize

225903

decreased by-5.18%

Lines of code

4345

decreased by-5.01%

No dependency changes