jiku-ui/packages/viewer/src/util.js

A Component Library for Vue.js.

import Vue from 'vue';
import HnViewerRect from './viewer-rect.vue';
import { isInContainer } from 'heiner-ui/src/utils/dom';

let rectInstance = null;
export let utils = {
  // 更新矩形位置
  updateRect(canvasMarkInner, propsData) {
    if (!rectInstance) {
      utils.createRect(canvasMarkInner, propsData);
    } else if (!isInContainer(rectInstance.$el, canvasMarkInner)) {
      utils.destroyRect();
      utils.createRect(canvasMarkInner, propsData);
    } else {
      Object.assign(rectInstance.$props, propsData);
    }
  },
  // 创建指定大小矩形实例
  createRect(canvasMarkInner, propsData) {
    if (!rectInstance) {
      const RectConstructor = Vue.extend(HnViewerRect);
      rectInstance = new RectConstructor({ propsData });
      const oDiv = document.createElement('div');
      canvasMarkInner.appendChild(oDiv);
      rectInstance.$mount(oDiv);
    }
    return rectInstance;
  },
  // 矩形背景销毁
  destroyRect: function() {
    if (rectInstance) {
      rectInstance.$destroy();
      rectInstance = null;
    }
  },
  // 矩形背景坐标缩放计算
  calculateRect: function(oMarkPos, zoomLevel) {
    // 新矩形背景坐标（x1、y1、x2、y2）
    const { x1, y1, x2, y2 } = oMarkPos;
    return {
      x1: x1 * zoomLevel,
      y1: y1 * zoomLevel,
      x2: x2 * zoomLevel,
      y2: y2 * zoomLevel
    };
  }
};

export function fillProps(imgsItems) {
  return imgsItems.map(function(item) {
    const { topLeftX, topLeftY, bottomRightX, bottomRightY } = item;
    item.markPos = {
      x1: parseInt(topLeftX, 10) || 0,
      y1: parseInt(topLeftY, 10) || 0,
      x2: parseInt(bottomRightX, 10) || 0,
      y2: parseInt(bottomRightY, 10) || 0
    };
    const oWidth = bottomRightX - topLeftX;
    const oHeight = bottomRightY - topLeftY;
    if (oWidth > 0 && oHeight > 0) {
      item.hasMarkPos = true;
    }
    return item;
  });
}

// 高亮标注时转换数据
export function toHighLightedItems(imgItems) {
  return imgItems.map((item) => {
    let title = '图片仅供参考';
    if (item.picPosition || item.position) {
      title = `上图${item.picPosition || item.position}处（图片仅供参考）`;
    } else if (item.picContent) {
      title = item.picContent;
    }
    const { picUrl, topLeftX, topLeftY, bottomRightX, bottomRightY } = item;
    return {
      src: picUrl.replace(/http(?!s)/, 'https'),
      title,
      topLeftX: topLeftX || 0,
      topLeftY: topLeftY || 0,
      bottomRightX: bottomRightX || 0,
      bottomRightY: bottomRightY || 0
    };
  });
}