@tmagic/editor 1.5.5 → 1.5.7

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.5",
+  "version": "1.5.7",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,39 +58,29 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.0",
     "sortablejs": "^1.15.2",
-    "@tmagic/design": "1.5.5",
-    "@tmagic/utils": "1.5.5",
-    "@tmagic/stage": "1.5.5",
-    "@tmagic/form": "1.5.5",
-    "@tmagic/table": "1.5.5"
+    "@tmagic/design": "1.5.7",
+    "@tmagic/form": "1.5.7",
+    "@tmagic/stage": "1.5.7",
+    "@tmagic/utils": "1.5.7",
+    "@tmagic/table": "1.5.7"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
     "@types/lodash-es": "^4.17.4",
-    "@types/node": "^18.19.0",
     "@types/serialize-javascript": "^5.0.1",
     "@types/sortablejs": "^1.15.8",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "@vue/compiler-sfc": "^3.5.12",
     "@vue/test-utils": "^2.4.6",
-    "rimraf": "^3.0.2",
-    "sass": "^1.83.0",
-    "tsc-alias": "^1.8.5",
-    "type-fest": "^4.10.3",
-    "vite": "^6.0.3"
+    "type-fest": "^4.10.3"
   },
   "peerDependencies": {
     "monaco-editor": "^0.48.0",
     "typescript": "*",
     "vue": ">=3.5.0",
-    "@tmagic/core": "1.5.5"
+    "@tmagic/core": "1.5.7"
   },
   "peerDependenciesMeta": {
     "typescript": {
       "optional": true
     }
-  },
-  "scripts": {
-    "build": "vite build"
   }
 }

package/src/components/SplitView.vue

@@ -45,7 +45,7 @@ const props = withDefaults(
     centerClass?: string;
   }>(),
   {
-    minLeft: 46,
+    minLeft: 1,
     minRight: 1,
     minCenter: 5,
   },
@@ -65,12 +65,21 @@ const getCenterWidth = (l = 0, r = 0) => {
   let center = clientWidth - left - right;
 
   if (center < props.minCenter) {
+    const diff = props.minCenter - center;
+
     center = props.minCenter;
-    if (right > center + props.minRight) {
-      right = clientWidth - left - center;
-    } else {
+
+    if (right - diff < props.minRight) {
       right = props.minRight;
-      left = clientWidth - right - center;
+    } else {
+      right -= diff;
+    }
+
+    left = clientWidth - right - center;
+
+    if (left < props.minLeft) {
+      left -= diff / 2;
+      right -= diff / 2;
     }
   }
   return {
@@ -86,8 +95,8 @@ const widthChange = (width: number) => {
   }
 
   clientWidth = width;
-  let left = props.left || 0;
-  let right = props.right || 0;
+  let left = props.left || props.minLeft || 0;
+  let right = props.right || props.minRight || 0;
 
   if (left > clientWidth) {
     left = clientWidth / 3;

package/src/fields/StyleSetter/Index.vue

@@ -27,7 +27,7 @@ defineOptions({
   name: 'MFieldsStyleSetter',
 });
 
-defineProps<FieldProps<StyleSchema>>();
+const props = defineProps<FieldProps<StyleSchema>>();
 
 const emit = defineEmits<{
   change: [v: any, eventData: ContainerChangeEventData];
@@ -64,6 +64,9 @@ const collapseValue = shallowRef(
 );
 
 const change = (v: any, eventData: ContainerChangeEventData) => {
+  eventData.changeRecords?.forEach((record) => {
+    record.propPath = `${props.name}.${record.propPath}`;
+  });
   emit('change', v, eventData);
 };
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <MContainer :config="config" :model="values" @change="change"></MContainer>
-  <Box :model="values" @change="change"></Box>
+  <Box v-show="!['fixed', 'absolute'].includes(values.position)" :model="values" @change="change"></Box>
 </template>
 
 <script lang="ts" setup>
@@ -125,7 +125,7 @@ const config = {
         },
         {
           name: 'height',
-          text: '宽度',
+          text: '高度',
           labelWidth: '68px',
           type: 'data-source-field-select',
           fieldConfig: {
@@ -135,25 +135,41 @@ const config = {
       ],
     },
     {
-      type: 'data-source-field-select',
-      text: 'overflow',
-      name: 'overflow',
-      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',
+          },
+        },
+      ],
     },
   ],
 };

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

@@ -1,15 +1,12 @@
 <template>
   <MContainer :config="config" :model="values" @change="change"></MContainer>
-  <Position v-show="values['position'] !== 'static'" :model="values" @change="change"></Position>
 </template>
 
 <script lang="ts" setup>
 import { ContainerChangeEventData, MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
-import Position from '../components/Position.vue';
-
-defineProps<{ values: Partial<StyleSchema> }>();
+const props = defineProps<{ values: Partial<StyleSchema> }>();
 
 const emit = defineEmits<{
   change: [v: string | StyleSchema, eventData: ContainerChangeEventData];
@@ -30,6 +27,52 @@ const config = {
         })),
       },
     },
+    {
+      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',
+          },
+        },
+      ],
+    },
+    {
+      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',
+          },
+        },
+      ],
+    },
     {
       labelWidth: '68px',
       name: 'zIndex',

package/src/initService.ts

@@ -45,6 +45,7 @@ export const initServiceState = (
     codeBlockService,
     keybindingService,
     dataSourceService,
+    depService,
   }: Services,
 ) => {
   // 初始值变化，重新设置节点信息
@@ -203,6 +204,7 @@ export const initServiceState = (
     componentListService.resetState();
     codeBlockService.resetState();
     keybindingService.reset();
+    depService.reset();
   });
 };
 
@@ -265,10 +267,6 @@ export const initServiceEvents = (
     if (app.dsl) {
       app.dsl.dataSources = root.dataSources;
     }
-
-    if (root.dataSources) {
-      app.dataSourceManager?.updateSchema(root.dataSources);
-    }
   };
 
   const dsDepCollectedHandler = async () => {
@@ -459,13 +457,39 @@ export const initServiceEvents = (
   const dataSourceAddHandler = async (config: DataSourceSchema) => {
     initDataSourceDepTarget(config);
     const app = await getTMagicApp();
-    app?.dataSourceManager?.addDataSource(config);
+
+    if (!app?.dataSourceManager) {
+      return;
+    }
+
+    app.dataSourceManager.addDataSource(config);
+
+    const newDs = app.dataSourceManager.get(config.id);
+
+    if (newDs) {
+      app.dataSourceManager.init(newDs);
+    }
   };
 
   const dataSourceUpdateHandler = async (
     config: DataSourceSchema,
     { changeRecords }: { changeRecords: ChangeRecord[] },
   ) => {
+    const updateDsData = async () => {
+      const app = await getTMagicApp();
+
+      if (!app?.dataSourceManager) {
+        return;
+      }
+
+      const ds = app.dataSourceManager.get(config.id);
+
+      if (!ds) return;
+
+      ds.setFields(config.fields);
+      ds.setData(config.mocks?.find((mock) => mock.useInEditor)?.data || ds.getDefaultData());
+    };
+
     let needRecollectDep = false;
     let isModifyField = false;
     let isModifyMock = false;
@@ -515,12 +539,12 @@ export const initServiceEvents = (
         }
         Promise.all(collectIdlePromises).then(() => {
           updateDataSourceSchema();
+          updateDsData();
           updateStageNodes(root.items);
         });
       }
     } else if (root?.dataSources) {
-      const app = await getTMagicApp();
-      app?.dataSourceManager?.updateSchema(root.dataSources);
+      updateDsData();
     }
   };
 
@@ -530,20 +554,28 @@ export const initServiceEvents = (
     depService.removeTarget(id, DepTargetType.DATA_SOURCE_METHOD);
   };
 
-  const dataSourceRemoveHandler = (id: string) => {
+  const dataSourceRemoveHandler = async (id: string) => {
     const root = editorService.get('root');
-    const nodeIds = Object.keys(root?.dataSourceDeps?.[id] || {});
-    const nodes = getNodes(nodeIds, root?.items);
 
-    Promise.all([
+    if (!root) {
+      return;
+    }
+
+    const nodeIds = Object.keys(root.dataSourceDeps?.[id] || {});
+    const nodes = getNodes(nodeIds, root.items);
+
+    await Promise.all([
       collectIdle(nodes, false, DepTargetType.DATA_SOURCE),
       collectIdle(nodes, false, DepTargetType.DATA_SOURCE_COND),
       collectIdle(nodes, false, DepTargetType.DATA_SOURCE_METHOD),
-    ]).then(() => {
-      updateDataSourceSchema();
-      updateStageNodes(nodes);
-    });
+    ]);
+
+    updateDataSourceSchema();
 
+    const app = await getTMagicApp();
+    app?.dataSourceManager?.removeDataSource(id);
+
+    updateStageNodes(nodes);
     removeDataSourceTarget(id);
   };
 

package/src/layouts/Framework.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor" ref="content" style="min-width: 180px">
+  <div class="m-editor" ref="content" style="min-width: 900px">
     <slot name="header"></slot>
 
     <slot name="nav"></slot>
@@ -17,11 +17,11 @@
       left-class="m-editor-framework-left"
       center-class="m-editor-framework-center"
       right-class="m-editor-framework-right"
-      v-model:left="columnWidth.left"
-      v-model:right="columnWidth.right"
-      :min-left="65"
-      :min-right="420"
-      :min-center="100"
+      :left="columnWidth.left"
+      :right="columnWidth.right"
+      :min-left="200"
+      :min-right="300"
+      :min-center="400"
       :width="frameworkRect?.width || 0"
       @change="columnWidthChange"
     >
@@ -60,13 +60,18 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
+import { computed, inject, onBeforeUnmount, onMounted, useTemplateRef, watch } from 'vue';
 
 import type { MPage, MPageFragment } from '@tmagic/core';
 
 import SplitView from '@editor/components/SplitView.vue';
 import type { FrameworkSlots, GetColumnWidth, PageBarSortOptions, Services } from '@editor/type';
 import { getEditorConfig } from '@editor/utils/config';
+import {
+  DEFAULT_LEFT_COLUMN_WIDTH,
+  LEFT_COLUMN_WIDTH_STORAGE_KEY,
+  RIGHT_COLUMN_WIDTH_STORAGE_KEY,
+} from '@editor/utils/const';
 
 import PageBar from './page-bar/PageBar.vue';
 import AddPageBox from './AddPageBox.vue';
@@ -84,9 +89,6 @@ defineProps<{
   pageFilterFunction?: (page: MPage | MPageFragment, keyword: string) => boolean;
 }>();
 
-const DEFAULT_LEFT_COLUMN_WIDTH = 310;
-const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
-
 const codeOptions = inject('codeOptions', {});
 const { editorService, uiService } = inject<Services>('services') || {};
 
@@ -99,20 +101,14 @@ const page = computed(() => editorService?.get('page'));
 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';
-
-const getLeftColumnWidthCacheData = () =>
-  Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH;
-
-const getRightColumnWidthCacheData = () =>
-  Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH;
-
-const columnWidth = ref<Partial<GetColumnWidth>>({
-  left: getLeftColumnWidthCacheData(),
-  center: 0,
-  right: getRightColumnWidthCacheData(),
-});
+const columnWidth = computed(
+  () =>
+    uiService?.get('columnWidth') || {
+      left: 0,
+      center: 0,
+      right: 0,
+    },
+);
 
 watch(pageLength, () => {
   splitViewRef.value?.updateWidth();
@@ -121,13 +117,16 @@ watch(pageLength, () => {
 watch(
   () => uiService?.get('hideSlideBar'),
   (hideSlideBar) => {
-    columnWidth.value.left = hideSlideBar ? 0 : getLeftColumnWidthCacheData();
+    uiService?.set('columnWidth', {
+      ...columnWidth.value,
+      left: hideSlideBar
+        ? 0
+        : Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH,
+    });
   },
 );
 
 const columnWidthChange = (columnW: GetColumnWidth) => {
-  columnWidth.value = columnW;
-
   globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${columnW.left}`);
   globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${columnW.right}`);
   uiService?.set('columnWidth', columnW);

package/src/layouts/props-panel/PropsPanel.vue

@@ -41,10 +41,9 @@
     </FormPanel>
 
     <TMagicButton
-      v-if="!showStylePanel"
+      v-if="showStylePanelToggleButton && !showStylePanel"
       class="m-editor-props-panel-style-icon"
       circle
-      :type="showStylePanel ? 'primary' : ''"
       @click="showStylePanelHandler"
     >
       <MIcon :icon="Sugar"></MIcon>
@@ -53,18 +52,20 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onBeforeUnmount, ref, useTemplateRef, watchEffect } from 'vue';
+import { computed, inject, onBeforeUnmount, ref, useTemplateRef, watch, watchEffect } from 'vue';
 import { Close, Sugar } from '@element-plus/icons-vue';
 import type { OnDrag } from 'gesto';
 
-import type { MNode } from '@tmagic/core';
+import { type MNode } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
 import type { ContainerChangeEventData, FormState, FormValue } from '@tmagic/form';
+import { setValueByKeyPath } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
 import Resizer from '@editor/components/Resizer.vue';
 import type { PropsPanelSlots, Services } from '@editor/type';
 import { styleTabConfig } from '@editor/utils';
+import { RIGHT_COLUMN_WIDTH_STORAGE_KEY } from '@editor/utils/const';
 
 import FormPanel from './FormPanel.vue';
 import { useStylePanel } from './use-style-panel';
@@ -136,6 +137,12 @@ const submit = async (v: MNode, eventData?: ContainerChangeEventData) => {
           newValue.style[key] = value;
         }
       });
+
+      eventData?.changeRecords?.forEach((record) => {
+        if (record.propPath?.startsWith('style') && record.value === '') {
+          setValueByKeyPath(record.propPath, record.value, newValue);
+        }
+      });
     }
 
     services?.editorService.update(newValue, { changeRecords: eventData?.changeRecords });
@@ -156,17 +163,55 @@ const mountedHandler = () => {
 
 const propsPanelEl = useTemplateRef('propsPanel');
 const widthChange = ({ deltaX }: OnDrag) => {
-  if (!propsPanelEl.value) {
+  if (!propsPanelEl.value || !services) {
     return;
   }
 
   const width = globalThis.parseFloat(
     getComputedStyle(propsPanelEl.value).getPropertyValue('--props-style-panel-width'),
   );
-  propsPanelEl.value.style.setProperty('--props-style-panel-width', `${width - deltaX}px`);
+
+  let value = width - deltaX;
+  if (value > services.uiService.get('columnWidth').right) {
+    value = services.uiService.get('columnWidth').right - 40;
+  }
+  propsPanelEl.value.style.setProperty('--props-style-panel-width', `${value}px`);
 };
 
-const { showStylePanel, showStylePanelHandler, closeStylePanelHandler } = useStylePanel(services);
+const { showStylePanel, showStylePanelToggleButton, showStylePanelHandler, closeStylePanelHandler } =
+  useStylePanel(services);
+
+watch(showStylePanel, (showStylePanel) => {
+  if (!propsPanelEl.value || !services) {
+    return;
+  }
+
+  const columnWidth = {
+    ...services.uiService.get('columnWidth'),
+  };
+
+  const width = globalThis.parseFloat(
+    getComputedStyle(propsPanelEl.value).getPropertyValue('--props-style-panel-width'),
+  );
+
+  if (showStylePanel) {
+    columnWidth.right += width;
+    columnWidth.center -= width;
+  } else {
+    columnWidth.right -= width;
+    columnWidth.center += width;
+  }
+
+  if (columnWidth.center < 0) {
+    columnWidth.right = columnWidth.right + columnWidth.center - 400;
+    columnWidth.center = 400;
+
+    propsPanelEl.value.style.setProperty('--props-style-panel-width', `${columnWidth.right / 2}px`);
+  }
+
+  globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${columnWidth.right}`);
+  services.uiService.set('columnWidth', columnWidth);
+});
 
 const propertyFormPanelRef = useTemplateRef<InstanceType<typeof FormPanel>>('propertyFormPanel');
 defineExpose({

package/src/layouts/props-panel/use-style-panel.ts

@@ -8,14 +8,24 @@ export const useStylePanel = (services?: Services) => {
   const showStylePanelStorageValue = services?.storageService.getItem(showStylePanelStorageKey, {
     protocol: Protocol.BOOLEAN,
   });
+
   if (typeof showStylePanelStorageValue === 'boolean') {
     services?.uiService.set('showStylePanel', showStylePanelStorageValue);
   }
-  const showStylePanel = computed(() => services?.uiService.get('showStylePanel') ?? true);
+
+  const showStylePanel = computed(
+    () => showStylePanelToggleButton.value && (services?.uiService.get('showStylePanel') ?? true),
+  );
+
+  const showStylePanelToggleButton = computed(
+    () => !(services && services.uiService.get('frameworkRect').width < 1280),
+  );
+
   const showStylePanelHandler = () => {
     services?.uiService.set('showStylePanel', true);
     services?.storageService.setItem(showStylePanelStorageKey, true, { protocol: Protocol.BOOLEAN });
   };
+
   const closeStylePanelHandler = () => {
     services?.uiService.set('showStylePanel', false);
     services?.storageService.setItem(showStylePanelStorageKey, false, { protocol: Protocol.BOOLEAN });
@@ -23,6 +33,7 @@ export const useStylePanel = (services?: Services) => {
 
   return {
     showStylePanel,
+    showStylePanelToggleButton,
     showStylePanelHandler,
     closeStylePanelHandler,
   };

package/src/services/dep.ts

@@ -176,6 +176,23 @@ class Dep extends BaseService {
     return super.once(eventName, listener as any);
   }
 
+  public reset() {
+    idleTask.removeAllListeners();
+    idleTask.clearTasks();
+
+    for (const type of Object.keys(this.watcher.getTargetsList())) {
+      this.removeTargets(type);
+    }
+
+    this.set('collecting', false);
+  }
+
+  public destroy() {
+    this.removeAllListeners();
+    this.reset();
+    this.removeAllPlugins();
+  }
+
   public emit<Name extends keyof DepEvents, Param extends DepEvents[Name]>(eventName: Name, ...args: Param) {
     return super.emit(eventName, ...args);
   }

package/src/services/ui.ts

@@ -23,6 +23,12 @@ import { convertToNumber } from '@tmagic/utils';
 
 import editorService from '@editor/services/editor';
 import type { AsyncHookPlugin, StageRect, UiState } from '@editor/type';
+import {
+  DEFAULT_LEFT_COLUMN_WIDTH,
+  DEFAULT_RIGHT_COLUMN_WIDTH,
+  LEFT_COLUMN_WIDTH_STORAGE_KEY,
+  RIGHT_COLUMN_WIDTH_STORAGE_KEY,
+} from '@editor/utils/const';
 
 import BaseService from './BaseService';
 
@@ -40,9 +46,9 @@ const state = shallowReactive<UiState>({
     height: 817,
   },
   columnWidth: {
-    left: 0,
-    right: 0,
+    left: Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH,
     center: 0,
+    right: Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH,
   },
   showGuides: true,
   showRule: true,