@tmagic/editor 1.4.2 → 1.4.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.2",
+  "version": "1.4.4",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -42,14 +42,14 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.3.1",
-    "@tmagic/core": "1.4.2",
-    "@tmagic/dep": "1.4.2",
-    "@tmagic/design": "1.4.2",
-    "@tmagic/form": "1.4.2",
-    "@tmagic/schema": "1.4.2",
-    "@tmagic/stage": "1.4.2",
-    "@tmagic/table": "1.4.2",
-    "@tmagic/utils": "1.4.2",
+    "@tmagic/core": "1.4.4",
+    "@tmagic/dep": "1.4.4",
+    "@tmagic/design": "1.4.4",
+    "@tmagic/form": "1.4.4",
+    "@tmagic/schema": "1.4.4",
+    "@tmagic/stage": "1.4.4",
+    "@tmagic/table": "1.4.4",
+    "@tmagic/utils": "1.4.4",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "emmet-monaco-es": "^5.3.0",
@@ -63,8 +63,8 @@
     "vue": "^3.4.21"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.4.2",
-    "@tmagic/form": "1.4.2",
+    "@tmagic/design": "1.4.4",
+    "@tmagic/form": "1.4.4",
     "monaco-editor": "^0.47.0",
     "vue": "^3.4.21"
   },

package/src/Editor.vue

@@ -81,6 +81,7 @@
       <slot name="props-panel">
         <PropsPanel
           :extend-state="extendFormState"
+          :disabled-show-src="disabledShowSrc"
           @mounted="(instance: any) => $emit('props-panel-mounted', instance)"
           @form-error="(e: any) => $emit('props-form-error', e)"
           @submit-error="(e: any) => $emit('props-submit-error', e)"
@@ -109,6 +110,8 @@
 </template>
 
 <script lang="ts" setup>
+import { EventEmitter } from 'events';
+
 import { provide } from 'vue';
 
 import type { MApp } from '@tmagic/schema';
@@ -133,7 +136,7 @@ import uiService from './services/ui';
 import keybindingConfig from './utils/keybinding-config';
 import { defaultEditorProps, EditorProps } from './editorProps';
 import { initServiceEvents, initServiceState } from './initService';
-import type { FrameworkSlots, PropsPanelSlots, Services, SidebarSlots, WorkspaceSlots } from './type';
+import type { EventBus, FrameworkSlots, PropsPanelSlots, Services, SidebarSlots, WorkspaceSlots } from './type';
 
 defineSlots<
   FrameworkSlots &
@@ -202,5 +205,7 @@ provide('services', services);
 provide('codeOptions', props.codeOptions);
 provide('stageOptions', stageOptions);
 
+provide<EventBus>('eventBus', new EventEmitter());
+
 defineExpose(services);
 </script>

package/src/editorProps.ts

@@ -80,6 +80,8 @@ export interface EditorProps {
   disabledPageFragment?: boolean;
   /** 禁用双击在浮层中单独编辑选中组件 */
   disabledStageOverlay?: boolean;
+  /** 禁用属性配置面板右下角显示源码的按钮 */
+  disabledShowSrc?: boolean;
   /** 中间工作区域中画布渲染的内容 */
   render?: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
   /** 选中时会在画布上复制出一个大小相同的dom，实际拖拽的是这个dom，此方法用于干预这个dom的生成方式 */
@@ -101,6 +103,7 @@ export const defaultEditorProps = {
   containerHighlightClassName: CONTAINER_HIGHLIGHT_CLASS_NAME,
   containerHighlightDuration: 800,
   containerHighlightType: ContainerHighlightType.DEFAULT,
+  disabledShowSrc: false,
   componentGroupList: () => [],
   datasourceList: () => [],
   menu: () => ({ left: [], right: [] }),

package/src/fields/CodeSelectCol.vue

@@ -2,15 +2,23 @@
   <div class="m-fields-code-select-col">
     <div class="code-select-container">
       <!-- 代码块下拉框 -->
-      <m-form-container
+      <MContainer
         class="select"
         :config="selectConfig"
         :model="model"
         :size="size"
         @change="onParamsChangeHandler"
-      ></m-form-container>
+      ></MContainer>
+
       <!-- 查看/编辑按钮 -->
-      <Icon v-if="model[name]" class="icon" :icon="!notEditable ? Edit : View" @click="editCode(model[name])"></Icon>
+      <TMagicButton
+        v-if="model[name] && hasCodeBlockSidePanel"
+        class="m-fields-select-action-button"
+        :size="size"
+        @click="editCode(model[name])"
+      >
+        <MIcon :icon="!notEditable ? Edit : View"></MIcon>
+      </TMagicButton>
     </div>
 
     <!-- 参数填写框 -->
@@ -23,14 +31,6 @@
       :params-config="paramsConfig"
       @change="onParamsChangeHandler"
     ></CodeParams>
-
-    <CodeBlockEditor
-      ref="codeBlockEditor"
-      v-if="codeConfig"
-      :disabled="notEditable"
-      :content="codeConfig"
-      @submit="submitCodeBlockHandler"
-    ></CodeBlockEditor>
   </div>
 </template>
 
@@ -39,14 +39,14 @@ import { computed, inject, ref, watch } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 import { isEmpty, map } from 'lodash-es';
 
-import { createValues, type FieldProps, filterFunction, type FormState } from '@tmagic/form';
+import { TMagicButton } from '@tmagic/design';
+import { createValues, type FieldProps, filterFunction, type FormState, MContainer } from '@tmagic/form';
 import type { Id } from '@tmagic/schema';
 
-import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import CodeParams from '@editor/components/CodeParams.vue';
-import Icon from '@editor/components/Icon.vue';
-import { useCodeBlockEdit } from '@editor/hooks/use-code-block-edit';
-import type { CodeParamStatement, CodeSelectColConfig, Services } from '@editor/type';
+import MIcon from '@editor/components/Icon.vue';
+import type { CodeParamStatement, CodeSelectColConfig, EventBus, Services } from '@editor/type';
+import { SideItemKey } from '@editor/type';
 
 defineOptions({
   name: 'MFieldsCodeSelectCol',
@@ -54,13 +54,19 @@ defineOptions({
 
 const mForm = inject<FormState | undefined>('mForm');
 const services = inject<Services>('services');
+const eventBus = inject<EventBus>('eventBus');
 const emit = defineEmits(['change']);
 
-const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
 const props = withDefaults(defineProps<FieldProps<CodeSelectColConfig>>(), {
   disabled: false,
 });
 
+const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
+
+const hasCodeBlockSidePanel = computed(() =>
+  (services?.uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.CODE_BLOCK),
+);
+
 /**
  * 根据代码块id获取代码块参数配置
  * @param codeId 代码块ID
@@ -127,5 +133,7 @@ const onParamsChangeHandler = (value: any) => {
   emit('change', props.model);
 };
 
-const { codeBlockEditor, codeConfig, editCode, submitCodeBlockHandler } = useCodeBlockEdit(services?.codeBlockService);
+const editCode = (id: string) => {
+  eventBus?.emit('edit-code', id);
+};
 </script>

package/src/fields/DataSourceFieldSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="width: 100%; display: flex; align-items: center">
+  <div class="m-fields-data-source-field-select">
     <component
       style="width: 100%"
       :is="tagName"
@@ -14,60 +14,58 @@
       :prop="`${prop}${prop ? '.' : ''}${name}`"
       @change="onChangeHandler"
     ></component>
+
     <TMagicButton
-      v-if="(showDataSourceFieldSelect || !config.fieldConfig) && selectedDataSourceId"
-      style="margin-left: 5px"
-      link
+      v-if="(showDataSourceFieldSelect || !config.fieldConfig) && selectedDataSourceId && hasDataSourceSidePanel"
+      class="m-fields-select-action-button"
       :size="size"
       @click="editHandler(selectedDataSourceId)"
-      ><MIcon :icon="Edit"></MIcon
+      ><MIcon :icon="!notEditable ? Edit : View"></MIcon
     ></TMagicButton>
+
     <TMagicButton
       v-if="config.fieldConfig"
       style="margin-left: 5px"
-      link
       :type="showDataSourceFieldSelect ? 'primary' : 'default'"
       :size="size"
       @click="showDataSourceFieldSelect = !showDataSourceFieldSelect"
       ><MIcon :icon="Coin"></MIcon
     ></TMagicButton>
-
-    <DataSourceConfigPanel
-      ref="editDialog"
-      :disabled="!editable"
-      :values="dataSourceValues"
-      :title="dialogTitle"
-      @submit="submitDataSourceHandler"
-    ></DataSourceConfigPanel>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, onMounted, ref, resolveComponent } from 'vue';
-import { Coin, Edit } from '@element-plus/icons-vue';
+import { computed, inject, ref, resolveComponent, watch } from 'vue';
+import { Coin, Edit, View } from '@element-plus/icons-vue';
 
 import { TMagicButton } from '@tmagic/design';
 import type { CascaderConfig, CascaderOption, FieldProps, FormState } from '@tmagic/form';
-import { MCascader } from '@tmagic/form';
+import { filterFunction, MCascader } from '@tmagic/form';
 import type { DataSchema, DataSourceFieldType } from '@tmagic/schema';
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
-import { useDataSourceEdit } from '@editor/hooks/use-data-source-edit';
-import DataSourceConfigPanel from '@editor/layouts/sidebar/data-source/DataSourceConfigPanel.vue';
-import type { DataSourceFieldSelectConfig, Services } from '@editor/type';
+import type { DataSourceFieldSelectConfig, EventBus, Services } from '@editor/type';
+import { SideItemKey } from '@editor/type';
 
 defineOptions({
   name: 'MFieldsDataSourceFieldSelect',
 });
 
 const services = inject<Services>('services');
+const eventBus = inject<EventBus>('eventBus');
 const emit = defineEmits(['change']);
 
 const props = withDefaults(defineProps<FieldProps<DataSourceFieldSelectConfig>>(), {
   disabled: false,
 });
 
+const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
+
+const hasDataSourceSidePanel = computed(() =>
+  (services?.uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE),
+);
+
 const selectedDataSourceId = computed(() => {
   const value = props.model[props.name];
   if (!Array.isArray(value) || !value.length) {
@@ -137,16 +135,23 @@ const cascaderConfig = computed<CascaderConfig>(() => {
 
 const showDataSourceFieldSelect = ref(false);
 
-onMounted(() => {
-  const value = props.model[props.name];
-  if (
-    Array.isArray(value) &&
-    typeof value[0] === 'string' &&
-    value[0].startsWith(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX)
-  ) {
-    showDataSourceFieldSelect.value = true;
-  }
-});
+watch(
+  () => props.model[props.name],
+  (value) => {
+    if (
+      Array.isArray(value) &&
+      typeof value[0] === 'string' &&
+      value[0].startsWith(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX)
+    ) {
+      showDataSourceFieldSelect.value = true;
+    } else {
+      showDataSourceFieldSelect.value = false;
+    }
+  },
+  {
+    immediate: true,
+  },
+);
 
 const mForm = inject<FormState | undefined>('mForm');
 
@@ -176,7 +181,7 @@ const onChangeHandler = (value: any) => {
   emit('change', value);
 };
 
-const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } = useDataSourceEdit(
-  services?.dataSourceService,
-);
+const editHandler = (id: string) => {
+  eventBus?.emit('edit-data-source', id);
+};
 </script>

package/src/fields/DataSourceMethodSelect.vue

@@ -1,18 +1,22 @@
 <template>
   <div class="m-fields-data-source-method-select">
     <div class="data-source-method-select-container">
-      <m-form-container
+      <MContainer
         class="select"
         :config="cascaderConfig"
         :model="model"
+        :size="size"
         @change="onChangeHandler"
-      ></m-form-container>
-      <Icon
-        v-if="model[name] && isCustomMethod"
-        class="icon"
-        :icon="!notEditable ? Edit : View"
+      ></MContainer>
+
+      <TMagicButton
+        v-if="model[name] && isCustomMethod && hasDataSourceSidePanel"
+        class="m-fields-select-action-button"
+        :size="size"
         @click="editCodeHandler"
-      ></Icon>
+      >
+        <MIcon :icon="!notEditable ? Edit : View"></MIcon>
+      </TMagicButton>
     </div>
 
     <CodeParams
@@ -24,14 +28,6 @@
       :params-config="paramsConfig"
       @change="onChangeHandler"
     ></CodeParams>
-
-    <CodeBlockEditor
-      ref="codeBlockEditor"
-      v-if="codeConfig"
-      :disabled="notEditable"
-      :content="codeConfig"
-      @submit="submitCodeBlockHandler"
-    ></CodeBlockEditor>
   </div>
 </template>
 
@@ -39,14 +35,14 @@
 import { computed, inject, ref } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 
-import { createValues, type FieldProps, filterFunction, type FormState } from '@tmagic/form';
-import type { CodeBlockContent, Id } from '@tmagic/schema';
+import { TMagicButton } from '@tmagic/design';
+import { createValues, type FieldProps, filterFunction, type FormState, MContainer } from '@tmagic/form';
+import type { Id } from '@tmagic/schema';
 
-import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import CodeParams from '@editor/components/CodeParams.vue';
-import Icon from '@editor/components/Icon.vue';
-import { useDataSourceMethod } from '@editor/hooks/use-data-source-method';
-import type { CodeParamStatement, DataSourceMethodSelectConfig, Services } from '@editor/type';
+import MIcon from '@editor/components/Icon.vue';
+import type { CodeParamStatement, DataSourceMethodSelectConfig, EventBus, Services } from '@editor/type';
+import { SideItemKey } from '@editor/type';
 
 defineOptions({
   name: 'MFieldsDataSourceMethodSelect',
@@ -54,6 +50,8 @@ defineOptions({
 
 const mForm = inject<FormState | undefined>('mForm');
 const services = inject<Services>('services');
+const eventBus = inject<EventBus>('eventBus');
+
 const emit = defineEmits(['change']);
 
 const dataSourceService = services?.dataSourceService;
@@ -62,6 +60,10 @@ const props = withDefaults(defineProps<FieldProps<DataSourceMethodSelectConfig>>
   disabled: false,
 });
 
+const hasDataSourceSidePanel = computed(() =>
+  (services?.uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE),
+);
+
 const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
 
 const dataSources = computed(() => dataSourceService?.get('dataSources'));
@@ -139,21 +141,13 @@ const onChangeHandler = (value: any) => {
   emit('change', props.model);
 };
 
-const { codeBlockEditor, codeConfig, editCode, submitCode } = useDataSourceMethod();
-
 const editCodeHandler = () => {
-  const [id, name] = props.model[props.name];
+  const [id] = props.model[props.name];
 
   const dataSource = dataSourceService?.getDataSourceById(id);
 
   if (!dataSource) return;
 
-  editCode(dataSource, name);
-
-  setParamsConfig([id, name]);
-};
-
-const submitCodeBlockHandler = (value: CodeBlockContent) => {
-  submitCode(value);
+  eventBus?.emit('edit-data-source', id);
 };
 </script>

package/src/fields/DataSourceSelect.vue

@@ -1,22 +1,36 @@
 <template>
-  <MSelect
-    :model="model"
-    :name="name"
-    :size="size"
-    :prop="prop"
-    :disabled="disabled"
-    :config="selectConfig"
-    :last-values="lastValues"
-    @change="changeHandler"
-  ></MSelect>
+  <div class="m-fields-data-source-select">
+    <MSelect
+      :model="model"
+      :name="name"
+      :size="size"
+      :prop="prop"
+      :disabled="disabled"
+      :config="selectConfig"
+      :last-values="lastValues"
+      @change="changeHandler"
+    ></MSelect>
+
+    <TMagicButton
+      v-if="model[name] && hasDataSourceSidePanel"
+      class="m-fields-select-action-button"
+      :size="size"
+      @click="editHandler"
+      ><MIcon :icon="!notEditable ? Edit : View"></MIcon
+    ></TMagicButton>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { computed, inject } from 'vue';
+import { Edit, View } from '@element-plus/icons-vue';
 
-import { type FieldProps, MSelect, type SelectConfig } from '@tmagic/form';
+import { TMagicButton } from '@tmagic/design';
+import { type FieldProps, filterFunction, type FormState, MSelect, type SelectConfig } from '@tmagic/form';
 
-import type { DataSourceSelect, Services } from '../type';
+import MIcon from '@editor/components/Icon.vue';
+import type { DataSourceSelect, EventBus, Services } from '@editor/type';
+import { SideItemKey } from '@editor/type';
 
 defineOptions({
   name: 'MFieldsDataSourceSelect',
@@ -28,10 +42,18 @@ const props = withDefaults(defineProps<FieldProps<DataSourceSelect>>(), {
   disabled: false,
 });
 
-const { dataSourceService } = inject<Services>('services') || {};
+const mForm = inject<FormState | undefined>('mForm');
+const { dataSourceService, uiService } = inject<Services>('services') || {};
+const eventBus = inject<EventBus>('eventBus');
 
 const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
 
+const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
+
+const hasDataSourceSidePanel = computed(() =>
+  (uiService?.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE),
+);
+
 const selectConfig = computed<SelectConfig>(() => {
   const { type, dataSourceType, value, ...config } = props.config;
 
@@ -59,4 +81,18 @@ const selectConfig = computed<SelectConfig>(() => {
 const changeHandler = (value: any) => {
   emit('change', value);
 };
+
+const editHandler = () => {
+  const value = props.model[props.name];
+
+  if (!value) return;
+
+  const id = typeof value === 'string' ? value : value.dataSourceId;
+
+  const dataSource = dataSourceService?.getDataSourceById(id);
+
+  if (!dataSource) return;
+
+  eventBus?.emit('edit-data-source', id);
+};
 </script>

package/src/fields/EventSelect.vue

@@ -15,7 +15,7 @@
       <TMagicButton class="create-button" type="primary" :size="size" :disabled="disabled" @click="addEvent()"
         >添加事件</TMagicButton
       >
-      <m-form-panel
+      <MPanel
         v-for="(cardItem, index) in model[name]"
         :key="index"
         :disabled="disabled"
@@ -26,14 +26,14 @@
         @change="onChangeHandler"
       >
         <template #header>
-          <m-form-container
+          <MContainer
             class="fullWidth"
             :config="eventNameConfig"
             :model="cardItem"
             :disabled="disabled"
             :size="size"
             @change="onChangeHandler"
-          ></m-form-container>
+          ></MContainer>
           <TMagicButton
             style="color: #f56c6c"
             link
@@ -43,7 +43,7 @@
             @click="removeEvent(index)"
           ></TMagicButton>
         </template>
-      </m-form-panel>
+      </MPanel>
     </div>
   </div>
 </template>
@@ -55,7 +55,8 @@ import { has } from 'lodash-es';
 
 import type { EventOption } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
-import type { FieldProps, FormState } from '@tmagic/form';
+import type { FieldProps, FormState, PanelConfig } from '@tmagic/form';
+import { MContainer, MPanel } from '@tmagic/form';
 import { ActionType } from '@tmagic/schema';
 
 import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig, Services } from '@editor/type';
@@ -227,7 +228,8 @@ const tableConfig = computed(() => ({
 }));
 
 // 组件动作组表单配置
-const actionsConfig = computed(() => ({
+const actionsConfig = computed<PanelConfig>(() => ({
+  type: 'panel',
   items: [
     {
       type: 'group-list',

package/src/hooks/use-editor-content-height.ts

@@ -1,4 +1,4 @@
-import { computed, inject, ref, watchEffect } from 'vue';
+import { computed, inject, ref, watch } from 'vue';
 
 import type { Services } from '@editor/type';
 
@@ -9,10 +9,16 @@ export const useEditorContentHeight = () => {
   const editorContentHeight = computed(() => frameworkHeight.value - navMenuHeight.value);
 
   const height = ref(0);
-  watchEffect(() => {
-    if (height.value > 0 && height.value === editorContentHeight.value) return;
-    height.value = editorContentHeight.value;
-  });
+  watch(
+    editorContentHeight,
+    () => {
+      if (height.value > 0 && height.value === editorContentHeight.value) return;
+      height.value = editorContentHeight.value;
+    },
+    {
+      immediate: true,
+    },
+  );
 
   return {
     height,

package/src/layouts/PropsPanel.vue

@@ -3,7 +3,7 @@
     <slot name="props-panel-header"></slot>
     <MForm
       ref="configForm"
-      :class="`m-editor-props-panel ${propsPanelSize}`"
+      :class="propsPanelSize"
       :popper-class="`m-editor-props-panel-popper ${propsPanelSize}`"
       :size="propsPanelSize"
       :init-values="values"
@@ -14,6 +14,7 @@
     ></MForm>
 
     <TMagicButton
+      v-if="!disabledShowSrc"
       class="m-editor-props-panel-src-icon"
       circle
       size="large"
@@ -57,6 +58,7 @@ defineOptions({
 });
 
 defineProps<{
+  disabledShowSrc?: boolean;
   extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
 }>();