@tmagic/editor 1.2.0-beta.4 → 1.2.0-beta.6

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.0-beta.4",
+  "version": "1.2.0-beta.6",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -45,12 +45,12 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.2.0-beta.4",
-    "@tmagic/design": "1.2.0-beta.4",
-    "@tmagic/form": "1.2.0-beta.4",
-    "@tmagic/schema": "1.2.0-beta.4",
-    "@tmagic/stage": "1.2.0-beta.4",
-    "@tmagic/utils": "1.2.0-beta.4",
+    "@tmagic/core": "1.2.0-beta.6",
+    "@tmagic/design": "1.2.0-beta.6",
+    "@tmagic/form": "1.2.0-beta.6",
+    "@tmagic/schema": "1.2.0-beta.6",
+    "@tmagic/stage": "1.2.0-beta.6",
+    "@tmagic/utils": "1.2.0-beta.6",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -62,8 +62,8 @@
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.2.0-beta.4",
-    "@tmagic/form": "1.2.0-beta.4",
+    "@tmagic/design": "1.2.0-beta.6",
+    "@tmagic/form": "1.2.0-beta.6",
     "monaco-editor": "^0.34.0",
     "vue": "^3.2.37"
   },

package/src/layouts/Framework.vue

@@ -10,7 +10,7 @@
       @save="saveCode"
     ></magic-code-editor>
 
-    <layout
+    <Layout
       v-else
       class="m-editor-content"
       left-class="m-editor-framework-left"
@@ -29,21 +29,21 @@
       <template #center>
         <slot v-if="pageLength > 0" name="workspace"></slot>
         <slot v-else name="empty">
-          <add-page-box></add-page-box>
+          <AddPageBox></AddPageBox>
         </slot>
       </template>
 
-      <template v-if="pageLength > 0" #right>
+      <template v-if="pageLength > 0 && nodes.length === 1" #right>
         <TMagicScrollbar>
           <slot name="props-panel"></slot>
         </TMagicScrollbar>
       </template>
-    </layout>
+    </Layout>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref, watchEffect } from 'vue';
+import { computed, inject, ref, watch } from 'vue';
 
 import { TMagicScrollbar } from '@tmagic/design';
 import type { MApp } from '@tmagic/schema';
@@ -68,27 +68,65 @@ withDefaults(
 const { editorService, uiService } = inject<Services>('services') || {};
 
 const root = computed(() => editorService?.get<MApp>('root'));
+const nodes = computed(() => editorService?.get<Node[]>('nodes') || []);
 
 const pageLength = computed(() => editorService?.get<number>('pageLength') || 0);
 const showSrc = computed(() => uiService?.get<boolean>('showSrc'));
+
+const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';
+const RIGHT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorRightColumnWidthData';
+
+const leftColumnWidthCacheData = Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY));
+const RightColumnWidthCacheData = Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY));
+
 const columnWidth = ref<Partial<GetColumnWidth>>({
-  left: DEFAULT_LEFT_COLUMN_WIDTH,
+  left: leftColumnWidthCacheData,
   center: 0,
-  right: 0,
-});
-uiService?.set('columnWidth', columnWidth.value);
-
-watchEffect(() => {
-  if (pageLength.value <= 0) {
-    columnWidth.value.right = undefined;
-    columnWidth.value.center = globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH;
-  } else {
-    columnWidth.value.right = columnWidth.value.right || DEFAULT_RIGHT_COLUMN_WIDTH;
-    columnWidth.value.center =
-      globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH - DEFAULT_RIGHT_COLUMN_WIDTH;
-  }
+  right: RightColumnWidthCacheData,
 });
 
+watch(
+  pageLength,
+  (length) => {
+    const left = columnWidth.value.left || DEFAULT_LEFT_COLUMN_WIDTH;
+
+    columnWidth.value.left = left;
+
+    if (length <= 0) {
+      columnWidth.value.right = undefined;
+      columnWidth.value.center = globalThis.document.body.clientWidth - left;
+    } else {
+      const right = columnWidth.value.right || RightColumnWidthCacheData || DEFAULT_RIGHT_COLUMN_WIDTH;
+      columnWidth.value.right = right;
+      columnWidth.value.center = globalThis.document.body.clientWidth - left - right;
+    }
+
+    uiService?.set('columnWidth', columnWidth);
+  },
+  {
+    immediate: true,
+  },
+);
+
+watch(
+  () => columnWidth.value.right,
+  (right) => {
+    if (typeof right === 'undefined') return;
+    globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${right}`);
+  },
+);
+
+watch(
+  () => columnWidth.value.left,
+  (left) => {
+    globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${left}`);
+  },
+);
+
+const columnWidthChange = (columnWidth: GetColumnWidth) => {
+  uiService?.set('columnWidth', columnWidth);
+};
+
 const saveCode = (value: string) => {
   try {
     // eslint-disable-next-line no-eval
@@ -97,21 +135,4 @@ const saveCode = (value: string) => {
     console.error(e);
   }
 };
-
-const COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorColumnWidthData';
-
-const columnWidthCacheData = globalThis.localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY);
-if (columnWidthCacheData) {
-  try {
-    const columnWidthCache = JSON.parse(columnWidthCacheData);
-    columnWidth.value = columnWidthCache;
-  } catch (e) {
-    console.error(e);
-  }
-}
-
-const columnWidthChange = (columnWidth: GetColumnWidth) => {
-  uiService?.set('columnWidth', columnWidth);
-  globalThis.localStorage.setItem(COLUMN_WIDTH_STORAGE_KEY, JSON.stringify(columnWidth));
-};
 </script>

package/src/layouts/Layout.vue

@@ -74,8 +74,13 @@ const center = ref(0);
 
 const changeLeft = (deltaX: number) => {
   if (typeof props.left === 'undefined') return;
-  const left = Math.max(props.left + deltaX, props.minLeft) || 0;
+  let left = Math.max(props.left + deltaX, props.minLeft) || 0;
   emit('update:left', left);
+
+  if (clientWidth - left - (props.right || 0) <= 0) {
+    left = props.left;
+  }
+
   center.value = clientWidth - left - (props.right || 0);
 
   emit('change', {
@@ -87,8 +92,13 @@ const changeLeft = (deltaX: number) => {
 
 const changeRight = (deltaX: number) => {
   if (typeof props.right === 'undefined') return;
-  const right = Math.max(props.right - deltaX, props.minRight) || 0;
+  let right = Math.max(props.right - deltaX, props.minRight) || 0;
   emit('update:right', right);
+
+  if (clientWidth - (props.left || 0) - right <= 0) {
+    right = props.right;
+  }
+
   center.value = clientWidth - (props.left || 0) - right;
 
   emit('change', {

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -4,11 +4,11 @@
 
     <TMagicCollapse class="ui-component-panel" :model-value="collapseValue">
       <TMagicInput
-        prefix-icon="el-icon-search"
         placeholder="输入关键字进行过滤"
         class="search-input"
         size="small"
         clearable
+        :prefix-icon="Search"
         v-model="searchText"
       />
       <template v-for="(group, index) in list">
@@ -40,7 +40,7 @@
 
 <script lang="ts" setup>
 import { computed, inject, ref } from 'vue';
-import { Grid } from '@element-plus/icons-vue';
+import { Grid, Search } from '@element-plus/icons-vue';
 import serialize from 'serialize-javascript';
 
 import { TMagicCollapse, TMagicCollapseItem, TMagicInput, TMagicScrollbar, TMagicTooltip } from '@tmagic/design';

package/src/layouts/sidebar/LayerPanel.vue

@@ -7,16 +7,18 @@
     <slot name="layer-panel-header"></slot>
 
     <TMagicInput
-      class="filterInput"
+      v-model="filterText"
+      class="search-input"
       size="small"
       placeholder="输入关键字进行过滤"
       clearable
-      v-model="filterText"
+      :prefix-icon="Search"
       @change="filterTextChangeHandler"
     ></TMagicInput>
 
     <TMagicTree
       v-if="values.length"
+      class="magic-editor-layer-tree"
       ref="tree"
       node-key="id"
       empty-text="页面空荡荡的"
@@ -64,7 +66,8 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref, watch } from 'vue';
+import { computed, inject, nextTick, ref, watch } from 'vue';
+import { Search } from '@element-plus/icons-vue';
 import KeyController from 'keycon';
 import { throttle } from 'lodash-es';
 
@@ -204,8 +207,16 @@ const filterTextChangeHandler = (val: string) => {
   tree.value?.filter(val);
 };
 
-// 展开树节点
-const expandNodes = () => {
+// 树节点更新后展开上次展开过的节点
+const expandNodes = async () => {
+  if (!tree.value) return;
+  await nextTick();
+  tree.value &&
+    Object.entries(tree.value.getStore().nodesMap).forEach(([id, node]: [string, any]) => {
+      if (node.expanded && node.data.items) {
+        expandedKeys.set(id, id);
+      }
+    });
   expandedKeys.forEach((key) => {
     if (!tree.value) return;
     tree.value.getNode(key)?.expand();
@@ -213,28 +224,9 @@ const expandNodes = () => {
 };
 
 watch(
-  () => editorService?.get('nodes'),
+  () => editorService?.get<MNode[]>('nodes'),
   (nodes) => {
-    if (!tree.value) return;
-    if (!editorService) return;
-    if (!nodes) return;
-    selectedNodes.value = nodes as unknown as MNode[];
-
-    const parent = editorService.get('parent');
-    if (!parent?.id) return;
-
-    const treeNode = tree.value.getNode(parent.id);
-    treeNode?.updateChildren();
-
-    setTimeout(() => {
-      tree.value &&
-        Object.entries(tree.value.getStore().nodesMap).forEach(([id, node]: [string, any]) => {
-          if (node.expanded && node.data.items) {
-            expandedKeys.set(id, id);
-          }
-        });
-      expandNodes();
-    });
+    selectedNodes.value = nodes ?? [];
   },
 );
 
@@ -255,7 +247,16 @@ const setTreeKeyStatus = () => {
   }
 };
 
-watch(selectedIds, () => {
+watch([selectedIds, tree], async () => {
+  if (!tree.value || !editorService) return;
+  const parent = editorService.get('parent');
+  if (!parent?.id) return;
+
+  const treeNode = tree.value.getNode(parent.id);
+  treeNode?.updateChildren();
+  await expandNodes();
+
+  // 设置高亮节点操作一定要在刷新展开状态之后，否则可能导致设置的高亮无效
   setTreeKeyStatus();
 });
 

package/src/services/editor.ts

@@ -484,10 +484,10 @@ class Editor extends BaseService {
     parentNodeItems[index] = newConfig;
 
     // 将update后的配置更新到nodes中
-    const nodes = this.get('nodes');
+    const nodes = this.get<MNode[]>('nodes') || [];
     const targetIndex = nodes.findIndex((nodeItem: MNode) => `${nodeItem.id}` === `${newConfig.id}`);
     nodes.splice(targetIndex, 1, newConfig);
-    this.set('nodes', nodes);
+    this.set('nodes', [...nodes]);
 
     this.get<StageCore | null>('stage')?.update({
       config: cloneDeep(newConfig),

package/src/theme/component-list-panel.scss

@@ -1,11 +1,11 @@
 .ui-component-panel {
   height: 100%;
   border-top: 0 !important;
-  margin-top: 50px;
+  margin-top: 48px;
   background-color: $--sidebar-content-background-color;
 
   .search-input {
-    background: #f8fbff;
+    background: #fff;
     color: #bbbbbb;
     padding: 10px;
     position: absolute;
@@ -15,11 +15,7 @@
     z-index: 1;
 
     .el-input__prefix {
-      padding: 10px;
-    }
-
-    .el-input__suffix {
-      padding: 10px 5px;
+      padding: 7px;
     }
   }
 

package/src/theme/layer-panel.scss

@@ -10,10 +10,15 @@
     left: 0;
     z-index: 1;
 
-    .el-input__suffix {
-      padding: 10px 5px;
+    .el-input__prefix {
+      padding: 7px;
     }
   }
+
+  .magic-editor-layer-tree {
+    padding-top: 48px;
+  }
+
   .node-content {
     flex: 1;
     display: flex;

package/src/utils/stage.ts

@@ -46,6 +46,7 @@ export const useStage = (stageOptions: StageOptions) => {
   ]);
 
   stage.on('select', (el: HTMLElement) => {
+    if (`${editorService.get('node')?.id}` === el.id) return;
     editorService.select(el.id);
   });
 

package/types/layouts/sidebar/LayerPanel.vue.d.ts

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 declare const _default: {
     new (...args: any[]): {
         $: import("vue").ComponentInternalInstance;
@@ -34,7 +35,7 @@ declare const _default: {
             errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
         };
         $forceUpdate: () => void;
-        $nextTick: typeof import("vue").nextTick;
+        $nextTick: typeof nextTick;
         $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
     } & Readonly<import("vue").ExtractPropTypes<{}>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
     __isFragment?: undefined;