@tmagic/editor 1.3.0-alpha.0 → 1.3.0-alpha.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.0",
+  "version": "1.3.0-alpha.2",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -46,13 +46,13 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.3.0-alpha.0",
-    "@tmagic/design": "1.3.0-alpha.0",
-    "@tmagic/form": "1.3.0-alpha.0",
-    "@tmagic/schema": "1.3.0-alpha.0",
-    "@tmagic/stage": "1.3.0-alpha.0",
-    "@tmagic/table": "1.3.0-alpha.0",
-    "@tmagic/utils": "1.3.0-alpha.0",
+    "@tmagic/core": "1.3.0-alpha.2",
+    "@tmagic/design": "1.3.0-alpha.2",
+    "@tmagic/form": "1.3.0-alpha.2",
+    "@tmagic/schema": "1.3.0-alpha.2",
+    "@tmagic/stage": "1.3.0-alpha.2",
+    "@tmagic/table": "1.3.0-alpha.2",
+    "@tmagic/utils": "1.3.0-alpha.2",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -64,8 +64,8 @@
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.0-alpha.0",
-    "@tmagic/form": "1.3.0-alpha.0",
+    "@tmagic/design": "1.3.0-alpha.2",
+    "@tmagic/form": "1.3.0-alpha.2",
     "monaco-editor": "^0.34.0",
     "vue": "^3.2.37"
   },

package/src/fields/DataSourceFields.vue

@@ -136,7 +136,7 @@ const dataSourceFieldsConfig: FormConfig = [
       {
         validator: ({ value, callback }, { model, parent }) => {
           const index = parent.findIndex((item: Record<string, any>) => item.name === value);
-          if ((model.index === -1 && index > -1) || (model.index > -1 && index !== model.index)) {
+          if ((model.index === -1 && index > -1) || (model.index > -1 && index > -1 && index !== model.index)) {
             return callback(`属性key（${value}）已存在`);
           }
           callback();

package/src/index.ts

@@ -42,6 +42,7 @@ export { default as propsService } from './services/props';
 export { default as historyService } from './services/history';
 export { default as storageService } from './services/storage';
 export { default as eventsService } from './services/events';
+export { default as dataSourceService } from './services/dataSource';
 export { default as uiService } from './services/ui';
 export { default as codeBlockService } from './services/codeBlock';
 export { default as depService } from './services/dep';

package/src/initService.ts

@@ -1,8 +1,10 @@
 import type { ExtractPropTypes } from 'vue';
 import { onUnmounted, toRaw, watch } from 'vue';
+import { cloneDeep } from 'lodash-es';
 
 import type { EventOption } from '@tmagic/core';
 import type { CodeBlockContent, DataSourceSchema, Id, MApp, MNode, MPage } from '@tmagic/schema';
+import { getNodes } from '@tmagic/utils';
 
 import type { Target } from './services/dep';
 import { createCodeBlockTarget, createDataSourceTarget } from './utils/dep';
@@ -110,6 +112,50 @@ export const initServiceEvents = (
   emit: (event: 'props-panel-mounted' | 'update:modelValue', ...args: any[]) => void,
   { editorService, codeBlockService, dataSourceService, depService }: Services,
 ) => {
+  const getApp = () => {
+    const stage = editorService.get('stage');
+    return stage?.renderer.runtime?.getApp?.();
+  };
+
+  const updateDataSoucreSchema = () => {
+    const root = editorService.get('root');
+
+    if (root?.dataSources) {
+      getApp()?.dataSourceManager?.updateSchema(root.dataSources);
+    }
+  };
+
+  const upateNodeWhenDataSourceChange = (nodes: MNode[]) => {
+    const root = editorService.get('root');
+    const stage = editorService.get('stage');
+
+    if (!root || !stage) return;
+
+    const app = getApp();
+
+    if (!app) return;
+
+    if (app.dsl) {
+      app.dsl.dataSourceDeps = root.dataSourceDeps;
+      app.dsl.dataSources = root.dataSources;
+    }
+
+    updateDataSoucreSchema();
+
+    nodes.forEach((node) => {
+      const deps = Object.values(root.dataSourceDeps || {});
+      deps.forEach((dep) => {
+        if (dep[node.id]) {
+          stage.update({
+            config: cloneDeep(node),
+            parentId: editorService.getParentById(node.id)?.id,
+            root: cloneDeep(root),
+          });
+        }
+      });
+    });
+  };
+
   const targetAddHandler = (target: Target) => {
     if (target.type !== 'data-source') return;
 
@@ -130,8 +176,18 @@ export const initServiceEvents = (
     delete root.dataSourceDeps[id];
   };
 
+  const depUpdateHandler = (node: MNode) => {
+    upateNodeWhenDataSourceChange([node]);
+  };
+
+  const collectedHandler = (nodes: MNode[]) => {
+    upateNodeWhenDataSourceChange(nodes);
+  };
+
   depService.on('add-target', targetAddHandler);
   depService.on('remove-target', targetRemoveHandler);
+  depService.on('dep-update', depUpdateHandler);
+  depService.on('collected', collectedHandler);
 
   const rootChangeHandler = async (value: MApp, preValue?: MApp | null) => {
     const nodeId = editorService.get('node')?.id || props.defaultSelected;
@@ -218,16 +274,25 @@ export const initServiceEvents = (
 
   const dataSourceAddHandler = (config: DataSourceSchema) => {
     depService.addTarget(createDataSourceTarget(config.id, config));
+    getApp()?.dataSourceManager?.addDataSource(config);
   };
 
   const dataSourceUpdateHandler = (config: DataSourceSchema) => {
     if (config.title) {
       depService.getTarget(config.id)!.name = config.title;
     }
+    const root = editorService.get('root');
+
+    const targets = depService.getTargets('data-source');
+
+    const nodes = getNodes(Object.keys(targets[config.id].deps), root?.items);
+
+    upateNodeWhenDataSourceChange(nodes);
   };
 
   const dataSourceRemoveHandler = (id: string) => {
     depService.removeTarget(id);
+    getApp()?.dataSourceManager?.removeDataSource(id);
   };
 
   dataSourceService.on('add', dataSourceAddHandler);
@@ -237,6 +302,8 @@ export const initServiceEvents = (
   onUnmounted(() => {
     depService.off('add-target', targetAddHandler);
     depService.off('remove-target', targetRemoveHandler);
+    depService.off('dep-update', depUpdateHandler);
+    depService.off('collected', collectedHandler);
 
     editorService.off('history-change', historyChangeHandler);
     editorService.off('root-change', rootChangeHandler);

package/src/services/dep.ts

@@ -267,6 +267,8 @@ export class Watcher extends EventEmitter {
         });
       });
     });
+
+    this.emit('collected', nodes, deep);
   }
 
   /**
@@ -299,6 +301,7 @@ export class Watcher extends EventEmitter {
 
         if (target.isTarget(key, value)) {
           target.updateDep(node, fullKey);
+          this.emit('update-dep', node, fullKey);
         } else if (!keyIsItems && Array.isArray(value)) {
           value.forEach((item, index) => {
             collectTarget(item, `${fullKey}.${index}`);

package/types/index.d.ts

@@ -11,6 +11,7 @@ export { default as propsService } from './services/props';
 export { default as historyService } from './services/history';
 export { default as storageService } from './services/storage';
 export { default as eventsService } from './services/events';
+export { default as dataSourceService } from './services/dataSource';
 export { default as uiService } from './services/ui';
 export { default as codeBlockService } from './services/codeBlock';
 export { default as depService } from './services/dep';