@tmagic/editor 1.5.0-beta.13 → 1.5.0-beta.15

package/src/services/dataSource.ts

@@ -4,7 +4,7 @@ import type { Writable } from 'type-fest';
 
 import type { DataSourceSchema, EventOption, Id, MNode, TargetOptions } from '@tmagic/core';
 import { Target, Watcher } from '@tmagic/core';
-import type { FormConfig } from '@tmagic/form';
+import type { ChangeRecord, FormConfig } from '@tmagic/form';
 import { guid, toLine } from '@tmagic/utils';
 
 import editorService from '@editor/services/editor';
@@ -115,15 +115,22 @@ class DataSource extends BaseService {
     return newConfig;
   }
 
-  public update(config: DataSourceSchema) {
+  public update(config: DataSourceSchema, { changeRecords = [] }: { changeRecords?: ChangeRecord[] } = {}) {
     const dataSources = this.get('dataSources');
 
     const index = dataSources.findIndex((ds) => ds.id === config.id);
-    dataSources[index] = cloneDeep(config);
 
-    this.emit('update', config);
+    const oldConfig = dataSources[index];
+    const newConfig = cloneDeep(config);
 
-    return config;
+    dataSources[index] = newConfig;
+
+    this.emit('update', newConfig, {
+      oldConfig,
+      changeRecords,
+    });
+
+    return newConfig;
   }
 
   public remove(id: string) {

package/src/services/dep.ts

@@ -31,11 +31,29 @@ export interface DepEvents {
   collected: [nodes: MNode[], deep: boolean];
 }
 
+interface State {
+  collecting: boolean;
+}
+
+type StateKey = keyof State;
+
 const idleTask = new IdleTask<{ node: TargetNode; deep: boolean; target: Target }>();
 
 class Dep extends BaseService {
+  private state = reactive<State>({
+    collecting: false,
+  });
+
   private watcher = new Watcher({ initialTargets: reactive({}) });
 
+  public set<K extends StateKey, T extends State[K]>(name: K, value: T) {
+    this.state[name] = value;
+  }
+
+  public get<K extends StateKey>(name: K): State[K] {
+    return this.state[name];
+  }
+
   public removeTargets(type: string = DepTargetType.DEFAULT) {
     this.watcher.removeTargets(type);
 
@@ -71,43 +89,40 @@ class Dep extends BaseService {
   }
 
   public collect(nodes: MNode[], depExtendedData: DepExtendedData = {}, deep = false, type?: DepTargetType) {
+    this.set('collecting', true);
     this.watcher.collectByCallback(nodes, type, ({ node, target }) => {
       this.collectNode(node, target, depExtendedData, deep);
     });
+    this.set('collecting', false);
 
     this.emit('collected', nodes, deep);
   }
 
   public collectIdle(nodes: MNode[], depExtendedData: DepExtendedData = {}, deep = false, type?: DepTargetType) {
+    this.set('collecting', true);
     let startTask = false;
     this.watcher.collectByCallback(nodes, type, ({ node, target }) => {
       startTask = true;
-      idleTask.enqueueTask(
-        ({ node, deep, target }) => {
-          this.collectNode(node, target, depExtendedData, deep);
-        },
-        {
-          node,
-          deep,
-          target,
-        },
-      );
+
+      this.enqueueTask(node, target, depExtendedData, deep);
     });
 
     return new Promise<void>((resolve) => {
       if (!startTask) {
         this.emit('collected', nodes, deep);
+        this.set('collecting', false);
         resolve();
         return;
       }
       idleTask.once('finish', () => {
         this.emit('collected', nodes, deep);
+        this.set('collecting', false);
         resolve();
       });
     });
   }
 
-  collectNode(node: MNode, target: Target, depExtendedData: DepExtendedData = {}, deep = false) {
+  public collectNode(node: MNode, target: Target, depExtendedData: DepExtendedData = {}, deep = false) {
     // 先删除原有依赖，重新收集
     if (isPage(node)) {
       Object.entries(target.deps).forEach(([depKey, dep]) => {
@@ -138,6 +153,10 @@ class Dep extends BaseService {
     return this.watcher.hasSpecifiedTypeTarget(type);
   }
 
+  public clearIdleTasks() {
+    idleTask.clearTasks();
+  }
+
   public on<Name extends keyof DepEvents, Param extends DepEvents[Name]>(
     eventName: Name,
     listener: (...args: Param) => void | Promise<void>,
@@ -155,6 +174,25 @@ class Dep extends BaseService {
   public emit<Name extends keyof DepEvents, Param extends DepEvents[Name]>(eventName: Name, ...args: Param) {
     return super.emit(eventName, ...args);
   }
+
+  private enqueueTask(node: MNode, target: Target, depExtendedData: DepExtendedData, deep: boolean) {
+    idleTask.enqueueTask(
+      ({ node, deep, target }) => {
+        this.collectNode(node, target, depExtendedData, deep);
+      },
+      {
+        node,
+        deep: false,
+        target,
+      },
+    );
+
+    if (deep && Array.isArray(node.items) && node.items.length) {
+      node.items.forEach((item) => {
+        this.enqueueTask(item, target, depExtendedData, deep);
+      });
+    }
+  }
 }
 
 export type DepService = Dep;

package/src/services/editor.ts

@@ -22,6 +22,7 @@ import type { Writable } from 'type-fest';
 
 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,
@@ -68,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];
@@ -509,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为空');
 
@@ -519,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);
 
@@ -541,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;
@@ -574,7 +582,11 @@ class Editor extends BaseService {
 
     this.addModifiedNodeId(newConfig.id);
 
-    return newConfig;
+    return {
+      oldNode: node,
+      newNode: newConfig,
+      changeRecords,
+    };
   }
 
   /**
@@ -582,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;
   }
 
   /**
@@ -839,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;
         }

package/src/theme/page-bar.scss

@@ -6,13 +6,6 @@
   user-select: none;
 }
 
-.m-editor-page-bar-item-icon {
-  .icon-active {
-    font-weight: bold;
-    color: $--theme-color;
-  }
-}
-
 .m-editor-page-list-item {
   display: flex;
   width: 100%;
@@ -64,6 +57,11 @@
     &-icon {
       position: relative;
       z-index: 1;
+
+      .icon-active {
+        font-weight: bold;
+        color: $--theme-color;
+      }
     }
 
     &-title {
@@ -72,6 +70,18 @@
       white-space: nowrap;
       overflow: hidden;
     }
+
+    &-left-icon,
+    &-right-icon {
+      position: absolute;
+      right: 0;
+      top: 0;
+      height: 100%;
+    }
+
+    &-left-icon {
+      right: 34px;
+    }
   }
 }
 
@@ -85,14 +95,19 @@
     transition: all 0.2s ease 0s;
     padding: 5px 14px;
 
-    .el-button--text,
-    i {
+    .tmagic-design-button {
       color: $--font-color;
     }
 
     &:hover {
       background-color: $--hover-color;
     }
+
+    &.active {
+      .tmagic-design-button {
+        color: $--theme-color;
+      }
+    }
   }
 }
 

package/src/theme/search-input.scss

@@ -7,6 +7,7 @@
   left: 0;
   box-sizing: border-box;
   z-index: 1;
+  background: transparent;
 
   .el-input__prefix {
     padding: 7px;

package/src/utils/data-source/formConfigs/http.ts

@@ -40,6 +40,7 @@ export default [
         name: 'params',
         type: 'key-value',
         defaultValue: {},
+        advanced: true,
         text: '参数',
       },
       {
@@ -53,6 +54,7 @@ export default [
         name: 'headers',
         type: 'key-value',
         defaultValue: {},
+        advanced: true,
         text: '请求头',
       },
     ],

package/src/utils/data-source/index.ts

@@ -58,7 +58,7 @@ const fillConfig = (config: FormConfig): FormConfig => [
       },
       {
         title: '请求参数裁剪',
-        display: (formState: FormState, { model }: any) => model.type === 'http',
+        display: (_formState: FormState, { model }: any) => model.type === 'http',
         items: [
           {
             name: 'beforeRequest',
@@ -70,7 +70,7 @@ const fillConfig = (config: FormConfig): FormConfig => [
       },
       {
         title: '响应数据裁剪',
-        display: (formState: FormState, { model }: any) => model.type === 'http',
+        display: (_formState: FormState, { model }: any) => model.type === 'http',
         items: [
           {
             name: 'afterResponse',

package/src/utils/editor.ts

@@ -16,12 +16,23 @@
  * limitations under the License.
  */
 
+import { detailedDiff } from 'deep-object-diff';
+import { isObject } from 'lodash-es';
 import serialize from 'serialize-javascript';
 
 import type { Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/core';
-import { NodeType } from '@tmagic/core';
+import { NODE_CONDS_KEY, NodeType } from '@tmagic/core';
 import type StageCore from '@tmagic/stage';
-import { calcValueByFontsize, getElById, getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
+import {
+  calcValueByFontsize,
+  DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX,
+  getElById,
+  getNodePath,
+  isNumber,
+  isPage,
+  isPageFragment,
+  isPop,
+} from '@tmagic/utils';
 
 import { Layout } from '@editor/type';
 
@@ -290,3 +301,84 @@ export const moveItemsInContainer = (sourceIndices: number[], parent: MContainer
     }
   }
 };
+
+export const isValueIncludeDataSource = (value: any) => {
+  if (typeof value === 'string' && /\$\{([\s\S]+?)\}/.test(value)) {
+    return true;
+  }
+  if (Array.isArray(value) && `${value[0]}`.startsWith(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX)) {
+    return true;
+  }
+  if (value?.isBindDataSource && value.dataSourceId) {
+    return true;
+  }
+  if (value?.isBindDataSourceField && value.dataSourceId) {
+    return true;
+  }
+  return false;
+};
+
+const isIncludeDataSourceByDiffAddResult = (diffResult: any) => {
+  for (const value of Object.values(diffResult)) {
+    const result = isValueIncludeDataSource(value);
+
+    if (result) {
+      return true;
+    }
+
+    if (isObject(value)) {
+      return isIncludeDataSourceByDiffAddResult(value);
+    }
+  }
+  return false;
+};
+
+const isIncludeDataSourceByDiffUpdatedResult = (diffResult: any, oldNode: any) => {
+  for (const [key, value] of Object.entries<any>(diffResult)) {
+    if (isValueIncludeDataSource(value)) {
+      return true;
+    }
+
+    if (isValueIncludeDataSource(oldNode[key])) {
+      return true;
+    }
+
+    if (isObject(value)) {
+      return isIncludeDataSourceByDiffUpdatedResult(value, oldNode[key]);
+    }
+  }
+  return false;
+};
+
+export const isIncludeDataSource = (node: MNode, oldNode: MNode) => {
+  const diffResult = detailedDiff(oldNode, node);
+
+  let isIncludeDataSource = false;
+
+  if (diffResult.updated) {
+    // 修改了显示条件
+    if ((diffResult.updated as any)[NODE_CONDS_KEY]) {
+      return true;
+    }
+
+    isIncludeDataSource = isIncludeDataSourceByDiffUpdatedResult(diffResult.updated, oldNode);
+    if (isIncludeDataSource) return true;
+  }
+
+  if (diffResult.added) {
+    isIncludeDataSource = isIncludeDataSourceByDiffAddResult(diffResult.added);
+    if (isIncludeDataSource) return true;
+  }
+
+  if (diffResult.deleted) {
+    // 删除了显示条件
+    if ((diffResult.deleted as any)[NODE_CONDS_KEY]) {
+      return true;
+    }
+
+    isIncludeDataSource = isIncludeDataSourceByDiffAddResult(diffResult.deleted);
+    if (isIncludeDataSource) return true;
+  }
+
+  return isIncludeDataSource;
+};

package/src/utils/idle-task.ts

@@ -26,6 +26,11 @@ export class IdleTask<T = any> extends EventEmitter {
 
   private taskHandle: number | null = null;
 
+  constructor() {
+    super();
+    this.setMaxListeners(1000);
+  }
+
   public enqueueTask(taskHandler: (data: T) => void, taskData: T) {
     this.taskList.push({
       handler: taskHandler,
@@ -37,6 +42,10 @@ export class IdleTask<T = any> extends EventEmitter {
     }
   }
 
+  public clearTasks() {
+    this.taskList = [];
+  }
+
   public on<Name extends keyof IdleTaskEvents, Param extends IdleTaskEvents[Name]>(
     eventName: Name,
     listener: (...args: Param) => void | Promise<void>,
@@ -57,9 +66,31 @@ export class IdleTask<T = any> extends EventEmitter {
 
   private runTaskQueue(deadline: IdleDeadline) {
     // 动画会占用空闲时间,当任务一直无法执行时，看看是否有动画正在播放
-    while ((deadline.timeRemaining() > 10 || deadline.didTimeout) && this.taskList.length) {
-      const task = this.taskList.shift();
-      task!.handler(task!.data);
+    // 根据空闲时间的多少来决定执行的任务数，保证页面不卡死的情况下尽量多执行任务，不然当任务数巨大时，执行时间会很久
+    // 执行不完不会影响配置，但是会影响画布渲染
+    while (deadline.timeRemaining() > 0 && this.taskList.length) {
+      const timeRemaining = deadline.timeRemaining();
+      let times = 0;
+      if (timeRemaining <= 5) {
+        times = 10;
+      } else if (timeRemaining <= 10) {
+        times = 100;
+      } else if (timeRemaining <= 15) {
+        times = 300;
+      } else {
+        times = 600;
+      }
+
+      for (let i = 0; i < times; i++) {
+        const task = this.taskList.shift();
+        if (task) {
+          task.handler(task.data);
+        }
+
+        if (this.taskList.length === 0) {
+          break;
+        }
+      }
     }
 
     if (this.taskList.length) {

package/src/utils/props.ts

@@ -81,7 +81,7 @@ export const styleTabConfig: TabPaneConfig = {
               fieldConfig: {
                 type: 'text',
               },
-              disabled: (vm: FormState, { model }: any) =>
+              disabled: (_vm: FormState, { model }: any) =>
                 model.position === 'fixed' && model._magic_position === 'fixedBottom',
             },
             {
@@ -103,7 +103,7 @@ export const styleTabConfig: TabPaneConfig = {
               fieldConfig: {
                 type: 'text',
               },
-              disabled: (vm: FormState, { model }: any) =>
+              disabled: (_vm: FormState, { model }: any) =>
                 model.position === 'fixed' && model._magic_position === 'fixedTop',
             },
           ],
@@ -356,7 +356,7 @@ export const advancedTabConfig: TabPaneConfig = {
 
 export const displayTabConfig: TabPaneConfig = {
   title: '显示条件',
-  display: (vm: FormState, { model }: any) => model.type !== 'page',
+  display: (_vm: FormState, { model }: any) => model.type !== 'page',
   items: [
     {
       type: 'display-conds',