@tmagic/editor 1.7.9 → 1.7.10

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.9",
+  "version": "1.7.10",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^7.0.0",
     "sortablejs": "^1.15.6",
-    "@tmagic/design": "1.7.9",
-    "@tmagic/form": "1.7.9",
-    "@tmagic/stage": "1.7.9",
-    "@tmagic/utils": "1.7.9",
-    "@tmagic/table": "1.7.9"
+    "@tmagic/design": "1.7.10",
+    "@tmagic/form": "1.7.10",
+    "@tmagic/table": "1.7.10",
+    "@tmagic/stage": "1.7.10",
+    "@tmagic/utils": "1.7.10"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
@@ -74,9 +74,9 @@
   "peerDependencies": {
     "monaco-editor": "^0.55.1 ",
     "type-fest": "^5.2.0",
-    "typescript": "^5.9.3",
+    "typescript": "^6.0.2",
     "vue": "^3.5.24",
-    "@tmagic/core": "1.7.9"
+    "@tmagic/core": "1.7.10"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Editor.vue

@@ -207,6 +207,7 @@ const stageOptions: StageOptions = {
   renderType: props.renderType,
   guidesOptions: props.guidesOptions,
   disabledMultiSelect: props.disabledMultiSelect,
+  beforeDblclick: props.beforeDblclick,
 };
 
 stageOverlayService.set('stageOptions', stageOptions);

package/src/components/CodeBlockEditor.vue

@@ -88,7 +88,7 @@ const width = defineModel<number>('width', { default: 670 });
 const boxVisible = defineModel<boolean>('visible', { default: false });
 
 const props = defineProps<{
-  content: CodeBlockContent;
+  content: Omit<CodeBlockContent, 'content'> & { content: string };
   disabled?: boolean;
   isDataSource?: boolean;
   dataSourceType?: string;

package/src/components/CodeParams.vue

@@ -46,13 +46,29 @@ const getFormConfig = (items: FormItemConfig[] = []) => [
 
 const codeParamsConfig = computed(() =>
   getFormConfig(
-    props.paramsConfig.map(({ name, text, extra, ...config }) => ({
-      type: 'data-source-field-select',
-      name,
-      text,
-      extra,
-      fieldConfig: config as FormItemConfig,
-    })),
+    props.paramsConfig.map(({ name, text, extra, ...config }) => {
+      let { type } = config;
+      if (typeof type === 'function') {
+        type = type(undefined, {
+          model: props.model[props.name],
+        });
+      }
+      if (type && ['data-source-field-select', 'vs-code'].includes(type)) {
+        return {
+          ...config,
+          name,
+          text,
+          extra,
+        };
+      }
+      return {
+        type: 'data-source-field-select' as const,
+        name,
+        text,
+        extra,
+        fieldConfig: config,
+      };
+    }) as FormItemConfig[],
   ),
 );
 

package/src/editorProps.ts

@@ -98,6 +98,8 @@ export interface EditorProps {
   isContainer?: (el: HTMLElement) => boolean | Promise<boolean>;
   /** 用于自定义组件树与画布的右键菜单 */
   customContentMenu?: CustomContentMenuFunction;
+  /** 画布双击前的钩子函数，返回 false 则阻止默认的双击行为 */
+  beforeDblclick?: (event: MouseEvent) => Promise<boolean | void> | boolean | void;
   extendFormState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
   /** 页面顺序拖拽配置参数 */
   pageBarSortOptions?: PageBarSortOptions;

package/src/fields/DataSourceFieldSelect/FieldSelect.vue

@@ -1,6 +1,21 @@
 <template>
   <div class="m-editor-data-source-field-select">
-    <template v-if="checkStrictly">
+    <template v-if="dataSourceId">
+      <TMagicCascader
+        :model-value="selectFieldsId"
+        clearable
+        filterable
+        :size="size"
+        :disabled="disabled"
+        :options="fieldsOptions"
+        :props="{
+          checkStrictly,
+        }"
+        @change="fieldChangeHandler"
+      ></TMagicCascader>
+    </template>
+
+    <template v-else-if="checkStrictly">
       <TMagicSelect
         :model-value="selectDataSourceId"
         clearable
@@ -92,6 +107,8 @@ const props = defineProps<{
   dataSourceFieldType?: DataSourceFieldType[];
   /** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
   notEditable?: boolean | FilterFunction;
+  /** 指定数据源ID，限定只能选择该数据源的字段 */
+  dataSourceId?: string;
 }>();
 
 const emit = defineEmits<{
@@ -106,7 +123,12 @@ const { dataSourceService, uiService } = useServices();
 const mForm = inject<FormState | undefined>('mForm');
 const eventBus = inject<EventBus>('eventBus');
 
-const dataSources = computed(() => dataSourceService.get('dataSources') || []);
+const allDataSources = computed(() => dataSourceService.get('dataSources') || []);
+
+const dataSources = computed(() => {
+  if (!props.dataSourceId) return allDataSources.value;
+  return allDataSources.value.filter((ds) => ds.id === props.dataSourceId);
+});
 
 const valueIsKey = computed(() => props.value === 'key');
 const notEditable = computed(() => filterFunction(mForm, props.notEditable, props));
@@ -125,7 +147,13 @@ const selectFieldsId = ref<string[]>([]);
 watch(
   modelValue,
   (value) => {
-    if (Array.isArray(value)) {
+    if (props.dataSourceId) {
+      const dsIdValue = valueIsKey.value
+        ? props.dataSourceId
+        : `${DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${props.dataSourceId}`;
+      selectDataSourceId.value = dsIdValue;
+      selectFieldsId.value = Array.isArray(value) ? value : [];
+    } else if (Array.isArray(value) && value.length) {
       const [dsId, ...fields] = value;
       selectDataSourceId.value = dsId;
       selectFieldsId.value = fields;
@@ -140,7 +168,7 @@ watch(
 );
 
 const fieldsOptions = computed(() => {
-  const ds = dataSources.value.find((ds) => ds.id === removeDataSourceFieldPrefix(selectDataSourceId.value));
+  const ds = allDataSources.value.find((ds) => ds.id === removeDataSourceFieldPrefix(selectDataSourceId.value));
 
   if (!ds) return [];
 
@@ -163,8 +191,13 @@ const dsChangeHandler = (v: string) => {
 };
 
 const fieldChangeHandler = (v: string[] = []) => {
-  modelValue.value = [selectDataSourceId.value, ...v];
-  emit('change', modelValue.value);
+  if (props.dataSourceId) {
+    modelValue.value = v;
+    emit('change', v);
+  } else {
+    modelValue.value = [selectDataSourceId.value, ...v];
+    emit('change', modelValue.value);
+  }
 };
 
 const onChangeHandler = (v: string[] = []) => {

package/src/fields/DataSourceFieldSelect/Index.vue

@@ -8,6 +8,7 @@
       :value="config.value"
       :checkStrictly="checkStrictly"
       :dataSourceFieldType="config.dataSourceFieldType"
+      :dataSourceId="config.dataSourceId"
       @change="onChangeHandler"
     ></FieldSelect>
 

package/src/fields/DataSourceMethodSelect.vue

@@ -52,12 +52,14 @@ import {
   type FormState,
   MCascader,
 } from '@tmagic/form';
+import { DATA_SOURCE_SET_DATA_METHOD_NAME } from '@tmagic/utils';
 
 import CodeParams from '@editor/components/CodeParams.vue';
 import MIcon from '@editor/components/Icon.vue';
 import { useServices } from '@editor/hooks/use-services';
 import type { CodeParamStatement, EventBus } from '@editor/type';
 import { SideItemKey } from '@editor/type';
+import { getFieldType } from '@editor/utils';
 
 defineOptions({
   name: 'MFieldsDataSourceMethodSelect',
@@ -92,6 +94,43 @@ const isCustomMethod = computed(() => {
 const getParamItemsConfig = ([dataSourceId, methodName]: [Id, string] = ['', '']): CodeParamStatement[] => {
   if (!dataSourceId) return [];
 
+  if (methodName === DATA_SOURCE_SET_DATA_METHOD_NAME) {
+    return [
+      {
+        name: 'field',
+        text: '字段',
+        type: 'data-source-field-select',
+        dataSourceId,
+        checkStrictly: true,
+      },
+      {
+        name: 'data',
+        text: '数据',
+        type: (_formState, { model }) => {
+          const fieldType = getFieldType(dataSourceService.getDataSourceById(`${dataSourceId}`), model.field);
+
+          let type = 'vs-code';
+
+          if (fieldType === 'number') {
+            type = 'number';
+          } else if (fieldType === 'string') {
+            type = 'text';
+          } else if (fieldType === 'boolean') {
+            type = 'switch';
+          }
+
+          return type;
+        },
+        language: 'javascript',
+        options: inject('codeOptions', {}),
+        autosize: {
+          minRows: 1,
+          maxRows: 10,
+        },
+      },
+    ];
+  }
+
   const paramStatements = dataSources.value
     ?.find((item) => item.id === dataSourceId)
     ?.methods?.find((item) => item.name === methodName)?.params;
@@ -108,19 +147,21 @@ const paramsConfig = ref<CodeParamStatement[]>(getParamItemsConfig(props.model[p
 
 const methodsOptions = computed(
   () =>
-    dataSources.value
-      ?.filter((ds) => ds.methods?.length || dataSourceService.getFormMethod(ds.type).length)
-      ?.map((ds) => ({
-        label: ds.title || ds.id,
-        value: ds.id,
-        children: [
-          ...(dataSourceService?.getFormMethod(ds.type) || []),
-          ...(ds.methods || []).map((method) => ({
-            label: method.name,
-            value: method.name,
-          })),
-        ],
-      })) || [],
+    dataSources.value?.map((ds) => ({
+      label: ds.title || ds.id,
+      value: ds.id,
+      children: [
+        {
+          label: '设置数据',
+          value: DATA_SOURCE_SET_DATA_METHOD_NAME,
+        },
+        ...(dataSourceService?.getFormMethod(ds.type) || []),
+        ...(ds.methods || []).map((method) => ({
+          label: method.name,
+          value: method.name,
+        })),
+      ],
+    })) || [],
 );
 
 const cascaderConfig = computed<CascaderConfig>(() => ({

package/src/fields/DataSourceMethods.vue

@@ -42,7 +42,7 @@ const props = withDefaults(defineProps<FieldProps<DataSourceMethodsConfig>>(), {
 
 const emit = defineEmits(['change']);
 
-const codeConfig = ref<CodeBlockContent>();
+const codeConfig = ref<Omit<CodeBlockContent, 'content'> & { content: string }>();
 const codeBlockEditorRef = useTemplateRef<InstanceType<typeof CodeBlockEditor>>('codeBlockEditor');
 
 let editIndex = -1;
@@ -72,10 +72,14 @@ const methodColumns: ColumnConfig[] = [
       {
         text: '编辑',
         handler: (method: CodeBlockContent, index: number) => {
-          let codeContent = method.content || '({ params, dataSource, app }) => {\n  // place your code here\n}';
-
-          if (typeof codeContent !== 'string') {
-            codeContent = codeContent.toString();
+          let codeContent: string = '({ params, dataSource, app }) => {\n  // place your code here\n}';
+
+          if (method.content) {
+            if (typeof method.content !== 'string') {
+              codeContent = method.content.toString();
+            } else {
+              codeContent = method.content;
+            }
           }
 
           codeConfig.value = {

package/src/fields/StyleSetter/Index.vue

@@ -26,7 +26,7 @@ import type { StyleSchema } from '@tmagic/schema';
 
 import MIcon from '@editor/components/Icon.vue';
 
-import { Background, Border, Font, Layout, Position } from './pro/';
+import { Background, Border, Font, Layout, Position, Transform } from './pro/';
 
 defineOptions({
   name: 'MFieldsStyleSetter',
@@ -60,6 +60,10 @@ const list = [
     title: '边框与圆角',
     component: Border,
   },
+  {
+    title: '变形',
+    component: Transform,
+  },
 ];
 
 const collapseValue = shallowRef(

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

@@ -0,0 +1,54 @@
+<template>
+  <MContainer :config="config" :model="values" :size="size" :disabled="disabled" @change="change"></MContainer>
+</template>
+
+<script lang="ts" setup>
+import { type ContainerChangeEventData, defineFormItem, MContainer } from '@tmagic/form';
+import type { StyleSchema } from '@tmagic/schema';
+
+defineProps<{
+  values: Partial<StyleSchema>;
+  disabled?: boolean;
+  size?: 'large' | 'default' | 'small';
+}>();
+
+const emit = defineEmits<{
+  change: [v: StyleSchema, eventData: ContainerChangeEventData];
+}>();
+
+const config = defineFormItem({
+  items: [
+    {
+      name: 'transform',
+      items: [
+        {
+          name: 'rotate',
+          text: '旋转角度',
+          labelWidth: '68px',
+          type: 'data-source-field-select',
+          checkStrictly: false,
+          dataSourceFieldType: ['string', 'number'],
+          fieldConfig: {
+            type: 'text',
+          },
+        },
+        {
+          name: 'scale',
+          text: '缩放',
+          labelWidth: '68px',
+          type: 'data-source-field-select',
+          checkStrictly: false,
+          dataSourceFieldType: ['string', 'number'],
+          fieldConfig: {
+            type: 'text',
+          },
+        },
+      ],
+    },
+  ],
+});
+
+const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
+  emit('change', value, eventData);
+};
+</script>

package/src/fields/StyleSetter/pro/index.ts

@@ -3,3 +3,4 @@ export { default as Font } from './Font.vue';
 export { default as Layout } from './Layout.vue';
 export { default as Position } from './Position.vue';
 export { default as Border } from './Border.vue';
+export { default as Transform } from './Transform.vue';

package/src/hooks/use-code-block-edit.ts

@@ -8,7 +8,7 @@ import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import type { Services } from '@editor/type';
 
 export const useCodeBlockEdit = (codeBlockService: Services['codeBlockService']) => {
-  const codeConfig = ref<CodeBlockContent>();
+  const codeConfig = ref<Omit<CodeBlockContent, 'content'> & { content: string }>();
   const codeId = ref<string>();
   const codeBlockEditorRef = useTemplateRef<InstanceType<typeof CodeBlockEditor>>('codeBlockEditor');
 
@@ -36,10 +36,14 @@ export const useCodeBlockEdit = (codeBlockService: Services['codeBlockService'])
       return;
     }
 
-    let codeContent = codeBlock.content;
+    let codeContent = '';
 
-    if (typeof codeContent !== 'string') {
-      codeContent = codeContent.toString();
+    if (codeBlock.content) {
+      if (typeof codeBlock.content !== 'string') {
+        codeContent = codeBlock.content.toString();
+      } else {
+        codeContent = codeBlock.content;
+      }
     }
 
     codeConfig.value = {

package/src/initService.ts

@@ -233,7 +233,7 @@ export const initServiceEvents = (
     ((event: 'update:modelValue', value: MApp | null) => void),
   { editorService, codeBlockService, dataSourceService, depService }: Services,
 ) => {
-  let getTMagicAppPrimise: Promise<TMagicCore | undefined> | null = null;
+  let getTMagicAppPromise: Promise<TMagicCore | undefined> | null = null;
 
   const getTMagicApp = async (): Promise<TMagicCore | undefined> => {
     const stage = await getStage();
@@ -246,11 +246,11 @@ export const initServiceEvents = (
       return renderer.runtime.getApp?.();
     }
 
-    if (getTMagicAppPrimise) {
-      return getTMagicAppPrimise;
+    if (getTMagicAppPromise) {
+      return getTMagicAppPromise;
     }
 
-    getTMagicAppPrimise = new Promise<TMagicCore | undefined>((resolve) => {
+    getTMagicAppPromise = new Promise<TMagicCore | undefined>((resolve) => {
       // 设置 10s 超时
       const timeout = globalThis.setTimeout(() => {
         resolve(void 0);
@@ -264,7 +264,7 @@ export const initServiceEvents = (
       });
     });
 
-    return getTMagicAppPrimise;
+    return getTMagicAppPromise;
   };
 
   const updateStageNodes = (nodes: MComponent[]) => {
@@ -560,7 +560,7 @@ export const initServiceEvents = (
     depService.clear(nodes);
   };
 
-  // 由于历史记录变化是更新整个page，所以历史记录变化时，需要重新收集依赖
+  // 历史记录变化时，需要重新收集依赖
   const historyChangeHandler = (page: MPage | MPageFragment) => {
     collectIdle([page], true).then(() => {
       updateStageNode(page);

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

@@ -80,7 +80,7 @@ const props = withDefaults(
 let stage: StageCore | null = null;
 let runtime: Runtime | null = null;
 
-const { editorService, uiService, keybindingService } = useServices();
+const { editorService, uiService, keybindingService, stageOverlayService } = useServices();
 
 const stageLoading = computed(() => editorService.get('stageLoading'));
 
@@ -97,6 +97,60 @@ const page = computed(() => editorService.get('page'));
 const zoom = computed(() => uiService.get('zoom'));
 const node = computed(() => editorService.get('node'));
 
+/**
+ * 判断元素是否被非页面级的滚动容器裁剪（未完整显示）
+ *
+ * 从元素向上遍历祖先节点，跳过页面/页面片容器，
+ * 检查是否存在设置了 overflow 的滚动容器将该元素裁剪，
+ * 只有元素未被完整显示时才需要打开 overlay 以展示完整内容
+ */
+const isClippedByScrollContainer = (el: HTMLElement): boolean => {
+  const win = el.ownerDocument.defaultView;
+  if (!win) return false;
+
+  // 收集所有页面和页面片的 id
+  const root = editorService.get('root');
+  const pageIds = new Set(root?.items?.map((item) => `${item.id}`) ?? []);
+
+  // el 本身就是页面或页面片，无需判断
+  const elId = getIdFromEl()(el);
+  if (elId && pageIds.has(elId)) return false;
+
+  let parent = el.parentElement;
+
+  while (parent && parent !== el.ownerDocument.documentElement) {
+    const parentId = getIdFromEl()(parent);
+
+    // 到达页面或页面片层级，不再继续向上查找
+    if (parentId && pageIds.has(parentId)) {
+      return false;
+    }
+
+    const { overflowX, overflowY } = win.getComputedStyle(parent);
+
+    if (
+      ['auto', 'scroll', 'hidden'].includes(overflowX) ||
+      ['auto', 'scroll', 'hidden'].includes(overflowY) ||
+      parent.scrollWidth > parent.clientWidth ||
+      parent.scrollHeight > parent.clientHeight
+    ) {
+      // 比较元素与容器的可视区域，判断元素是否被裁剪
+      const elRect = el.getBoundingClientRect();
+      const containerRect = parent.getBoundingClientRect();
+      if (
+        elRect.top < containerRect.top ||
+        elRect.left < containerRect.left ||
+        elRect.bottom > containerRect.bottom ||
+        elRect.right > containerRect.right
+      ) {
+        return true;
+      }
+    }
+    parent = parent.parentElement;
+  }
+  return false;
+};
+
 watchEffect(() => {
   if (stage || !page.value) return;
 
@@ -109,6 +163,40 @@ watchEffect(() => {
     stageWrapRef.value?.container?.focus();
   });
 
+  stage.on('dblclick', async (event: MouseEvent) => {
+    if (props.stageOptions.beforeDblclick) {
+      const result = await props.stageOptions.beforeDblclick(event);
+      if (result === false) return;
+    }
+
+    const el = (await stage?.actionManager?.getElementFromPoint(event)) || null;
+    if (!el) return;
+
+    const id = getIdFromEl()(el);
+
+    if (id) {
+      const node = editorService.getNodeById(id);
+      if (node?.type === 'page-fragment-container' && node.pageFragmentId) {
+        await editorService.select(node.pageFragmentId);
+        return;
+      }
+    }
+
+    if (!props.disabledStageOverlay && isClippedByScrollContainer(el)) {
+      stageOverlayService.openOverlay(el);
+      return;
+    }
+
+    const nextEl = (await stage?.actionManager?.getNextElementFromPoint(event)) || null;
+    if (nextEl) {
+      const nextId = getIdFromEl()(nextEl);
+      if (nextId) {
+        await editorService.select(nextId);
+        editorService.get('stage')?.select(nextId);
+      }
+    }
+  });
+
   editorService.set('stage', markRaw(stage));
 
   stage.mount(stageContainerEl.value);

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

@@ -46,12 +46,7 @@ const style = computed(() => ({
 }));
 
 watch(stage, (stage) => {
-  if (stage) {
-    stage.on('dblclick', async (event: MouseEvent) => {
-      const el = (await stage.actionManager?.getElementFromPoint(event)) || null;
-      stageOverlayService.openOverlay(el);
-    });
-  } else {
+  if (!stage) {
     stageOverlayService.closeOverlay();
   }
 });