@tmagic/editor 1.3.16 → 1.4.0-beta.1

package/src/fields/DataSourceMethods.vue

@@ -24,14 +24,14 @@
 import { TMagicButton } from '@tmagic/design';
 import type { FieldProps } from '@tmagic/form';
 import type { CodeBlockContent } from '@tmagic/schema';
-import { MagicTable } from '@tmagic/table';
+import { type ColumnConfig, MagicTable } from '@tmagic/table';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import { useDataSourceMethod } from '@editor/hooks/use-data-source-method';
 import type { CodeParamStatement } from '@editor/type';
 
 defineOptions({
-  name: 'MEditorDataSourceMethods',
+  name: 'MFieldsDataSourceMethods',
 });
 
 const props = withDefaults(
@@ -49,7 +49,7 @@ const emit = defineEmits(['change']);
 
 const { codeConfig, codeBlockEditor, createCode, editCode, deleteCode, submitCode } = useDataSourceMethod();
 
-const methodColumns = [
+const methodColumns: ColumnConfig[] = [
   {
     label: '名称',
     prop: 'name',

package/src/fields/DataSourceMocks.vue

@@ -26,14 +26,14 @@ import { computed, inject, ref } from 'vue';
 import { TMagicButton, tMagicMessageBox, TMagicSwitch } from '@tmagic/design';
 import { type FieldProps, type FormConfig, type FormState, MFormDrawer } from '@tmagic/form';
 import type { MockSchema } from '@tmagic/schema';
-import { MagicTable } from '@tmagic/table';
+import { type ColumnConfig, MagicTable } from '@tmagic/table';
 import { getDefaultValueFromFields } from '@tmagic/utils';
 
 import CodeEditor from '@editor/layouts/CodeEditor.vue';
 import { Services } from '@editor/type';
 
 defineOptions({
-  name: 'MEditorDataSourceMocks',
+  name: 'MFieldsDataSourceMocks',
 });
 
 const props = withDefaults(
@@ -117,7 +117,7 @@ const formConfig: FormConfig = [
   },
 ];
 
-const columns = [
+const columns: ColumnConfig[] = [
   {
     type: 'expand',
     component: CodeEditor,

package/src/fields/DataSourceSelect.vue

@@ -14,31 +14,19 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { FieldProps, MSelect, SelectConfig } from '@tmagic/form';
+import { type FieldProps, MSelect, type SelectConfig } from '@tmagic/form';
 
-import { Services } from '../type';
+import type { DataSourceSelect, Services } from '../type';
 
 defineOptions({
-  name: 'MEditorDataSourceSelect',
+  name: 'MFieldsDataSourceSelect',
 });
 
 const emit = defineEmits(['change']);
 
-const props = withDefaults(
-  defineProps<
-    FieldProps<{
-      type: 'data-source-select';
-      name: string;
-      text?: string;
-      placeholder?: string;
-      dataSourceType?: string;
-      value?: 'id' | 'value';
-    }>
-  >(),
-  {
-    disabled: false,
-  },
-);
+const props = withDefaults(defineProps<FieldProps<DataSourceSelect>>(), {
+  disabled: false,
+});
 
 const { dataSourceService } = inject<Services>('services') || {};
 

package/src/fields/EventSelect.vue

@@ -61,7 +61,7 @@ import { ActionType } from '@tmagic/schema';
 import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig, Services } from '@editor/type';
 
 defineOptions({
-  name: 'MEditorEventSelect',
+  name: 'MFieldsEventSelect',
 });
 
 const props = defineProps<FieldProps<EventSelectConfig>>();

package/src/fields/KeyValue.vue

@@ -63,23 +63,23 @@ import { ref, watchEffect } from 'vue';
 import { Delete, Plus } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicInput } from '@tmagic/design';
-import type { FieldProps } from '@tmagic/form';
+import type { FieldProps, FormItem } from '@tmagic/form';
 
 import CodeIcon from '@editor/icons/CodeIcon.vue';
 import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
 
 defineOptions({
-  name: 'MEditorKeyValue',
+  name: 'MFieldsKeyValue',
 });
 
 const props = withDefaults(
   defineProps<
-    FieldProps<{
-      type: 'key-value';
-      name: string;
-      text: string;
-      advanced?: boolean;
-    }>
+    FieldProps<
+      {
+        type: 'key-value';
+        advanced?: boolean;
+      } & FormItem
+    >
   >(),
   {
     disabled: false,

package/src/fields/PageFragmentSelect.vue

@@ -26,7 +26,7 @@ import Icon from '@editor/components/Icon.vue';
 import type { PageFragmentSelectConfig, Services } from '@editor/type';
 
 defineOptions({
-  name: 'MEditorPageFragmentSelect',
+  name: 'MFieldsPageFragmentSelect',
 });
 
 const services = inject<Services>('services');

package/src/fields/UISelect.vue

@@ -26,7 +26,7 @@
           :size="size"
           @click="selectNode(val)"
           @mouseenter="highlight(val)"
-          @mouseleave="unhightlight"
+          @mouseleave="unhighlight"
           >{{ `${toName}_${val}` }}</TMagicButton
         >
       </TMagicTooltip>
@@ -46,16 +46,16 @@ import { Close, Delete } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
 
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
-import type { FieldProps, FormState } from '@tmagic/form';
+import type { FieldProps, FormItem, FormState } from '@tmagic/form';
 import type { Id } from '@tmagic/schema';
 
 import { Services, UI_SELECT_MODE_EVENT_NAME } from '@editor/type';
 
 defineOptions({
-  name: 'MEditorUISelect',
+  name: 'MFieldsUISelect',
 });
 
-const props = defineProps<FieldProps<any>>();
+const props = defineProps<FieldProps<{ type: 'ui-select' } & FormItem>>();
 
 const emit = defineEmits(['change']);
 
@@ -115,7 +115,7 @@ const highlight = throttle((id: Id) => {
   services?.stageOverlayService.get('stage')?.highlight(id);
 }, 150);
 
-const unhightlight = () => {
+const unhighlight = () => {
   services?.editorService.set('highlightNode', null);
   services?.editorService.get('stage')?.clearHighlight();
   services?.stageOverlayService.get('stage')?.clearHighlight();

package/src/hooks/use-code-block-edit.ts

@@ -54,7 +54,6 @@ export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
     codeId.value = id;
 
     await nextTick();
-
     codeBlockEditor.value?.show();
   };
 

package/src/index.ts

@@ -96,11 +96,11 @@ export default {
     // eslint-disable-next-line no-param-reassign
     app.config.globalProperties.$TMAGIC_EDITOR = option;
     setConfig(option);
-    app.component(Editor.name, Editor);
+    app.component(`${Editor.name || 'MEditor'}`, Editor);
+    app.component('magic-code-editor', CodeEditor);
     app.component('m-fields-ui-select', uiSelect);
     app.component('m-fields-code-link', CodeLink);
     app.component('m-fields-vs-code', Code);
-    app.component('magic-code-editor', CodeEditor);
     app.component('m-fields-code-select', CodeSelect);
     app.component('m-fields-code-select-col', CodeSelectCol);
     app.component('m-fields-event-select', EventSelect);

package/src/layouts/NavMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor-nav-menu" :style="{ height: `${height}px` }">
+  <div class="m-editor-nav-menu" :style="{ height: `${height}px` }" ref="navMenu">
     <div v-for="key in keys" :class="`menu-${key}`" :key="key" :style="`width: ${columnWidth?.[key]}px`">
       <ToolButton :data="item" v-for="(item, index) in buttons[key]" :key="index"></ToolButton>
     </div>
@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, markRaw } from 'vue';
+import { computed, inject, markRaw, onBeforeUnmount, onMounted, ref } from 'vue';
 import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
@@ -178,4 +178,23 @@ const buttons = computed(() => {
   });
   return data;
 });
+
+const resizeObserver = new ResizeObserver(() => {
+  const rect = navMenu.value?.getBoundingClientRect();
+  if (rect) {
+    uiService?.set('navMenuRect', {
+      left: rect.left,
+      top: rect.top,
+      width: rect.width,
+      height: rect.height,
+    });
+  }
+});
+const navMenu = ref<HTMLDivElement>();
+onMounted(() => {
+  navMenu.value && resizeObserver.observe(navMenu.value);
+});
+onBeforeUnmount(() => {
+  resizeObserver.disconnect();
+});
 </script>

package/src/layouts/sidebar/Sidebar.vue

@@ -204,6 +204,11 @@ const getItemConfig = (data: SideItem): SideComponent => {
       text: '代码编辑',
       component: CodeBlockListPanel,
       slots: {},
+      boxComponentConfig: {
+        props: {
+          slideType: 'box',
+        },
+      },
     },
     'data-source': {
       $key: 'data-source',

package/src/layouts/sidebar/code-block/CodeBlockListPanel.vue

@@ -18,7 +18,6 @@
     </CodeBlockList>
   </TMagicScrollbar>
 
-  <!-- 代码块编辑区 -->
   <CodeBlockEditor
     v-if="codeConfig"
     ref="codeBlockEditor"

package/src/services/BaseService.ts

@@ -103,7 +103,7 @@ const doAsyncAction = async (
  * 例如：
  *   Class EditorService extends BaseService {
  *     constructor() {
- *       super(['add']);
+ *       super([ { name: 'add', isAsync: true },]);
  *     }
  *     add(value) { return result; }
  *   };
@@ -131,7 +131,7 @@ const doAsyncAction = async (
  * 例如：
  *   Class EditorService extends BaseService {
  *     constructor() {
- *       super(['add']);
+ *       super([ { name: 'add', isAsync: true },]);
  *     }
  *     add(value) { return result; }
  *   };
@@ -194,6 +194,9 @@ export default class extends EventEmitter {
     });
   }
 
+  /**
+   * @deprecated 请使用usePlugin代替
+   */
   public use(options: Record<string, Function>) {
     Object.entries(options).forEach(([methodName, method]: [string, Function]) => {
       if (typeof method === 'function') this.middleware[methodName].push(method);

package/src/services/codeBlock.ts

@@ -18,16 +18,24 @@
 
 import { reactive } from 'vue';
 import { keys, pick } from 'lodash-es';
+import type { Writable } from 'type-fest';
 
 import type { ColumnConfig } from '@tmagic/form';
 import type { CodeBlockContent, CodeBlockDSL, Id } from '@tmagic/schema';
 
-import type { CodeState } from '@editor/type';
+import type { AsyncHookPlugin, CodeState } from '@editor/type';
 import { CODE_DRAFT_STORAGE_KEY } from '@editor/type';
 import { getConfig } from '@editor/utils/config';
 
 import BaseService from './BaseService';
 
+const canUsePluginMethods = {
+  async: ['setCodeDslById', 'setEditStatus', 'setCombineIds', 'setUndeleteableList', 'deleteCodeDslByIds'] as const,
+  sync: [],
+};
+
+type AsyncMethodName = Writable<(typeof canUsePluginMethods)['async']>;
+
 class CodeBlock extends BaseService {
   private state = reactive<CodeState>({
     codeDsl: null,
@@ -38,13 +46,7 @@ class CodeBlock extends BaseService {
   });
 
   constructor() {
-    super([
-      { name: 'setCodeDslById', isAsync: true },
-      { name: 'setEditStatus', isAsync: true },
-      { name: 'setCombineIds', isAsync: true },
-      { name: 'setUndeleteableList', isAsync: true },
-      { name: 'deleteCodeDslByIds', isAsync: true },
-    ]);
+    super(canUsePluginMethods.async.map((methodName) => ({ name: methodName, isAsync: true })));
   }
 
   /**
@@ -243,6 +245,10 @@ class CodeBlock extends BaseService {
     this.removeAllListeners();
     this.removeAllPlugins();
   }
+
+  public usePlugin(options: AsyncHookPlugin<AsyncMethodName, CodeBlock>): void {
+    super.usePlugin(options);
+  }
 }
 
 export type CodeBlockService = CodeBlock;

package/src/services/dataSource.ts

@@ -1,12 +1,13 @@
 import { reactive } from 'vue';
 import { cloneDeep } from 'lodash-es';
+import { Writable } from 'type-fest';
 
 import type { EventOption } from '@tmagic/core';
 import type { FormConfig } from '@tmagic/form';
 import type { DataSourceSchema } from '@tmagic/schema';
-import { guid } from '@tmagic/utils';
+import { guid, toLine } from '@tmagic/utils';
 
-import type { DatasourceTypeOption } from '@editor/type';
+import type { DatasourceTypeOption, SyncHookPlugin } from '@editor/type';
 import { getFormConfig, getFormValue } from '@editor/utils/data-source';
 
 import BaseService from './BaseService';
@@ -22,6 +23,27 @@ interface State {
 }
 
 type StateKey = keyof State;
+
+const canUsePluginMethods = {
+  async: [],
+  sync: [
+    'getFormConfig',
+    'setFormConfig',
+    'getFormValue',
+    'setFormValue',
+    'getFormEvent',
+    'setFormEvent',
+    'getFormMethod',
+    'setFormMethod',
+    'add',
+    'update',
+    'remove',
+    'createId',
+  ] as const,
+};
+
+type SyncMethodName = Writable<(typeof canUsePluginMethods)['sync']>;
+
 class DataSource extends BaseService {
   private state = reactive<State>({
     datasourceTypeList: [],
@@ -34,20 +56,7 @@ class DataSource extends BaseService {
   });
 
   constructor() {
-    super([
-      { name: 'getFormConfig', isAsync: false },
-      { name: 'setFormConfig', isAsync: false },
-      { name: 'getFormValue', isAsync: false },
-      { name: 'setFormValue', isAsync: false },
-      { name: 'getFormEvent', isAsync: false },
-      { name: 'setFormEvent', isAsync: false },
-      { name: 'getFormMethod', isAsync: false },
-      { name: 'setFormMethod', isAsync: false },
-      { name: 'add', isAsync: false },
-      { name: 'update', isAsync: false },
-      { name: 'remove', isAsync: false },
-      { name: 'createId', isAsync: false },
-    ]);
+    super(canUsePluginMethods.sync.map((methodName) => ({ name: methodName, isAsync: false })));
   }
 
   public set<K extends StateKey, T extends State[K]>(name: K, value: T) {
@@ -59,35 +68,35 @@ class DataSource extends BaseService {
   }
 
   public getFormConfig(type = 'base') {
-    return getFormConfig(type, this.get('configs'));
+    return getFormConfig(toLine(type), this.get('configs'));
   }
 
   public setFormConfig(type: string, config: FormConfig) {
-    this.get('configs')[type] = config;
+    this.get('configs')[toLine(type)] = config;
   }
 
   public getFormValue(type = 'base') {
-    return getFormValue(type, this.get('values')[type]);
+    return getFormValue(toLine(type), this.get('values')[type]);
   }
 
   public setFormValue(type: string, value: Partial<DataSourceSchema>) {
-    this.get('values')[type] = value;
+    this.get('values')[toLine(type)] = value;
   }
 
   public getFormEvent(type = 'base') {
-    return this.get('events')[type] || [];
+    return this.get('events')[toLine(type)] || [];
   }
 
   public setFormEvent(type: string, value: EventOption[] = []) {
-    this.get('events')[type] = value;
+    this.get('events')[toLine(type)] = value;
   }
 
   public getFormMethod(type = 'base') {
-    return this.get('methods')[type] || [];
+    return this.get('methods')[toLine(type)] || [];
   }
 
   public setFormMethod(type: string, value: EventOption[] = []) {
-    this.get('methods')[type] = value;
+    this.get('methods')[toLine(type)] = value;
   }
 
   public add(config: DataSourceSchema) {
@@ -123,6 +132,10 @@ class DataSource extends BaseService {
     this.emit('remove', id);
   }
 
+  public createId(): string {
+    return `ds_${guid()}`;
+  }
+
   public getDataSourceById(id: string) {
     return this.get('dataSources').find((ds) => ds.id === id);
   }
@@ -137,8 +150,8 @@ class DataSource extends BaseService {
     this.removeAllPlugins();
   }
 
-  private createId(): string {
-    return `ds_${guid()}`;
+  public usePlugin(options: SyncHookPlugin<SyncMethodName, DataSource>): void {
+    super.usePlugin(options);
   }
 }
 

package/src/services/editor.ts

@@ -18,6 +18,7 @@
 
 import { reactive, toRaw } from 'vue';
 import { cloneDeep, get, isObject, mergeWith, uniq } from 'lodash-es';
+import { Writable } from 'type-fest';
 
 import { DepTargetType } from '@tmagic/dep';
 import type { Id, MApp, MComponent, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
@@ -29,7 +30,15 @@ import propsService from '@editor/services//props';
 import depService from '@editor/services/dep';
 import historyService from '@editor/services/history';
 import storageService, { Protocol } from '@editor/services/storage';
-import type { AddMNode, EditorNodeInfo, PastePosition, StepValue, StoreState, StoreStateKey } from '@editor/type';
+import type {
+  AddMNode,
+  AsyncHookPlugin,
+  EditorNodeInfo,
+  PastePosition,
+  StepValue,
+  StoreState,
+  StoreStateKey,
+} from '@editor/type';
 import { LayerOffset, Layout } from '@editor/type';
 import {
   change2Fixed,
@@ -46,6 +55,36 @@ import {
 } from '@editor/utils/editor';
 import { beforePaste, getAddParent } from '@editor/utils/operator';
 
+const canUsePluginMethods = {
+  async: [
+    'getLayout',
+    'highlight',
+    'select',
+    'multiSelect',
+    'doAdd',
+    'add',
+    'doRemove',
+    'remove',
+    'doUpdate',
+    'update',
+    'sort',
+    'copy',
+    'paste',
+    'doPaste',
+    'doAlignCenter',
+    'alignCenter',
+    'moveLayer',
+    'moveToContainer',
+    'dragTo',
+    'undo',
+    'redo',
+    'move',
+  ] as const,
+  sync: [],
+};
+
+type AsyncMethodName = Writable<(typeof canUsePluginMethods)['async']>;
+
 class Editor extends BaseService {
   public state: StoreState = reactive({
     root: null,
@@ -65,29 +104,7 @@ class Editor extends BaseService {
 
   constructor() {
     super(
-      [
-        { name: 'getLayout', isAsync: true },
-        { name: 'select', isAsync: true },
-        { name: 'doAdd', isAsync: true },
-        { name: 'add', isAsync: true },
-        { name: 'doRemove', isAsync: true },
-        { name: 'remove', isAsync: true },
-        { name: 'doUpdate', isAsync: true },
-        { name: 'update', isAsync: true },
-        { name: 'sort', isAsync: true },
-        { name: 'copy', isAsync: true },
-        { name: 'paste', isAsync: true },
-        { name: 'doPaste', isAsync: true },
-        { name: 'doAlignCenter', isAsync: true },
-        { name: 'alignCenter', isAsync: true },
-        { name: 'moveLayer', isAsync: true },
-        { name: 'moveToContainer', isAsync: true },
-        { name: 'move', isAsync: true },
-        { name: 'undo', isAsync: true },
-        { name: 'redo', isAsync: true },
-        { name: 'highlight', isAsync: true },
-        { name: 'dragTo', isAsync: true },
-      ],
+      canUsePluginMethods.async.map((methodName) => ({ name: methodName, isAsync: true })),
       // 需要注意循环依赖问题，如果函数间有相互调用的话，不能设置为串行调用
       ['select', 'update', 'moveLayer'],
     );
@@ -696,7 +713,7 @@ class Editor extends BaseService {
 
   public async doPaste(config: MNode[], position: PastePosition = {}): Promise<MNode[]> {
     propsService.clearRelateId();
-    const pasteConfigs = await beforePaste(position, cloneDeep(config));
+    const pasteConfigs = beforePaste(position, cloneDeep(config));
     return pasteConfigs;
   }
 
@@ -985,6 +1002,10 @@ class Editor extends BaseService {
     this.get('modifiedNodeIds').clear();
   }
 
+  public usePlugin(options: AsyncHookPlugin<AsyncMethodName, Editor>): void {
+    super.usePlugin(options);
+  }
+
   private addModifiedNodeId(id: Id) {
     if (!this.isHistoryStateChange) {
       this.get('modifiedNodeIds').set(id, id);

package/src/services/events.ts

@@ -55,11 +55,11 @@ class Events extends BaseService {
   }
 
   public setEvent(type: string, events: EventOption[]) {
-    eventMap[type] = [...DEFAULT_EVENTS, ...events];
+    eventMap[toLine(type)] = [...DEFAULT_EVENTS, ...events];
   }
 
   public getEvent(type: string): EventOption[] {
-    return cloneDeep(eventMap[type] || DEFAULT_EVENTS);
+    return cloneDeep(eventMap[toLine(type)] || DEFAULT_EVENTS);
   }
 
   public setMethods(methods: Record<string, EventOption[]>) {
@@ -69,11 +69,11 @@ class Events extends BaseService {
   }
 
   public setMethod(type: string, method: EventOption[]) {
-    methodMap[type] = [...DEFAULT_METHODS, ...method];
+    methodMap[toLine(type)] = [...DEFAULT_METHODS, ...method];
   }
 
   public getMethod(type: string) {
-    return cloneDeep(methodMap[type] || DEFAULT_METHODS);
+    return cloneDeep(methodMap[toLine(type)] || DEFAULT_METHODS);
   }
 
   public resetState() {