<script setup>
import { onMounted, nextTick } from "vue";
import Painterro from "painterro";
const props = defineProps({
  modelValue: String
});
const emit = defineEmits(["update:modelValue", "closedDialog"]);
const setting = {
  id: "painterroContainer",
  defaultTool: "brush",
  toolbarPosition: "top",
  toolbarHeightPx: "50",
  pixelizePixelSize: "5%",
  hiddenTools: [
    "resize",
    "redo",
    "bucket",
    "clear",
    "settings"
  ],
  saveHandler: function(image, done) {
    emit("update:modelValue", image.asDataURL());
    emit("closedDialog", false);
    done(true);
  },
  onClose: function() {
    emit("closedDialog", false);
  }
};
onMounted(async () => {
  await nextTick();
  props.modelValue != "" ? Painterro(setting).show(props.modelValue) : Painterro(setting).show();
});
</script>

<template>
  <div id="painterroContainer" style="width: 100%; height: 100dvh;"></div>
</template>
