@tmagic/editor 1.3.16 → 1.4.0-beta.2

package/src/layouts/Framework.vue

@@ -24,6 +24,7 @@
       :min-left="65"
       :min-right="20"
       :min-center="100"
+      :width="frameworkRect?.width || 0"
       @change="columnWidthChange"
     >
       <template #left>
@@ -57,7 +58,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref, watch } from 'vue';
+import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
 import { TMagicScrollbar } from '@tmagic/design';
 
@@ -101,40 +102,15 @@ const RIGHT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorRightColumnWidthData';
 const getLeftColumnWidthCacheData = () =>
   Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH;
 
-const leftColumnWidthCacheData = getLeftColumnWidthCacheData();
-const RightColumnWidthCacheData =
-  Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH;
-
 const columnWidth = ref<Partial<GetColumnWidth>>({
-  left: leftColumnWidthCacheData,
+  left: getLeftColumnWidthCacheData(),
   center: 0,
-  right: RightColumnWidthCacheData,
+  right: Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH,
 });
 
-watch(
-  [pageLength, splitView],
-  () => {
-    splitView.value?.updateWidth();
-  },
-  {
-    immediate: true,
-  },
-);
-
-watch(
-  () => columnWidth.value.right,
-  (right) => {
-    if (typeof right === 'undefined') return;
-    globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${right}`);
-  },
-);
-
-watch(
-  () => columnWidth.value.left,
-  (left) => {
-    globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${left}`);
-  },
-);
+watch(pageLength, () => {
+  splitView.value?.updateWidth();
+});
 
 watch(
   () => uiService?.get('hideSlideBar'),
@@ -144,12 +120,35 @@ watch(
 );
 
 const columnWidthChange = (columnW: GetColumnWidth) => {
-  columnWidth.value.left = columnW.left;
-  columnWidth.value.center = columnW.center;
-  columnWidth.value.right = columnW.right;
+  columnWidth.value = columnW;
+
+  globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${columnW.left}`);
+  globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${columnW.right}`);
   uiService?.set('columnWidth', columnW);
 };
 
+const frameworkRect = computed(() => uiService?.get('frameworkRect'));
+
+const resizerObserver = new ResizeObserver((entries) => {
+  const { contentRect } = entries[0];
+  uiService?.set('frameworkRect', {
+    width: contentRect.width,
+    height: contentRect.height,
+    left: contentRect.left,
+    top: contentRect.top,
+  });
+});
+
+onMounted(() => {
+  if (content.value) {
+    resizerObserver.observe(content.value);
+  }
+});
+
+onBeforeUnmount(() => {
+  resizerObserver.disconnect();
+});
+
 const saveCode = (value: string) => {
   try {
     const parseDSL = getConfig('parseDSL');

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/PropsPanel.vue

@@ -12,17 +12,42 @@
       @change="submit"
       @error="errorHandler"
     ></MForm>
+
+    <TMagicButton
+      class="m-editor-props-panel-src-icon"
+      circle
+      size="large"
+      title="源码"
+      :icon="DocumentIcon"
+      :type="showSrc ? 'primary' : ''"
+      @click="showSrc = !showSrc"
+    ></TMagicButton>
+
+    <CodeEditor
+      v-if="showSrc"
+      :height="`${editorContentHeight}px`"
+      :init-values="values"
+      :options="codeOptions"
+      :parse="true"
+      @save="saveCode"
+    ></CodeEditor>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, getCurrentInstance, inject, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue';
+import { Document as DocumentIcon } from '@element-plus/icons-vue';
 
+import { TMagicButton } from '@tmagic/design';
 import type { FormState, FormValue } from '@tmagic/form';
 import { MForm } from '@tmagic/form';
+import type { MNode } from '@tmagic/schema';
 
+import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
 import type { PropsPanelSlots, Services } from '@editor/type';
 
+import CodeEditor from './CodeEditor.vue';
+
 defineSlots<PropsPanelSlots>();
 
 defineOptions({
@@ -33,8 +58,12 @@ defineProps<{
   extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
 }>();
 
+const codeOptions = inject('codeOptions', {});
+
 const emit = defineEmits(['mounted', 'submit-error', 'form-error']);
 
+const showSrc = ref(false);
+
 const internalInstance = getCurrentInstance();
 const values = ref<FormValue>({});
 const configForm = ref<InstanceType<typeof MForm>>();
@@ -46,6 +75,8 @@ const nodes = computed(() => services?.editorService.get('nodes') || []);
 const propsPanelSize = computed(() => services?.uiService.get('propsPanelSize') || 'small');
 const stage = computed(() => services?.editorService.get('stage'));
 
+const { height: editorContentHeight } = useEditorContentHeight();
+
 const init = async () => {
   if (!node.value) {
     curFormConfig.value = [];
@@ -87,5 +118,9 @@ const errorHandler = (e: any) => {
   emit('form-error', e);
 };
 
+const saveCode = (values: MNode) => {
+  services?.editorService.update(values);
+};
+
 defineExpose({ configForm, submit });
 </script>

package/src/layouts/sidebar/Sidebar.vue

@@ -111,6 +111,8 @@
         :key="config.$key ?? index"
         v-if="floatBoxStates[config.$key]?.status"
         v-model:visible="floatBoxStates[config.$key].status"
+        :width="columnLeftWitch"
+        :height="600"
         :title="config.text"
         :position="{
           left: floatBoxStates[config.$key].left,
@@ -139,14 +141,15 @@ import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
 import FloatingBox from '@editor/components/FloatingBox.vue';
 import MIcon from '@editor/components/Icon.vue';
 import { useFloatBox } from '@editor/hooks/use-float-box';
-import type {
-  MenuButton,
-  MenuComponent,
-  Services,
-  SideBarData,
-  SidebarSlots,
-  SideComponent,
-  SideItem,
+import {
+  ColumnLayout,
+  type MenuButton,
+  type MenuComponent,
+  type Services,
+  type SideBarData,
+  type SidebarSlots,
+  type SideComponent,
+  type SideItem,
 } from '@editor/type';
 
 import CodeBlockListPanel from './code-block/CodeBlockListPanel.vue';
@@ -173,6 +176,8 @@ const props = withDefaults(
 
 const services = inject<Services>('services');
 
+const columnLeftWitch = computed(() => services?.uiService.get('columnWidth')[ColumnLayout.LEFT] || 0);
+
 const activeTabName = ref(props.data?.status);
 
 const getItemConfig = (data: SideItem): SideComponent => {
@@ -204,6 +209,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/layouts/workspace/viewer/NodeListMenu.vue

@@ -2,6 +2,7 @@
   <TMagicTooltip v-if="page && buttonVisible" content="点击查看当前位置下的组件">
     <div ref="button" class="m-editor-stage-float-button" @click="visible = true">可选组件</div>
   </TMagicTooltip>
+
   <FloatingBox
     v-if="page && nodeStatusMap && buttonVisible"
     ref="box"

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() {