visualization-design/src/views/Preview.vue

<template>
  <div class="preview">
    <div class="meta2d-canvas" ref="meta2dDom"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, onUnmounted } from 'vue';
import localforage from 'localforage';
import { localMeta2dDataName } from '@/services/utils';
import { defaultFormat } from '@/services/defaults';
import { useRouter, useRoute } from 'vue-router';
import { Meta2d, Options, Pen } from '@meta2d/core';
import { registerBasicDiagram } from '@/services/register';
import { cdn, getLe5le2d } from '@/services/api';
const route = useRoute();

const meta2dDom = ref('');

const meta2dOptions: Options = {
  cdn,
  //   rule: true,
  background: '#1e2430',
  x: 10,
  y: 10,
  width: 1920,
  height: 1080,
  //   defaultFormat: { ...defaultFormat },
};

onMounted(() => {
  meta2d = new Meta2d(meta2dDom.value, meta2dOptions);
  registerBasicDiagram();
  open();
  meta2d.on('opened', opened);
});

const watcher = watch(
  () => route.query.id,
  async () => {
    open();
  }
);

const open = async () => {
  if (route.query.id) {
    const ret: any = getLe5le2d(route.query.id + '');
    ret && meta2d.open(ret);
  } else {
    const data: any = JSON.parse(
      await localforage.getItem(localMeta2dDataName)
    );
    data && meta2d.open(data);
  }
};

const opened = () => {
  meta2d.fitSizeView(true, 10);
};

onUnmounted(() => {
  watcher();
  if (meta2d) {
    meta2d.off('opened', opened);

    meta2d.destroy();
  }
});
</script>
<style lang="postcss" scoped>
.preview {
  width: 100vw;
  height: 100vh;
  background-color: var(--color-background-editor);
  .meta2d-canvas {
    width: 100%;
    height: 100%;
  }
}
</style>