visualization-design/public/view/meta2d-vue2/src/views/2d/Meta2d.vue

<template>
  <div class="content">
    <div id="meta2d"></div>
  </div>
</template>

<script>
import {
  Meta2d,
  register,
  registerAnchors,
  registerCanvasDraw,
} from '@meta2d/core';
import { flowPens, flowAnchors } from '@meta2d/flow-diagram';
import {
  activityDiagram,
  activityDiagramByCtx,
} from '@meta2d/activity-diagram';
import { classPens } from '@meta2d/class-diagram';
import { sequencePens, sequencePensbyCtx } from '@meta2d/sequence-diagram';
import { register as registerEcharts } from '@meta2d/chart-diagram';
import { registerHighcharts } from '@meta2d/chart-diagram';
import { registerLightningChart } from '@meta2d/chart-diagram';
import { formPens, formPath2DPens } from '@meta2d/form-diagram';
import { chartsPens } from '@meta2d/le5le-charts';
import { ftaPens, ftaPensbyCtx, ftaAnchors } from '@meta2d/fta-diagram';

let meta2d = null;

globalThis.getMeta2dData =async (id) => {
  const res = await fetch(`/json/${id}.json`, {
    method:'GET',
  });
  if (res.ok) {
    let data = await res.text();
    // meta2d.open(JSON.parse(data));
    return JSON.parse(data);
  }
}
    
export default {
  name: 'Meta2d',
  mounted() {
    this.initMeta2d();
  },
  destroyed() {
    if(meta2d){
      meta2d.off('opened',this.opened);
      meta2d.destroy();
    }
  },
  methods: {
    initMeta2d() {
      const options = {
        // x: 10,
        // y: 10,
        width: 1920,
        height: 1080,
        background: '#1e2430',
        color: '#bdc7db',
      };
      meta2d = new Meta2d('meta2d', options);
      //注册基础图形库 参考文档：https://doc.le5le.com/document/119754049
      this.registerBasicDiagram();
      meta2d.on('opened',this.opened);
      
      this.open();

      //注册企业图形库
      setTimeout(async()=>{
        globalThis.userId = meta2d.store.data.userId;
        globalThis.registerIot(globalThis.userId,'/js/2d-components.js');
        if (globalThis.meta2dTools && registerToolsNew) {
          registerToolsNew();
        }
      },1000);
    },

    open(){
      let url = '/json/v.json';
      if (this.$route.query.id) {
        url = `/json/${this.$route.query.id}.json`;
        if(this.$route.query.id.startsWith('2d')){
          meta2d.setOptions({
            background: '#fff',
            color: '#000',
            width:undefined,
            height:undefined
          });
        }
      } 
      this._fetch(url, function (text) {
        var data = JSON.parse(text);
        data.locked = 1;
        data.rule = false;
        globalThis.userId = data.userId;
        meta2d.open(data);
      });
    },

    opened(){
      if(this.$route.query.id&&this.$route.query.id.startsWith('2d')){
        meta2d.fitView(true, 0); //充满屏幕
      }else{
        meta2d.fitSizeView(true, 0); //大屏充满屏幕
      }
    },

    _fetch(url, cb) {
      var xhr = new XMLHttpRequest();
      xhr.open('GET', url, true);
      xhr.send();
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          cb && cb(xhr.responseText);
        }
      };
    },
    registerBasicDiagram() {
      register(flowPens());
      registerAnchors(flowAnchors());
      register(activityDiagram());
      registerCanvasDraw(activityDiagramByCtx());
      register(classPens());
      register(sequencePens());
      registerCanvasDraw(sequencePensbyCtx());
      registerEcharts();
      registerHighcharts();
      registerLightningChart();
      register(formPath2DPens());
      registerCanvasDraw(formPens());
      registerCanvasDraw(chartsPens());
      register(ftaPens());
      registerCanvasDraw(ftaPensbyCtx());
      registerAnchors(ftaAnchors());
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content {
  position: relative;
  background-color: #1e2430;
  height: 100vh;
}

#meta2d {
  position: absolute !important;
  width: 100%;
  height: 100%;
  touch-action: none;
  overflow: hidden;
}
</style>