gctGenerator/site/.vuepress/components/Preview.vue

<template>
  <div class="preview-root">
    <div class="preview-ctn">
      <div v-if="qft">
        <div :style="qft.bgStyle" />
        <PreviewString :x="qft.x" :y="qft.y" :size="qft.fontSize" :color="qft.color" text="0:00:00" />
      </div>
      <div v-if="mdps">
        <PreviewString v-for="mdp,i in mdps" :key="i"
          :x="mdp.x" :y="mdp.y" :size="mdp.fontSize" :color="mdp.color" :text="mdp.text" />
      </div>
      <PreviewString v-if="ps" :x="ps.x" :y="ps.y" :size="ps.fontSize" :color="ps.color" :text="ps.text" />
    </div>
  </div>
</template>

<script>
import { rgbaI2S, fg2Style } from './codes/utils.js';
export default {
  props: {
    config: {type: Object},
  },
  computed: {
    mdps() {
      const {config} = this;
      if (config.PASDisplay) return [{
        x: 16,
        y: 200,
        fontSize: 20,
        color: '#fff',
        text: 'X Pos -39\nY Pos 1207\nZ Pos -4193\nAngle 65535\nH Spd 15.15\nV Spd -31.17',
      }];
      if (config.SpeedDisplay) return [{
        x: 16,
        y: 240,
        fontSize: 20,
        color: '#fff',
        text: 'H Spd 15.15\nV Spd -31.17',
      }];
      if (config.CustomizedDisplay) {
        return config.CustomizedDisplay.map(({fgRGB, fgA, fgRGB2, fgA2, ...o}) => ({
          ...o,
          color: fg2Style(fgRGB, fgA, fgRGB2, fgA2),
        }));
      }
    },
    qft() {
      const {config: {qft}} = this;
      if (qft == null) return;
      const {x, y, fontSize, fgRGB, fgA, fgRGB2, fgA2, bgRGB, bgA, width} = qft;
      const bg = rgbaI2S(bgRGB, bgA);
      return {
        x, y, fontSize,
        color: fg2Style(fgRGB, fgA, fgRGB2, fgA2),
        bgStyle: {
          left: x+'px',
          top: (y-fontSize)+'px',
          width: (width*fontSize/20)+'px',
          height: fontSize+'px',
          background: bg,
        },
      };
    },
    ps() {
      const {config: {PatternSelector: ps}} = this;
      if (ps == null) return;
      const {x, y, fontSize, fgRGB, fgA, fgRGB2, fgA2, label} = ps;
      return {
        x, y, fontSize,
        color: fg2Style(fgRGB, fgA, fgRGB2, fgA2),
        text: label+'#0 0 0',
      };
    },
  },
}
</script>

<style scoped>
div.preview-root {
  position: relative;
  width: 600px;
  height: 448px;
  background: url(/img/preview/background.png);
  padding: 0;
  overflow: hidden;
}
div.preview-ctn {
  position: absolute;
  top: -16px;
}
div.preview-ctn * {
  position: absolute;
}
</style>