<script setup lang="ts">
  import { Editor, EditorLayout, EditorLayoutItem } from 'mce'
  import 'mce/styles'
  import mp4 from '@mce/mp4'
  import openxml from '@mce/openxml'
  import pdf from '@mce/pdf'
  import svg from '@mce/svg'

  const editor = new Editor({
    plugins: [
      mp4(),
      openxml(),
      pdf(),
      svg(),
    ],
    theme: 'system',
    viewMode: 'edgeless',
    watermark: '/example.jpg',
    checkerboard: true,
    checkerboardStyle: 'grid',
    pixelGrid: true,
    pixelate: true,
    camera: true,
    ruler: true,
    scrollbar: true,
    toolbelt: true,
    statusbar: true,
    frameGap: 48,
    typographyStrategy: 'autoHeight',
    handleShape: 'rect',
    screenCenterOffset: { left: 0, top: 0, right: 0, bottom: 0 },
    localDb: false,
    customUpload: async (blob) => URL.createObjectURL(blob),
    customContextMenu: (menu) => menu,
    locale: {
      locale: 'zhHans', // default 'en'
    },
    defaultFont: { family: 'SourceHanSansCN-Normal', src: '/SourceHanSansCN-Normal.woff' },
    doc: {
      children: [
        { foreground: '/example.png', style: { rotate: 60, left: 200, top: 10, width: 50, height: 50 } },
        { text: 'test', style: { rotate: 40, left: 100, top: 100, width: 60, height: 40, fontSize: 20, color: '#FF00FF' } },
        {
          style: { left: 200, top: 100, width: 100, height: 100, fontSize: 22 },
          text: [
            {
              letterSpacing: 3,
              fragments: [
                { content: 'He', color: '#00FF00', fontSize: 12 },
                { content: 'llo', color: '#000000' },
              ],
            },
            { content: ', ', color: '#FF0000' },
            { content: 'World!', color: '#0000FF' },
          ],
        },
      ],
    },
  })

  editor.on('setDoc', () => {
    editor.load('http://localhost:5173/example.jpg').then((el) => {
      editor.addElement(el, {
        position: { x: 500, y: 100 },
      })
    })
  })
</script>

<template>
  <div style="width: 100vw; height: 100vh">
    <EditorLayout :editor="editor">
      <template #selector="{ box }" />
      <template #transformer="{ box }" />
      <template #floatbar />
      <template #drawboard />
      <EditorLayoutItem position="top" :size="56" />
      <EditorLayoutItem position="left" :size="380" />
      <EditorLayoutItem position="right" :size="260" />
    </EditorLayout>
  </div>
</template>

<script setup lang="ts">
  import { useEditor } from 'mce'
  const { selection } = useEditor()
</script>

<template>
  <div>
    {{ selection }}
  </div>
</template>