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 { registerNormalShape } from "../components/register";
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 } 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>