Merge branch 'main' of github.com:le5le-com/visualization-design

src/services/common.ts

@@ -9,6 +9,7 @@ import { noLoginTip, localStorageName } from '@/services/utils';
 import { upload, dataURLtoBlob } from '@/services/file';
 import { delImage, addCollection, updateCollection } from '@/services/api';
 import { baseVer } from '@/services/upgrade';
+import dayjs from 'dayjs';
 
 const dot = ref(false);
 
@@ -42,7 +43,8 @@ export enum SaveType {
 }
 export const save = async (
   type: SaveType = SaveType.Save,
-  component?: boolean
+  component?: boolean,
+  flag: boolean = false
 ) => {
   meta2d.stopAnimate();
   const data: Meta2dBackData = meta2d.data();
@@ -93,7 +95,7 @@ export const save = async (
     (meta2d.store.data as Meta2dBackData).image = data.image;
   }
 
-  if (component) {
+  if (data.component || component) {
     data.component = true;
     // pens 存储原数据用于二次编辑 ； componentDatas 组合后的数据，用于复用
     data.componentDatas = meta2d.toComponent(
@@ -153,8 +155,7 @@ export const save = async (
   }
 
   //  保存图纸之后的钩子函数
-  (window as any).afterSaveMeta2d &&
-    (await (window as any).afterSaveMeta2d(ret));
+  globalThis.afterSaveMeta2d && (await globalThis.afterSaveMeta2d(ret));
   if (
     !data._id ||
     data.owner?.id !== user.id ||
@@ -173,38 +174,12 @@ export const save = async (
     });
   }
 
-  MessagePlugin.success('保存成功！');
-  // 保存成功，重新请求文件夹
-  meta2d.emit('t-save-success', true);
-  // 已保存，不再是新的，无需提示保存
+  flag && MessagePlugin.success('保存成功！');
   dot.value = false;
   localforage.removeItem(localStorageName);
   return true;
 };
 
-export const autoSave = () => {
-  // 没有更新，不用保存
-  if (!dot.value) {
-    return;
-  }
-
-  const data: any = meta2d.data();
-  if (
-    user &&
-    user.id &&
-    user.isVip &&
-    data._id &&
-    !data.component &&
-    data.owner &&
-    data.owner.id === user.id
-  ) {
-    save(SaveType.Save);
-  } else {
-    data.updateAt = dayjs().format();
-    localforage.setItem(localStorageName, JSON.stringify(data));
-  }
-};
-
 const pen = ref(false);
 export const drawPen = () => {
   meta2d.inactive();
@@ -267,9 +242,33 @@ export const unsave = '当前文件未保存，是否继续？（开通vip可享
 //未登录，当前文件可能不会保存
 //
 export const newFile = async () => {
-  notificFn(newfile, true);
+  autoSave();
+  setTimeout(() => {
+    newfile();
+  }, 1000);
 };
 
+export function autoSave() {
+  if (!dot.value) {
+    return;
+  }
+  const data: any = meta2d.data();
+  if (
+    user &&
+    user.id &&
+    user.isVip &&
+    data._id &&
+    !data.component &&
+    data.owner &&
+    data.owner.id === user.id
+  ) {
+    save(SaveType.Save);
+  } else {
+    data.updateAt = dayjs().format();
+    localforage.setItem(localStorageName, JSON.stringify(data));
+  }
+}
+
 export const notificFn = async (fn: Function, params: any) => {
   if (!(user && user.id)) {
     if (await showNotification(unLogin)) {

src/views/Preview.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="preview">
+  <div class="preview" :style="{ background: bgColor }">
     <div class="meta2d-canvas" ref="meta2dDom"></div>
   </div>
 </template>
@@ -27,6 +27,8 @@ const meta2dOptions: Options = {
   defaultFormat: { ...defaultFormat },
 };
 
+const bgColor = ref('#1e2430');
+
 onMounted(() => {
   meta2d = new Meta2d(meta2dDom.value, meta2dOptions);
   registerBasicDiagram();
@@ -50,7 +52,9 @@ const open = async () => {
     if (data) {
       data = JSON.parse(data);
       data.locked = 1;
+      data.rule = false;
       meta2d.open(data);
+      bgColor.value = data.background;
     }
   }
 };
@@ -72,7 +76,7 @@ onUnmounted(() => {
 .preview {
   width: 100vw;
   height: 100vh;
-  background-color: var(--color-background-editor);
+  /* background-color: var(--color-background-editor); */
   .meta2d-canvas {
     width: 100%;
     height: 100%;

src/views/components/ContextMenu.vue

@@ -170,7 +170,6 @@ function choosePens(): boolean {
 }
 
 function layerMove(type: 'top' | 'bottom' | 'up' | 'down') {
-  console.log('layer');
   const pens = meta2d.store.active;
   if (hasImage()) {
     if (type === 'top') {

src/views/components/Header.vue

@@ -294,7 +294,7 @@ import JSZip from 'jszip';
 import axios from 'axios';
 import { switchTheme } from '@/services/theme';
 import { noLoginTip } from '@/services/utils';
-import { useDot, notificFn } from '@/services/common';
+import { useDot, autoSave } from '@/services/common';
 import {
   save,
   newFile,
@@ -400,14 +400,14 @@ function load(newT: boolean = false) {
       newT && newfile(true);
       // 路由跳转 可能在 openFile 后执行
       if (elem.files[0].name.endsWith('.json')) {
-        openJson(elem.files[0], newT);
+        openJson(elem.files[0]);
       } else if (elem.files[0].name.endsWith('.svg')) {
         MessagePlugin.info(
           '可二次编辑但转换存在损失，若作为图片使用，请使用右侧属性面板的上传图片功能'
         );
         openSvg(elem.files[0]);
       } else if (elem.files[0].name.endsWith('.zip')) {
-        openZip(elem.files[0], newT);
+        openZip(elem.files[0]);
       } else {
         MessagePlugin.info('打开文件只支持 json，svg，zip 格式');
       }
@@ -416,7 +416,7 @@ function load(newT: boolean = false) {
   input.click();
 }
 
-const openJson = async (file: File, isNew: boolean = false) => {
+const openJson = async (file: File) => {
   const text = await readFile(file);
   try {
     let data: Meta2dBackData = JSON.parse(text);
@@ -428,17 +428,28 @@ const openJson = async (file: File, isNew: boolean = false) => {
       data = upgrade(data, baseVer);
     }
     dealwithFormatbeforeOpen(data);
-    data._id = undefined;
-    if (!isNew) {
-      delete data.owner;
-      delete data.editor;
-      delete data.username;
-      delete data.editorId;
-      delete data.editorName;
+    const delAttrs = [
+      'userId',
+      'shared',
+      'team',
+      'owner',
+      'username',
+      'editor',
+      'editorId',
+      'editorName',
+      'createdAt',
+      'folder',
+      'image',
+      'id',
+      '_id',
+      'view',
+      'updatedAt',
+      'star',
+      'recommend',
+    ];
+    for (const k of delAttrs) {
+      delete (data as any)[k];
     }
-    // if (!(window as any).meta2dFolder?.includes(data.folder)) {
-    //   delete data.folder;
-    // }
     meta2d.open(data);
   } catch (e) {
     console.log(e);
@@ -452,7 +463,7 @@ const openSvg = async (file: File) => {
   MessagePlugin.info('svg转换成功，请点击画布决定放置位置');
 };
 
-const openZip = async (file: File, isNew: boolean = false) => {
+const openZip = async (file: File) => {
   if (!(user && user.id)) {
     MessagePlugin.warning(noLoginTip);
     return;
@@ -560,16 +571,27 @@ const openZip = async (file: File, isNew: boolean = false) => {
         data = upgrade(data, baseVer);
       }
       dealwithFormatbeforeOpen(data);
-      data._id = undefined;
-      if (!isNew) {
-        delete data.owner;
-        delete data.editor;
-        delete data.username;
-        delete data.editorId;
-        delete data.editorName;
-      }
-      if (!(window as any).meta2dFolder?.includes(data.folder)) {
-        delete data.folder;
+      const delAttrs = [
+        'userId',
+        'shared',
+        'team',
+        'owner',
+        'username',
+        'editor',
+        'editorId',
+        'editorName',
+        'createdAt',
+        'folder',
+        'image',
+        'id',
+        '_id',
+        'view',
+        'updatedAt',
+        'star',
+        'recommend',
+      ];
+      for (const k of delAttrs) {
+        delete (data as any)[k];
       }
       meta2d.open(data);
     }
@@ -579,15 +601,10 @@ const openZip = async (file: File, isNew: boolean = false) => {
 };
 
 async function loadFile(newT: boolean = false) {
-  // if (dot.value) {
-  //   if (await showNotification(title)) {
-  //     load(newT);
-  //   }
-  // } else {
-  //   load(newT);
-  // }
-  //默认 导入新建项目
-  notificFn(load, newT);
+  autoSave();
+  setTimeout(() => {
+    load(newT);
+  }, 1000);
 }
 
 async function openFile() {

src/views/components/PenProps.vue

@@ -979,7 +979,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onBeforeMount, onUnmounted, reactive, ref } from 'vue';
+import { onBeforeMount, onUnmounted, reactive, ref, watch } from 'vue';
 
 import CodeEditor from '@/views/components/common/CodeEditor.vue';
 import PenAnimates from './PenAnimates.vue';
@@ -1016,7 +1016,8 @@ onBeforeMount(() => {
     d.groups = [];
   }
   data.groups = d.groups;
-
+  setPenData();
+  /*
   data.pen = selections.pen;
   if (!data.pen.props) {
     data.pen.props = {};
@@ -1049,7 +1050,7 @@ onBeforeMount(() => {
   }
   if (data.pen.bkType == undefined) {
     data.pen.bkType = 0;
-  }
+  }*/
 
   // 示例代码
   /*
@@ -1071,13 +1072,58 @@ onBeforeMount(() => {
   ];
   */
   // end
-  data.pen.shadow = !!data.pen.shadowColor;
+  // data.pen.shadow = !!data.pen.shadowColor;
   getRect();
   meta2d.on('translatePens', getRect);
   meta2d.on('resizePens', getRect);
   meta2d.on('rotatePens', getRect);
 });
 
+function setPenData() {
+  data.pen = selections.pen;
+  if (!data.pen.props) {
+    data.pen.props = {};
+  }
+  if (!data.pen.globalAlpha) {
+    data.pen.globalAlpha = 1;
+  }
+  if (!data.pen.dash) {
+    data.pen.dash = 0;
+  }
+  if (!data.pen.props.text) {
+    if (data.pen.text || data.pen.name === 'text') {
+      data.pen.props.text = true;
+    }
+  }
+  if (!data.pen.props.image) {
+    if (data.pen.image || data.pen.name === 'image') {
+      data.pen.props.image = true;
+    }
+  }
+  if (data.pen.image) {
+    data.images = [
+      {
+        url: data.pen.image,
+      },
+    ];
+  }
+  if (!data.pen.tags) {
+    data.pen.tags = [];
+  }
+  if (data.pen.bkType == undefined) {
+    data.pen.bkType = 0;
+  }
+  data.pen.shadow = !!data.pen.shadowColor;
+}
+
+const watcher = watch(
+  () => selections.pen.id,
+  async () => {
+    setPenData();
+    getRect();
+  }
+);
+
 const getRect = () => {
   data.rect = meta2d.getPenRect(data.pen);
 };
@@ -1172,6 +1218,7 @@ const onOkTooltip = () => {
 };
 
 onUnmounted(() => {
+  watcher();
   meta2d.off('translatePens', getRect);
   meta2d.off('resizePens', getRect);
   meta2d.off('rotatePens', getRect);

src/views/components/View.vue

@@ -4,14 +4,32 @@
       <t-tooltip content="新建" placement="bottom">
         <a><t-icon name="add" @click="newFile" /></a>
       </t-tooltip>
-      <t-tooltip content="保存" placement="bottom">
+      <t-tooltip content="保存为大屏" placement="bottom">
         <a>
-          <t-badge dot :showZero="false" :count="dot ? 1 : 0">
-            <t-icon name="save" @click="save(SaveType.Save)" /></t-badge
+          <t-badge
+            :style="{
+              color: canSave ? '' : '#4f5b75',
+              cursor: canSave ? '' : 'not-allowed',
+            }"
+            dot
+            :showZero="false"
+            :count="dot ? 1 : 0"
+          >
+            <t-icon
+              name="save"
+              @click="canSave && save(SaveType.Save, false, true)" /></t-badge
         ></a>
       </t-tooltip>
       <t-tooltip content="保存为我的组件" placement="bottom">
-        <a><t-icon name="layers" @click="save(SaveType.Save, true)" /></a>
+        <a
+          :style="{
+            color: canSaveComponent ? '' : '#4f5b75',
+            cursor: canSaveComponent ? '' : 'not-allowed',
+          }"
+          ><t-icon
+            name="layers"
+            @click="canSaveComponent && save(SaveType.Save, true, true)"
+        /></a>
       </t-tooltip>
       <t-tooltip content="格式化（双击可连续使用）" placement="bottom">
         <a
@@ -661,7 +679,8 @@ const publishChargeDialog = reactive<any>({});
 onMounted(() => {
   meta2d = new Meta2d('meta2d', meta2dOptions);
   registerBasicDiagram();
-  open();
+  open(true);
+  saveStatusChange();
   // @ts-ignore
   meta2d.on('active', active);
   // @ts-ignore
@@ -692,10 +711,29 @@ const watcher = watch(
   () => route.query,
   async () => {
     open();
+    saveStatusChange();
   }
 );
 
-const open = async () => {
+const canSave = ref(true);
+const canSaveComponent = ref(true);
+
+const saveStatusChange = () => {
+  if (route.query.id) {
+    if (route.query.component === 'true') {
+      canSave.value = false;
+    } else if (route.query.component === 'false') {
+      canSaveComponent.value = false;
+    } else {
+      canSaveComponent.value = false;
+    }
+  } else {
+    canSave.value = true;
+    canSaveComponent.value = true;
+  }
+};
+
+const open = async (flag: boolean = false) => {
   if (route.query.id) {
     const ret: any = await getLe5leV(route.query.id + '');
     if (ret) {
@@ -708,13 +746,17 @@ const open = async () => {
       qrcode.url = qr;
     }
   } else {
-    const data: string = await localforage.getItem(localStorageName);
-    if (data) {
-      meta2d.open(JSON.parse(data));
+    if (flag) {
+      const data: string = await localforage.getItem(localStorageName);
+      if (data) {
+        meta2d.open(JSON.parse(data));
+      }
+    } else {
+      meta2d.open({ pens: [] } as any);
     }
   }
-  meta2d.store.data.x = meta2d.store.options.x || 0;
-  meta2d.store.data.y = meta2d.store.options.y || 0;
+  !meta2d.store.data.x && (meta2d.store.data.x = meta2d.store.options.x || 0);
+  !meta2d.store.data.y && (meta2d.store.data.y = meta2d.store.options.y || 0);
 };
 
 const openedListener = () => {
@@ -1172,7 +1214,6 @@ const importDataset = async () => {
     },
   ];
   const data: any = await importExcel(columns);
-  console.log('data', data);
   dataDialog.dataset = data;
 };