EEP_BookPreview/src/views/book/courseware/preview/components/matching/MatchingPreview.vue

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="matching-preview" :style="[getAreaStyle(), getComponentStyle()]">
    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />

    <div class="main">
      <ul ref="list" class="option-list">
        <li v-for="(item, i) in data.option_list" :key="i" class="list-item">
          <div
            v-for="({ content, mark, multilingual, paragraph_list }, j) in item"
            :key="mark"
            :class="['item-wrapper', `item-${mark}`, computedAnswerClass(mark, i, j), { isMobile: isMobile }]"
            :style="{
              cursor: disabled ? 'default' : 'pointer',
              flex: isMobile ? '0 1 auto' : '',
              width: isMobile ? 'calc(50% - 8px)' : '',
              overflow: isMobile ? 'auto' : '',
            }"
            @mousedown="mousedown($event, i, j, mark)"
            @mouseup="mouseup($event, i, j, mark)"
            @click="handleClickConnection($event, i, j, mark)"
          >
            <PinyinText
              v-if="isEnable(data.property.view_pinyin)"
              class="content"
              :paragraph-list="paragraph_list"
              :pinyin-position="data.property.pinyin_position"
              :is-preview="true"
            />
            <span v-else class="content rich-text" v-html="sanitizeHTML(content)"></span>
            <div v-if="showLang" class="lang">
              {{ multilingual.find((item) => item.type === getLang())?.translation }}
            </div>
          </div>
        </li>
      </ul>

      <div v-if="isShowRightAnswer" class="right-answer">
        <div class="title">正确答案</div>
        <ul ref="answerList" class="option-list">
          <li v-for="(item, i) in data.option_list" :key="i" class="list-item">
            <div v-for="{ content, mark } in item" :key="mark" :class="['item-wrapper', `answer-item-${mark}`]">
              <span class="content rich-text" v-html="sanitizeHTML(content)"></span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getMatchingData, svgNS } from '@/views/book/courseware/data/matching';
import { arraysIntersect } from '@/utils/validate';

import PreviewMixin from '../common/PreviewMixin';

export default {
  name: 'MatchingPreview',
  mixins: [PreviewMixin],
  data() {
    return {
      data: getMatchingData(),
      answerList: [], // 答案列表
      curConnectionPoint: { i: -1, j: -1, mark: '' }, // 当前连线点
      // 拖拽相关
      drag: false,
      mouseEvent: {
        clientX: 0,
        clientY: 0,
      },
    };
  },
  watch: {
    'data.option_list': {
      handler(val) {
        this.clearLine();
        if (!val) return;
        let list = val.map((item) => {
          return item.map(({ mark }) => {
            return { mark, preMark: [], nextMark: [] };
          });
        });
        this.$set(this, 'answerList', list);
      },
      immediate: true,
    },
    answerList: {
      handler(list) {
        let arr = [];

        list.forEach((item) => {
          let markArr = [];
          item.forEach(({ mark, nextMark }, j) => {
            if (j === 0) {
              markArr.push(mark);
              markArr.push([...nextMark]);
            } else if (item.length === 3 && j === 1) {
              markArr.push([...nextMark]);
            }
          });
          arr.push(markArr);
        });
        // 答案数组为 第一个值为固定字符串，后面为连接的值数组，如：['A', ['B', 'C'], ['1', '2']]，根据此结构来判断对错、绘制连线
        this.answer.answer_list = arr;
      },
      deep: true,
    },
    isShowRightAnswer(cur) {
      if (cur) {
        this.$nextTick(() => {
          this.circulateAnswerList();
        });
      }
    },
  },
  created() {
    document.addEventListener('click', this.handleEventConnection);
    document.addEventListener('mousemove', this.documentMousemouse);
    document.addEventListener('mouseup', this.documentMouseup);
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handleEventConnection);
    document.removeEventListener('mousemove', this.documentMousemouse);
    document.removeEventListener('mouseup', this.documentMouseup);
  },
  methods: {
    /* 用 mouse 事件模拟拖拽 开始*/
    documentMousemouse(e) {
      if (!this.drag) return;
      // 使用 svg 绘制跟随鼠标移动的连接线
      let svg = document.querySelector('.move-connection');
      let list = this.$refs.list.getBoundingClientRect(); // 列表的位置
      let { clientX, clientY } = e;
      let isLeft = clientX < this.mouseEvent.clientX; // 鼠标是否向左移动
      // 计算 svg 的宽度，宽度不能超过列表的宽度
      let width = Math.min(list.width, isLeft ? list.width - clientX + list.left - 1 : clientX - list.left - 1);
      if (svg) {
        svg.setAttribute(
          'style',
          `position: absolute; ${isLeft ? 'right: 0;' : 'left: 0;'} width: ${width}px; height: 100%;`,
        );
      } else {
        svg = document.createElementNS(svgNS, 'svg');
        svg.classList.add('move-connection');
        svg.setAttribute('style', `position: absolute; width: ${width}px; height: 100%;`);
        let path = document.createElementNS(svgNS, 'path');
        this.setPathAttr(path);
        svg.appendChild(path);
        this.$refs.list.appendChild(svg);
      }
      let top = this.mouseEvent.clientY - list.top;
      let left = isLeft
        ? this.mouseEvent.clientX - list.left - Math.abs(width - list.width)
        : this.mouseEvent.clientX - list.left;
      let mouseX = isLeft ? clientX - list.left - Math.abs(width - list.width) : clientX - list.left;
      let mouseY = clientY - list.top;
      let path = svg.querySelector('path');
      path.setAttribute('d', `M ${left} ${top} L ${mouseX} ${mouseY}`);
    },
    documentMouseup() {
      if (!this.drag) return;
      this.drag = false;
      document.querySelector('.move-connection')?.remove();
      document.body.style.userSelect = 'auto'; // 允许选中文本
      this.mousePointer = { i: -1, j: -1, mark: '' };
      this.mouseEvent = { clientX: 0, clientY: 0 };
    },
    /**
     * 鼠标按下事件，设置当前连线点
     * @param {PointerEvent} e 事件对象
     * @param {number} i 选项列表索引
     * @param {number} j 选项索引
     * @param {string} mark 选项标识
     */
    mousedown(e, i, j, mark) {
      if (this.disabled) return;
      this.drag = true;
      document.body.style.userSelect = 'none'; // 禁止选中文本
      this.mouseEvent = { clientX: e.clientX, clientY: e.clientY };
      this.mousePointer = { i, j, mark };
    },
    /**
     * 鼠标抬起事件，如果是一个合适的连接点，则创建连接线
     * @param {PointerEvent} e 事件对象
     * @param {Number} i 选项列表索引
     * @param {Number} j 选项索引
     * @param {String} mark 选项标识
     */
    mouseup(e, i, j, mark) {
      if (this.disabled || !this.drag) return;
      let { i: curI, j: curJ, mark: curMark } = this.mousePointer;
      if (curI === -1 && curJ === -1) return;
      if (Math.abs(curJ - j) > 1 || mark === curMark) return;
      this.changeConnectionList(mark, j, true);
      this.createLine(mark, true);
    },
    /* 用 mouse 事件模拟拖拽 结束 */

    // 重置当前连线点
    resetCurConnectionPoint() {
      this.curConnectionPoint = { i: -1, j: -1, mark: '' };
    },
    /**
     * 当点击的不是连线点时，清除所有连线点的选中状态
     * @param {PointerEvent} e
     */
    handleEventConnection(e) {
      let currentNode = e.target;
      while (currentNode !== null) {
        if (currentNode.classList && currentNode.classList.contains('item-wrapper')) {
          break;
        }
        currentNode = currentNode.parentNode;
      }
      if (currentNode) return;
      Array.from(document.getElementsByClassName('item-wrapper')).forEach((item) => {
        item.classList.remove('focus');
      });
      this.resetCurConnectionPoint();
    },

    /**
     * 处理点击连线
     * @param {PointerEvent} e 事件对象
     * @param {Number} i 选项列表索引
     * @param {Number} j 选项索引
     * @param {String} mark 选项标识
     */
    handleClickConnection(e, i, j, mark) {
      if (this.disabled) return;
      let { i: curI, j: curJ, mark: curMark } = this.curConnectionPoint;
      // 获取 item-wrapper 元素
      let currentNode = e.target;
      while (currentNode !== null) {
        if (currentNode.classList && currentNode.classList.contains('item-wrapper')) {
          break;
        }
        currentNode = currentNode.parentNode;
      }
      // 如果当前连线点不存在或就是当前连线点，则设置当前连线点
      if ((curI === -1 && curJ === -1) || mark === curMark) {
        this.curConnectionPoint = { i, j, mark };
        currentNode.classList.add('focus');
        return;
      }
      // 如果当前连线点存在，清除所有连线点的选中状态
      Array.from(this.$refs.list.getElementsByClassName('item-wrapper')).forEach((item) => {
        item.classList.remove('focus');
      });
      // 如果当前连线点与上一个连线点不在相邻的位置，则设置点击的连接点为当前连线点
      if (Math.abs(curJ - j) > 1 || mark === curMark || (curJ === j && curI !== i)) {
        this.curConnectionPoint = { i, j, mark };
        currentNode.classList.add('focus');
        return;
      }
      this.changeConnectionList(mark, j);
      // 如果当前连线点与上一个连线点在相邻的位置，则创建连接线
      this.createLine(mark);
    },

    /**
     * @description 循环答案列表
     */
    circulateAnswerList() {
      this.data.answer.answer_list.forEach((item, index) => {
        let preMark = ''; // 上一个连线点标识
        item.forEach(({ mark }, j) => {
          if (j === 0) {
            preMark = mark;
            return;
          }
          if (mark.length <= 0) return;
          if (j === 2) {
            preMark = this.data.option_list[index][j - 1].mark;
          }
          let cur = { i: -1, j: -1, mark: '' }; // 当前连线点

          // 根据 preMark 查找当前连线点的位置
          this.data.option_list.find((list, i) => {
            return list.find((li, idx) => {
              if (li.mark === preMark) {
                cur = { i, j: idx };
                return true;
              }
            });
          });

          // 循环 mark 数组，创建连接线
          mark.forEach((m) => {
            this.curConnectionPoint = { i: cur.i, j: cur.j, mark: preMark };
            this.createLine(m, false, true);
          });
        });
      });
    },

    /**
     * 创建连接线
     * @param {String} mark 选项标识
     * @param {Boolean} isDrag 是否是拖拽
     * @param {Boolean} isShowRightAnswer 是否是显示正确答案
     */
    createLine(mark, isDrag = false, isShowRightAnswer = false) {
      const { offsetWidth, offsetLeft, offsetTop, offsetHeight } = document.getElementsByClassName(
        `${isShowRightAnswer ? 'answer-' : ''}item-${mark}`,
      )[0];
      const { curOffsetWidth, curOffsetLeft, curOffsetTop, curOffsetHeight, curMark } = this.computedCurConnectionPoint(
        isDrag,
        isShowRightAnswer,
      );
      let top = Math.min(offsetTop + offsetHeight / 2, curOffsetTop + curOffsetHeight / 2);
      // 判断是否是同一行
      const isSameRow = Math.abs(offsetTop + offsetHeight / 2 - (curOffsetTop + curOffsetHeight / 2)) <= 2;
      let left = Math.min(offsetLeft + offsetWidth, curOffsetLeft + curOffsetWidth);
      let width = Math.abs(
        offsetLeft > curOffsetLeft
          ? curOffsetLeft - offsetLeft + offsetWidth
          : offsetLeft - curOffsetLeft + curOffsetWidth,
      );
      let height = 0;
      if (!isSameRow) {
        height =
          curOffsetTop > offsetTop
            ? Math.abs(offsetTop + offsetHeight / 2 - (curOffsetTop + curOffsetHeight / 2))
            : Math.abs(offsetTop - curOffsetTop + offsetHeight / 2 - curOffsetHeight / 2);
      }
      let size = offsetLeft > curOffsetLeft ? offsetTop > curOffsetTop : offsetTop < curOffsetTop; // 判断是左上还是右下
      // 创建一个空的SVG元素
      let svg = document.createElementNS(svgNS, 'svg');
      svg.setAttribute(
        'style',
        `position:absolute; width: 74px; height: ${Math.max(8, height)}px; top: ${top}px; left: ${left}px;overflow: visible;`,
      );
      svg.classList.add('connection-line', `svg-${mark}-${curMark}`); // 添加类名
      // 向SVG元素添加 path 元素
      let path = document.createElementNS(svgNS, 'path');
      path.setAttribute('d', `M ${size ? 0 : width} 0 L ${size ? width : 0} ${height}`); // 设置路径数据
      this.setPathAttr(path);
      svg.appendChild(path);
      // 在 svg 元素中的 path 元素上两端添加圆形标记
      let circleStart = document.createElementNS(svgNS, 'circle');
      circleStart.setAttribute('cx', size ? '0' : width); // 设置圆心的 x 坐标
      circleStart.setAttribute('cy', '0'); // 设置圆心的 y 坐标
      circleStart.setAttribute('r', '4'); // 设置半径
      const assistColor = this.data?.unified_attrib?.topic_color || '#306eff';
      circleStart.setAttribute('fill', assistColor); // 设置填充颜色
      svg.appendChild(circleStart);
      let circleEnd = document.createElementNS(svgNS, 'circle');
      circleEnd.setAttribute('cx', size ? width : '0'); // 设置圆心的 x 坐标
      circleEnd.setAttribute('cy', height); // 设置圆心的 y 坐标
      circleEnd.setAttribute('r', '4'); // 设置半径
      circleEnd.setAttribute('fill', assistColor); // 设置填充颜色
      svg.appendChild(circleEnd);
      this.$refs[isShowRightAnswer ? 'answerList' : 'list'].appendChild(svg); // 将SVG元素插入到文档中

      // 清除当前连线点
      this.resetCurConnectionPoint();
    },
    // 设置 path 公用属性
    setPathAttr(path) {
      path.setAttribute('stroke-width', '2'); // 设置线条宽度
      path.setAttribute('stroke-linecap', 'round'); // 设置线段的两端样式
      const assistColor = this.data?.unified_attrib?.topic_color || '#306eff';
      path.setAttribute('stroke', assistColor); // 设置填充颜色
    },
    /**
     * 计算当前连线点的位置
     * @param {Boolean} isDrag 是否是拖拽
     * @param {Boolean} isShowRightAnswer 是否是显示正确答案
     */
    computedCurConnectionPoint(isDrag = false, isShowRightAnswer = false) {
      let { mark } = isDrag ? this.mousePointer : this.curConnectionPoint;
      let type = Object.prototype.toString.call(mark);
      if (type === '[object String]') {
        type = 'string';
      } else if (type === '[object Object]') {
        type = 'object';
      }
      if (type === 'object') {
        mark = mark.mark;
      }
      const dom = document.getElementsByClassName(`${isShowRightAnswer ? 'answer-' : ''}item-${mark}`)[0];

      return {
        curOffsetWidth: dom.offsetWidth,
        curOffsetLeft: dom.offsetLeft,
        curOffsetTop: dom.offsetTop,
        curOffsetHeight: dom.offsetHeight,
        curMark: mark,
      };
    },

    // 清除所有连接线
    clearLine() {
      document.querySelectorAll('svg.connection-line').forEach((item) => {
        item.remove();
      });
    },

    /**
     * 修改连接列表
     * @param {String} mark 选项标识
     * @param {Number} j 当前选项索引
     * @param {Boolean} isDrag 是否是拖拽
     */
    changeConnectionList(mark, j, isDrag = false) {
      const { mark: curMark, j: curJ } = isDrag ? this.mousePointer : this.curConnectionPoint;
      this.changeAnswerList(curMark, mark, curJ < j);
      this.changeAnswerList(mark, curMark, curJ > j);
    },
    /**
     * 改变答案列表
     * @param {String} curMark 当前选项标识
     * @param {String} mark 选项标识
     */
    changeAnswerList(curMark, mark, isPre) {
      this.answerList.find((item) =>
        item.find((li) => {
          if (li.mark === curMark) {
            if (isPre && !li.preMark.includes(mark)) {
              li.nextMark.push(mark);
            } else if (!isPre && !li.nextMark.includes(mark)) {
              li.preMark.push(mark);
            }
            return true;
          }
        }),
      );
    },
    /**
     * 根据 mark 查找 nextMark 或 preMark
     * @param {Array} list 答案列表
     * @param {String} mark 标记
     * @param {'pre'|'next'} type 类型
     * @returns {String} 返回 nextMark 或 preMark
     */
    findMark(list, mark, type) {
      let fMark = '';
      list.find((item) => {
        return item.find((li) => {
          if (mark === li.mark) {
            fMark = type === 'pre' ? li.preMark : li.nextMark;
            return true;
          }
        });
      });
      return fMark;
    },
    /**
     * 计算答题对错选项class
     * @param {string} mark 选项标识
     * @param {number} i 选项列表索引
     * @param {number} j 选项索引
     * @returns {string} 返回 class 名称
     */
    computedAnswerClass(mark, i, j) {
      if (!this.isJudgingRightWrong) return '';
      if (j === 0) {
        return this.judgeFirstAnswerRightWrong(i);
      }
      let answer = this.data.answer.answer_list.find((item) => {
        return item.some((li) => Array.isArray(li.mark) && li.mark.includes(mark));
      }); // 正确答案列

      let userAnswer = this.answer.answer_list.find((item) => {
        return item.some((li) => Array.isArray(li) && li.includes(mark));
      }); // 选项对应的用户答案列

      if (answer === undefined || userAnswer === undefined) return 'wrong';
      if (answer.length === 0 && userAnswer.length === 0) return '';
      if (answer.length === 0 || userAnswer.length === 0) return 'wrong';

      let isRight = true;

      if (j === 1) {
        // 判断第二行答案对错，answer[0].mark 和 userAnswer[0] 是否相等
        isRight = answer[0].mark === userAnswer[0];
      } else if (j === 2) {
        // 判断第三行答案对错，answer[1].mark 和 userAnswer[1] 是否相交
        isRight = arraysIntersect(answer[1].mark, userAnswer[1]);
      }

      return isRight ? 'right' : 'wrong';
    },
    /**
     * 判断第一列答案对错，是否有个一个选项连接正确
     * @param {number} i 选项列表索引
     */
    judgeFirstAnswerRightWrong(i) {
      let answer = this.data.answer.answer_list[i]; // 正确答案列
      let userAnswer = this.answer.answer_list[i]; // 选项对应的用户答案列
      if (answer === undefined || userAnswer === undefined) return 'wrong';
      if (answer.length === 0 && userAnswer.length === 0) return '';
      if (answer.length === 0 || userAnswer.length === 0) return 'wrong';
      let isRight = true;

      // 判断 answer[1].mark 和 userAnswer[1] 是否相交
      const answerSet = new Set(answer[1].mark);
      isRight = userAnswer[1].some((x) => answerSet.has(x));

      return isRight ? 'right' : 'wrong';
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.matching-preview {
  @include preview-base;

  overflow: auto;

  .option-list {
    position: relative;
    display: flex;
    flex-direction: column;
    row-gap: 16px;

    .list-item {
      display: flex;
      column-gap: 8px;
      align-items: stretch;
      padding: 1px;

      .item-wrapper {
        position: relative;
        display: flex;
        flex: 1;
        flex-wrap: wrap;
        column-gap: 24px;
        align-items: center;
        min-height: 48px;
        padding: 12px 24px;
        background-color: $content-color;
        border-radius: 4px;

        &:not(:last-child, .isMobile) {
          margin-right: 64px;
        }

        &.focus {
          background-color: #dcdbdd;
        }

        &.right {
          background-color: $right-bc-color;
        }

        &.wrong {
          box-shadow: 0 0 0 1px $error-color;
        }

        .content {
          flex: 1;
        }

        .lang {
          width: 100%;
        }
      }
    }
  }

  .right-answer {
    .title {
      margin: 24px 0;
    }
  }
}
</style>