Merge branch 'main' into deploy

src/services/common.ts

@@ -30,11 +30,7 @@ export const useDot = () => {
   };
 };
 
-// import { noLoginTip } from "@/services/utils";
-
 const { user } = useUser();
-// const route = useRoute();
-// const router = useRouter();
 
 export enum SaveType {
   Save,
@@ -238,17 +234,8 @@ export const title = '系统可能不会保存您所做的更改，是否继续
 export const unLogin = '未登录，系统可能不会保存您的文件，是否继续？';
 export const unsave = '当前文件未保存，是否继续？（开通vip可享受自动保存服务）';
 
-//未登录，当前文件可能不会保存
-//
-export const newFile = async () => {
-  autoSave();
-  setTimeout(() => {
-    newfile();
-  }, 1000);
-};
-
-export function autoSave() {
-  if (!dot.value) {
+export function autoSave(force = false) {
+  if (!dot.value && (!force || router.currentRoute.value.query.id)) {
     return;
   }
   const data: any = meta2d.data();
@@ -281,12 +268,10 @@ export const notificFn = async (fn: Function, params: any) => {
         }
       } else {
         if (await showNotification(unsave)) {
-          // newfile(false);
           fn(params);
         }
       }
     } else {
-      // newfile(false);
       fn(params);
     }
   }
@@ -306,20 +291,27 @@ export const onScaleView = () => {
   meta2d.translate(meta2d.store.options.x || 0, meta2d.store.options.y || 0);
 };
 
-export const newfile = async (noRouter: boolean = false) => {
+export const blank = async (save = true) => {
   meta2d.canvas.drawingLineName && drawPen();
   meta2d.canvas.pencil && drawingPencil();
   meta2d.canvas.magnifierCanvas.magnifier && showMagnifier();
   meta2d.map?.isShow && showMap();
+  save && autoSave(true);
   dot.value = false;
-  await localforage.removeItem(localStorageName);
-  // 打开文件操作不跳转
-  // const router = useRouter();
-  !noRouter &&
-    router.replace({
-      path: '/',
-      query: { r: Date.now() + '' },
-    });
+  meta2d.open({ pens: [] } as any);
+};
+
+export const newFile = () => {
+  blank();
+  router.push({
+    path: '/',
+    query: {
+      r: Date.now() + '',
+    },
+  });
+  setTimeout(() => {
+    autoSave(true);
+  }, 300);
 };
 
 const tree = reactive({

src/services/register.ts

@@ -10,6 +10,8 @@ import { register as registerEcharts } from '@meta2d/chart-diagram';
 import { formPens } from '@meta2d/form-diagram';
 import { chartsPens } from '@meta2d/le5le-charts';
 import { ftaPens, ftaPensbyCtx, ftaAnchors } from '@meta2d/fta-diagram';
+import { iotCanvasPens, iotPens } from '@2d-components/iot';
+import { domFormPens, domFormCanvasPens } from '@2d-components/domForm';
 
 export function registerBasicDiagram() {
   register(flowPens());
@@ -26,4 +28,8 @@ export function registerBasicDiagram() {
   registerCanvasDraw(ftaPensbyCtx());
   registerAnchors(ftaAnchors());
   //特殊图元注册
+  register(iotPens());
+  registerCanvasDraw(iotCanvasPens());
+  register(domFormPens());
+  registerCanvasDraw(domFormCanvasPens());
 }

src/views/components/Actions.vue

@@ -314,7 +314,7 @@
             />
           </div>
         </template>
-        <template v-else-if="a.action == 16">
+        <template v-else-if="a.action == 5">
           <div class="form-item mt-8">
             <label>函数</label>
             <div class="w-full">

src/views/components/ElementTree.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="elements">
-    <div class="title" style="margin: 8px 0 0 12px">图元结构</div>
+    <div class="title" style="margin: 8px 0 0 12px">视图结构</div>
     <t-tree
       class="flex-grow"
       ref="tree"

src/views/components/Graphics.vue

@@ -75,14 +75,13 @@
               <div
                 class="graphic"
                 v-for="elem in item.list"
-                :draggable="elem.draggable !== false"
+                :draggable="true"
                 @dragstart="dragStart($event, elem)"
                 @drag="drag($event, elem)"
                 @dragend="dragEnd()"
                 @click.stop="dragStart($event, elem)"
                 @dblclick.stop="open(elem)"
                 @contextmenu="onContextMenu($event, item, elem)"
-                :title="elem.draggable === false ? '双击打开' : '拖拽到画布'"
               >
                 <t-image
                   v-if="elem.image"
@@ -113,13 +112,12 @@
           <div
             class="graphic"
             v-for="elem in subGroups"
-            :draggable="elem.draggable !== false"
+            :draggable="true"
             @dragstart="dragStart($event, elem)"
             @drag="drag($event, elem)"
             @dragend="dragEnd()"
             @click.stop="dragStart($event, elem)"
             @dblclick.stop="open(elem)"
-            :title="elem.draggable === false ? '双击打开' : '拖拽到画布'"
           >
             <t-image
               v-if="elem.image"
@@ -392,15 +390,17 @@ const getPrivateGroups = async () => {
 };
 
 const dragStart = async (event: DragEvent | MouseEvent, item: any) => {
-  if (
-    !item ||
-    item.draggable === false ||
-    (event instanceof DragEvent && !event.dataTransfer)
-  ) {
+  event.stopPropagation();
+
+  let data = null;
+
+  if (!item || (event instanceof DragEvent && !event.dataTransfer)) {
     return;
   }
-  let data = null;
-  if (item['3d']) {
+
+  if (!item.draggable) {
+    data = item.data;
+  } else if (item['3d']) {
     data = {
       name: 'iframe',
       width: 400,
@@ -454,7 +454,6 @@ const dragStart = async (event: DragEvent | MouseEvent, item: any) => {
     }
     meta2d.canvas.addCaches = data;
   }
-  event.stopPropagation();
 };
 
 const drag = (event: DragEvent, item: any) => {};
@@ -473,7 +472,6 @@ const open = async (item: any) => {
   if (item.draggable !== false) {
     return;
   }
-  autoSave();
   router.push({
     path: '/',
     query: {
@@ -486,6 +484,7 @@ const open = async (item: any) => {
     delete (ret as any)[k];
   }
   meta2d.open(ret);
+  autoSave(true);
 };
 
 const onChangeGroupPanel = async (val: string[]) => {
@@ -801,11 +800,17 @@ onMounted(() => {
   groupChange('场景');
   document.addEventListener('dragstart', dragstart, false);
   document.addEventListener('dragend', dragend, false);
+
+  setTimeout(() => {
+    meta2d.on('drop', open);
+  }, 2000);
 });
 
 onUnmounted(() => {
   document.removeEventListener('dragstart', dragstart);
   document.removeEventListener('dragend', dragend);
+
+  meta2d.off('drop', open);
 });
 </script>
 <style lang="postcss" scoped>

src/views/components/Header.vue

@@ -16,10 +16,10 @@
         <t-dropdown-item @click="newFile">
           <a>新建文件</a>
         </t-dropdown-item>
-        <t-dropdown-item @click="openFile">
+        <t-dropdown-item @click="load(true)">
           <a>打开文件</a>
         </t-dropdown-item>
-        <t-dropdown-item divider="true" @click="loadFile">
+        <t-dropdown-item divider="true" @click="load">
           <a>导入文件</a>
         </t-dropdown-item>
         <t-dropdown-item>
@@ -295,19 +295,20 @@ import JSZip from 'jszip';
 import axios from 'axios';
 import { switchTheme } from '@/services/theme';
 import { noLoginTip } from '@/services/utils';
-import { useDot, autoSave, delAttrs } from '@/services/common';
 import {
   save,
+  blank,
   newFile,
   SaveType,
   onScaleView,
   onScaleWindow,
   showMagnifier,
   showMap,
-  newfile,
   drawPen,
   map,
   magnifier,
+  useDot,
+  delAttrs,
 } from '@/services/common';
 
 const router = useRouter();
@@ -387,27 +388,43 @@ onUnmounted(() => {
   meta2d.off('opened', initMeta2dName);
 });
 
-function login() {
+const login = () => {
   return `${assets.account}?cb=${encodeURIComponent(location.href)}`;
-}
+};
 
-function load(newT: boolean = false) {
+function load(isNew = false) {
   const input = document.createElement('input');
   input.type = 'file';
   input.onchange = (event) => {
     const elem = event.target as HTMLInputElement;
     if (elem.files && elem.files[0]) {
-      newT && newfile(true);
+      blank();
       // 路由跳转 可能在 openFile 后执行
       if (elem.files[0].name.endsWith('.json')) {
         openJson(elem.files[0]);
+        if (isNew) {
+          router.push({
+            path: '/',
+            query: {
+              r: Date.now() + '',
+            },
+          });
+        }
       } 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]);
+        router.push({
+          path: '/',
+          query: {
+            r: Date.now() + '',
+          },
+        });
+        setTimeout(() => {
+          openZip(elem.files[0]);
+        }, 500);
       } else {
         MessagePlugin.info('打开文件只支持 json，svg，zip 格式');
       }
@@ -581,17 +598,6 @@ const openZip = async (file: File) => {
   }
 };
 
-async function loadFile(newT: boolean = false) {
-  autoSave();
-  setTimeout(() => {
-    load(newT);
-  }, 1000);
-}
-
-async function openFile() {
-  loadFile(true);
-}
-
 const downloadJson = () => {
   const data: Meta2dBackData = meta2d.data();
   if (data._id) delete data._id;

src/views/components/View.vue

@@ -292,10 +292,13 @@
               <t-row class="mt-16" justify="end">
                 <t-space :size="12">
                   <t-select-input
+                    v-model:inputValue="dataDialog.input"
                     placeholder="搜索我的数据源"
                     allow-input
                     clearable
                     :popup-visible="dataDialog.popupVisible"
+                    @focus="dataDialog.popupVisible = true"
+                    @blur="dataDialog.popupVisible = undefined"
                     @input-change="onInputNetwork"
                     style="width: 240px"
                   >
@@ -345,6 +348,9 @@
                 :max-height="280"
                 size="small"
               >
+                <template #type="{ row, rowIndex }">
+                  {{ row.type || 'MQTT' }}
+                </template>
                 <template #actions="{ row, rowIndex }">
                   <a @click="editNetwork(row)"> 编辑 </a>
                   <t-popconfirm
@@ -466,9 +472,7 @@
         </div>
         <div v-else class="flex middle">
           <div class="flex-grow"></div>
-          <t-button class="ml-16" @click="dataDialog.show = false">
-            完成
-          </t-button>
+          <t-button class="ml-16" @click="onOkDatasources"> 完成 </t-button>
         </div>
       </template>
     </t-dialog>
@@ -784,13 +788,9 @@ onMounted(() => {
   meta2d = new Meta2d('meta2d', meta2dOptions);
   registerBasicDiagram();
   open(true);
-  // @ts-ignore
   meta2d.on('active', active);
-  // @ts-ignore
   meta2d.on('inactive', inactive);
-  // @ts-ignore
   meta2d.on('scale', scaleListener);
-  // @ts-ignore
   meta2d.on('add', lineAdd);
   meta2d.on('opened', openedListener);
 
@@ -803,7 +803,6 @@ onMounted(() => {
 
   // 所有编辑栏所做修改
   meta2d.on('components-update-value', patchFlag);
-  // @ts-ignore
   meta2d.on('contextmenu', onContextmenu);
   meta2d.on('click', canvasClick);
 
@@ -840,15 +839,13 @@ const open = async (flag: boolean = false) => {
         qrcode.url = qr;
       }
     }
-  } else {
-    if (flag) {
-      const data: string = await localforage.getItem(localStorageName);
-      if (data) {
-        meta2d.open(JSON.parse(data));
-      }
-    } else {
-      meta2d.open({ pens: [] } as any);
+  } else if (flag) {
+    const data: string = await localforage.getItem(localStorageName);
+    if (data) {
+      meta2d.open(JSON.parse(data));
     }
+  } else {
+    meta2d.open({ name: '新建项目', pens: [] } as any);
   }
   !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);
@@ -875,16 +872,11 @@ onUnmounted(() => {
   clearInterval(timer);
   watcher();
   if (meta2d) {
-    // @ts-ignore
     meta2d.off('active', active);
-    // @ts-ignore
     meta2d.off('inactive', inactive);
-    // @ts-ignore
     meta2d.off('scale', scaleListener);
-    // @ts-ignore
     meta2d.off('add', lineAdd);
     meta2d.on('opened', openedListener);
-
     meta2d.off('undo', patchFlag);
     meta2d.off('redo', patchFlag);
     meta2d.off('add', patchFlag);
@@ -892,10 +884,8 @@ onUnmounted(() => {
     meta2d.off('rotatePens', patchFlag);
     meta2d.off('translatePens', patchFlag);
     meta2d.off('components-update-value', patchFlag);
-    // @ts-ignore
     meta2d.off('contextmenu', onContextmenu);
     meta2d.off('click', canvasClick);
-
     meta2d.destroy();
   }
 });
@@ -1214,9 +1204,11 @@ const networkColumns = ref([
 ]);
 
 const onShowDataDialog = () => {
-  // @ts-ignore
+  dataDialog.input = '';
   dataDialog.networks = meta2d.store.data.networks || [];
   // @ts-ignore
+  dataDialog.datasetUrl = meta2d.store.data.datasetUrl;
+  // @ts-ignore
   dataDialog.dataset = meta2d.store.data.dataset;
   dataDialog.networkList = [];
   dataDialog.editNetwork = false;
@@ -1236,10 +1228,15 @@ const onInputNetwork = (text: string) => {
 
 // 请求我的数据源接口
 const getNetworks = async () => {
-  // const ret: any = await axios.get(`/api/xxx`);
-  // if (ret) {
-  //   dataDialog.networkList = ret.list
-  // }
+  const ret: any = await axios.post(`/api/data/datasources/list`, {
+    q: {
+      name: dataDialog.input,
+    },
+    projection: { updatedAt: 0 },
+  });
+  if (ret) {
+    dataDialog.networkList = ret.list;
+  }
 };
 
 const addNetwork = () => {
@@ -1267,16 +1264,35 @@ const deleteNetwork = (index: number) => {
   meta2d.connectSocket();
 };
 
-const onOkNetwork = () => {
+const onOkNetwork = async () => {
+  // 保存到我的数据源
+
   if (dataDialog.editNetwork === 1) {
+    if (dataDialog.save) {
+      const ret: any = await axios.post(
+        `/api/data/datasources/add`,
+        dataDialog.network
+      );
+      if (!ret) {
+        return;
+      }
+      dataDialog.network._id = ret._id || ret.id;
+      dataDialog.network.id = dataDialog.network._id;
+    }
     dataDialog.networks.push(dataDialog.network);
+  } else if (dataDialog.editNetwork === 2) {
+    if (dataDialog.save) {
+      const ret: any = await axios.post(
+        `/api/data/datasources/update`,
+        dataDialog.network
+      );
+      if (!ret) {
+        return;
+      }
+    }
   }
-  dataDialog.editNetwork = false;
 
-  // 保存到我的数据源
-  if (dataDialog.save) {
-    // todo
-  }
+  dataDialog.editNetwork = false;
 };
 
 const datasetColumns = ref([
@@ -1329,6 +1345,15 @@ const importDataset = async () => {
   dataDialog.dataset = data;
 };
 
+const onOkDatasources = () => {
+  meta2d.store.data.networks = dataDialog.networks;
+  // @ts-ignore
+  meta2d.store.data.dataset = dataDialog.dataset;
+  // @ts-ignore
+  meta2d.store.data.datasetUrl = dataDialog.datasetUrl;
+  dataDialog.show = false;
+};
+
 const showAddData = (row?: any) => {
   if (row) {
     addDataDialog.header = '编辑数据';

tsconfig.json

@@ -14,6 +14,7 @@
     "paths": {
       "@/*": ["src/*"],
       "@meta2d/*": ["../meta2d.js/packages/*"],
+      "@2d-components/*": ["../2d-components/packages/*"],
     },
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],

vite.config.ts

@@ -12,6 +12,7 @@ export default defineConfig({
     alias: {
       '@': path.resolve(__dirname, './src/'),
       '@meta2d': path.resolve(__dirname, '../meta2d.js/packages'),
+      '@2d-components': path.resolve(__dirname, '../2d-components/packages'),
     },
   },
   build: {