@tmagic/editor 1.5.0-beta.8 → 1.5.0

package/src/fields/KeyValue.vue

@@ -39,7 +39,7 @@
       v-if="config.advanced && showCode"
       height="200px"
       :init-values="model[name]"
-      language="json"
+      language="javascript"
       :options="{
         readOnly: disabled,
       }"
@@ -86,22 +86,27 @@ const props = withDefaults(
   },
 );
 
-const emit = defineEmits<(e: 'change', value: Record<string, any>) => void>();
+const emit = defineEmits<{
+  change: [value: Record<string, any>];
+}>();
 
 const records = ref<[string, string][]>([]);
 const showCode = ref(false);
 
 watchEffect(() => {
-  const initValues: [string, any][] = Object.entries(props.model[props.name] || {});
-
-  for (const [, value] of initValues) {
-    if (typeof value !== 'string') {
-      showCode.value = true;
-      break;
+  if (typeof props.model[props.name] === 'function') {
+    showCode.value = true;
+  } else {
+    const initValues: [string, any][] = Object.entries(props.model[props.name] || {});
+
+    for (const [, value] of initValues) {
+      if (typeof value !== 'string') {
+        showCode.value = true;
+        break;
+      }
     }
+    records.value = initValues;
   }
-
-  records.value = initValues;
 });
 
 const getValue = () => {

package/src/fields/UISelect.vue

@@ -45,7 +45,7 @@ import { computed, inject, ref } from 'vue';
 import { Close, Delete } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
 
-import type { Id } from '@tmagic/core';
+import type { Id, MNode } from '@tmagic/core';
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
 import type { FieldProps, FormItem, FormState } from '@tmagic/form';
 import { getIdFromEl } from '@tmagic/utils';
@@ -72,8 +72,11 @@ const cancelHandler = () => {
   globalThis.document.removeEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler as EventListener);
 };
 
-const clickHandler = ({ detail }: Event & { detail: HTMLElement }) => {
-  const id = getIdFromEl()(detail);
+const clickHandler = ({ detail }: Event & { detail: HTMLElement | MNode }) => {
+  let { id } = detail;
+  if (detail.nodeType) {
+    id = getIdFromEl()(detail as HTMLElement) || id;
+  }
   if (id) {
     props.model[props.name] = id;
     emit('change', id);

package/src/hooks/index.ts

@@ -17,7 +17,6 @@
  */
 
 export * from './use-code-block-edit';
-export * from './use-data-source-method';
 export * from './use-stage';
 export * from './use-float-box';
 export * from './use-window-rect';

package/src/hooks/use-code-block-edit.ts

@@ -21,7 +21,7 @@ export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
 
     codeConfig.value = {
       name: '',
-      content: `({app, params}) => {\n  // place your code here\n}`,
+      content: `({app, params, flowState}) => {\n  // place your code here\n}`,
       params: [],
     };
 

package/src/hooks/use-data-source-edit.ts

@@ -1,6 +1,7 @@
 import { computed, ref } from 'vue';
 
 import type { DataSourceSchema } from '@tmagic/core';
+import type { ContainerChangeEventData } from '@tmagic/form';
 
 import DataSourceConfigPanel from '@editor/layouts/sidebar/data-source/DataSourceConfigPanel.vue';
 import type { DataSourceService } from '@editor/services/dataSource';
@@ -24,9 +25,9 @@ export const useDataSourceEdit = (dataSourceService?: DataSourceService) => {
     editDialog.value.show();
   };
 
-  const submitDataSourceHandler = (value: DataSourceSchema) => {
+  const submitDataSourceHandler = (value: DataSourceSchema, eventData: ContainerChangeEventData) => {
     if (value.id) {
-      dataSourceService?.update(value);
+      dataSourceService?.update(value, { changeRecords: eventData.changeRecords });
     } else {
       dataSourceService?.add(value);
     }

package/src/hooks/use-filter.ts

@@ -1,9 +1,9 @@
 import { type Ref, ref } from 'vue';
 
 import type { Id, MNode } from '@tmagic/core';
+import { traverseNode } from '@tmagic/utils';
 
 import type { LayerNodeStatus, TreeNodeData } from '@editor/type';
-import { traverseNode } from '@editor/utils';
 import { updateStatus } from '@editor/utils/tree';
 
 export const useFilter = (

package/src/hooks/use-node-status.ts

@@ -1,9 +1,9 @@
-import { ComputedRef, ref, watch } from 'vue';
+import { type ComputedRef, ref, watch } from 'vue';
 
 import type { Id, MNode } from '@tmagic/core';
+import { traverseNode } from '@tmagic/utils';
 
 import { LayerNodeStatus, TreeNodeData } from '@editor/type';
-import { traverseNode } from '@editor/utils';
 
 const createPageNodeStatus = (nodeData: TreeNodeData[], initialLayerNodeStatus?: Map<Id, LayerNodeStatus>) => {
   const map = new Map<Id, LayerNodeStatus>();

package/src/initService.ts

@@ -1,4 +1,4 @@
-import { onBeforeUnmount, reactive, toRaw, watch } from 'vue';
+import { computed, onBeforeUnmount, reactive, toRaw, watch } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type {
@@ -17,14 +17,16 @@ import {
   createDataSourceMethodTarget,
   createDataSourceTarget,
   DepTargetType,
+  NODE_CONDS_KEY,
   Target,
 } from '@tmagic/core';
-import { isPage } from '@tmagic/utils';
+import { ChangeRecord } from '@tmagic/form';
+import { getNodes, isPage, isValueIncludeDataSource, traverseNode } from '@tmagic/utils';
 
 import PropsPanel from './layouts/PropsPanel.vue';
+import { isIncludeDataSource } from './utils/editor';
 import { EditorProps } from './editorProps';
 import { Services } from './type';
-import { traverseNode } from './utils';
 
 export declare type LooseRequired<T> = {
   [P in string & keyof T]: T[P];
@@ -220,6 +222,7 @@ export const initServiceEvents = (
     });
 
     if (Array.isArray(value.items)) {
+      depService.clearIdleTasks();
       collectIdle(value.items, true);
     } else {
       depService.clear();
@@ -248,67 +251,41 @@ export const initServiceEvents = (
     }
   };
 
-  const getApp = () => {
-    const stage = editorService.get('stage');
-    return stage?.renderer?.runtime?.getApp?.();
-  };
-
-  const updateDataSourceSchema = () => {
-    const root = editorService.get('root');
-
-    if (root?.dataSources) {
-      getApp()?.dataSourceManager?.updateSchema(root.dataSources);
-    }
-  };
+  const stage = computed(() => editorService.get('stage'));
 
-  const targetAddHandler = (target: Target) => {
-    const root = editorService.get('root');
-    if (!root) return;
-
-    if (target.type === DepTargetType.DATA_SOURCE) {
-      if (!root.dataSourceDeps) {
-        root.dataSourceDeps = {};
-      }
-      root.dataSourceDeps[target.id] = target.deps;
+  watch(stage, (stage) => {
+    if (!stage) {
+      return;
     }
 
-    if (target.type === DepTargetType.DATA_SOURCE_COND) {
-      if (!root.dataSourceCondDeps) {
-        root.dataSourceCondDeps = {};
-      }
-      root.dataSourceCondDeps[target.id] = target.deps;
-    }
-  };
+    stage.on('rerender', () => {
+      const node = editorService.get('node');
 
-  const targetRemoveHandler = (id: string | number) => {
-    const root = editorService.get('root');
+      if (!node) return;
 
-    if (root?.dataSourceDeps) {
-      delete root.dataSourceDeps[id];
-    }
+      collectIdle([node], true).then(() => {
+        afterUpdateNodes([node]);
+      });
+    });
+  });
 
-    if (root?.dataSourceCondDeps) {
-      delete root.dataSourceCondDeps[id];
-    }
-  };
+  const getApp = () => stage.value?.renderer?.runtime?.getApp?.();
 
-  const collectedHandler = (nodes: MNode[], deep: boolean) => {
+  const updateDataSourceSchema = (nodes: MNode[], deep: boolean) => {
     const root = editorService.get('root');
-    const stage = editorService.get('stage');
-
-    if (!root || !stage) return;
-
     const app = getApp();
 
-    if (!app) return;
-
-    if (app.dsl) {
+    if (root && app?.dsl) {
       app.dsl.dataSourceDeps = root.dataSourceDeps;
       app.dsl.dataSourceCondDeps = root.dataSourceCondDeps;
       app.dsl.dataSources = root.dataSources;
     }
 
-    updateDataSourceSchema();
+    if (root?.dataSources) {
+      getApp()?.dataSourceManager?.updateSchema(root.dataSources);
+    }
+
+    if (!root || !stage.value) return;
 
     const allNodes: MNode[] = [];
 
@@ -329,7 +306,7 @@ export const initServiceEvents = (
       Object.keys(dep).forEach((id) => {
         const node = allNodes.find((node) => node.id === id);
         node &&
-          stage.update({
+          stage.value?.update({
             config: cloneDeep(node),
             parentId: editorService.getParentById(node.id)?.id,
             root: cloneDeep(root),
@@ -338,9 +315,63 @@ export const initServiceEvents = (
     });
   };
 
+  const afterUpdateNodes = (nodes: MNode[]) => {
+    const root = editorService.get('root');
+    if (!root) return;
+    for (const node of nodes) {
+      stage.value?.update({
+        config: cloneDeep(node),
+        parentId: editorService.getParentById(node.id)?.id,
+        root: cloneDeep(root),
+      });
+    }
+  };
+
+  const targetAddHandler = (target: Target) => {
+    const root = editorService.get('root');
+    if (!root) return;
+
+    if (target.type === DepTargetType.DATA_SOURCE) {
+      if (!root.dataSourceDeps) {
+        root.dataSourceDeps = {};
+      }
+      root.dataSourceDeps[target.id] = target.deps;
+    }
+
+    if (target.type === DepTargetType.DATA_SOURCE_COND) {
+      if (!root.dataSourceCondDeps) {
+        root.dataSourceCondDeps = {};
+      }
+      root.dataSourceCondDeps[target.id] = target.deps;
+    }
+  };
+
+  const targetRemoveHandler = (id: string | number) => {
+    const root = editorService.get('root');
+
+    if (!root) return;
+
+    if (root.dataSourceDeps) {
+      delete root.dataSourceDeps[id];
+    }
+
+    if (root.dataSourceCondDeps) {
+      delete root.dataSourceCondDeps[id];
+    }
+  };
+
+  const depCollectedHandler = () => {
+    const root = editorService.get('root');
+    if (!root) return;
+    const app = getApp();
+    if (app?.dsl) {
+      app.dsl.dataSourceDeps = root.dataSourceDeps;
+    }
+  };
+
   depService.on('add-target', targetAddHandler);
   depService.on('remove-target', targetRemoveHandler);
-  depService.on('collected', collectedHandler);
+  depService.on('collected', depCollectedHandler);
 
   const initDataSourceDepTarget = (ds: DataSourceSchema) => {
     depService.addTarget(createDataSourceTarget(ds, reactive({})));
@@ -348,28 +379,63 @@ export const initServiceEvents = (
     depService.addTarget(createDataSourceCondTarget(ds, reactive({})));
   };
 
-  const collectIdle = (nodes: MNode[], deep: boolean) => {
-    nodes.forEach((node) => {
-      let pageId: Id | undefined;
-
-      if (isPage(node)) {
-        pageId = node.id;
-      } else {
-        const info = editorService.getNodeInfo(node.id);
-        pageId = info.page?.id;
-      }
-      depService.collectIdle([node], { pageId }, deep);
-    });
-  };
+  const collectIdle = (nodes: MNode[], deep: boolean) =>
+    Promise.all(
+      nodes.map((node) => {
+        let pageId: Id | undefined;
+
+        if (isPage(node)) {
+          pageId = node.id;
+        } else {
+          const info = editorService.getNodeInfo(node.id);
+          pageId = info.page?.id;
+        }
+        return depService.collectIdle([node], { pageId }, deep);
+      }),
+    );
 
   // 新增节点，收集依赖
   const nodeAddHandler = (nodes: MNode[]) => {
-    collectIdle(nodes, true);
+    collectIdle(nodes, true).then(() => {
+      afterUpdateNodes(nodes);
+    });
   };
 
   // 节点更新，收集依赖
-  const nodeUpdateHandler = (nodes: MNode[]) => {
-    collectIdle(nodes, true);
+  // 仅当修改到数据源相关的才收集
+  const nodeUpdateHandler = (data: { newNode: MNode; oldNode: MNode; changeRecords?: ChangeRecord[] }[]) => {
+    const needRecollectNodes: MNode[] = [];
+    const normalNodes: MNode[] = [];
+    data.forEach(({ newNode, oldNode, changeRecords }) => {
+      if (changeRecords?.length) {
+        for (const record of changeRecords) {
+          // NODE_CONDS_KEY为显示条件key
+          if (
+            !record.propPath ||
+            new RegExp(`${NODE_CONDS_KEY}.(\\d)+.cond`).test(record.propPath) ||
+            new RegExp(`${NODE_CONDS_KEY}.(\\d)+.cond.(\\d)+.value`).test(record.propPath) ||
+            record.propPath === NODE_CONDS_KEY ||
+            isValueIncludeDataSource(record.value)
+          ) {
+            needRecollectNodes.push(newNode);
+          } else {
+            normalNodes.push(newNode);
+          }
+        }
+      } else if (isIncludeDataSource(newNode, oldNode)) {
+        needRecollectNodes.push(newNode);
+      } else {
+        normalNodes.push(newNode);
+      }
+    });
+
+    if (needRecollectNodes.length) {
+      collectIdle(needRecollectNodes, true).then(() => {
+        afterUpdateNodes(needRecollectNodes);
+      });
+    } else if (normalNodes.length) {
+      afterUpdateNodes(normalNodes);
+    }
   };
 
   // 节点删除，清除对齐的依赖收集
@@ -379,7 +445,9 @@ export const initServiceEvents = (
 
   // 由于历史记录变化是更新整个page，所以历史记录变化时，需要重新收集依赖
   const historyChangeHandler = (page: MPage | MPageFragment) => {
-    collectIdle([page], true);
+    collectIdle([page], true).then(() => {
+      updateDataSourceSchema([page], true);
+    });
   };
 
   editorService.on('history-change', historyChangeHandler);
@@ -409,12 +477,41 @@ export const initServiceEvents = (
     getApp()?.dataSourceManager?.addDataSource(config);
   };
 
-  const dataSourceUpdateHandler = (config: DataSourceSchema) => {
+  const dataSourceUpdateHandler = (config: DataSourceSchema, { changeRecords }: { changeRecords: ChangeRecord[] }) => {
+    let needRecollectDep = false;
+    for (const changeRecord of changeRecords) {
+      if (!changeRecord.propPath) {
+        continue;
+      }
+
+      needRecollectDep =
+        changeRecord.propPath === 'fields' ||
+        changeRecord.propPath === 'methods' ||
+        /fields.(\d)+.name/.test(changeRecord.propPath) ||
+        /fields.(\d)+$/.test(changeRecord.propPath) ||
+        /methods.(\d)+.name/.test(changeRecord.propPath) ||
+        /methods.(\d)+$/.test(changeRecord.propPath);
+
+      if (needRecollectDep) {
+        break;
+      }
+    }
+
     const root = editorService.get('root');
-    removeDataSourceTarget(config.id);
-    initDataSourceDepTarget(config);
+    if (needRecollectDep) {
+      if (Array.isArray(root?.items)) {
+        depService.clearIdleTasks();
+
+        removeDataSourceTarget(config.id);
+        initDataSourceDepTarget(config);
 
-    collectIdle(root?.items || [], true);
+        collectIdle(root.items, true).then(() => {
+          updateDataSourceSchema(root?.items || [], true);
+        });
+      }
+    } else if (root?.dataSources) {
+      getApp()?.dataSourceManager?.updateSchema(root.dataSources);
+    }
   };
 
   const removeDataSourceTarget = (id: string) => {
@@ -424,8 +521,14 @@ export const initServiceEvents = (
   };
 
   const dataSourceRemoveHandler = (id: string) => {
+    const root = editorService.get('root');
+    const nodeIds = Object.keys(root?.dataSourceDeps?.[id] || {});
+    const nodes = getNodes(nodeIds, root?.items);
+    collectIdle(nodes, false).then(() => {
+      updateDataSourceSchema(nodes, false);
+    });
+
     removeDataSourceTarget(id);
-    getApp()?.dataSourceManager?.removeDataSource(id);
   };
 
   dataSourceService.on('add', dataSourceAddHandler);
@@ -435,7 +538,7 @@ export const initServiceEvents = (
   onBeforeUnmount(() => {
     depService.off('add-target', targetAddHandler);
     depService.off('remove-target', targetRemoveHandler);
-    depService.off('collected', collectedHandler);
+    depService.off('collected', depCollectedHandler);
 
     editorService.off('history-change', historyChangeHandler);
     editorService.off('root-change', rootChangeHandler);

package/src/layouts/Framework.vue

@@ -11,8 +11,6 @@
     </slot>
 
     <SplitView
-      v-loading="stageLoading"
-      element-loading-text="Runtime 加载中..."
       v-else
       ref="splitView"
       class="m-editor-content"
@@ -38,7 +36,12 @@
         </slot>
 
         <slot name="page-bar">
-          <PageBar :disabled-page-fragment="disabledPageFragment" :page-bar-sort-options="pageBarSortOptions">
+          <PageBar
+            :disabled-page-fragment="disabledPageFragment"
+            :page-bar-sort-options="pageBarSortOptions"
+            :filter-function="pageFilterFunction"
+          >
+            <template #page-bar-add-button><slot name="page-bar-add-button"></slot></template>
             <template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
             <template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>
             <template #page-list-popover="{ list }"><slot name="page-list-popover" :list="list"></slot></template>
@@ -61,6 +64,7 @@
 <script lang="ts" setup>
 import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
+import type { MPage, MPageFragment } from '@tmagic/core';
 import { TMagicScrollbar } from '@tmagic/design';
 
 import SplitView from '@editor/components/SplitView.vue';
@@ -80,6 +84,7 @@ defineOptions({
 defineProps<{
   disabledPageFragment: boolean;
   pageBarSortOptions?: PageBarSortOptions;
+  pageFilterFunction?: (page: MPage | MPageFragment, keyword: string) => boolean;
 }>();
 
 const DEFAULT_LEFT_COLUMN_WIDTH = 310;
@@ -95,7 +100,6 @@ const root = computed(() => editorService?.get('root'));
 const page = computed(() => editorService?.get('page'));
 
 const pageLength = computed(() => editorService?.get('pageLength') || 0);
-const stageLoading = computed(() => editorService?.get('stageLoading') || false);
 const showSrc = computed(() => uiService?.get('showSrc'));
 
 const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';

package/src/layouts/PropsPanel.vue

@@ -43,7 +43,7 @@ import { Document as DocumentIcon } from '@element-plus/icons-vue';
 
 import type { MNode } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
-import type { FormState, FormValue } from '@tmagic/form';
+import type { ContainerChangeEventData, FormState, FormValue } from '@tmagic/form';
 import { MForm } from '@tmagic/form';
 
 import MIcon from '@editor/components/Icon.vue';
@@ -110,10 +110,10 @@ watchEffect(() => {
   }
 });
 
-const submit = async () => {
+const submit = async (v: FormValue, eventData: ContainerChangeEventData) => {
   try {
     const values = await configForm.value?.submitForm();
-    services?.editorService.update(values);
+    services?.editorService.update(values, { changeRecords: eventData.changeRecords });
   } catch (e: any) {
     emit('submit-error', e);
   }

package/src/layouts/page-bar/AddButton.vue

@@ -3,9 +3,31 @@
     v-if="showAddPageButton"
     id="m-editor-page-bar-add-icon"
     class="m-editor-page-bar-item m-editor-page-bar-item-icon"
-    @click="addPage"
   >
-    <Icon :icon="Plus"></Icon>
+    <TMagicPopover popper-class="data-source-list-panel-add-menu">
+      <template #reference>
+        <Icon :icon="Plus"></Icon>
+      </template>
+
+      <ToolButton
+        :data="{
+          type: 'button',
+          text: '页面',
+          handler: () => {
+            addPage(NodeType.PAGE);
+          },
+        }"
+      ></ToolButton>
+      <ToolButton
+        :data="{
+          type: 'button',
+          text: '页面片',
+          handler: () => {
+            addPage(NodeType.PAGE_FRAGMENT);
+          },
+        }"
+      ></ToolButton>
+    </TMagicPopover>
   </div>
   <div v-else style="width: 21px"></div>
 </template>
@@ -15,8 +37,10 @@ import { computed, inject, toRaw } from 'vue';
 import { Plus } from '@element-plus/icons-vue';
 
 import { NodeType } from '@tmagic/core';
+import { TMagicPopover } from '@tmagic/design';
 
 import Icon from '@editor/components/Icon.vue';
+import ToolButton from '@editor/components/ToolButton.vue';
 import type { Services } from '@editor/type';
 import { generatePageNameByApp } from '@editor/utils/editor';
 
@@ -24,23 +48,19 @@ defineOptions({
   name: 'MEditorPageBarAddButton',
 });
 
-const props = defineProps<{
-  type: NodeType.PAGE | NodeType.PAGE_FRAGMENT;
-}>();
-
 const services = inject<Services>('services');
 const uiService = services?.uiService;
 const editorService = services?.editorService;
 
 const showAddPageButton = computed(() => uiService?.get('showAddPageButton'));
 
-const addPage = () => {
+const addPage = (type: NodeType.PAGE | NodeType.PAGE_FRAGMENT) => {
   if (!editorService) return;
   const root = toRaw(editorService.get('root'));
   if (!root) throw new Error('root 不能为空');
   const pageConfig = {
-    type: props.type,
-    name: generatePageNameByApp(root, props.type),
+    type,
+    name: generatePageNameByApp(root, type),
     items: [],
   };
   editorService.add(pageConfig);