@tmagic/editor 1.5.4 → 1.5.6

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

@@ -119,10 +119,10 @@ class Dep extends BaseService {
       idleTask.once('finish', () => {
         this.emit('collected', nodes, deep);
         this.set('collecting', false);
-        resolve();
       });
       idleTask.once('hight-level-finish', () => {
         this.emit('ds-collected', nodes, deep);
+        resolve();
       });
     });
   }
@@ -130,11 +130,11 @@ class Dep extends BaseService {
   public collectNode(node: MNode, target: Target, depExtendedData: DepExtendedData = {}, deep = false) {
     // 先删除原有依赖，重新收集
     if (isPage(node)) {
-      Object.entries(target.deps).forEach(([depKey, dep]) => {
+      for (const [depKey, dep] of Object.entries(target.deps)) {
         if (dep.data?.pageId && dep.data.pageId === depExtendedData.pageId) {
           delete target.deps[depKey];
         }
-      });
+      }
     } else {
       this.watcher.removeTargetDep(target, node);
     }
@@ -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,

package/src/theme/style-setter/layout.scss

@@ -2,7 +2,7 @@
 .layout-box-container {
   position: relative;
   width: 100%;
-  height: 150px;
+  height: 130px;
 
   .help-txt {
     float: left;

package/src/utils/const.ts

@@ -0,0 +1,5 @@
+export const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';
+export const RIGHT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorRightColumnWidthData';
+
+export const DEFAULT_LEFT_COLUMN_WIDTH = 310;
+export const DEFAULT_RIGHT_COLUMN_WIDTH = 480;

package/src/utils/idle-task.ts

@@ -54,6 +54,7 @@ export class IdleTask<T = any> extends EventEmitter {
 
     this.hightLevelTaskList = [];
     this.taskList = [];
+    this.taskHandle = null;
   }
 
   public on<Name extends keyof IdleTaskEvents, Param extends IdleTaskEvents[Name]>(
@@ -80,7 +81,7 @@ export class IdleTask<T = any> extends EventEmitter {
     // 动画会占用空闲时间,当任务一直无法执行时，看看是否有动画正在播放
     // 根据空闲时间的多少来决定执行的任务数，保证页面不卡死的情况下尽量多执行任务，不然当任务数巨大时，执行时间会很久
     // 执行不完不会影响配置，但是会影响画布渲染
-    while (deadline.timeRemaining() > 0 && taskList.length) {
+    while (deadline.timeRemaining() > 0 && (taskList.length || hightLevelTaskList.length)) {
       const timeRemaining = deadline.timeRemaining();
       let times = 0;
       if (timeRemaining <= 5) {