visualization-design/src/services/utils.ts

import { Pen, Meta2dData } from '@meta2d/core';
import { MessagePlugin, NotifyPlugin, Button } from 'tdesign-vue-next';
import { h, ref } from 'vue';
import { upCdn } from './api';

export const noLoginTip = '请先登录，否则无法保存!';
export const localStorageName = 'le5leV';

export interface Meta2dBackData extends Meta2dData {
  id?: string;
  name?: string;
  userId?: string;
  image?: string;
  component?: boolean;
  componentDatas?: Pen[];
  version?: string;
  folder?: string;
  shared?: boolean; // 是否分享
  class?: string; // 分类，架构拓扑图那些
  // 组合为状态，组件保存使用，无需存储到后端
  showChild?: number;
  _id?: string;
  owner?: {
    id?: string;
  };
  folderId?: string;
  editor?: {
    id?: string;
    username?: string;
  };
  username?: string;
  editorId?: string;
  editorName?: string;
  teams?: { id?: string; name?: string }[];
  tags?: string[]; //标签数组
}

const notification = ref<any>(null);
export function showNotification(title: string): Promise<boolean> {
  return new Promise<boolean>((resolve) => {
    const btnClick = () => {
      NotifyPlugin.close(notification.value);
      notification.value = null;
      resolve(true);
    };
    if (!notification.value) {
      notification.value = NotifyPlugin.info({
        title: '提示',
        content: title,
        closeBtn: true,
        onCloseBtnClick: () => {
          //关闭按钮
          notification.value = null;
          resolve(false);
        },
        // duration: 1000000,
        // @ts-ignore
        footer: h(
          Button,
          {
            theme: 'primary',
            size: 'small',
            style: {
              'margin-top': '16px',
              'margin-left': '256px',
            },
            onClick: btnClick,
          },
          '确定'
        ),
      });
    }
  });
}

export async function dealwithFormatbeforeOpen(data: Meta2dBackData) {
  if (!data) {
    return;
  }
  if ((!data.https || data.https?.length == 0) && data.http) {
    data.https = [
      {
        http: data.http,
        httpTimeInterval: data.httpTimeInterval,
        httpHeaders: data.httpHeaders,
      },
    ];
    delete data.http;
    delete data.httpHeaders;
    delete data.httpTimeInterval;
  }
  //新版渐进色
  data.pens &&
    data.pens.forEach((pen) => {
      if (pen.lineGradientFromColor && pen.lineGradientToColor) {
        pen.lineGradientColors = `linear-gradient(${
          pen.lineGradientAngle ? Number(pen.lineGradientAngle) + 90 : 0
        }deg,${pen.lineGradientFromColor} 0%,${pen.lineGradientToColor} 100%)`;
      }
      if (pen.gradientFromColor && pen.gradientToColor) {
        pen.gradientColors = `linear-gradient(${
          pen.gradientAngle ? Number(pen.gradientAngle) + 90 : 0
        }deg,${pen.gradientFromColor} 0%,${pen.gradientToColor} 100%)`;
      }
      if (
        pen.image &&
        pen.image.startsWith('/') &&
        !pen.image.startsWith('/v/') &&
        !pen.image.startsWith('/png/')
      ) {
        pen.image = upCdn + pen.image;
      }
    });
}

export function gotoAccount() {
  MessagePlugin.info({
    content: '请开通vip，即将跳转到开通页面...',
    duration: 3,
  });
  setTimeout(() => {
    if (import.meta.env.BASE_URL[0] === '/') {
      window.open('/account?unVip=true');
    } else {
      let arr = location.host.split('.');
      arr[0] = 'http://account';
      let accountUrl = arr.join('.');
      window.open(`${accountUrl}?unVip=true`);
    }
  }, 3000);
}

export function isGif(url: string): boolean {
  return url.endsWith('.gif');
}

/**
 * 正常的 assign 操作，是存在弊端的，
 * 若源对象存在该属性，但目标对象不存在该属性（不存在并非 undefined），则会导致无法覆盖
 * 该方法会把源对象的属性全部清空，然后再把目标对象的属性覆盖到源对象上
 * source 可能是个监听的对象，所有最后一步再更改它的属性值
 * @param source 原对象
 * @param target 目标对象
 */
export function strictAssign(
  source: Record<string, any>,
  target: Record<string, any>
) {
  // source 的全部属性都是 undefined 的对象，而非没有这个属性
  const undefinedSource: Record<string, any> = {};
  Object.keys(source).forEach((key) => {
    undefinedSource[key] = undefined;
  });
  Object.assign(undefinedSource, target);
  Object.assign(source, undefinedSource);
}

export function checkData(data: Meta2dData) {
  const pens: Pen[] = data.pens || [];
  for (let i = 0; i < pens.length; i++) {
    const pen: any = pens[i];
    pen.events?.forEach((event: any) => {
      delete event.setProps;
    });

    //处理画笔是脏数据的情况
    if (
      !(
        pen.x > -Infinity &&
        pen.x < Infinity &&
        pen.y > -Infinity &&
        pen.y < Infinity &&
        pen.width > -Infinity &&
        pen.width < Infinity &&
        pen.height > -Infinity &&
        pen.height < Infinity
      )
    ) {
      pens.splice(i, 1);
      --i;
    } else if (
      pen.x == null ||
      pen.y == null ||
      pen.width == null ||
      pen.height == null
    ) {
      pens.splice(i, 1);
      --i;
    }
  }

  if (Array.isArray(data.mqttOptions)) {
    // mqttOptions 是数组则认为是脏数据，删掉
    data.mqttOptions = {};
  }
}