@tmagic/editor 1.3.0-beta.1 → 1.3.0-beta.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-beta.1",
+  "version": "1.3.0-beta.2",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -46,13 +46,13 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.3.0-beta.1",
-    "@tmagic/design": "1.3.0-beta.1",
-    "@tmagic/form": "1.3.0-beta.1",
-    "@tmagic/schema": "1.3.0-beta.1",
-    "@tmagic/stage": "1.3.0-beta.1",
-    "@tmagic/table": "1.3.0-beta.1",
-    "@tmagic/utils": "1.3.0-beta.1",
+    "@tmagic/core": "1.3.0-beta.2",
+    "@tmagic/design": "1.3.0-beta.2",
+    "@tmagic/form": "1.3.0-beta.2",
+    "@tmagic/schema": "1.3.0-beta.2",
+    "@tmagic/stage": "1.3.0-beta.2",
+    "@tmagic/table": "1.3.0-beta.2",
+    "@tmagic/utils": "1.3.0-beta.2",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -64,8 +64,8 @@
     "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.0-beta.1",
-    "@tmagic/form": "1.3.0-beta.1",
+    "@tmagic/design": "1.3.0-beta.2",
+    "@tmagic/form": "1.3.0-beta.2",
     "monaco-editor": "^0.41.0",
     "vue": "^3.3.4"
   },

package/src/components/ToolButton.vue

@@ -16,7 +16,7 @@
           ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></TMagicButton
         >
       </TMagicTooltip>
-      <TMagicButton v-else size="small" text :disabled="disabled"
+      <TMagicButton v-else size="small" text :disabled="disabled" :title="data.text"
         ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></TMagicButton
       >
     </template>

package/src/fields/DataSourceFields.vue

@@ -175,7 +175,7 @@ const dataSourceFieldsConfig: FormConfig = [
       if (model.type === 'number') return 'number';
       if (model.type === 'boolean') return 'select';
 
-      return 'string';
+      return 'text';
     },
     options: [
       { text: 'true', value: true },

package/src/fields/EventSelect.vue

@@ -52,6 +52,7 @@ import { computed, inject } from 'vue';
 import { Delete } from '@element-plus/icons-vue';
 import { has } from 'lodash-es';
 
+import type { EventOption } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
 import type { FieldProps, FormState } from '@tmagic/form';
 import { ActionType } from '@tmagic/schema';
@@ -75,11 +76,22 @@ const eventNameConfig = computed(() => {
     text: '事件',
     type: 'select',
     labelWidth: '40px',
-    options: (mForm: FormState, { formValue }: any) =>
-      services?.eventsService.getEvent(formValue.type).map((option: any) => ({
+    options: (mForm: FormState, { formValue }: any) => {
+      let events: EventOption[] = [];
+
+      if (!services) return events;
+
+      if (props.config.src === 'component') {
+        events = services.eventsService.getEvent(formValue.type);
+      } else if (props.config.src === 'datasource') {
+        events = services.dataSourceService.getFormEvent(formValue.type);
+      }
+
+      return events.map((option) => ({
         text: option.label,
         value: option.value,
-      })),
+      }));
+    },
   };
   return { ...defaultEventNameConfig, ...props.config.eventNameConfig };
 });

package/src/layouts/workspace/viewer/NodeListMenu.vue

@@ -1,6 +1,8 @@
 <template>
-  <content-menu
+  <ContentMenu
     ref="menu"
+    class="magic-editor-node-list-menu"
+    style="max-width: 280px"
     :menu-data="menuData"
     :active="node?.id"
     :auto-hide="!pinned"
@@ -9,7 +11,7 @@
     <template #title>
       <NodeListMenuTitle v-model:pinned="pinned" @change="dragMenuHandler" @close="closeHandler"></NodeListMenuTitle>
     </template>
-  </content-menu>
+  </ContentMenu>
 </template>
 
 <script lang="ts" setup>
@@ -53,6 +55,14 @@ const cancel = () => {
   menu.value?.hide();
 };
 
+const clearTimeoutLazy = () => {
+  globalThis.setTimeout(() => {
+    if (timeout) {
+      globalThis.clearTimeout(timeout);
+    }
+  }, 300);
+};
+
 const unWatch = watch(
   stage,
   (stage) => {
@@ -90,7 +100,8 @@ const unWatch = watch(
     });
 
     stage.on('mouseleave', () => {
-      cancel();
+      // mouseleave后，大概率还有最后一个mousemove事件，这里延迟清除
+      clearTimeoutLazy();
     });
 
     unWatch();
@@ -135,11 +146,7 @@ const menuData = computed<MenuButton[]>(() =>
 
 const mouseenterHandler = () => {
   // menu的mouseenter后，大概率还有最后一个mousemove事件，这里延迟清除
-  globalThis.setTimeout(() => {
-    if (timeout) {
-      globalThis.clearTimeout(timeout);
-    }
-  }, 300);
+  clearTimeoutLazy();
 };
 
 const dragMenuHandler = ({ deltaY, deltaX }: OnDrag) => {

package/src/layouts/workspace/viewer/ViewerMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <content-menu :menu-data="menuData" ref="menu"></content-menu>
+  <ContentMenu :menu-data="menuData" ref="menu"></ContentMenu>
 </template>
 
 <script lang="ts" setup>

package/src/services/dataSource.ts

@@ -1,6 +1,7 @@
 import { reactive } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
+import type { EventOption } from '@tmagic/core';
 import type { FormConfig } from '@tmagic/form';
 import type { DataSourceSchema } from '@tmagic/schema';
 import { guid } from '@tmagic/utils';
@@ -16,6 +17,7 @@ interface State {
   editable: boolean;
   configs: Record<string, FormConfig>;
   values: Record<string, Partial<DataSourceSchema>>;
+  events: Record<string, EventOption[]>;
 }
 
 type StateKey = keyof State;
@@ -26,6 +28,7 @@ class DataSource extends BaseService {
     editable: true,
     configs: {},
     values: {},
+    events: {},
   });
 
   public set<K extends StateKey, T extends State[K]>(name: K, value: T) {
@@ -52,6 +55,14 @@ class DataSource extends BaseService {
     this.get('values')[type] = value;
   }
 
+  public getFormEvent(type = 'base') {
+    return this.get('events')[type] || [];
+  }
+
+  public setFormEvent(type: string, value: EventOption[] = []) {
+    this.get('events')[type] = value;
+  }
+
   public add(config: DataSourceSchema) {
     const newConfig = {
       ...config,

package/src/theme/content-menu.scss

@@ -44,30 +44,32 @@
       }
     }
 
-    &.active {
-      background-color: $--theme-color;
-      .tmagic-design-button,
-      .tmagic-design-button:active,
-      .tmagic-design-button:focus {
-        color: #fff;
-        background-color: $--theme-color;
-      }
+    &.button {
+      &:hover {
+        background-color: $--hover-color;
+        .tmagic-design-button,
+        .tmagic-design-button:active,
+        .tmagic-design-button:focus {
+          color: $--font-color;
+        }
 
-      &.menu-item i {
-        color: #fff;
+        &.menu-item i {
+          color: $--font-color;
+        }
       }
-    }
 
-    &:hover {
-      background-color: $--hover-color;
-      .tmagic-design-button,
-      .tmagic-design-button:active,
-      .tmagic-design-button:focus {
-        color: $--font-color;
-      }
+      &.active {
+        background-color: $--theme-color;
+        .tmagic-design-button,
+        .tmagic-design-button:active,
+        .tmagic-design-button:focus {
+          color: #fff;
+          background-color: transparent;
+        }
 
-      &.menu-item i {
-        color: $--font-color;
+        &.menu-item i {
+          color: #fff;
+        }
       }
     }
   }

package/src/type.ts

@@ -418,6 +418,7 @@ export interface HistoryState {
 export interface EventSelectConfig {
   name: string;
   type: 'event-select';
+  src: 'datasource' | 'component';
   /** 事件名称表单配置 */
   eventNameConfig?: FormItem;
   /** 动作类型配置 */

package/src/utils/data-source/index.ts

@@ -29,6 +29,18 @@ const fillConfig = (config: FormConfig): FormConfig => [
       },
     ],
   },
+  {
+    type: 'panel',
+    title: '事件配置',
+    display: false,
+    items: [
+      {
+        name: 'events',
+        src: 'datasource',
+        type: 'event-select',
+      },
+    ],
+  },
 ];
 
 export const getFormConfig = (type: string, configs: Record<string, FormConfig>): FormConfig => {

package/src/utils/props.ts

@@ -205,6 +205,7 @@ export const eventTabConfig: TabPaneConfig = {
   items: [
     {
       name: 'events',
+      src: 'component',
       type: 'event-select',
     },
   ],

package/types/services/dataSource.d.ts

@@ -1,3 +1,4 @@
+import type { EventOption } from '@tmagic/core';
 import type { FormConfig } from '@tmagic/form';
 import type { DataSourceSchema } from '@tmagic/schema';
 import type { DatasourceTypeOption } from '../type';
@@ -8,6 +9,7 @@ interface State {
     editable: boolean;
     configs: Record<string, FormConfig>;
     values: Record<string, Partial<DataSourceSchema>>;
+    events: Record<string, EventOption[]>;
 }
 type StateKey = keyof State;
 declare class DataSource extends BaseService {
@@ -18,6 +20,8 @@ declare class DataSource extends BaseService {
     setFormConfig(type: string, config: FormConfig): void;
     getFormValue(type?: string): Partial<DataSourceSchema>;
     setFormValue(type: string, value: Partial<DataSourceSchema>): void;
+    getFormEvent(type?: string): EventOption[];
+    setFormEvent(type: string, value?: EventOption[]): void;
     add(config: DataSourceSchema): void;
     update(config: DataSourceSchema): void;
     remove(id: string): void;

package/types/type.d.ts

@@ -335,6 +335,7 @@ export interface HistoryState {
 export interface EventSelectConfig {
     name: string;
     type: 'event-select';
+    src: 'datasource' | 'component';
     /** 事件名称表单配置 */
     eventNameConfig?: FormItem;
     /** 动作类型配置 */