/*!
 * @dot-map-renderer/react - v0.0.17
 * Compiled Mon, 01 Aug 2022 03:19:26 GMT
 */
import React, { useRef, useEffect } from 'react';
import { DotMap } from '@dot-map-renderer/app';

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 = useRef(null);
    var dotMap = useRef(null);
    var controller = useRef(null);
    useEffect(function () {
        var _a, _b;
        dotMap.current = new 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();
        };
    }, []);
    useEffect(function () {
        lines.forEach(function (line) {
            var _a;
            (_a = controller.current) === null || _a === void 0 ? void 0 : _a.addLine(line);
        });
    }, [lines]);
    useEffect(function () {
        anchors.forEach(function (anchor) {
            var _a;
            (_a = controller.current) === null || _a === void 0 ? void 0 : _a.addAnchor(anchor);
        });
    }, [anchors]);
    useEffect(function () {
        var _a;
        (_a = controller.current) === null || _a === void 0 ? void 0 : _a.addComponent(components);
    }, [components]);
    useEffect(function () {
        var _a;
        if (backgroundColor) {
            (_a = controller.current) === null || _a === void 0 ? void 0 : _a.setBackground(backgroundColor);
        }
    }, [backgroundColor]);
    useEffect(function () {
        var _a;
        if (gapSize) {
            (_a = controller.current) === null || _a === void 0 ? void 0 : _a.setGapSize(gapSize);
        }
    }, [gapSize]);
    useEffect(function () {
        var _a;
        if (pixelColor) {
            (_a = controller.current) === null || _a === void 0 ? void 0 : _a.setPixelColor(pixelColor);
        }
    }, [pixelColor]);
    useEffect(function () {
        var _a;
        if (pixelSize) {
            (_a = controller.current) === null || _a === void 0 ? void 0 : _a.setPixelSize(pixelSize);
        }
    }, [pixelSize]);
    useEffect(function () {
        var _a;
        if (dotType) {
            (_a = controller.current) === null || _a === void 0 ? void 0 : _a.setDotType(dotType);
        }
    }, [dotType]);
    return React.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: {}
};

export { ReactDotMap };
//# sourceMappingURL=react.jsx.map