/*!
 * @dot-map-renderer/react - v0.0.17
 * Compiled Mon, 01 Aug 2022 03:19:26 GMT
 */
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var app = require('@dot-map-renderer/app');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

function ReactDotMap(ref$1) {
    var anchors = ref$1.anchors; if ( anchors === void 0 ) anchors = [];
    var lines = ref$1.lines; if ( lines === void 0 ) lines = [];
    var components = ref$1.components; if ( components === void 0 ) components = [];
    var style = ref$1.style;
    var className = ref$1.className;
    var backgroundColor = ref$1.backgroundColor;
    var gapSize = ref$1.gapSize;
    var pixelColor = ref$1.pixelColor;
    var pixelSize = ref$1.pixelSize;
    var dotType = ref$1.dotType;
    var renderer = ref$1.renderer;

    var ref = React.useRef(null);
    var dotMap = React.useRef(null);
    var controller = React.useRef(null);
    React.useEffect(function () {
        var _a, _b;
        dotMap.current = new app.DotMap({
            backgroundColor: backgroundColor,
            gapSize: gapSize,
            pixelColor: pixelColor,
            pixelSize: pixelSize,
            dotType: dotType,
            renderer: renderer
        });
        (_a = dotMap.current) === null || _a === void 0 ? void 0 : _a.attach(ref.current);
        controller.current = (_b = dotMap.current) === null || _b === void 0 ? void 0 : _b.getController();
        return function () {
            var _a;
            (_a = dotMap.current) === null || _a === void 0 ? void 0 : _a.detach();
        };
    }, []);
    React.useEffect(function () {
        lines.forEach(function (line) {
            var _a;
            (_a = controller.current) === null || _a === void 0 ? void 0 : _a.addLine(line);
        });
    }, [lines]);
    React.useEffect(function () {
        anchors.forEach(function (anchor) {
            var _a;
            (_a = controller.current) === null || _a === void 0 ? void 0 : _a.addAnchor(anchor);
        });
    }, [anchors]);
    React.useEffect(function () {
        var _a;
        (_a = controller.current) === null || _a === void 0 ? void 0 : _a.addComponent(components);
    }, [components]);
    React.useEffect(function () {
        var _a;
        if (backgroundColor) {
            (_a = controller.current) === null || _a === void 0 ? void 0 : _a.setBackground(backgroundColor);
        }
    }, [backgroundColor]);
    React.useEffect(function () {
        var _a;
        if (gapSize) {
            (_a = controller.current) === null || _a === void 0 ? void 0 : _a.setGapSize(gapSize);
        }
    }, [gapSize]);
    React.useEffect(function () {
        var _a;
        if (pixelColor) {
            (_a = controller.current) === null || _a === void 0 ? void 0 : _a.setPixelColor(pixelColor);
        }
    }, [pixelColor]);
    React.useEffect(function () {
        var _a;
        if (pixelSize) {
            (_a = controller.current) === null || _a === void 0 ? void 0 : _a.setPixelSize(pixelSize);
        }
    }, [pixelSize]);
    React.useEffect(function () {
        var _a;
        if (dotType) {
            (_a = controller.current) === null || _a === void 0 ? void 0 : _a.setDotType(dotType);
        }
    }, [dotType]);
    return React__default["default"].createElement("div", { ref: ref, style: style, className: className });
}
ReactDotMap.defaultProps = {
    anchors: [],
    backgroundColor: 'white',
    dotType: 'circle',
    gapSize: 5,
    className: '',
    lines: [],
    pixelColor: 'black',
    pixelSize: 5,
    components: [],
    renderer: 'canvas',
    style: {}
};

exports.ReactDotMap = ReactDotMap;
//# sourceMappingURL=react.jsx.map