@tmagic/editor 1.5.21 → 1.5.24

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

@@ -43,20 +43,9 @@
 </template>
 
 <script lang="ts" setup>
-import {
-  computed,
-  markRaw,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  toRaw,
-  useTemplateRef,
-  watch,
-  watchEffect,
-} from 'vue';
-import { cloneDeep } from 'lodash-es';
-
-import type { MApp, MContainer } from '@tmagic/core';
+import { computed, markRaw, nextTick, onBeforeUnmount, onMounted, useTemplateRef, watch, watchEffect } from 'vue';
+
+import type { MContainer } from '@tmagic/core';
 import StageCore, { getOffset, Runtime } from '@tmagic/stage';
 import { calcValueByFontsize, getIdFromEl } from '@tmagic/utils';
 
@@ -130,12 +119,6 @@ watchEffect(() => {
 
   stage.on('runtime-ready', (rt) => {
     runtime = rt;
-    // toRaw返回的值是一个引用而非快照，需要cloneDeep
-    root.value && runtime?.updateRootConfig?.(cloneDeep(toRaw(root.value)));
-    page.value?.id && runtime?.updatePageId?.(page.value.id);
-    setTimeout(() => {
-      node.value && stage?.select(toRaw(node.value.id));
-    });
   });
 });
 
@@ -164,19 +147,25 @@ watch(page, (page) => {
     }, 3000);
 
     runtime.updatePageId?.(page.id);
-    nextTick(() => {
-      stage?.select(page.id);
-    });
-  }
-});
 
-const rootChangeHandler = (root: MApp) => {
-  if (runtime && root) {
-    runtime.updateRootConfig?.(cloneDeep(toRaw(root)));
+    const unWatch = watch(
+      stageLoading,
+      () => {
+        if (stageLoading.value) {
+          return;
+        }
+
+        nextTick(() => {
+          stage?.select(page.id);
+          unWatch();
+        });
+      },
+      {
+        immediate: true,
+      },
+    );
   }
-};
-
-editorService.on('root-change', rootChangeHandler);
+});
 
 const resizeObserver = new ResizeObserver((entries) => {
   for (const { contentRect } of entries) {
@@ -196,10 +185,10 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   stage?.destroy();
+  stage = null;
   resizeObserver.disconnect();
   editorService.set('stage', null);
   keybindingService.unregisterEl('stage');
-  editorService.off('root-change', rootChangeHandler);
 });
 
 const parseDSL = getEditorConfig('parseDSL');

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

@@ -1,9 +1,19 @@
 <template>
-  <div v-if="stageOverlayVisible" class="m-editor-stage-overlay" @click="closeOverlayHandler">
-    <TMagicIcon class="m-editor-stage-overlay-close" :size="'20'" @click="closeOverlayHandler"
+  <div v-if="stageOverlayVisible" class="m-editor-stage-overlay">
+    <TMagicIcon class="m-editor-stage-overlay-close" :size="'30'" @click="closeOverlayHandler"
       ><CloseBold
     /></TMagicIcon>
-    <div ref="stageOverlay" class="m-editor-stage-overlay-container" :style="style" @click.stop></div>
+
+    <ScrollViewer
+      class="m-editor-stage"
+      :width="wrapWidth"
+      :height="wrapHeight"
+      :wrap-width="columnWidth.center"
+      :wrap-height="frameworkRect.height"
+      :zoom="zoom"
+    >
+      <div ref="stageOverlay" class="m-editor-stage-container" :style="style"></div>
+    </ScrollViewer>
   </div>
 </template>
 
@@ -13,10 +23,11 @@ import { CloseBold } from '@element-plus/icons-vue';
 
 import { TMagicIcon } from '@tmagic/design';
 
+import ScrollViewer from '@editor/components/ScrollViewer.vue';
 import { useServices } from '@editor/hooks/use-services';
 import type { StageOptions } from '@editor/type';
 
-const { stageOverlayService, editorService } = useServices();
+const { stageOverlayService, editorService, uiService } = useServices();
 
 const stageOptions = inject<StageOptions>('stageOptions');
 
@@ -26,10 +37,12 @@ const stageOverlayVisible = computed(() => stageOverlayService.get('stageOverlay
 const wrapWidth = computed(() => stageOverlayService.get('wrapWidth'));
 const wrapHeight = computed(() => stageOverlayService.get('wrapHeight'));
 const stage = computed(() => editorService.get('stage'));
+const zoom = computed(() => uiService.get('zoom'));
+const columnWidth = computed(() => uiService.get('columnWidth'));
+const frameworkRect = computed(() => uiService.get('frameworkRect'));
 
 const style = computed(() => ({
-  width: `${wrapWidth.value}px`,
-  height: `${wrapHeight.value}px`,
+  transform: `scale(${zoom.value})`,
 }));
 
 watch(stage, (stage) => {
@@ -43,6 +56,12 @@ watch(stage, (stage) => {
   }
 });
 
+watch(zoom, (zoom) => {
+  const stage = stageOverlayService.get('stage');
+  if (!stage || !zoom) return;
+  stage.setZoom(zoom);
+});
+
 watch(stageOverlayEl, (stageOverlay) => {
   const subStage = stageOverlayService.createStage(stageOptions);
   stageOverlayService.set('stage', subStage);

package/src/services/BaseService.ts

@@ -199,24 +199,33 @@ export default class extends EventEmitter {
    * @deprecated 请使用usePlugin代替
    */
   public use(options: Record<string, Function>) {
-    Object.entries(options).forEach(([methodName, method]: [string, Function]) => {
+    for (const [methodName, method] of Object.entries(options)) {
       if (typeof method === 'function') this.middleware[methodName].push(method);
-    });
+    }
   }
 
   public usePlugin(options: Record<string, Function>) {
-    Object.entries(options).forEach(([methodName, method]: [string, Function]) => {
+    for (const [methodName, method] of Object.entries(options)) {
       if (typeof method === 'function') this.pluginOptionsList[methodName].push(method);
-    });
+    }
+  }
+
+  public removePlugin(options: Record<string, Function>) {
+    for (const [methodName, method] of Object.entries(options)) {
+      if (Array.isArray(this.pluginOptionsList[methodName])) {
+        this.pluginOptionsList[methodName] = this.pluginOptionsList[methodName].filter((item) => item !== method);
+      }
+    }
   }
 
   public removeAllPlugins() {
-    Object.keys(this.pluginOptionsList).forEach((key) => {
+    for (const key of Object.keys(this.pluginOptionsList)) {
       this.pluginOptionsList[key] = [];
-    });
-    Object.keys(this.middleware).forEach((key) => {
+    }
+
+    for (const key of Object.keys(this.middleware)) {
       this.middleware[key] = [];
-    });
+    }
   }
 
   private async doTask() {

package/src/services/keybinding.ts

@@ -145,6 +145,18 @@ class Keybinding extends BaseService {
       for (const [type = '', eventType = 'keydown'] of when) {
         const cacheItem: KeyBindingCacheItem = { type, command, keybinding, eventType, bound: false };
 
+        if (
+          this.bindingList.find(
+            (item) =>
+              item.command === command &&
+              item.eventType === eventType &&
+              item.type === type &&
+              item.keybinding === keybinding,
+          )
+        ) {
+          continue;
+        }
+
         this.bindingList.push(cacheItem);
       }
     }

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/services/stageOverlay.ts

@@ -97,9 +97,9 @@ class StageOverlay extends BaseService {
   public createStage(stageOptions: StageOptions = {}) {
     return useStage({
       ...stageOptions,
-      zoom: 1,
       runtimeUrl: '',
       autoScrollIntoView: false,
+      disabledRule: true,
       render: async (stage: StageCore) => {
         this.copyDocumentElement();
 

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/theme/stage.scss

@@ -35,22 +35,15 @@
   width: 100%;
   height: 100%;
   background-color: #fff;
-  display: flex;
   z-index: 20;
-  overflow: auto;
-}
-
-.m-editor-stage-overlay-container {
-  position: relative;
-  flex-shrink: 0;
-  margin: auto;
-  box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
 }
 
 .m-editor-stage-overlay-close.tmagic-design-icon {
   position: fixed;
   right: 20px;
   top: 10px;
+  cursor: pointer;
+  z-index: 1;
 }
 
 .m-editor-stage-float-button {
@@ -66,8 +59,10 @@
   background-color: #ffffff;
   transition: background-color 0.2s;
   color: rgba(0, 0, 0, 0.88);
-  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
-    0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  box-shadow:
+    0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05);
 }
 
 .m-editor-node-list-menu {

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;
 }
 
@@ -152,6 +164,7 @@ export interface StageOptions {
   renderType?: RenderType;
   guidesOptions?: Partial<GuidesOptions>;
   disabledMultiSelect?: boolean;
+  disabledRule?: boolean;
   zoom?: number;
 }
 
@@ -176,6 +189,10 @@ export interface PropsState {
   propsConfigMap: Record<string, FormConfig>;
   propsValueMap: Record<string, Partial<MNode>>;
   relateIdMap: Record<Id, Id>;
+  /** 禁用数据源 */
+  disabledDataSource: boolean;
+  /** 禁用代码块 */
+  disabledCodeBlock: boolean;
 }
 
 export interface StageOverlayState {

package/src/utils/props.ts

@@ -17,9 +17,9 @@
  * limitations under the License.
  */
 
-import { NODE_CONDS_KEY } from '@tmagic/core';
+import { NODE_CONDS_KEY, NODE_DISABLE_CODE_BLOCK_KEY, NODE_DISABLE_DATA_SOURCE_KEY } from '@tmagic/core';
 import { tMagicMessage } from '@tmagic/design';
-import type { FormConfig, FormState, TabPaneConfig } from '@tmagic/form';
+import type { FormConfig, FormState, TabConfig, TabPaneConfig } from '@tmagic/form';
 
 export const arrayOptions = [
   { text: '包含', value: 'include' },
@@ -123,6 +123,20 @@ export const advancedTabConfig: TabPaneConfig = {
   title: '高级',
   lazy: true,
   items: [
+    {
+      name: NODE_DISABLE_CODE_BLOCK_KEY,
+      text: '禁用代码块',
+      type: 'switch',
+      defaultValue: false,
+      extra: '开启后，配置的代码块将不会被执行',
+    },
+    {
+      name: NODE_DISABLE_DATA_SOURCE_KEY,
+      text: '禁用数据源',
+      type: 'switch',
+      defaultValue: false,
+      extra: '开启后，组件内配置的数据源相关配置将不会被编译，显隐条件将失效',
+    },
     {
       name: 'created',
       text: 'created',
@@ -165,7 +179,14 @@ export const displayTabConfig: TabPaneConfig = {
  * @param config 组件属性配置
  * @returns Object
  */
-export const fillConfig = (config: FormConfig = [], labelWidth = '80px'): FormConfig => {
+export const fillConfig = (
+  config: FormConfig = [],
+  {
+    labelWidth = '80px',
+    disabledDataSource = false,
+    disabledCodeBlock = false,
+  }: { labelWidth?: string; disabledDataSource?: boolean; disabledCodeBlock?: boolean } = {},
+): FormConfig => {
   const propsConfig: FormConfig = [];
 
   // 组件类型，必须要有
@@ -208,20 +229,34 @@ export const fillConfig = (config: FormConfig = [], labelWidth = '80px'): FormCo
     });
   }
 
-  return [
-    {
-      type: 'tab',
-      labelWidth,
-      items: [
-        {
-          title: '属性',
-          items: [...propsConfig, ...config],
-        },
-        { ...styleTabConfig },
-        { ...eventTabConfig },
-        { ...advancedTabConfig },
-        { ...displayTabConfig },
-      ],
-    },
-  ];
+  const noCodeAdvancedTabItems = advancedTabConfig.items.filter((item) => item.type !== 'code-select');
+
+  if (noCodeAdvancedTabItems.length > 0 && disabledCodeBlock) {
+    advancedTabConfig.items = noCodeAdvancedTabItems;
+  }
+
+  const tabConfig: TabConfig = {
+    type: 'tab',
+    labelWidth,
+    items: [
+      {
+        title: '属性',
+        items: [...propsConfig, ...config],
+      },
+      { ...styleTabConfig },
+      { ...eventTabConfig },
+    ],
+  };
+
+  if (!disabledCodeBlock) {
+    tabConfig.items.push({ ...advancedTabConfig });
+  } else if (noCodeAdvancedTabItems.length > 0) {
+    tabConfig.items.push({ ...advancedTabConfig });
+  }
+
+  if (!disabledDataSource) {
+    tabConfig.items.push({ ...displayTabConfig });
+  }
+
+  return [tabConfig];
 };