@tmagic/editor 1.3.0-beta.8 → 1.3.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-beta.8",
+  "version": "1.3.1",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -47,13 +47,13 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.3.0-beta.8",
-    "@tmagic/design": "1.3.0-beta.8",
-    "@tmagic/form": "1.3.0-beta.8",
-    "@tmagic/schema": "1.3.0-beta.8",
-    "@tmagic/stage": "1.3.0-beta.8",
-    "@tmagic/table": "1.3.0-beta.8",
-    "@tmagic/utils": "1.3.0-beta.8",
+    "@tmagic/core": "1.3.1",
+    "@tmagic/design": "1.3.1",
+    "@tmagic/form": "1.3.1",
+    "@tmagic/schema": "1.3.1",
+    "@tmagic/stage": "1.3.1",
+    "@tmagic/table": "1.3.1",
+    "@tmagic/utils": "1.3.1",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -65,8 +65,8 @@
     "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.0-beta.8",
-    "@tmagic/form": "1.3.0-beta.8",
+    "@tmagic/design": "1.3.1",
+    "@tmagic/form": "1.3.1",
     "monaco-editor": "^0.41.0",
     "vue": "^3.3.4"
   },

package/src/initService.ts

@@ -276,26 +276,6 @@ export const initServiceEvents = (
   };
 
   const rootChangeHandler = async (value: MApp | null, preValue?: MApp | null) => {
-    const nodeId = editorService.get('node')?.id || props.defaultSelected;
-    let node;
-    if (nodeId) {
-      node = editorService.getNodeById(nodeId);
-    }
-
-    if (node && node !== value) {
-      await editorService.select(node.id);
-    } else if (value?.items?.length) {
-      await editorService.select(value.items[0]);
-    } else if (value?.id) {
-      editorService.set('nodes', [value]);
-      editorService.set('parent', null);
-      editorService.set('page', null);
-    }
-
-    if (toRaw(value) !== toRaw(preValue)) {
-      emit('update:modelValue', value);
-    }
-
     if (!value) return;
 
     value.codeBlocks = value.codeBlocks || {};
@@ -314,12 +294,32 @@ export const initServiceEvents = (
       initDataSourceDepTarget(ds);
     });
 
-    if (value && Array.isArray(value.items)) {
+    if (Array.isArray(value.items)) {
       depService.collect(value.items, true);
     } else {
       depService.clear();
       delete value.dataSourceDeps;
     }
+
+    const nodeId = editorService.get('node')?.id || props.defaultSelected;
+    let node;
+    if (nodeId) {
+      node = editorService.getNodeById(nodeId);
+    }
+
+    if (node && node !== value) {
+      await editorService.select(node.id);
+    } else if (value.items?.length) {
+      await editorService.select(value.items[0]);
+    } else if (value.id) {
+      editorService.set('nodes', [value]);
+      editorService.set('parent', null);
+      editorService.set('page', null);
+    }
+
+    if (toRaw(value) !== toRaw(preValue)) {
+      emit('update:modelValue', value);
+    }
   };
 
   // 新增节点，收集依赖

package/src/layouts/sidebar/data-source/DataSourceList.vue

@@ -149,7 +149,6 @@ const tree = ref<InstanceType<typeof TMagicTree>>();
 
 defineExpose({
   filter(val: string) {
-    debugger;
     tree.value?.filter(val);
   },
 });

package/src/layouts/workspace/viewer/Stage.vue

@@ -33,7 +33,7 @@
 import { computed, inject, markRaw, nextTick, onMounted, onUnmounted, ref, toRaw, watch, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
-import type { MContainer } from '@tmagic/schema';
+import type { MApp, MContainer } from '@tmagic/schema';
 import StageCore, { calcValueByFontsize, getOffset, Runtime } from '@tmagic/stage';
 
 import ScrollViewer from '@editor/components/ScrollViewer.vue';
@@ -105,12 +105,6 @@ watch(zoom, (zoom) => {
   stage.setZoom(zoom);
 });
 
-watch(root, (root) => {
-  if (runtime && root) {
-    runtime.updateRootConfig?.(cloneDeep(toRaw(root)));
-  }
-});
-
 watch(page, (page) => {
   if (runtime && page) {
     runtime.updatePageId?.(page.id);
@@ -120,6 +114,14 @@ watch(page, (page) => {
   }
 });
 
+const rootChangeHandler = (root: MApp) => {
+  if (runtime && root) {
+    runtime.updateRootConfig?.(cloneDeep(toRaw(root)));
+  }
+};
+
+services?.editorService.on('root-change', rootChangeHandler);
+
 const resizeObserver = new ResizeObserver((entries) => {
   for (const { contentRect } of entries) {
     services?.uiService.set('stageContainerRect', {
@@ -141,6 +143,7 @@ onUnmounted(() => {
   resizeObserver.disconnect();
   services?.editorService.set('stage', null);
   services?.keybindingService.unregisteEl('stage');
+  services?.editorService.off('root-change', rootChangeHandler);
 });
 
 const parseDSL = getConfig('parseDSL');

package/src/services/editor.ts

@@ -36,6 +36,7 @@ import {
   getInitPositionStyle,
   getNodeIndex,
   isFixed,
+  setChilrenLayout,
   setLayout,
 } from '@editor/utils/editor';
 import { beforePaste, getAddParent } from '@editor/utils/operator';
@@ -510,8 +511,8 @@ class Editor extends BaseService {
 
     const newLayout = await this.getLayout(newConfig);
     const layout = await this.getLayout(node);
-    if (newLayout !== layout) {
-      newConfig = setLayout(newConfig, newLayout);
+    if (Array.isArray(newConfig.items) && newLayout !== layout) {
+      newConfig = setChilrenLayout(newConfig as MContainer, newLayout);
     }
 
     parentNodeItems[index] = newConfig;
@@ -788,7 +789,15 @@ class Editor extends BaseService {
       }
     }
 
+    const layout = await this.getLayout(parent);
+    const newLayout = await this.getLayout(targetParent);
+
+    if (newLayout !== layout) {
+      setLayout(config, newLayout);
+    }
+
     parent.items?.splice(index, 1);
+
     targetParent.items?.splice(targetIndex, 0, config);
 
     const page = this.get('page');

package/src/utils/editor.ts

@@ -129,23 +129,28 @@ export const getInitPositionStyle = (style: Record<string, any> = {}, layout: La
   return style;
 };
 
-export const setLayout = (node: MNode, layout: Layout) => {
+export const setChilrenLayout = (node: MContainer, layout: Layout) => {
   node.items?.forEach((child: MNode) => {
-    if (isPop(child)) return;
+    setLayout(child, layout);
+  });
+  return node;
+};
 
-    const style = child.style || {};
+export const setLayout = (node: MNode, layout: Layout) => {
+  if (isPop(node)) return;
 
-    // 是 fixed 不做处理
-    if (style.position === 'fixed') return;
+  const style = node.style || {};
 
-    if (layout !== Layout.RELATIVE) {
-      style.position = 'absolute';
-    } else {
-      child.style = getRelativeStyle(style);
-      child.style.right = 'auto';
-      child.style.bottom = 'auto';
-    }
-  });
+  // 是 fixed 不做处理
+  if (style.position === 'fixed') return;
+
+  if (layout !== Layout.RELATIVE) {
+    style.position = 'absolute';
+  } else {
+    node.style = getRelativeStyle(style);
+    node.style.right = 'auto';
+    node.style.bottom = 'auto';
+  }
   return node;
 };
 

package/types/utils/editor.d.ts

@@ -34,7 +34,8 @@ export declare const isFixed: (node: MNode) => boolean;
 export declare const getNodeIndex: (id: Id, parent: MContainer | MApp) => number;
 export declare const getRelativeStyle: (style?: Record<string, any>) => Record<string, any>;
 export declare const getInitPositionStyle: (style: Record<string, any> | undefined, layout: Layout) => Record<string, any>;
-export declare const setLayout: (node: MNode, layout: Layout) => MNode;
+export declare const setChilrenLayout: (node: MContainer, layout: Layout) => MContainer;
+export declare const setLayout: (node: MNode, layout: Layout) => import("@tmagic/schema").MComponent | undefined;
 export declare const change2Fixed: (node: MNode, root: MApp) => {
     left: number;
     top: number;