'use strict';

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

var vue = require('vue');
var props = require('./props.cjs');
var constant = require('./constant.cjs');
var qrcodegen = require('./qrcodegen.cjs');
var util = require('./util.cjs');

var QRCodeCanvas = /* @__PURE__ */ vue.defineComponent({
  name: "QRCodeCanvas",
  inheritAttrs: false,
  props: props.qrcodeCanvasProps(),
  setup(props, {
    attrs,
    expose
  }) {
    const imgSrc = vue.computed(() => {
      var _a;
      return (_a = props.imageSettings) == null ? void 0 : _a.src;
    });
    const _canvas = vue.shallowRef(null);
    const _image = vue.shallowRef(null);
    const isImgLoaded = vue.shallowRef(false);
    expose({
      toDataURL: (type, quality) => {
        var _a;
        return (_a = _canvas.value) == null ? void 0 : _a.toDataURL(type, quality);
      }
    });
    vue.watchEffect(() => {
      const {
        value,
        size = constant.DEFAULT_SIZE,
        level = constant.DEFAULT_LEVEL,
        bgColor = constant.DEFAULT_BGCOLOR,
        fgColor = constant.DEFAULT_FGCOLOR,
        includeMargin = constant.DEFAULT_INCLUDEMARGIN,
        marginSize,
        imageSettings
      } = props;
      if (_canvas.value != null) {
        const canvas = _canvas.value;
        const ctx = canvas.getContext("2d");
        if (!ctx)
          return;
        let cells = qrcodegen.default.QrCode.encodeText(value, constant.ERROR_LEVEL_MAP[level]).getModules();
        const margin = util.getMarginSize(includeMargin, marginSize);
        const numCells = cells.length + margin * 2;
        const calculatedImageSettings = util.getImageSettings(cells, size, margin, imageSettings);
        const image = _image.value;
        const haveImageToRender = isImgLoaded.value && calculatedImageSettings != null && image !== null && image.complete && image.naturalHeight !== 0 && image.naturalWidth !== 0;
        if (haveImageToRender) {
          if (calculatedImageSettings.excavation != null)
            cells = util.excavateModules(cells, calculatedImageSettings.excavation);
        }
        const pixelRatio = window.devicePixelRatio || 1;
        canvas.height = canvas.width = size * pixelRatio;
        const scale = size / numCells * pixelRatio;
        ctx.scale(scale, scale);
        ctx.fillStyle = bgColor;
        ctx.fillRect(0, 0, numCells, numCells);
        ctx.fillStyle = fgColor;
        if (util.SUPPORTS_PATH2D) {
          ctx.fill(new Path2D(util.generatePath(cells, margin)));
        } else {
          cells.forEach((row, rdx) => {
            row.forEach((cell, cdx) => {
              if (cell)
                ctx.fillRect(cdx + margin, rdx + margin, 1, 1);
            });
          });
        }
        if (haveImageToRender) {
          ctx.drawImage(image, calculatedImageSettings.x + margin, calculatedImageSettings.y + margin, calculatedImageSettings.w, calculatedImageSettings.h);
        }
      }
    }, {
      flush: "post"
    });
    vue.watch(imgSrc, () => {
      isImgLoaded.value = false;
    });
    return () => {
      var _a;
      const size = (_a = props.size) != null ? _a : constant.DEFAULT_SIZE;
      const canvasStyle = {
        height: `${size}px`,
        width: `${size}px`
      };
      let img = null;
      if (imgSrc.value != null) {
        img = vue.createVNode("img", {
          "src": imgSrc.value,
          "key": imgSrc.value,
          "style": {
            display: "none"
          },
          "onLoad": () => {
            isImgLoaded.value = true;
          },
          "ref": _image
        }, null);
      }
      return vue.createVNode(vue.Fragment, null, [vue.createVNode("canvas", {
        ...attrs,
        "style": [canvasStyle, attrs.style],
        "ref": _canvas
      }, null), img]);
    };
  }
});

exports.default = QRCodeCanvas;
//# sourceMappingURL=Canvas.cjs.map
