@tmagic/editor 1.8.0-beta.11 → 1.8.0-beta.12

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

@@ -1,6 +1,9 @@
 <template>
   <MContainer
-    :config="config"
+    v-for="item in formConfig"
+    :prop="prop"
+    :key="item.name"
+    :config="item"
     :model="values"
     :last-values="lastValues"
     :is-compare="isCompare"
@@ -23,8 +26,8 @@
 <script lang="ts" setup>
 import { markRaw } from 'vue';
 
-import type { ChildConfig, ContainerChangeEventData } from '@tmagic/form';
-import { defineFormItem, MContainer } from '@tmagic/form';
+import type { ContainerChangeEventData } from '@tmagic/form';
+import { defineFormConfig, MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
 import Box from '../components/Box.vue';
@@ -49,6 +52,7 @@ defineProps<{
   isCompare?: boolean;
   disabled?: boolean;
   size?: 'large' | 'default' | 'small';
+  prop?: string;
 }>();
 
 const emit = defineEmits<{
@@ -56,145 +60,143 @@ const emit = defineEmits<{
   addDiffCount: [];
 }>();
 
-const config = defineFormItem({
-  items: [
-    {
-      name: 'display',
-      text: '模式',
-      type: 'radioGroup',
-      childType: 'button',
-      labelWidth: '68px',
-      options: [
-        { value: 'inline', icon: markRaw(DisplayInline), tooltip: '内联布局 inline' },
-        { value: 'flex', icon: markRaw(DisplayFlex), tooltip: '弹性布局 flex' },
-        { value: 'block', icon: markRaw(DisplayBlock), tooltip: '块级布局 block' },
-        { value: 'inline-block', icon: markRaw(DisplayInlineBlock), tooltip: '内联块布局 inline-block' },
-        { value: 'none', icon: markRaw(DisplayNone), tooltip: '隐藏 none' },
-      ],
-    },
-    {
-      name: 'flexDirection',
-      text: '主轴方向',
-      type: 'radioGroup',
-      childType: 'button',
-      labelWidth: '68px',
-      options: [
-        { value: 'row', icon: markRaw(FlexDirectionRow), tooltip: '水平方向 起点在左侧 row' },
-        { value: 'row-reverse', icon: markRaw(FlexDirectionRowReverse), tooltip: '水平方向 起点在右侧 row-reverse' },
-        { value: 'column', icon: markRaw(FlexDirectionColumn), tooltip: '垂直方向 起点在上沿 column' },
-        {
-          value: 'column-reverse',
-          icon: markRaw(FlexDirectionColumnReverse),
-          tooltip: '垂直方向 起点在下沿 column-reverse',
+const formConfig = defineFormConfig([
+  {
+    name: 'display',
+    text: '模式',
+    type: 'radioGroup',
+    childType: 'button',
+    labelWidth: '68px',
+    options: [
+      { value: 'inline', icon: markRaw(DisplayInline), tooltip: '内联布局 inline' },
+      { value: 'flex', icon: markRaw(DisplayFlex), tooltip: '弹性布局 flex' },
+      { value: 'block', icon: markRaw(DisplayBlock), tooltip: '块级布局 block' },
+      { value: 'inline-block', icon: markRaw(DisplayInlineBlock), tooltip: '内联块布局 inline-block' },
+      { value: 'none', icon: markRaw(DisplayNone), tooltip: '隐藏 none' },
+    ],
+  },
+  {
+    name: 'flexDirection',
+    text: '主轴方向',
+    type: 'radioGroup',
+    childType: 'button',
+    labelWidth: '68px',
+    options: [
+      { value: 'row', icon: markRaw(FlexDirectionRow), tooltip: '水平方向 起点在左侧 row' },
+      { value: 'row-reverse', icon: markRaw(FlexDirectionRowReverse), tooltip: '水平方向 起点在右侧 row-reverse' },
+      { value: 'column', icon: markRaw(FlexDirectionColumn), tooltip: '垂直方向 起点在上沿 column' },
+      {
+        value: 'column-reverse',
+        icon: markRaw(FlexDirectionColumnReverse),
+        tooltip: '垂直方向 起点在下沿 column-reverse',
+      },
+    ],
+    display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
+  },
+  {
+    name: 'justifyContent',
+    text: '主轴对齐',
+    type: 'radioGroup',
+    childType: 'button',
+    labelWidth: '68px',
+    options: [
+      { value: 'flex-start', icon: markRaw(JustifyContentFlexStart), tooltip: '左对齐 flex-start' },
+      { value: 'flex-end', icon: markRaw(JustifyContentFlexEnd), tooltip: '右对齐 flex-end' },
+      { value: 'center', icon: markRaw(JustifyContentCenter), tooltip: '居中 center' },
+      { value: 'space-between', icon: markRaw(JustifyContentSpaceBetween), tooltip: '两端对齐 space-between' },
+      { value: 'space-around', icon: markRaw(JustifyContentSpaceAround), tooltip: '横向平分 space-around' },
+    ],
+    display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
+  },
+  {
+    name: 'alignItems',
+    text: '辅轴对齐',
+    type: 'radioGroup',
+    childType: 'button',
+    labelWidth: '68px',
+    options: [
+      { value: 'flex-start', icon: markRaw(JustifyContentFlexStart), tooltip: '左对齐 flex-start' },
+      { value: 'flex-end', icon: markRaw(JustifyContentFlexEnd), tooltip: '右对齐 flex-end' },
+      { value: 'center', icon: markRaw(JustifyContentCenter), tooltip: '居中 center' },
+      { value: 'space-between', icon: markRaw(JustifyContentSpaceBetween), tooltip: '两端对齐 space-between' },
+      { value: 'space-around', icon: markRaw(JustifyContentSpaceAround), tooltip: '横向平分 space-around' },
+    ],
+    display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
+  },
+  {
+    name: 'flexWrap',
+    text: '换行',
+    type: 'radioGroup',
+    childType: 'button',
+    labelWidth: '68px',
+    options: [
+      { value: 'nowrap', text: '不换行', tooltip: '不换行 nowrap' },
+      { value: 'wrap', text: '正换行', tooltip: '第一行在上方 wrap' },
+      { value: 'wrap-reverse', text: '逆换行', tooltip: '第一行在下方 wrap-reverse' },
+    ],
+    display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
+  },
+  {
+    type: 'row',
+    items: [
+      {
+        name: 'width',
+        text: '宽度',
+        labelWidth: '68px',
+        type: 'data-source-field-select',
+        fieldConfig: {
+          type: 'text',
         },
-      ],
-      display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
-    },
-    {
-      name: 'justifyContent',
-      text: '主轴对齐',
-      type: 'radioGroup',
-      childType: 'button',
-      labelWidth: '68px',
-      options: [
-        { value: 'flex-start', icon: markRaw(JustifyContentFlexStart), tooltip: '左对齐 flex-start' },
-        { value: 'flex-end', icon: markRaw(JustifyContentFlexEnd), tooltip: '右对齐 flex-end' },
-        { value: 'center', icon: markRaw(JustifyContentCenter), tooltip: '居中 center' },
-        { value: 'space-between', icon: markRaw(JustifyContentSpaceBetween), tooltip: '两端对齐 space-between' },
-        { value: 'space-around', icon: markRaw(JustifyContentSpaceAround), tooltip: '横向平分 space-around' },
-      ],
-      display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
-    },
-    {
-      name: 'alignItems',
-      text: '辅轴对齐',
-      type: 'radioGroup',
-      childType: 'button',
-      labelWidth: '68px',
-      options: [
-        { value: 'flex-start', icon: markRaw(JustifyContentFlexStart), tooltip: '左对齐 flex-start' },
-        { value: 'flex-end', icon: markRaw(JustifyContentFlexEnd), tooltip: '右对齐 flex-end' },
-        { value: 'center', icon: markRaw(JustifyContentCenter), tooltip: '居中 center' },
-        { value: 'space-between', icon: markRaw(JustifyContentSpaceBetween), tooltip: '两端对齐 space-between' },
-        { value: 'space-around', icon: markRaw(JustifyContentSpaceAround), tooltip: '横向平分 space-around' },
-      ],
-      display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
-    },
-    {
-      name: 'flexWrap',
-      text: '换行',
-      type: 'radioGroup',
-      childType: 'button',
-      labelWidth: '68px',
-      options: [
-        { value: 'nowrap', text: '不换行', tooltip: '不换行 nowrap' },
-        { value: 'wrap', text: '正换行', tooltip: '第一行在上方 wrap' },
-        { value: 'wrap-reverse', text: '逆换行', tooltip: '第一行在下方 wrap-reverse' },
-      ],
-      display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
-    },
-    {
-      type: 'row',
-      items: [
-        {
-          name: 'width',
-          text: '宽度',
-          labelWidth: '68px',
-          type: 'data-source-field-select',
-          fieldConfig: {
-            type: 'text',
-          },
+      },
+      {
+        name: 'height',
+        text: '高度',
+        labelWidth: '68px',
+        type: 'data-source-field-select',
+        fieldConfig: {
+          type: 'text',
         },
-        {
-          name: 'height',
-          text: '高度',
-          labelWidth: '68px',
-          type: 'data-source-field-select',
-          fieldConfig: {
-            type: 'text',
-          },
+      },
+    ],
+  },
+  {
+    type: 'row',
+    items: [
+      {
+        type: 'data-source-field-select',
+        text: 'overflow',
+        name: 'overflow',
+        labelWidth: '68px',
+        checkStrictly: false,
+        dataSourceFieldType: ['string'],
+        fieldConfig: {
+          type: 'select',
+          clearable: true,
+          allowCreate: true,
+          options: [
+            { text: 'visible', value: 'visible' },
+            { text: 'hidden', value: 'hidden' },
+            { text: 'clip', value: 'clip' },
+            { text: 'scroll', value: 'scroll' },
+            { text: 'auto', value: 'auto' },
+            { text: 'overlay', value: 'overlay' },
+            { text: 'initial', value: 'initial' },
+          ],
         },
-      ],
-    },
-    {
-      type: 'row',
-      items: [
-        {
-          type: 'data-source-field-select',
-          text: 'overflow',
-          name: 'overflow',
-          labelWidth: '68px',
-          checkStrictly: false,
-          dataSourceFieldType: ['string'],
-          fieldConfig: {
-            type: 'select',
-            clearable: true,
-            allowCreate: true,
-            options: [
-              { text: 'visible', value: 'visible' },
-              { text: 'hidden', value: 'hidden' },
-              { text: 'clip', value: 'clip' },
-              { text: 'scroll', value: 'scroll' },
-              { text: 'auto', value: 'auto' },
-              { text: 'overlay', value: 'overlay' },
-              { text: 'initial', value: 'initial' },
-            ],
-          },
+      },
+      {
+        type: 'data-source-field-select',
+        text: '透明度',
+        name: 'opacity',
+        labelWidth: '68px',
+        dataSourceFieldType: ['string', 'number'],
+        fieldConfig: {
+          type: 'text',
         },
-        {
-          type: 'data-source-field-select',
-          text: '透明度',
-          name: 'opacity',
-          labelWidth: '68px',
-          dataSourceFieldType: ['string', 'number'],
-          fieldConfig: {
-            type: 'text',
-          },
-        },
-      ],
-    },
-  ],
-}) as ChildConfig;
+      },
+    ],
+  },
+]);
 
 const change = (value: string | StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);

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

@@ -1,6 +1,9 @@
 <template>
   <MContainer
-    :config="config"
+    v-for="(item, index) in formConfig"
+    :prop="prop"
+    :key="index"
+    :config="item"
     :model="values"
     :last-values="lastValues"
     :is-compare="isCompare"
@@ -12,7 +15,7 @@
 </template>
 
 <script lang="ts" setup>
-import { type ContainerChangeEventData, defineFormItem, MContainer } from '@tmagic/form';
+import { type ContainerChangeEventData, defineFormConfig, MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
 const props = defineProps<{
@@ -21,6 +24,7 @@ const props = defineProps<{
   isCompare?: boolean;
   disabled?: boolean;
   size?: 'large' | 'default' | 'small';
+  prop?: string;
 }>();
 
 const emit = defineEmits<{
@@ -36,78 +40,76 @@ const positionText: Record<string, string> = {
   sticky: '粘性定位',
 };
 
-const config = defineFormItem({
-  items: [
-    {
-      name: 'position',
-      text: '定位',
-      labelWidth: '68px',
-      type: 'data-source-field-select',
-      fieldConfig: {
-        type: 'select',
-        options: Object.keys(positionText).map((item) => ({
-          value: item,
-          text: `${item}(${positionText[item]})`,
-        })),
-      },
+const formConfig = defineFormConfig([
+  {
+    name: 'position',
+    text: '定位',
+    labelWidth: '68px',
+    type: 'data-source-field-select',
+    fieldConfig: {
+      type: 'select',
+      options: Object.keys(positionText).map((item) => ({
+        value: item,
+        text: `${item}(${positionText[item]})`,
+      })),
     },
-    {
-      type: 'row',
-      labelWidth: '68px',
-      display: () => props.values.position !== 'static',
-      items: [
-        {
-          name: 'left',
-          type: 'data-source-field-select',
-          text: 'left',
-          fieldConfig: {
-            type: 'text',
-          },
+  },
+  {
+    type: 'row',
+    labelWidth: '68px',
+    display: () => props.values.position !== 'static',
+    items: [
+      {
+        name: 'left',
+        type: 'data-source-field-select',
+        text: 'left',
+        fieldConfig: {
+          type: 'text',
         },
-        {
-          name: 'top',
-          type: 'data-source-field-select',
-          text: 'top',
-          fieldConfig: {
-            type: 'text',
-          },
+      },
+      {
+        name: 'top',
+        type: 'data-source-field-select',
+        text: 'top',
+        fieldConfig: {
+          type: 'text',
         },
-      ],
-    },
-    {
-      type: 'row',
-      labelWidth: '68px',
-      display: () => props.values.position !== 'static',
-      items: [
-        {
-          name: 'right',
-          type: 'data-source-field-select',
-          text: 'right',
-          fieldConfig: {
-            type: 'text',
-          },
+      },
+    ],
+  },
+  {
+    type: 'row',
+    labelWidth: '68px',
+    display: () => props.values.position !== 'static',
+    items: [
+      {
+        name: 'right',
+        type: 'data-source-field-select',
+        text: 'right',
+        fieldConfig: {
+          type: 'text',
         },
-        {
-          name: 'bottom',
-          type: 'data-source-field-select',
-          text: 'bottom',
-          fieldConfig: {
-            type: 'text',
-          },
+      },
+      {
+        name: 'bottom',
+        type: 'data-source-field-select',
+        text: 'bottom',
+        fieldConfig: {
+          type: 'text',
         },
-      ],
-    },
-    {
-      labelWidth: '68px',
-      name: 'zIndex',
-      text: 'zIndex',
-      type: 'data-source-field-select',
-      fieldConfig: {
-        type: 'text',
       },
+    ],
+  },
+  {
+    labelWidth: '68px',
+    name: 'zIndex',
+    text: 'zIndex',
+    type: 'data-source-field-select',
+    fieldConfig: {
+      type: 'text',
     },
-  ],
-});
+  },
+]);
 
 const change = (value: string | StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);

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

@@ -1,5 +1,6 @@
 <template>
   <MContainer
+    :prop="prop"
     :config="config"
     :model="values"
     :last-values="lastValues"
@@ -21,6 +22,7 @@ defineProps<{
   isCompare?: boolean;
   disabled?: boolean;
   size?: 'large' | 'default' | 'small';
+  prop?: string;
 }>();
 
 const emit = defineEmits<{
@@ -29,33 +31,29 @@ const emit = defineEmits<{
 }>();
 
 const config = defineFormItem({
+  name: 'transform',
   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',
-          },
-        },
-      ],
+      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',
+      },
     },
   ],
 });

package/src/fields/UISelect.vue

@@ -127,15 +127,3 @@ const unhighlight = () => {
   stageOverlayService.get('stage')?.clearHighlight();
 };
 </script>
-
-<style lang="scss">
-.m-fields-ui-select {
-  cursor: pointer;
-  i {
-    margin-right: 3px;
-  }
-  span {
-    color: #2882e0;
-  }
-}
-</style>

package/src/index.ts

@@ -48,6 +48,7 @@ export { default as componentListService } from './services/componentList';
 export { default as keybindingService } from './services/keybinding';
 export { default as ComponentListPanel } from './layouts/sidebar/ComponentListPanel.vue';
 export { default as LayerPanel } from './layouts/sidebar/layer/LayerPanel.vue';
+export { default as LayerNodeContent } from './layouts/sidebar/layer/LayerNodeContent.vue';
 export { default as CodeSelect } from './fields/CodeSelect.vue';
 export { default as CodeSelectCol } from './fields/CodeSelectCol.vue';
 export { default as DataSourceFields } from './fields/DataSourceFields.vue';

package/src/layouts/CodeEditor.vue

@@ -194,6 +194,9 @@ const values = ref('');
 const loading = ref(false);
 const codeEditorEl = useTemplateRef<HTMLDivElement>('codeEditor');
 
+// 组件是否已卸载，避免异步初始化过程中组件被销毁后继续创建编辑器
+let destroyed = false;
+
 const resizeObserver = new globalThis.ResizeObserver(
   throttle((): void => {
     vsEditor?.layout();
@@ -254,11 +257,18 @@ const handleKeyDown = (e: KeyboardEvent) => {
   }
 };
 
+// 判断容器是否仍然有效：组件未卸载、ref 存在且已挂载到文档树中
+// Monaco 在创建编辑器时会向上遍历 parentNode 判断是否处于 shadow DOM，
+// 若容器为 null 或已从文档树脱离，将抛出 "Cannot read properties of null (reading 'parentNode')"
+const isEditorElValid = () => !destroyed && !!codeEditorEl.value && codeEditorEl.value.isConnected;
+
 const init = async () => {
-  if (!codeEditorEl.value) return;
+  if (!isEditorElValid()) return;
 
-  if (codeEditorEl.value.clientHeight === 0) {
+  if (codeEditorEl.value!.clientHeight === 0) {
     await nextTick();
+    // await 期间组件可能已被卸载或容器被移除
+    if (!isEditorElValid()) return;
   }
 
   // 重置缓存的额外高度，因为编辑器重新初始化
@@ -266,6 +276,11 @@ const init = async () => {
 
   monaco = await loadMonaco();
 
+  // 加载 monaco 是异步过程，期间组件可能已被卸载或容器被移除
+  if (!isEditorElValid()) return;
+
+  const editorEl = codeEditorEl.value!;
+
   const options = {
     value: values.value,
     language: props.language,
@@ -275,7 +290,7 @@ const init = async () => {
   };
 
   if (props.type === 'diff') {
-    vsDiffEditor = await getEditorConfig('customCreateMonacoDiffEditor')(monaco!, codeEditorEl.value, options);
+    vsDiffEditor = await getEditorConfig('customCreateMonacoDiffEditor')(monaco!, editorEl, options);
 
     // 监听diff编辑器内容变化
     vsDiffEditor.getModifiedEditor().onDidChangeModelContent(() => {
@@ -285,7 +300,7 @@ const init = async () => {
       }
     });
   } else {
-    vsEditor = await getEditorConfig('customCreateMonacoEditor')(monaco!, codeEditorEl.value, options);
+    vsEditor = await getEditorConfig('customCreateMonacoEditor')(monaco!, editorEl, options);
 
     // 监听编辑器内容变化
     vsEditor.onDidChangeModelContent(() => {
@@ -296,10 +311,19 @@ const init = async () => {
     });
   }
 
+  // 编辑器创建可能是异步的，创建完成后若组件已卸载则立即销毁，避免内存泄漏
+  if (destroyed) {
+    vsEditor?.dispose();
+    vsDiffEditor?.dispose();
+    vsEditor = null;
+    vsDiffEditor = null;
+    return;
+  }
+
   setEditorValue(props.initValues, props.modifiedValues);
 
   emit('initd', vsEditor);
-  codeEditorEl.value.addEventListener('keydown', handleKeyDown);
+  editorEl.addEventListener('keydown', handleKeyDown);
 
   if (props.type !== 'diff' && props.autoSave) {
     vsEditor?.onDidBlurEditorWidget(() => {
@@ -311,7 +335,7 @@ const init = async () => {
     });
   }
 
-  resizeObserver.observe(codeEditorEl.value);
+  resizeObserver.observe(editorEl);
 };
 
 watch(
@@ -362,6 +386,8 @@ onMounted(async () => {
 });
 
 onBeforeUnmount(() => {
+  destroyed = true;
+
   resizeObserver.disconnect();
 
   vsEditor?.dispose();