@tmagic/editor 1.5.20 → 1.5.22

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.20",
+  "version": "1.5.22",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -50,24 +50,24 @@
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "deep-object-diff": "^1.1.9",
-    "emmet-monaco-es": "^5.3.0",
+    "emmet-monaco-es": "^5.5.0",
     "events": "^3.3.0",
-    "gesto": "^1.19.1",
+    "gesto": "^1.19.4",
     "keycon": "^1.4.0",
     "lodash-es": "^4.17.21",
     "moveable": "^0.53.0",
-    "serialize-javascript": "^6.0.0",
-    "sortablejs": "^1.15.2",
-    "@tmagic/design": "1.5.20",
-    "@tmagic/stage": "1.5.20",
-    "@tmagic/form": "1.5.20",
-    "@tmagic/table": "1.5.20",
-    "@tmagic/utils": "1.5.20"
+    "serialize-javascript": "^6.0.2",
+    "sortablejs": "^1.15.6",
+    "@tmagic/design": "1.5.22",
+    "@tmagic/form": "1.5.22",
+    "@tmagic/table": "1.5.22",
+    "@tmagic/utils": "1.5.22",
+    "@tmagic/stage": "1.5.22"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
     "@types/lodash-es": "^4.17.4",
-    "@types/serialize-javascript": "^5.0.1",
+    "@types/serialize-javascript": "^5.0.4",
     "@types/sortablejs": "^1.15.8",
     "@vue/test-utils": "^2.4.6",
     "type-fest": "^4.10.3"
@@ -76,7 +76,7 @@
     "monaco-editor": "^0.48.0",
     "typescript": "*",
     "vue": ">=3.5.0",
-    "@tmagic/core": "1.5.20"
+    "@tmagic/core": "1.5.22"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Editor.vue

@@ -128,7 +128,7 @@
 <script lang="ts" setup>
 import { EventEmitter } from 'events';
 
-import { provide } from 'vue';
+import { provide, watch } from 'vue';
 
 import type { MApp } from '@tmagic/core';
 
@@ -209,6 +209,22 @@ const stageOptions: StageOptions = {
 
 stageOverlayService.set('stageOptions', stageOptions);
 
+watch(
+  () => props.runtimeUrl,
+  (url) => {
+    if (!url) {
+      return;
+    }
+
+    const stage = editorService.get('stage');
+    if (!stage) {
+      return;
+    }
+
+    stage.reloadIframe(url);
+  },
+);
+
 provide('services', services);
 
 provide('codeOptions', props.codeOptions);

package/src/components/CodeBlockEditor.vue

@@ -32,20 +32,20 @@
   </FloatingBox>
 
   <Teleport to="body">
-    <TMagicDialog title="查看修改" v-model="difVisible" fullscreen>
+    <TMagicDialog title="查看修改" v-model="difVisible" fullscreen destroy-on-close>
       <div style="display: flex; margin-bottom: 10px">
         <div style="flex: 1"><TMagicTag size="small" type="info">修改前</TMagicTag></div>
         <div style="flex: 1"><TMagicTag size="small" type="success">修改后</TMagicTag></div>
       </div>
 
       <CodeEditor
-        v-if="difVisible"
         ref="magicVsEditor"
         type="diff"
         language="json"
+        :disabled-full-screen="true"
         :initValues="content.content"
         :modifiedValues="formBox?.form?.values.content"
-        :style="`height: ${windowRect.height - 150}px`"
+        :height="`${windowRect.height - 150}px`"
       ></CodeEditor>
 
       <template #footer>

package/src/editorProps.ts

@@ -81,6 +81,10 @@ export interface EditorProps {
   disabledStageOverlay?: boolean;
   /** 禁用属性配置面板右下角显示源码的按钮 */
   disabledShowSrc?: boolean;
+  /** 禁用数据源 */
+  disabledDataSource?: boolean;
+  /** 禁用代码块 */
+  disabledCodeBlock?: boolean;
   /** 已选组件、代码编辑、数据源缩进配置 */
   treeIndent?: number;
   /** 已选组件、代码编辑、数据源子节点缩进增量配置 */
@@ -111,6 +115,8 @@ export const defaultEditorProps = {
   containerHighlightDuration: 800,
   containerHighlightType: ContainerHighlightType.DEFAULT,
   disabledShowSrc: false,
+  disabledDataSource: false,
+  disabledCodeBlock: false,
   componentGroupList: () => [],
   datasourceList: () => [],
   menu: () => ({ left: [], right: [] }),

package/src/fields/DataSourceFieldSelect/Index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="m-fields-data-source-field-select">
     <FieldSelect
-      v-if="showDataSourceFieldSelect || !config.fieldConfig"
+      v-if="!disabledDataSource && (showDataSourceFieldSelect || !config.fieldConfig)"
       :model-value="model[name]"
       :disabled="disabled"
       :size="size"
@@ -26,7 +26,11 @@
       @change="onChangeHandler"
     ></component>
 
-    <TMagicTooltip v-if="config.fieldConfig" :disabled="showDataSourceFieldSelect" content="选择数据源">
+    <TMagicTooltip
+      v-if="config.fieldConfig && !disabledDataSource"
+      :disabled="showDataSourceFieldSelect"
+      content="选择数据源"
+    >
       <TMagicButton
         style="margin-left: 5px"
         :type="showDataSourceFieldSelect ? 'primary' : 'default'"
@@ -83,10 +87,11 @@ watch(
   },
 );
 
-const { dataSourceService } = useServices();
+const { dataSourceService, propsService } = useServices();
 const mForm = inject<FormState | undefined>('mForm');
 
 const dataSources = computed(() => dataSourceService.get('dataSources') || []);
+const disabledDataSource = computed(() => propsService.getDisabledDataSource());
 
 const type = computed((): string => {
   let type = props.config.fieldConfig?.type;

package/src/fields/DataSourceInput.vue

@@ -1,6 +1,14 @@
 <template>
+  <TMagicInput
+    v-if="disabledDataSource"
+    v-model="state"
+    :disabled="disabled"
+    :size="size"
+    :clearable="true"
+    @change="changeHandler"
+  ></TMagicInput>
   <component
-    v-if="disabled || isFocused"
+    v-else-if="disabled || isFocused"
     :is="getDesignConfig('components')?.autocomplete.component || 'el-autocomplete'"
     class="tmagic-design-auto-complete"
     ref="autocomplete"
@@ -52,7 +60,7 @@ import { computed, nextTick, ref, useTemplateRef, watch } from 'vue';
 import { Coin } from '@element-plus/icons-vue';
 
 import type { DataSchema, DataSourceSchema } from '@tmagic/core';
-import { getDesignConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
+import { getDesignConfig, TMagicAutocomplete, TMagicInput, TMagicTag } from '@tmagic/design';
 import type { DataSourceInputConfig, FieldProps } from '@tmagic/form';
 import { getKeysArray, isNumber } from '@tmagic/utils';
 
@@ -72,7 +80,7 @@ const emit = defineEmits<{
   change: [value: string];
 }>();
 
-const { dataSourceService } = useServices();
+const { dataSourceService, propsService } = useServices();
 
 const autocompleteRef = useTemplateRef<InstanceType<typeof TMagicAutocomplete>>('autocomplete');
 const isFocused = ref(false);
@@ -81,6 +89,7 @@ const displayState = ref<{ value: string; type: 'var' | 'text' }[]>([]);
 
 const input = computed<HTMLInputElement>(() => autocompleteRef.value?.inputRef?.input);
 const dataSources = computed(() => dataSourceService.get('dataSources'));
+const disabledDataSource = computed(() => propsService.getDisabledDataSource());
 
 const setDisplayState = () => {
   displayState.value = getDisplayField(dataSources.value, state.value);

package/src/fields/EventSelect.vue

@@ -85,7 +85,7 @@ const emit = defineEmits<{
   change: [v: any, eventData?: ContainerChangeEventData];
 }>();
 
-const { editorService, dataSourceService, eventsService, codeBlockService } = useServices();
+const { editorService, dataSourceService, eventsService, codeBlockService, propsService } = useServices();
 
 // 事件名称下拉框表单配置
 const eventNameConfig = computed(() => {
@@ -173,24 +173,39 @@ const actionTypeConfig = computed(() => {
     text: '联动类型',
     type: 'select',
     defaultValue: ActionType.COMP,
-    options: () => [
-      {
-        text: '组件',
-        label: '组件',
-        value: ActionType.COMP,
-      },
-      {
-        text: '代码',
-        label: '代码',
-        disabled: !Object.keys(codeBlockService.getCodeDsl() || {}).length,
-        value: ActionType.CODE,
-      },
-      {
-        text: '数据源',
-        label: '数据源',
-        value: ActionType.DATA_SOURCE,
-      },
-    ],
+    options: () => {
+      const o: {
+        text: string;
+        label: string;
+        value: string;
+        disabled?: boolean;
+      }[] = [
+        {
+          text: '组件',
+          label: '组件',
+          value: ActionType.COMP,
+        },
+      ];
+
+      if (!propsService.getDisabledCodeBlock()) {
+        o.push({
+          text: '代码',
+          label: '代码',
+          disabled: !Object.keys(codeBlockService.getCodeDsl() || {}).length,
+          value: ActionType.CODE,
+        });
+      }
+
+      if (!propsService.getDisabledDataSource()) {
+        o.push({
+          text: '数据源',
+          label: '数据源',
+          value: ActionType.DATA_SOURCE,
+        });
+      }
+
+      return o;
+    },
   };
   return { ...defaultActionTypeConfig, ...props.config.actionTypeConfig };
 });
@@ -232,7 +247,7 @@ const compActionConfig = computed(() => {
 
       let methods: EventOption[] | CascaderOption[] = [];
 
-      methods = eventsService.getMethod(node.type);
+      methods = eventsService.getMethod(node.type, model.to);
 
       if (node.type === 'page-fragment-container' && node.pageFragmentId) {
         const pageFragment = editorService.get('root')?.items?.find((page) => page.id === node.pageFragmentId);
@@ -240,7 +255,7 @@ const compActionConfig = computed(() => {
           methods = [];
           pageFragment.items.forEach((node: MComponent | MContainer) => {
             traverseNode<MComponent | MContainer>(node, (node) => {
-              const nodeMethods = (node.type && eventsService.getMethod(node.type)) || [];
+              const nodeMethods = (node.type && eventsService.getMethod(node.type, node.id)) || [];
 
               if (nodeMethods.length) {
                 methods.push({
@@ -317,7 +332,7 @@ const tableConfig = computed(() => ({
         const node = editorService.getNodeById(model.to);
         if (!node?.type) return [];
 
-        return eventsService.getMethod(node.type).map((option: any) => ({
+        return eventsService.getMethod(node.type, model.to).map((option: any) => ({
           text: option.label,
           value: option.value,
         }));

package/src/fields/StyleSetter/pro/Position.vue

@@ -12,6 +12,14 @@ const emit = defineEmits<{
   change: [v: string | StyleSchema, eventData: ContainerChangeEventData];
 }>();
 
+const positionText: Record<string, string> = {
+  static: '不定位',
+  relative: '相对定位',
+  absolute: '绝对定位',
+  fixed: '固定定位',
+  sticky: '粘性定位',
+};
+
 const config = {
   items: [
     {
@@ -21,9 +29,9 @@ const config = {
       type: 'data-source-field-select',
       fieldConfig: {
         type: 'select',
-        options: ['static', 'relative', 'absolute', 'fixed', 'sticky'].map((item) => ({
+        options: Object.keys(positionText).map((item) => ({
           value: item,
-          text: item,
+          text: `${item}(${positionText[item]})`,
         })),
       },
     },

package/src/index.ts

@@ -112,6 +112,9 @@ export { default as StyleSetter } from './fields/StyleSetter/Index.vue';
 const defaultInstallOpt: EditorInstallOptions = {
   // eslint-disable-next-line no-eval
   parseDSL: (dsl: string) => eval(dsl),
+  customCreateMonacoEditor: (monaco, codeEditorEl, options) => monaco.editor.create(codeEditorEl, options),
+  customCreateMonacoDiffEditor: (monaco, codeEditorEl, options) =>
+    monaco.editor.createDiffEditor(codeEditorEl, options),
 };
 
 export default {

package/src/initService.ts

@@ -197,6 +197,22 @@ export const initServiceState = (
     },
   );
 
+  watch(
+    () => props.disabledCodeBlock,
+    (disabledCodeBlock) => propsService.setDisabledCodeBlock(disabledCodeBlock ?? false),
+    {
+      immediate: true,
+    },
+  );
+
+  watch(
+    () => props.disabledDataSource,
+    (disabledDataSource) => propsService.setDisabledDataSource(disabledDataSource ?? false),
+    {
+      immediate: true,
+    },
+  );
+
   onBeforeUnmount(() => {
     editorService.resetState();
     historyService.resetState();

package/src/layouts/CodeEditor.vue

@@ -5,7 +5,12 @@
         :class="`magic-code-editor-wrapper${fullScreen ? ' full-screen' : ''}`"
         :style="!fullScreen && height ? `height: ${height}` : '100%'"
       >
-        <TMagicButton class="magic-code-editor-full-screen-icon" circle size="small" @click="fullScreenHandler"
+        <TMagicButton
+          v-if="!disabledFullScreen"
+          class="magic-code-editor-full-screen-icon"
+          circle
+          size="small"
+          @click="fullScreenHandler"
           ><MIcon :icon="FullScreen"></MIcon
         ></TMagicButton>
         <div ref="codeEditor" class="magic-code-editor-content"></div>
@@ -15,7 +20,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
+import { nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
 import { FullScreen } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
 import serialize from 'serialize-javascript';
@@ -36,12 +41,11 @@ const props = withDefaults(
     modifiedValues?: any;
     type?: 'diff';
     language?: string;
-    options?: {
-      [key: string]: any;
-    };
+    options?: monaco.editor.IStandaloneEditorConstructionOptions;
     height?: string;
     autoSave?: boolean;
     parse?: boolean;
+    disabledFullScreen?: boolean;
   }>(),
   {
     initValues: '',
@@ -51,6 +55,7 @@ const props = withDefaults(
       tabSize: 2,
     }),
     parse: false,
+    disabledFullScreen: false,
   },
 );
 
@@ -124,6 +129,10 @@ const getEditorValue = () =>
 const init = async () => {
   if (!codeEditorEl.value) return;
 
+  if (codeEditorEl.value.clientHeight === 0) {
+    await nextTick();
+  }
+
   const options = {
     value: values.value,
     language: props.language,
@@ -132,15 +141,13 @@ const init = async () => {
   };
 
   if (props.type === 'diff') {
-    vsDiffEditor = monaco.editor.createDiffEditor(codeEditorEl.value, options);
+    vsDiffEditor = getEditorConfig('customCreateMonacoDiffEditor')(monaco, codeEditorEl.value, options);
   } else {
-    vsEditor = monaco.editor.create(codeEditorEl.value, options);
+    vsEditor = getEditorConfig('customCreateMonacoEditor')(monaco, codeEditorEl.value, options);
   }
 
   setEditorValue(props.initValues, props.modifiedValues);
 
-  loading.value = false;
-
   emit('initd', vsEditor);
 
   codeEditorEl.value.addEventListener('keydown', (e) => {
@@ -179,14 +186,33 @@ watch(
   },
 );
 
+watch(
+  () => props.options,
+  (v) => {
+    vsEditor?.updateOptions(v);
+    vsDiffEditor?.updateOptions(v);
+  },
+  {
+    deep: true,
+  },
+);
+
 onMounted(async () => {
   loading.value = true;
 
-  init();
+  await init();
+
+  loading.value = false;
 });
 
 onBeforeUnmount(() => {
   resizeObserver.disconnect();
+
+  vsEditor?.dispose();
+  vsDiffEditor?.dispose();
+
+  vsEditor = null;
+  vsDiffEditor = null;
 });
 
 const fullScreen = ref(false);

package/src/layouts/sidebar/Sidebar.vue

@@ -201,7 +201,7 @@ const props = withDefaults(
   },
 );
 
-const { depService, uiService } = useServices();
+const { depService, uiService, propsService } = useServices();
 
 const collecting = computed(() => depService.get('collecting'));
 const taskLength = computed(() => depService.get('taskLength'));
@@ -283,7 +283,19 @@ const getItemConfig = (data: SideItem): SideComponent => {
   return typeof data === 'string' ? map[data] : data;
 };
 
-const sideBarItems = computed(() => props.data.items.map((item) => getItemConfig(item)));
+const sideBarItems = computed(() =>
+  props.data.items
+    .map((item) => getItemConfig(item))
+    .filter((item) => {
+      if (item.$key === SideItemKey.DATA_SOURCE) {
+        return !propsService.getDisabledDataSource();
+      }
+      if (item.$key === SideItemKey.CODE_BLOCK) {
+        return !propsService.getDisabledCodeBlock();
+      }
+      return true;
+    }),
+);
 
 watch(
   sideBarItems,

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

@@ -164,9 +164,23 @@ watch(page, (page) => {
     }, 3000);
 
     runtime.updatePageId?.(page.id);
-    nextTick(() => {
-      stage?.select(page.id);
-    });
+
+    const unWatch = watch(
+      stageLoading,
+      () => {
+        if (stageLoading.value) {
+          return;
+        }
+
+        nextTick(() => {
+          stage?.select(page.id);
+          unWatch();
+        });
+      },
+      {
+        immediate: true,
+      },
+    );
   }
 });
 

package/src/services/events.ts

@@ -20,7 +20,7 @@ import { reactive } from 'vue';
 import { cloneDeep } from 'lodash-es';
 import type { Writable } from 'type-fest';
 
-import { type EventOption } from '@tmagic/core';
+import { type EventOption, type Id } from '@tmagic/core';
 import { toLine } from '@tmagic/utils';
 
 import type { AsyncHookPlugin, SyncHookPlugin } from '@editor/type';
@@ -70,7 +70,7 @@ class Events extends BaseService {
     methodMap[toLine(type)] = [...method];
   }
 
-  public getMethod(type: string) {
+  public getMethod(type: string, _targetId: Id) {
     return cloneDeep(methodMap[toLine(type)]) || [];
   }
 

package/src/services/props.ts

@@ -57,6 +57,10 @@ class Props extends BaseService {
     propsConfigMap: {},
     propsValueMap: {},
     relateIdMap: {},
+    /** 禁用数据源 */
+    disabledDataSource: false,
+    /** 禁用代码块 */
+    disabledCodeBlock: false,
   });
 
   constructor() {
@@ -66,6 +70,22 @@ class Props extends BaseService {
     ]);
   }
 
+  public setDisabledDataSource(disabled: boolean) {
+    this.state.disabledDataSource = disabled;
+  }
+
+  public setDisabledCodeBlock(disabled: boolean) {
+    this.state.disabledCodeBlock = disabled;
+  }
+
+  public getDisabledDataSource(): boolean {
+    return this.state.disabledDataSource;
+  }
+
+  public getDisabledCodeBlock(): boolean {
+    return this.state.disabledCodeBlock;
+  }
+
   public setPropsConfigs(configs: Record<string, FormConfig | PropsFormConfigFunction>) {
     Object.keys(configs).forEach((type: string) => {
       this.setPropsConfig(toLine(type), configs[type]);
@@ -74,7 +94,11 @@ class Props extends BaseService {
   }
 
   public async fillConfig(config: FormConfig, labelWidth?: string) {
-    return fillConfig(config, typeof labelWidth !== 'function' ? labelWidth : '80px');
+    return fillConfig(config, {
+      labelWidth: typeof labelWidth !== 'function' ? labelWidth : '80px',
+      disabledDataSource: this.getDisabledDataSource(),
+      disabledCodeBlock: this.getDisabledCodeBlock(),
+    });
   }
 
   public async setPropsConfig(type: string, config: FormConfig | PropsFormConfigFunction) {

package/src/theme/code-editor.scss

@@ -31,8 +31,13 @@
 
   .magic-code-editor-full-screen-icon {
     position: absolute;
-    top: 5px;
-    right: 0;
+    top: 20px;
+    right: 10px;
     z-index: 11;
+    opacity: 0.3;
+
+    &:hover {
+      opacity: 1;
+    }
   }
 }

package/src/theme/props-panel.scss

@@ -84,6 +84,11 @@
     right: 15px;
     bottom: 15px;
     z-index: 30;
+    opacity: 0.5;
+
+    &:hover {
+      opacity: 1;
+    }
   }
 
   .m-editor-props-panel-style-icon {
@@ -91,6 +96,11 @@
     right: 15px;
     bottom: 60px;
     z-index: 30;
+    opacity: 0.5;
+
+    &:hover {
+      opacity: 1;
+    }
   }
 
   .m-editor-props-panel-src-code.magic-code-editor {

package/src/type.ts

@@ -33,6 +33,8 @@ import type {
   UpdateDragEl,
 } from '@tmagic/stage';
 
+import Monaco from '@editor/utils/monaco-editor';
+
 import type { CodeBlockService } from './services/codeBlock';
 import type { ComponentListService } from './services/componentList';
 import type { DataSourceService } from './services/dataSource';
@@ -119,6 +121,16 @@ export type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig
 
 export interface EditorInstallOptions {
   parseDSL: <T = any>(dsl: string) => T;
+  customCreateMonacoEditor: (
+    monaco: typeof Monaco,
+    codeEditorEl: HTMLElement,
+    options: Monaco.editor.IStandaloneEditorConstructionOptions,
+  ) => Monaco.editor.IStandaloneCodeEditor;
+  customCreateMonacoDiffEditor: (
+    monaco: typeof Monaco,
+    codeEditorEl: HTMLElement,
+    options: Monaco.editor.IStandaloneEditorConstructionOptions,
+  ) => Monaco.editor.IStandaloneDiffEditor;
   [key: string]: any;
 }
 
@@ -176,6 +188,10 @@ export interface PropsState {
   propsConfigMap: Record<string, FormConfig>;
   propsValueMap: Record<string, Partial<MNode>>;
   relateIdMap: Record<Id, Id>;
+  /** 禁用数据源 */
+  disabledDataSource: boolean;
+  /** 禁用代码块 */
+  disabledCodeBlock: boolean;
 }
 
 export interface StageOverlayState {