var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    }
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import React from 'react';
import styled from 'react-emotion';
import graphPaperImage from '../assets/images/graph-paper.svg';
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 1;\n  &::before {\n    content: '';\n    background-image: url(", ");\n    opacity: 0.1;\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    right: 0;\n  }\n"], ["\n  flex: 1;\n  &::before {\n    content: '';\n    background-image: url(", ");\n    opacity: 0.1;\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    right: 0;\n  }\n"])), graphPaperImage);
var Items = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  transform: translate(\n    ", "px,\n    ", "px\n  );\n"], ["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  transform: translate(\n    ", "px,\n    ", "px\n  );\n"])), function (props) { return props.translateX; }, function (props) { return props.translateY; });
var Connections = styled.svg(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  pointer-events: none;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n"], ["\n  position: absolute;\n  pointer-events: none;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n"])));
var Connection = styled('line')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  stroke: #f1c933;\n  stroke-width: 6px;\n"], ["\n  stroke: #f1c933;\n  stroke-width: 6px;\n"])));
var DragItems = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  pointer-events: none;\n  width: 100%;\n  height: 100%;\n  z-index: 3;\n  transform: translate(\n    ", "px,\n    ", "px\n  );\n"], ["\n  position: absolute;\n  pointer-events: none;\n  width: 100%;\n  height: 100%;\n  z-index: 3;\n  transform: translate(\n    ", "px,\n    ", "px\n  );\n"])), function (props) { return props.translateX; }, function (props) { return props.translateY; });
var Canvas = /** @class */ (function (_super) {
    __extends(Canvas, _super);
    function Canvas() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            containerRect: { left: 0, top: 0, width: 0, height: 0 },
            center: { x: 0, y: 0 },
        };
        _this.container = React.createRef();
        _this.onMouseMove = function (e) {
            var _a = _this.props, draggingItem = _a.draggingItem, onDragItem = _a.onDragItem, dragOffsetX = _a.dragOffsetX, dragOffsetY = _a.dragOffsetY, draggingConnection = _a.draggingConnection, onDragConnection = _a.onDragConnection;
            if (draggingItem && onDragItem) {
                var _b = _this.getItemPosition(e, dragOffsetX, dragOffsetY), x = _b.x, y = _b.y;
                onDragItem(x, y);
            }
            if (draggingConnection && onDragConnection) {
                var _c = _this.getItemPosition(e, 0, 0), x = _c.x, y = _c.y;
                onDragConnection(x, y);
            }
        };
        _this.onMouseUp = function (e) {
            var _a = _this.props, draggingItem = _a.draggingItem, onDragItemStop = _a.onDragItemStop, dragOffsetX = _a.dragOffsetX, dragOffsetY = _a.dragOffsetY, draggingConnection = _a.draggingConnection, onDragConnectionStop = _a.onDragConnectionStop;
            if (draggingItem && onDragItemStop) {
                var _b = _this.getItemPosition(e, dragOffsetX, dragOffsetY), x = _b.x, y = _b.y;
                onDragItemStop(x, y);
            }
            if (draggingConnection && onDragConnectionStop) {
                var _c = _this.getItemPosition(e, 0, 0), x = _c.x, y = _c.y;
                onDragConnectionStop(x, y);
            }
        };
        _this.onWindowResize = function () {
            _this.updateContainerRect();
        };
        return _this;
    }
    Canvas.prototype.componentDidMount = function () {
        window.addEventListener('resize', this.onWindowResize);
        window.addEventListener('mousemove', this.onMouseMove);
        window.addEventListener('mouseup', this.onMouseUp);
        this.updateContainerRect();
    };
    Canvas.prototype.componentWillUnmount = function () {
        window.removeEventListener('resize', this.onWindowResize);
        window.removeEventListener('mousemove', this.onMouseMove);
        window.removeEventListener('mouseup', this.onMouseUp);
    };
    Canvas.prototype.getItemPosition = function (e, offsetX, offsetY) {
        var _a = this.state, _b = _a.containerRect, left = _b.left, top = _b.top, width = _b.width, height = _b.height, center = _a.center;
        var _c = this.props, dragOffsetX = _c.dragOffsetX, dragOffsetY = _c.dragOffsetY;
        var x = e.clientX - left - offsetX - (width / 2 - center.x);
        var y = e.clientY - top - offsetY - (height / 2 - center.y);
        return { x: x, y: y };
    };
    Canvas.prototype.updateContainerRect = function () {
        if (this.container.current) {
            this.setState({
                containerRect: this.container.current.getBoundingClientRect(),
            });
        }
    };
    Canvas.prototype.render = function () {
        var _a = this.state, center = _a.center, containerRect = _a.containerRect;
        var _b = this.props, items = _b.items, draggingItem = _b.draggingItem, renderItem = _b.renderItem, connections = _b.connections;
        var width = containerRect.width, height = containerRect.height;
        var translateX = width / 2 - center.x;
        var translateY = height / 2 - center.y;
        return (React.createElement(Container, { innerRef: this.container },
            React.createElement(Items, { translateX: translateX, translateY: translateY }, items.map(function (item, i) { return (React.createElement("div", { key: item.id || i, style: { transform: "translate(" + item.x + "px," + item.y + "px" } }, renderItem(item))); })),
            connections && (React.createElement(Connections, null,
                React.createElement("g", { transform: "translate(" + translateX + " " + translateY + ")" }, connections.map(function (connection, i) { return (React.createElement(Connection, { x1: connection.x1, x2: connection.x2, y1: connection.y1, y2: connection.y2, key: i })); })))),
            React.createElement(DragItems, { translateX: translateX, translateY: translateY }, draggingItem && (React.createElement("div", { style: {
                    transform: "translate(" + draggingItem.x + "px," + draggingItem.y + "px",
                } }, renderItem(draggingItem, true))))));
    };
    return Canvas;
}(React.Component));
export default Canvas;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
//# sourceMappingURL=Canvas.js.map