@tmagic/editor 1.2.0-beta.9 → 1.2.1

package/src/{layouts → components}/Layout.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="el" class="m-editor-layout">
-    <template v-if="typeof props.left !== 'undefined'">
+    <template v-if="hasLeft">
       <div class="m-editor-layout-left" :class="leftClass" :style="`width: ${left}px`">
         <slot name="left"></slot>
       </div>
@@ -11,7 +11,7 @@
       <slot name="center"></slot>
     </div>
 
-    <template v-if="typeof props.right !== 'undefined'">
+    <template v-if="hasRight">
       <Resizer @change="changeRight"></Resizer>
       <div class="m-editor-layout-right" :class="rightClass" :style="`width: ${right}px`">
         <slot name="right"></slot>
@@ -20,10 +20,10 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
+<script lang="ts" setup name="MEditorLayout">
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 
-import Resizer from './Resizer.vue';
+import Resizer from '../layouts/Resizer.vue';
 
 const emit = defineEmits(['update:left', 'change', 'update:right']);
 
@@ -33,29 +33,64 @@ const props = withDefaults(
     right?: number;
     minLeft?: number;
     minRight?: number;
+    minCenter?: number;
     leftClass?: string;
     rightClass?: string;
     centerClass?: string;
   }>(),
   {
-    minLeft: 1,
+    minLeft: 46,
     minRight: 1,
+    minCenter: 5,
   },
 );
 
 const el = ref<HTMLElement>();
 
+const hasLeft = computed(() => typeof props.left !== 'undefined');
+const hasRight = computed(() => typeof props.right !== 'undefined');
+
+const getCenterWidth = (clientWidth: number, left: number, right: number) => {
+  let center = clientWidth - left - right;
+  if (center < props.minCenter) {
+    center = props.minCenter;
+    if (left < right) {
+      right = clientWidth - left - props.minCenter;
+    } else {
+      left = clientWidth - right - props.minCenter;
+    }
+  }
+  return {
+    center,
+    left,
+    right,
+  };
+};
+
 let clientWidth = 0;
 const resizerObserver = new ResizeObserver((entries) => {
   for (const { contentRect } of entries) {
     clientWidth = contentRect.width;
 
-    center.value = clientWidth - (props.left || 0) - (props.right || 0);
+    let left = props.left || 0;
+    let right = props.right || 0;
+
+    if (left > clientWidth) {
+      left = clientWidth / 3;
+    }
+
+    if (right > clientWidth) {
+      right = clientWidth / 3;
+    }
+
+    const columnWidth = getCenterWidth(clientWidth, left, right);
+
+    center.value = columnWidth.center;
 
     emit('change', {
-      left: props.left,
+      left: columnWidth.left,
       center: center.value,
-      right: props.right,
+      right: columnWidth.right,
     });
   }
 });
@@ -81,12 +116,14 @@ const changeLeft = (deltaX: number) => {
     left = props.left;
   }
 
-  center.value = clientWidth - left - (props.right || 0);
+  const columnWidth = getCenterWidth(clientWidth, left, props.right || 0);
+
+  center.value = columnWidth.center;
 
   emit('change', {
-    left,
+    left: columnWidth.left,
     center: center.value,
-    right: props.right,
+    right: columnWidth.right,
   });
 };
 
@@ -99,12 +136,14 @@ const changeRight = (deltaX: number) => {
     right = props.right;
   }
 
-  center.value = clientWidth - (props.left || 0) - right;
+  const columnWidth = getCenterWidth(clientWidth, props.left || 0, right);
+
+  center.value = columnWidth.center;
 
   emit('change', {
-    left: props.left,
+    left: columnWidth.left,
     center: center.value,
-    right,
+    right: columnWidth.right,
   });
 };
 </script>

package/src/components/ScrollBar.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorScrollBar">
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import Gesto from 'gesto';
 

package/src/components/ScrollViewer.vue

@@ -22,7 +22,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorScrollViewer">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { ScrollViewerEvent } from '../type';
@@ -37,6 +37,10 @@ const props = withDefaults(
     wrapWidth?: number;
     wrapHeight?: number;
     zoom?: number;
+    correctionScrollSize?: {
+      width: number;
+      height: number;
+    };
   }>(),
   {
     width: 0,
@@ -44,6 +48,10 @@ const props = withDefaults(
     wrapWidth: 0,
     wrapHeight: 0,
     zoom: 1,
+    correctionScrollSize: () => ({
+      width: 0,
+      height: 0,
+    }),
   },
 );
 
@@ -69,6 +77,7 @@ onMounted(() => {
     container: container.value,
     target: el.value,
     zoom: props.zoom,
+    correctionScrollSize: props.correctionScrollSize,
   });
 
   scrollViewer.on('scroll', (data: ScrollViewerEvent) => {

package/src/components/ToolButton.vue

@@ -43,7 +43,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorToolButton">
 import { computed, inject } from 'vue';
 import { ArrowDown } from '@element-plus/icons-vue';
 

package/src/fields/Code.vue

@@ -8,7 +8,7 @@
   ></magic-code-editor>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorCode">
 import { computed } from 'vue';
 
 const emit = defineEmits(['change']);

package/src/fields/CodeLink.vue

@@ -2,7 +2,7 @@
   <m-fields-link :config="formConfig" :model="modelValue" name="form" @change="changeHandler"></m-fields-link>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorCodeLink">
 import { computed, reactive, watch } from 'vue';
 import serialize from 'serialize-javascript';
 

package/src/fields/CodeSelect.vue

@@ -1,131 +1,134 @@
 <template>
-  <div class="m-fields-code-select" :key="fieldKey">
-    <TMagicCard shadow="never">
-      <template #header>
-        <m-fields-select
-          :config="selectConfig"
-          :model="model"
-          :prop="prop"
-          :name="name"
-          :size="size"
-          @change="changeHandler"
-        ></m-fields-select>
+  <div class="m-fields-code-select">
+    <m-form-table
+      :config="tableConfig"
+      :model="model[name]"
+      name="hookData"
+      :enableToggleMode="false"
+      :prop="prop"
+      :size="size"
+      @change="changeHandler"
+    >
+      <template #operateCol="{ scope }">
+        <Icon
+          v-if="scope.row.codeId"
+          :icon="editable ? Edit : View"
+          class="edit-icon"
+          @click="editCode(scope.row.codeId)"
+        ></Icon>
       </template>
-      <div class="tool-bar">
-        <TMagicTooltip class="tool-item" effect="dark" content="查看代码块" placement="top">
-          <svg
-            @click="viewHandler"
-            preserveAspectRatio="xMidYMid meet"
-            viewBox="0 0 24 24"
-            width="15px"
-            height="15px"
-            data-v-65a7fb6c=""
-          >
-            <path
-              fill="currentColor"
-              d="m23 12l-7.071 7.071l-1.414-1.414L20.172 12l-5.657-5.657l1.414-1.414L23 12zM3.828 12l5.657 5.657l-1.414 1.414L1 12l7.071-7.071l1.414 1.414L3.828 12z"
-            ></path>
-          </svg>
-        </TMagicTooltip>
-      </div>
-    </TMagicCard>
+    </m-form-table>
   </div>
 </template>
 
-<script lang="ts" setup>
-import { computed, defineEmits, defineProps, inject, ref, watchEffect } from 'vue';
-import { map, xor } from 'lodash-es';
+<script lang="ts" setup name="MEditorCodeSelect">
+import { computed, defineEmits, defineProps, inject, watch } from 'vue';
+import { Edit, View } from '@element-plus/icons-vue';
+import { isEmpty, map } from 'lodash-es';
 
-import { TMagicCard, tMagicMessage, TMagicTooltip } from '@tmagic/design';
-import { FormState, SelectConfig } from '@tmagic/form';
+import { createValues, FormItem, FormState, TableConfig } from '@tmagic/form';
+import { HookType, Id } from '@tmagic/schema';
 
-import type { Services } from '../type';
-import { CodeEditorMode, CodeSelectOp } from '../type';
+import Icon from '../components/Icon.vue';
+import { CodeParamStatement, HookData, Services } from '../type';
 const services = inject<Services>('services');
-const form = inject<FormState>('mForm');
+const mForm = inject<FormState>('mForm');
 const emit = defineEmits(['change']);
 
 const props = defineProps<{
   config: {
-    selectConfig?: SelectConfig;
+    tableConfig?: TableConfig;
   };
   model: any;
   prop: string;
   name: string;
-  size: string;
+  size: 'mini' | 'small' | 'medium';
 }>();
+const codeDsl = computed(() => services?.codeBlockService.getCodeDslSync());
 
-const selectConfig = computed(() => {
+const tableConfig = computed<FormItem>(() => {
   const defaultConfig = {
-    multiple: true,
-    options: async () => {
-      const codeDsl = await services?.codeBlockService.getCodeDsl();
-      if (codeDsl) {
-        return map(codeDsl, (value, key) => ({
-          text: `${value.name}（${key}）`,
-          label: `${value.name}（${key}）`,
-          value: key,
-        }));
-      }
-      return [];
-    },
+    dropSort: false,
+    enableFullscreen: false,
+    border: true,
+    operateColWidth: 60,
+    items: [
+      {
+        type: 'select',
+        label: '代码块',
+        name: 'codeId',
+        width: '200px',
+        options: () => {
+          if (codeDsl.value) {
+            return map(codeDsl.value, (value, key) => ({
+              text: `${value.name}（${key}）`,
+              label: `${value.name}（${key}）`,
+              value: key,
+            }));
+          }
+          return [];
+        },
+        onChange: (formState: any, codeId: Id, { model }: any) => {
+          // 参数的items是根据函数生成的，当codeId变化后修正model的值，避免写入其他codeId的params
+          model.params = {};
+        },
+      },
+      {
+        name: 'params',
+        label: '参数',
+        defaultValue: {},
+        itemsFunction: (row: HookData) => {
+          const paramsConfig = getParamsConfig(row.codeId);
+          // 如果参数没有填值，则使用createValues补全空值
+          if (isEmpty(row.params) || !row.params) {
+            createValues(mForm, paramsConfig, {}, row.params);
+          }
+          return paramsConfig;
+        },
+      },
+    ],
   };
   return {
     ...defaultConfig,
-    ...props.config.selectConfig,
+    ...props.config.tableConfig,
   };
 });
-const fieldKey = ref('');
-const multiple = ref(true);
-const lastTagSnapshot = ref<string[]>([]);
 
-watchEffect(async () => {
-  if (!props.model[props.name]) return;
-  const combineNames = await Promise.all(
-    props.model[props.name].map(async (id: string) => {
-      const { name = '' } = (await services?.codeBlockService.getCodeContentById(id)) || {};
-      return name;
-    }),
-  );
-  fieldKey.value = combineNames.join('-');
-});
+const editable = computed(() => services?.codeBlockService.getEditStatus());
 
-const changeHandler = async (value: any) => {
-  let codeIds = value;
-  if (typeof value === 'string') {
-    multiple.value = false;
-    codeIds = value ? [value] : [];
-  }
-  await setCombineRelation(codeIds);
-  emit('change', value);
-};
+watch(
+  () => props.model[props.name],
+  (value) => {
+    // 兼容旧的数据结构
+    if (isEmpty(value)) {
+      // 空值或者空数组
+      props.model[props.name] = {
+        hookType: HookType.CODE,
+        hookData: [],
+      };
+    }
+  },
+  {
+    immediate: true,
+  },
+);
 
-// 同步绑定关系
-const setCombineRelation = async (codeIds: string[]) => {
-  // 组件id
-  const { id = '' } = services?.editorService.get('node') || {};
+const changeHandler = async () => {
+  emit('change', props.model[props.name]);
+};
 
-  // 兼容单选
-  let opFlag = CodeSelectOp.CHANGE;
-  let diffValues = codeIds;
-  if (multiple.value) {
-    // initValues为表单初始值，当表单内容发生变化时，initValues也会更新，可以理解为上一次表单内容的快照
-    lastTagSnapshot.value = form?.initValues[props.name] || [];
-    opFlag = codeIds.length < lastTagSnapshot.value.length ? CodeSelectOp.DELETE : CodeSelectOp.ADD;
-    diffValues = xor(codeIds, lastTagSnapshot.value) as string[];
-  }
-  // 记录绑定关系
-  await services?.codeBlockService.setCombineRelation(id, diffValues, opFlag, props.prop);
+const getParamsConfig = (codeId: Id): CodeParamStatement[] => {
+  if (!codeDsl.value) return [];
+  const paramStatements = codeDsl.value[codeId]?.params;
+  if (isEmpty(paramStatements)) return [];
+  return paramStatements.map((paramState: CodeParamStatement) => ({
+    labelWidth: '100px',
+    text: paramState.name,
+    ...paramState,
+  }));
 };
 
-const viewHandler = async () => {
-  if (props.model[props.name].length === 0) {
-    tMagicMessage.error('请先绑定代码块');
-    return;
-  }
-  // 记录当前已被绑定的代码块，为查看弹窗的展示内容
-  await services?.codeBlockService.setCombineIds(props.model[props.name]);
-  await services?.codeBlockService.setMode(CodeEditorMode.LIST);
-  services?.codeBlockService.setCodeEditorContent(true, props.model[props.name][0]);
+const editCode = (codeId: Id) => {
+  services?.codeBlockService.setCodeEditorContent(true, codeId);
 };
 </script>

package/src/fields/UISelect.vue

@@ -12,7 +12,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorUISelect">
 import { computed, inject, ref } from 'vue';
 import { Close, Delete } from '@element-plus/icons-vue';
 
@@ -37,7 +37,7 @@ const uiSelectMode = ref(false);
 
 const cancelHandler = () => {
   if (!services?.uiService) return;
-  services.uiService.set<boolean>('uiSelectMode', false);
+  services.uiService.set('uiSelectMode', false);
   uiSelectMode.value = false;
   globalThis.document.removeEventListener('ui-select', clickHandler as EventListener);
 };
@@ -61,7 +61,7 @@ const toName = computed(() => {
 
 const startSelect = () => {
   if (!services?.uiService) return;
-  services.uiService.set<boolean>('uiSelectMode', true);
+  services.uiService.set('uiSelectMode', true);
   uiSelectMode.value = true;
   globalThis.document.addEventListener('ui-select', clickHandler as EventListener);
 };

package/src/index.ts

@@ -1,7 +1,7 @@
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -48,6 +48,7 @@ export { default as PropsPanel } from './layouts/PropsPanel.vue';
 export { default as ToolButton } from './components/ToolButton.vue';
 export { default as ContentMenu } from './components/ContentMenu.vue';
 export { default as Icon } from './components/Icon.vue';
+export { default as LayoutContainer } from './components/Layout.vue';
 
 const defaultInstallOpt: InstallOptions = {
   // @todo, 自定义图片上传方法等编辑器依赖的外部选项

package/src/layouts/AddPageBox.vue

@@ -11,7 +11,7 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorAddPageBox">
 import { inject, toRaw } from 'vue';
 import { Plus } from '@element-plus/icons-vue';
 
@@ -28,9 +28,12 @@ const clickHandler = () => {
 
   if (!editorService) return;
 
+  const root = toRaw(editorService.get('root'));
+  if (!root) throw new Error('root 不能为空');
+
   editorService.add({
     type: NodeType.PAGE,
-    name: generatePageNameByApp(toRaw(editorService.get('root'))),
+    name: generatePageNameByApp(root),
   });
 };
 </script>

package/src/layouts/CodeEditor.vue

@@ -2,7 +2,7 @@
   <div ref="codeEditor" class="magic-code-editor"></div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorCodeEditor">
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 import { throttle } from 'lodash-es';
 import * as monaco from 'monaco-editor';
@@ -12,7 +12,7 @@ const props = withDefaults(
   defineProps<{
     initValues?: string | Object;
     modifiedValues?: string | Object;
-    type?: string;
+    type?: 'diff';
     language?: string;
     options?: {
       [key: string]: any;
@@ -20,7 +20,6 @@ const props = withDefaults(
     autoSave?: boolean;
   }>(),
   {
-    type: '',
     autoSave: true,
     language: 'javascript',
     options: () => ({

package/src/layouts/Framework.vue

@@ -42,16 +42,15 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorFramework">
 import { computed, inject, ref, watch } from 'vue';
 
 import { TMagicScrollbar } from '@tmagic/design';
-import type { MApp } from '@tmagic/schema';
 
+import Layout from '../components/Layout.vue';
 import { GetColumnWidth, Services } from '../type';
 
 import AddPageBox from './AddPageBox.vue';
-import Layout from './Layout.vue';
 
 const DEFAULT_LEFT_COLUMN_WIDTH = 310;
 const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
@@ -67,11 +66,11 @@ withDefaults(
 
 const { editorService, uiService } = inject<Services>('services') || {};
 
-const root = computed(() => editorService?.get<MApp>('root'));
-const nodes = computed(() => editorService?.get<Node[]>('nodes') || []);
+const root = computed(() => editorService?.get('root'));
+const nodes = computed(() => editorService?.get('nodes') || []);
 
-const pageLength = computed(() => editorService?.get<number>('pageLength') || 0);
-const showSrc = computed(() => uiService?.get<boolean>('showSrc'));
+const pageLength = computed(() => editorService?.get('pageLength') || 0);
+const showSrc = computed(() => uiService?.get('showSrc'));
 
 const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';
 const RIGHT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorRightColumnWidthData';
@@ -101,7 +100,7 @@ watch(
       columnWidth.value.center = globalThis.document.body.clientWidth - left - right;
     }
 
-    uiService?.set('columnWidth', columnWidth);
+    uiService?.set('columnWidth', columnWidth.value as GetColumnWidth);
   },
   {
     immediate: true,
@@ -123,8 +122,11 @@ watch(
   },
 );
 
-const columnWidthChange = (columnWidth: GetColumnWidth) => {
-  uiService?.set('columnWidth', columnWidth);
+const columnWidthChange = (columnW: GetColumnWidth) => {
+  columnWidth.value.left = columnW.left;
+  columnWidth.value.center = columnW.center;
+  columnWidth.value.right = columnW.right;
+  uiService?.set('columnWidth', columnW);
 };
 
 const saveCode = (value: string) => {

package/src/layouts/NavMenu.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="m-editor-nav-menu" :style="{ height: `${height}px` }">
     <div v-for="key in keys" :class="`menu-${key}`" :key="key" :style="`width: ${columnWidth?.[key]}px`">
-      <tool-button :data="item" v-for="(item, index) in buttons[key]" :key="index"></tool-button>
+      <ToolButton :data="item" v-for="(item, index) in buttons[key]" :key="index"></ToolButton>
     </div>
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="MEditorNavMenu">
 import { computed, inject, markRaw } from 'vue';
 import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/schema';
 
 import ToolButton from '../components/ToolButton.vue';
-import { ColumnLayout, GetColumnWidth, MenuBarData, MenuButton, MenuComponent, MenuItem, Services } from '../type';
+import { ColumnLayout, MenuBarData, MenuButton, MenuComponent, MenuItem, Services } from '../type';
 
 const props = withDefaults(
   defineProps<{
@@ -29,12 +29,12 @@ const props = withDefaults(
 const services = inject<Services>('services');
 const uiService = services?.uiService;
 
-const columnWidth = computed(() => services?.uiService.get<GetColumnWidth>('columnWidth'));
+const columnWidth = computed(() => services?.uiService.get('columnWidth'));
 const keys = Object.values(ColumnLayout);
 
-const showGuides = computed((): boolean => uiService?.get<boolean>('showGuides') ?? true);
-const showRule = computed((): boolean => uiService?.get<boolean>('showRule') ?? true);
-const zoom = computed((): number => uiService?.get<number>('zoom') ?? 1);
+const showGuides = computed((): boolean => uiService?.get('showGuides') ?? true);
+const showRule = computed((): boolean => uiService?.get('showRule') ?? true);
+const zoom = computed((): number => uiService?.get('zoom') ?? 1);
 
 const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
 const ctrl = isMac ? 'Command' : 'Ctrl';
@@ -67,7 +67,10 @@ const getConfig = (item: MenuItem): (MenuButton | MenuComponent)[] => {
         icon: markRaw(Delete),
         tooltip: `刪除(Delete)`,
         disabled: () => services?.editorService.get('node')?.type === NodeType.PAGE,
-        handler: () => services?.editorService.remove(services?.editorService.get('node')),
+        handler: () => {
+          const node = services?.editorService.get('node');
+          node && services?.editorService.remove(node);
+        },
       });
       break;
     case 'undo':