add_meta_width_height

package.json

@@ -9,16 +9,6 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@meta2d/activity-diagram": "^1.0.0",
-    "@meta2d/chart-diagram": "^1.0.0",
-    "@meta2d/class-diagram": "^1.0.0",
-    "@meta2d/core": "^1.0.0",
-    "@meta2d/flow-diagram": "^1.0.0",
-    "@meta2d/form-diagram": "^1.0.1",
-    "@meta2d/fta-diagram": "^1.0.0",
-    "@meta2d/le5le-charts": "^1.0.0",
-    "@meta2d/sequence-diagram": "^1.0.0",
-    "@meta2d/svg": "^1.0.0",
     "axios": "^0.26.0",
     "dayjs": "^1.11.5",
     "file-saver": "^2.0.5",

src/services/utils.ts

@@ -0,0 +1,28 @@
+import { FormItem, Pen, Meta2d, Meta2dData } from "@meta2d/core";
+
+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;
+}

src/views/components/FileProps.vue

@@ -5,13 +5,22 @@
         <t-space direction="vertical" class="panel">
           <div class="form-item">
             <label>画布尺寸</label>
-            <t-input-number label="W" placeholder="宽" theme="column" min="1" />
+            <t-input-number
+              label="W"
+              :value="meta2dInfo?.width"
+              placeholder="宽"
+              theme="column"
+              min="1"
+              @change="changeValue($event, 'width')"
+            />
             <t-input-number
               class="ml-8"
               label="H"
               placeholder="高"
               theme="column"
               min="1"
+              :value="meta2dInfo?.height"
+              @change="changeValue($event, 'height')"
             />
             <t-dropdown
               :minColumnWidth="180"
@@ -21,93 +30,16 @@
             >
               <t-icon name="more" class="ml-8 hover" />
               <t-dropdown-menu>
-                <t-dropdown-item>
-                  <div class="flex between">
-                    大屏
-                    <span class="desc">
-                      1920
-                      <span style="font-size: 10px; margin: 0 4px">x</span>
-                      1080
-                    </span>
-                  </div>
-                </t-dropdown-item>
-                <t-dropdown-item>
+                <t-dropdown-item
+                  v-for="item in screenList"
+                  @click="selectedSreen(item)"
+                >
                   <div class="flex between">
-                    网页
+                    {{ item.name }}
                     <span class="desc">
-                      1440
+                      {{ item.width }}
                       <span style="font-size: 10px; margin: 0 4px">x</span>
-                      1024
-                    </span>
-                  </div>
-                </t-dropdown-item>
-                <t-dropdown-item>
-                  <div class="flex between">
-                    平板12.9"
-                    <span class="desc">
-                      1024
-                      <span style="font-size: 10px; margin: 0 4px">x</span>
-                      1366
-                    </span>
-                  </div>
-                </t-dropdown-item>
-                <t-dropdown-item>
-                  <div class="flex between">
-                    平板11"
-                    <span class="desc">
-                      834
-                      <span style="font-size: 10px; margin: 0 4px">x</span>
-                      1194
-                    </span>
-                  </div>
-                </t-dropdown-item>
-                <t-dropdown-item>
-                  <div class="flex between">
-                    平板Mini
-                    <span class="desc">
-                      768
-                      <span style="font-size: 10px; margin: 0 4px">x</span>
-                      1024
-                    </span>
-                  </div>
-                </t-dropdown-item>
-                <t-dropdown-item>
-                  <div class="flex between">
-                    华为P8
-                    <span class="desc">
-                      360
-                      <span style="font-size: 10px; margin: 0 4px">x</span>
-                      640
-                    </span>
-                  </div>
-                </t-dropdown-item>
-                <t-dropdown-item>
-                  <div class="flex between">
-                    华为P40
-                    <span class="desc">
-                      395
-                      <span style="font-size: 10px; margin: 0 4px">x</span>
-                      856
-                    </span>
-                  </div>
-                </t-dropdown-item>
-                <t-dropdown-item>
-                  <div class="flex between">
-                    手机1
-                    <span class="desc">
-                      430
-                      <span style="font-size: 10px; margin: 0 4px">x</span>
-                      932
-                    </span>
-                  </div>
-                </t-dropdown-item>
-                <t-dropdown-item>
-                  <div class="flex between">
-                    手机2
-                    <span class="desc">
-                      375
-                      <span style="font-size: 10px; margin: 0 4px">x</span>
-                      812
+                      {{ item.height }}
                     </span>
                   </div>
                 </t-dropdown-item>
@@ -122,19 +54,24 @@
               format="CSS"
               :color-modes="['monochrome']"
               :show-primary-color-preview="false"
+              :value="meta2dInfo?.background"
+              @change="changeValue($event, 'background')"
             />
           </div>
           <div class="form-item">
             <label>背景图片</label>
             <t-upload
               class="ml-8"
-              v-model="data.files"
+              v-model="bgfile"
               action="/api/image/upload"
               theme="image"
               accept="image/*"
               :headers="headers"
               :data="updataData"
+              :auto-upload="true"
+              :upload-all-files-in-one-request="false"
               @success="fileSuccessed"
+              @remove = fileRemoved
             />
           </div>
         </t-space>
@@ -213,22 +150,120 @@
 </template>
 
 <script lang="ts" setup>
-import { onBeforeMount, reactive } from 'vue';
-import axios from 'axios';
-import { getCookie } from '@/services/cookie';
-
-import ElementTree from './ElementTree.vue';
+import { onMounted, reactive, onUnmounted, ref } from "vue";
+import { getCookie } from "@/services/cookie";
+import ElementTree from "./ElementTree.vue";
+import { Meta2dData } from "@meta2d/core";
 
 const headers = {
-  Authorization: 'Bearer ' + (localStorage.token || getCookie('token') || ''),
+  Authorization: "Bearer " + (localStorage.token || getCookie("token") || ""),
 };
-const updataData = { directory: '/项目' };
+const updataData = { directory: "/项目" };
 
 const data = reactive<any>({
   tab: 1,
 });
 
-const fileSuccessed = async () => {};
+const bgfile = ref<any[]>([]);
+
+const meta2dInfo = ref<Meta2dData | any>();
+
+const screenList = reactive([
+  {
+    name: "大屏",
+    width: 1920,
+    height: 1080,
+  },
+  {
+    name: "网页",
+    width: 1440,
+    height: 1024,
+  },
+  {
+    name: '平板12.9"',
+    width: 1024,
+    height: 1366,
+  },
+  {
+    name: '平板11"',
+    width: 834,
+    height: 1194,
+  },
+  {
+    name: "平板Mini",
+    width: 768,
+    height: 1024,
+  },
+  {
+    name: "华为P8",
+    width: 360,
+    height: 640,
+  },
+  {
+    name: "华为P40",
+    width: 395,
+    height: 856,
+  },
+  {
+    name: "手机1",
+    width: 430,
+    height: 932,
+  },
+  {
+    name: "手机2",
+    width: 375,
+    height: 812,
+  },
+]);
+
+const selectedSreen = (item: any) => {
+  (<any>globalThis).meta2d.store.data.width = item.width;
+  (<any>globalThis).meta2d.store.data.height = item.height;
+  (<any>globalThis).meta2d.store.patchFlagsBackground = true;
+  (<any>globalThis).meta2d.render();
+  openData();
+};
+
+const fileSuccessed = async (content: any) => {
+  (<any>globalThis).meta2d.store.patchFlagsBackground = true;
+  (<any>globalThis).meta2d.setBackgroundImage(content.response.url);
+  (<any>globalThis).meta2d.store.patchFlagsBackground = true;
+  (<any>globalThis).meta2d.render();
+};
+
+const fileRemoved = () => {
+  (<any>globalThis).meta2d.setBackgroundImage('');
+  (<any>globalThis).meta2d.store.patchFlagsBackground = true;
+  (<any>globalThis).meta2d.render();
+  bgfile.value = [];
+}
+
+const changeValue = (e: any, key: string) => {
+  (<any>globalThis).meta2d.store.data[key] = e;
+  (<any>globalThis).meta2d.render();
+  openData();
+};
+
+onMounted(() => {
+  openData();
+  (<any>globalThis).meta2d.on("opened", openData);
+});
+
+onUnmounted(() => {
+  (<any>globalThis).meta2d.off("opened", openData);
+});
+
+function openData() {
+  meta2dInfo.value = Object.assign({}, (<any>globalThis).meta2d.store.data);
+  if ((<any>globalThis).meta2d.store.data.bkImage) {
+    bgfile.value = [
+      {
+        name: (<any>globalThis).meta2d.store.data.bkImage,
+        url: (<any>globalThis).meta2d.store.data.bkImage,
+      },
+    ];
+  }
+}
 </script>
 <style lang="postcss" scoped>
 .props {

src/views/components/Graphics.vue

@@ -8,41 +8,174 @@
     </div>
     <div class="groups">
       <div class="sub-groups">
-        <div class="active">
-          <t-icon name="desktop" />
-          场景
+        <div
+          v-for="group in groups"
+          :class="group.active ? 'active' : ''"
+          @click="groupChange(group.name)"
+        >
+          <t-icon :name="group.icon" />
+          {{ group.name }}
         </div>
-        <div>
-          <t-icon name="root-list" />
-          模板
-        </div>
-        <div>
-          <t-icon name="chart" />
-          图表
-        </div>
-        <div>
-          <t-icon name="control-platform" />
-          控件
-        </div>
-        <div>
-          <t-icon name="file-icon" />
-          图标
-        </div>
-        <div>
-          <t-icon name="chart-bubble" />
-          图形
-        </div>
-        <div>
-          <t-icon name="app" />
-          我的
+      </div>
+      <div class="list">
+        <div
+          class="show-item"
+          v-for="item in showList"
+          :draggable="true"
+          @dragstart="dragStart($event, item)"
+          @drag="drag($event, item)"
+          @dragend="dragEnd()"
+        >
+          <t-image
+            v-if="item.image"
+            :src="item.image"
+            fit="cover"
+            :style="{ width: '88px', height: '88px' }"
+          />
+          <i v-else class="t-icon" :class="item.icon"></i>
+          <p>{{ item.name }}</p>
         </div>
       </div>
-      <div class="list"></div>
     </div>
   </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { onMounted, onUnmounted, reactive } from "vue";
+
+const groups = reactive([
+  {
+    icon: "desktop",
+    name: "场景",
+    key: "",
+    active: false,
+  },
+  {
+    icon: "root-list",
+    name: "模板",
+    key: "",
+    active: false,
+  },
+  {
+    icon: "chart",
+    name: "图表",
+    key: "",
+    active: false,
+  },
+  {
+    icon: "control-platform",
+    name: "控件",
+    key: "",
+    active: false,
+  },
+  {
+    icon: "file-icon",
+    name: "图标",
+    key: "",
+    active: false,
+  },
+  {
+    icon: "chart-bubble",
+    name: "图形",
+    key: "",
+    active: true,
+  },
+  {
+    icon: "app",
+    name: "我的",
+    key: "",
+    active: false,
+  },
+]);
+
+const groupChange = (name: string) => {
+  if (name === "图形") {
+  }
+};
+
+const showList = [
+  {
+    name: "square",
+    icon: "t-icon t-rect",
+    id: "",
+    data: {
+      text: "正方形",
+      width: 100,
+      height: 100,
+      name: "square",
+    },
+  },
+  {
+    name: "rectangle",
+    icon: "t-icon t-rectangle",
+    id: 2,
+    data: {
+      text: "圆角矩形",
+      width: 200,
+      height: 50,
+      borderRadius: 0.1,
+      name: "rectangle",
+    },
+  },
+  {
+    name: "circle",
+    icon: "t-icon t-circle",
+    image: "",
+    id: 3,
+    data: {
+      text: "圆",
+      width: 100,
+      height: 100,
+      name: "circle",
+    },
+  },
+  {
+    name: "triangle",
+    icon: "t-icon t-triangle",
+    id: 4,
+    data: {
+      text: "三角形",
+      width: 100,
+      height: 100,
+      name: "triangle",
+    },
+  },
+];
+
+const dragStart = (event: DragEvent, item: any) => {
+  if (!item || !event.dataTransfer) {
+    return;
+  }
+
+  event.dataTransfer.setData(
+    "Meta2d",
+    JSON.stringify(item.componentData || item.data)
+  );
+  event.stopPropagation();
+};
+
+const drag = (event: DragEvent, item: any) => {};
+
+const dragEnd = () => {};
+
+const dragstart = (event: any) => {
+  event.target.style.opacity = 0.5;
+};
+
+const dragend = (event: any) => {
+  event.target.style.opacity = 1;
+};
+
+onMounted(() => {
+  document.removeEventListener("dragstart", dragstart);
+  document.removeEventListener("dragend", dragend);
+});
+
+onUnmounted(() => {
+  document.addEventListener("dragstart", dragstart, false);
+  document.addEventListener("dragend", dragend, false);
+});
+</script>
 <style lang="postcss" scoped>
 .graphics {
   display: flex;
@@ -90,6 +223,32 @@
 
     .list {
       background-color: var(--color-background-active);
+      padding: 12px;
+      display: grid;
+      grid-template-columns: 112px 112px;
+      grid-template-rows: 142px;
+
+      .show-item {
+        padding: 12px;
+        p {
+          margin-top: 10px;
+          height: 20px;
+          line-height: 20px;
+          text-align: center;
+          font-size: 14px;
+        }
+
+        i {
+          background-color: #fff;
+          border-radius: 4px;
+          height: 88px;
+          width: 88px;
+        }
+        .t-image {
+          background-color: #fff;
+          border-radius: 4px;
+        }
+      }
     }
   }
 }

src/views/components/Header.vue

@@ -264,7 +264,7 @@
       </t-dropdown-menu>
     </t-dropdown>
     <div class="flex middle" v-else>
-      <a class="button primary solid" style="width: 80px">登录</a>
+      <a class="button primary solid" style="width: 80px" :href="login()">登录</a>
     </div>
   </div>
 </template>
@@ -273,6 +273,8 @@
 import { reactive } from 'vue';
 import { useUser } from '@/services/user';
 
+const market = import.meta.env.VITE_MARKET;
+
 const baseUrl = import.meta.env.BASE_URL || '/';
 
 const { user, message, getUser, getMessage, signout } = useUser();
@@ -280,6 +282,21 @@ const { user, message, getUser, getMessage, signout } = useUser();
 const data = reactive({
   name: '空白文件',
 });
+
+function login() {
+  //TODO 临时地址
+  return `https://account.le5le.com/?cb=${encodeURIComponent(location.href)}`
+  // if (market) {
+  //       return `/account/login?cb=${encodeURIComponent(location.href)}`;
+  //     } else {
+  //       let arr = location.host.split('.');
+  //       arr[0] = 'http://account';
+  //       let accountUrl = arr.join('.');
+  //       return `${
+  //         (<any>globalThis).loginUrl ? (<any>globalThis).loginUrl : accountUrl
+  //       }?cb=${encodeURIComponent(location.href)}`;
+  //     }
+}
 </script>
 <style lang="postcss" scoped>
 .app-header {

src/views/components/View.vue

@@ -102,11 +102,12 @@
 <script lang="ts" setup>
 import { Meta2d, Options } from '@meta2d/core';
 import { onMounted,onUnmounted} from 'vue';
-import { registerBasicDiagram } from './register';
+import { registerBasicDiagram } from '@/services/register';
 
 
-const meta2dOptions:Options = {
-
+const meta2dOptions: Options = {
+  cdn: 'https://assets.le5le.com',
+  rule:true
 }
 onMounted(() => {
   new Meta2d('meta2d', meta2dOptions);

tsconfig.json

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

vite.config.ts

@@ -1,22 +1,25 @@
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-import vueJsx from '@vitejs/plugin-vue-jsx';
-import * as path from 'path';
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+import * as path from "path";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue(), vueJsx()],
   resolve: {
-    alias: { '@': path.resolve(__dirname, './src/') },
+    alias: {
+      "@": path.resolve(__dirname, "./src/"),
+      "@meta2d": path.resolve(__dirname, "../meta2d.js/packages"),
+    },
   },
   build: {
-    outDir: 'v',
+    outDir: "v",
   },
   server: {
     proxy: {
-      '/image': 'http://127.0.0.1:777/',
-      '/file': 'http://127.0.0.1:777/',
-      '/api': 'http://127.0.0.1:777/',
+      "/image": "https://2d.le5le.com/",
+      "/file": "https://2d.le5le.com/",
+      "/api": "https://2d.le5le.com/",
     },
   },
 });