@tmagic/editor 1.5.0-beta.9 → 1.5.1

package/src/services/editor.ts

@@ -20,10 +20,20 @@ import { reactive, toRaw } from 'vue';
 import { cloneDeep, get, isObject, mergeWith, uniq } from 'lodash-es';
 import type { Writable } from 'type-fest';
 
-import type { Id, MApp, MComponent, MContainer, MNode, MPage, MPageFragment, TargetOptions } from '@tmagic/core';
+import type { Id, MApp, MContainer, MNode, MPage, MPageFragment, TargetOptions } from '@tmagic/core';
 import { NodeType, Target, Watcher } from '@tmagic/core';
+import type { ChangeRecord } from '@tmagic/form';
 import { isFixed } from '@tmagic/stage';
-import { calcValueByFontsize, getElById, getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
+import {
+  calcValueByFontsize,
+  getElById,
+  getNodeInfo,
+  getNodePath,
+  isNumber,
+  isPage,
+  isPageFragment,
+  isPop,
+} from '@tmagic/utils';
 
 import BaseService from '@editor/services//BaseService';
 import propsService from '@editor/services//props';
@@ -59,7 +69,7 @@ export interface EditorEvents {
   select: [node: MNode | null];
   add: [nodes: MNode[]];
   remove: [nodes: MNode[]];
-  update: [nodes: MNode[]];
+  update: [nodes: { newNode: MNode; oldNode: MNode; changeRecords?: ChangeRecord[] }[]];
   'move-layer': [offset: number | LayerOffset];
   'drag-to': [data: { targetIndex: number; configs: MNode | MNode[]; targetParent: MContainer }];
   'history-change': [data: MPage | MPageFragment];
@@ -175,36 +185,7 @@ class Editor extends BaseService {
       root = toRaw(root);
     }
 
-    const info: EditorNodeInfo = {
-      node: null,
-      parent: null,
-      page: null,
-    };
-
-    if (!root) return info;
-
-    if (id === root.id) {
-      info.node = root;
-      return info;
-    }
-
-    const path = getNodePath(id, root.items);
-
-    if (!path.length) return info;
-
-    path.unshift(root);
-
-    info.node = path[path.length - 1] as MComponent;
-    info.parent = path[path.length - 2] as MContainer;
-
-    path.forEach((item) => {
-      if (isPage(item) || isPageFragment(item)) {
-        info.page = item as MPage | MPageFragment;
-        return;
-      }
-    });
-
-    return info;
+    return getNodeInfo(id, root);
   }
 
   /**
@@ -494,11 +475,11 @@ class Editor extends BaseService {
     if (isPage(node)) {
       this.state.pageLength -= 1;
 
-      await selectDefault(getPageList(root));
+      await selectDefault(rootItems);
     } else if (isPageFragment(node)) {
       this.state.pageFragmentLength -= 1;
 
-      await selectDefault(getPageFragmentList(root));
+      await selectDefault(rootItems);
     } else {
       await this.select(parent);
       stage?.select(parent.id);
@@ -529,7 +510,10 @@ class Editor extends BaseService {
     this.emit('remove', nodes);
   }
 
-  public async doUpdate(config: MNode) {
+  public async doUpdate(
+    config: MNode,
+    { changeRecords = [] }: { changeRecords?: ChangeRecord[] } = {},
+  ): Promise<{ newNode: MNode; oldNode: MNode; changeRecords?: ChangeRecord[] }> {
     const root = this.get('root');
     if (!root) throw new Error('root为空');
 
@@ -539,7 +523,7 @@ class Editor extends BaseService {
 
     if (!info.node) throw new Error(`获取不到id为${config.id}的节点`);
 
-    const node = cloneDeep(toRaw(info.node));
+    const node = toRaw(info.node);
 
     let newConfig = await this.toggleFixedPosition(toRaw(config), node, root);
 
@@ -561,7 +545,11 @@ class Editor extends BaseService {
 
     if (newConfig.type === NodeType.ROOT) {
       this.set('root', newConfig as MApp);
-      return newConfig;
+      return {
+        oldNode: node,
+        newNode: newConfig,
+        changeRecords,
+      };
     }
 
     const { parent } = info;
@@ -586,11 +574,7 @@ class Editor extends BaseService {
     nodes.splice(targetIndex, 1, newConfig);
     this.set('nodes', [...nodes]);
 
-    this.get('stage')?.update({
-      config: cloneDeep(newConfig),
-      parentId: parent.id,
-      root: cloneDeep(root),
-    });
+    // update后会触发依赖收集，收集完后会掉stage.update方法
 
     if (isPage(newConfig) || isPageFragment(newConfig)) {
       this.set('page', newConfig as MPage | MPageFragment);
@@ -598,7 +582,11 @@ class Editor extends BaseService {
 
     this.addModifiedNodeId(newConfig.id);
 
-    return newConfig;
+    return {
+      oldNode: node,
+      newNode: newConfig,
+      changeRecords,
+    };
   }
 
   /**
@@ -606,17 +594,20 @@ class Editor extends BaseService {
    * @param config 新的节点配置，配置中需要有id信息
    * @returns 更新后的节点配置
    */
-  public async update(config: MNode | MNode[]): Promise<MNode | MNode[]> {
+  public async update(
+    config: MNode | MNode[],
+    data: { changeRecords?: ChangeRecord[] } = {},
+  ): Promise<MNode | MNode[]> {
     const nodes = Array.isArray(config) ? config : [config];
 
-    const newNodes = await Promise.all(nodes.map((node) => this.doUpdate(node)));
+    const updateData = await Promise.all(nodes.map((node) => this.doUpdate(node, data)));
 
-    if (newNodes[0]?.type !== NodeType.ROOT) {
+    if (updateData[0].oldNode?.type !== NodeType.ROOT) {
       this.pushHistoryState();
     }
 
-    this.emit('update', newNodes);
-    return Array.isArray(config) ? newNodes : newNodes[0];
+    this.emit('update', updateData);
+    return Array.isArray(config) ? updateData.map((item) => item.newNode) : updateData[0].newNode;
   }
 
   /**
@@ -863,7 +854,7 @@ class Editor extends BaseService {
 
       const layout = await this.getLayout(target);
 
-      const newConfig = mergeWith(cloneDeep(node), config, (objValue, srcValue) => {
+      const newConfig = mergeWith(cloneDeep(node), config, (_objValue, srcValue) => {
         if (Array.isArray(srcValue)) {
           return srcValue;
         }
@@ -875,7 +866,11 @@ class Editor extends BaseService {
       await stage.select(targetId);
 
       const targetParent = this.getParentById(target.id);
-      await stage.update({ config: cloneDeep(target), parentId: targetParent?.id, root: cloneDeep(root) });
+      await stage.update({
+        config: cloneDeep(target),
+        parentId: targetParent?.id,
+        root: cloneDeep(root),
+      });
 
       await this.select(newConfig);
       stage.select(newConfig.id);

package/src/services/storage.ts

@@ -82,7 +82,8 @@ export class WebStorage extends BaseService {
       case Protocol.NUMBER:
         return Number(item);
       case Protocol.BOOLEAN:
-        return Boolean(item);
+        if (item === 'true') return true;
+        if (item === 'false') return false;
       default:
         return item;
     }

package/src/services/ui.ts

@@ -29,6 +29,7 @@ import BaseService from './BaseService';
 const state = reactive<UiState>({
   uiSelectMode: false,
   showSrc: false,
+  showStylePanel: true,
   zoom: 1,
   stageContainerRect: {
     width: 0,

package/src/theme/common/var.scss

@@ -1,14 +1,16 @@
-$--theme-color: #2882e0;
+$theme-color: #2882e0;
 
-$--font-color: #313a40;
-$--border-color: #d9dbdd;
-$--hover-color: #f3f5f9;
+$font-color: #313a40;
+$border-color: #d9dbdd;
+$hover-color: #f3f5f9;
 
-$--nav-height: 35px;
-$--nav-color: #313a40;
-$--nav--background-color: #ffffff;
+$nav-height: 35px;
+$nav-color: #313a40;
+$nav--background-color: #ffffff;
 
-$--sidebar-heder-background-color: $--theme-color;
-$--sidebar-content-background-color: #ffffff;
+$sidebar-heder-background-color: $theme-color;
+$sidebar-content-background-color: #ffffff;
 
-$--page-bar-height: 32px;
+$page-bar-height: 32px;
+
+$props-style-panel-width: 300px;

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

@@ -1,20 +1,22 @@
+@use "common/var" as *;
+
 .ui-component-panel {
   &.tmagic-design-collapse {
     border-top: 0 !important;
     margin-top: 48px;
-    background-color: $--sidebar-content-background-color;
+    background-color: $sidebar-content-background-color;
 
     .tmagic-design-collapse-item {
       > div:first-of-type {
-        border-bottom: 1px solid $--border-color;
+        border-bottom: 1px solid $border-color;
         margin-bottom: 10px;
       }
     }
 
     .el-collapse-item__header,
     .t-collapse-panel__header {
-      background: $--sidebar-content-background-color;
-      color: $--font-color;
+      background: $sidebar-content-background-color;
+      color: $font-color;
       height: 25px;
       line-height: 25px;
       padding-left: 10px;
@@ -28,7 +30,7 @@
 
     .el-collapse-item__wrap,
     .t-collapse-panel__body {
-      background: $--sidebar-content-background-color;
+      background: $sidebar-content-background-color;
       border-bottom: 0;
 
       .el-collapse-item__content,
@@ -44,7 +46,7 @@
         text-overflow: ellipsis;
         margin: 5px 10px;
         box-sizing: border-box;
-        color: $--font-color;
+        color: $font-color;
         flex-direction: column;
         width: 42px;
         cursor: pointer;
@@ -57,7 +59,7 @@
           line-height: 40px;
           border-radius: 5px;
           color: #909090;
-          border: 1px solid $--border-color;
+          border: 1px solid $border-color;
           display: flex;
           justify-content: space-evenly;
           align-items: center;

package/src/theme/content-menu.scss

@@ -1,3 +1,5 @@
+@use "common/var" as *;
+
 .magic-editor-content-menu {
   position: fixed;
   font-size: 12px;
@@ -29,7 +31,7 @@
 
     .el-button--text,
     i {
-      color: $--font-color;
+      color: $font-color;
     }
 
     .magic-editor-icon {
@@ -46,20 +48,20 @@
 
     &.button {
       &:hover {
-        background-color: $--hover-color;
+        background-color: $hover-color;
         .tmagic-design-button,
         .tmagic-design-button:active,
         .tmagic-design-button:focus {
-          color: $--font-color;
+          color: $font-color;
         }
 
         &.menu-item i {
-          color: $--font-color;
+          color: $font-color;
         }
       }
 
       &.active {
-        background-color: $--theme-color;
+        background-color: $theme-color;
         .tmagic-design-button,
         .tmagic-design-button:active,
         .tmagic-design-button:focus {

package/src/theme/data-source.scss

@@ -1,3 +1,5 @@
+@use "common/var" as *;
+
 .data-source-list-panel {
   .list-container {
     .list-item {
@@ -25,7 +27,7 @@
     padding: 5px 14px;
 
     &:hover {
-      background-color: $--hover-color;
+      background-color: $hover-color;
     }
   }
 }

package/src/theme/floating-box.scss

@@ -1,8 +1,10 @@
+@use "common/var" as *;
+
 .m-editor-float-box {
   position: absolute;
   background-color: #fff;
   z-index: 100;
-  border: 1px solid $--border-color;
+  border: 1px solid $border-color;
   display: flex;
   flex-direction: column;
   max-height: 100%;
@@ -17,7 +19,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px solid $--border-color;
+    border-bottom: 1px solid $border-color;
   }
 
   .m-editor-float-box-body {

package/src/theme/framework.scss

@@ -1,10 +1,12 @@
+@use "common/var" as *;
+
 .m-editor {
   display: flex;
   flex-direction: column;
   width: 100%;
 
   &-content {
-    height: calc(100% - #{$--nav-height});
+    height: calc(100% - #{$nav-height});
   }
 
   &-framework-center {
@@ -14,7 +16,7 @@
   }
 
   &-framework-left {
-    background-color: $--sidebar-content-background-color;
+    background-color: $sidebar-content-background-color;
   }
 
   &-framework-center .el-scrollbar__view {
@@ -32,7 +34,7 @@
       justify-content: center;
       align-items: center;
       flex-direction: column;
-      height: calc(100% - #{$--page-bar-height});
+      height: calc(100% - #{$page-bar-height});
     }
 
     &-content {
@@ -61,8 +63,8 @@
       }
 
       &:hover {
-        border-color: $--theme-color;
-        color: $--theme-color;
+        border-color: $theme-color;
+        color: $theme-color;
       }
     }
   }

package/src/theme/index.scss

@@ -1,8 +1,7 @@
-@import "@tmagic/design/src/theme/index.scss";
-@import "@tmagic/table/src/theme/index.scss";
-@import "@tmagic/form/src/theme/index.scss";
-@import "./common/var.scss";
-@import "./theme.scss";
+@use "@tmagic/design/src/theme/index.scss" as tMagicDesign;
+@use "@tmagic/table/src/theme/index.scss" as tMagicTable;
+@use "@tmagic/form/src/theme/index.scss" as tMagicForm;
+@use "./theme.scss";
 
 .fade-enter-active,
 .fade-leave-active {

package/src/theme/key-value.scss

@@ -11,10 +11,10 @@
   align-items: center;
 }
 
-.m-fileds-key-value-delimiter {
+.m-fields-key-value-delimiter {
   margin: 0 10px;
 }
 
-.m-fileds-key-value-delete {
+.m-fields-key-value-delete {
   margin-left: 10px;
 }

package/src/theme/layer-panel.scss

@@ -1,5 +1,7 @@
+@use "common/var" as *;
+
 .m-editor-layer-panel {
-  background: $--sidebar-content-background-color;
+  background: $sidebar-content-background-color;
 
   .m-editor-tree {
     padding-top: 48px;

package/src/theme/layout.scss

@@ -3,7 +3,7 @@
   display: flex;
   justify-self: space-between;
 
-  &:has(.m-editor-resizer-draging) {
+  &:has(.m-editor-resizer-dragging) {
     overflow: hidden;
   }
 }

package/src/theme/nav-menu.scss

@@ -1,3 +1,5 @@
+@use "common/var" as *;
+
 .m-editor-nav-menu {
   display: flex;
   z-index: 5;
@@ -5,13 +7,13 @@
   justify-content: space-between;
   -webkit-box-align: center;
   align-items: center;
-  background-color: $--nav--background-color;
+  background-color: $nav--background-color;
   font-size: 19.2px;
-  color: $--nav-color;
+  color: $nav-color;
   font-weight: 400;
   box-sizing: border-box;
   margin: 0px;
-  flex: 0 0 $--nav-height;
+  flex: 0 0 $nav-height;
   border-bottom: 1px solid #d8dee8;
 
   > div {
@@ -54,7 +56,7 @@
     }
 
     .is-text > i {
-      color: $--font-color;
+      color: $font-color;
     }
 
     .icon {
@@ -66,7 +68,7 @@
     }
 
     .menu-item-text {
-      color: $--nav-color;
+      color: $nav-color;
     }
 
     &.rule {

package/src/theme/page-bar.scss

@@ -1,45 +1,34 @@
+@use "common/var" as *;
+
 .m-editor-page-bar-tabs {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
-
-  .tmagic-design-button.m-editor-page-bar-switch-type-button {
-    margin-left: 10px;
-    position: relative;
-    top: 1px;
-    border-radius: 3px 3px 0 0;
-    border: 1px solid $--border-color;
-    border-bottom: 1px solid transparent;
-    padding: 5px 10px;
-
-    &.active {
-      background-color: #f3f3f3;
-    }
-  }
+  user-select: none;
 }
 
 .m-editor-page-list-item {
   display: flex;
   width: 100%;
-  height: $--page-bar-height;
-  line-height: $--page-bar-height;
-  color: $--font-color;
+  height: $page-bar-height;
+  line-height: $page-bar-height;
+  color: $font-color;
   z-index: 2;
   overflow: hidden;
   &:hover {
-    background-color: $--hover-color;
+    background-color: $hover-color;
   }
 }
 
 .m-editor-page-bar {
   display: flex;
   width: 100%;
-  height: $--page-bar-height;
-  line-height: $--page-bar-height;
-  color: $--font-color;
+  height: $page-bar-height;
+  line-height: $page-bar-height;
+  color: $font-color;
   background-color: #f3f3f3;
-  border-top: 1px solid $--border-color;
+  border-top: 1px solid $border-color;
   z-index: 2;
   overflow: hidden;
 
@@ -51,7 +40,7 @@
   &-item {
     padding: 0 10px;
     cursor: pointer;
-    border-right: 1px solid $--border-color;
+    border-right: 1px solid $border-color;
     display: flex;
     justify-items: center;
     align-items: center;
@@ -70,6 +59,11 @@
     &-icon {
       position: relative;
       z-index: 1;
+
+      .icon-active {
+        font-weight: bold;
+        color: $theme-color;
+      }
     }
 
     &-title {
@@ -78,6 +72,18 @@
       white-space: nowrap;
       overflow: hidden;
     }
+
+    &-left-icon,
+    &-right-icon {
+      position: absolute;
+      right: 0;
+      top: 0;
+      height: 100%;
+    }
+
+    &-left-icon {
+      right: 34px;
+    }
   }
 }
 
@@ -91,13 +97,31 @@
     transition: all 0.2s ease 0s;
     padding: 5px 14px;
 
-    .el-button--text,
-    i {
-      color: $--font-color;
+    .tmagic-design-button {
+      color: $font-color;
     }
 
     &:hover {
-      background-color: $--hover-color;
+      background-color: $hover-color;
+    }
+
+    &.active {
+      .tmagic-design-button {
+        color: $theme-color;
+      }
     }
   }
 }
+
+.m-editor-page-bar-search-panel {
+  position: absolute;
+  bottom: $page-bar-height;
+  border: 1px solid $border-color;
+  padding: 6px 10px;
+  width: 100%;
+  box-sizing: border-box;
+
+  .tmagic-design-form-item {
+    margin-bottom: 0;
+  }
+}