@tmagic/editor 1.0.0-rc.10 → 1.0.0-rc.11

package/dist/types/src/services/editor.d.ts

@@ -23,21 +23,24 @@ declare class Editor extends BaseService {
     /**
      * 根据id获取组件、组件的父组件以及组件所属的页面节点
      * @param {number | string} id 组件id
+     * @param {boolean} raw 是否使用toRaw
      * @returns {EditorNodeInfo}
      */
-    getNodeInfo(id: Id): EditorNodeInfo;
+    getNodeInfo(id: Id, raw?: boolean): EditorNodeInfo;
     /**
      * 根据ID获取指点节点配置
      * @param id 组件ID
+     * @param {boolean} raw 是否使用toRaw
      * @returns 组件节点配置
      */
-    getNodeById(id: Id): MNode | undefined;
+    getNodeById(id: Id, raw?: boolean): MNode | undefined;
     /**
      * 根据ID获取指点节点的父节点配置
      * @param id 组件ID
+     * @param {boolean} raw 是否使用toRaw
      * @returns 指点组件的父节点配置
      */
-    getParentById(id: Id): MContainer | undefined;
+    getParentById(id: Id, raw?: boolean): MContainer | undefined;
     /**
      * 只有容器拥有布局
      */

package/dist/types/src/utils/props.d.ts

@@ -44,6 +44,7 @@ export declare const DEFAULT_CONFIG: FormConfig;
 export declare const getDefaultPropsValue: (type: string, id: string) => {
     type: string;
     id: string;
+    layout: string;
     style: {};
     name: string;
     items: never[];
@@ -52,5 +53,6 @@ export declare const getDefaultPropsValue: (type: string, id: string) => {
     id: string;
     style: {};
     name: string;
+    layout?: undefined;
     items?: undefined;
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-rc.10",
+  "version": "1.0.0-rc.11",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -43,11 +43,11 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons": "0.0.11",
-    "@tmagic/core": "1.0.0-rc.10",
-    "@tmagic/form": "1.0.0-rc.10",
-    "@tmagic/schema": "1.0.0-rc.10",
-    "@tmagic/stage": "1.0.0-rc.10",
-    "@tmagic/utils": "1.0.0-rc.10",
+    "@tmagic/core": "1.0.0-rc.11",
+    "@tmagic/form": "1.0.0-rc.11",
+    "@tmagic/schema": "1.0.0-rc.11",
+    "@tmagic/stage": "1.0.0-rc.11",
+    "@tmagic/utils": "1.0.0-rc.11",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "element-plus": "^2.2.0",
@@ -60,7 +60,7 @@
     "vue": "^3.2.0"
   },
   "peerDependencies": {
-    "@tmagic/form": "1.0.0-rc.10",
+    "@tmagic/form": "1.0.0-rc.11",
     "element-plus": "^2.2.0",
     "monaco-editor": "^0.32.1",
     "vue": "^3.2.0"

package/src/layouts/workspace/Stage.vue

@@ -123,7 +123,7 @@ export default defineComponent({
       stage?.on('runtime-ready', (rt) => {
         runtime = rt;
         // toRaw返回的值是一个引用而非快照，需要cloneDeep
-        root.value && runtime?.updateRootConfig(cloneDeep(toRaw(root.value)));
+        root.value && runtime?.updateRootConfig?.(cloneDeep(toRaw(root.value)));
         page.value?.id && runtime?.updatePageId?.(page.value.id);
         setTimeout(() => {
           node.value && stage?.select(toRaw(node.value.id));
@@ -138,7 +138,7 @@ export default defineComponent({
 
     watch(root, (root) => {
       if (runtime && root) {
-        runtime.updateRootConfig(cloneDeep(toRaw(root)));
+        runtime.updateRootConfig?.(cloneDeep(toRaw(root)));
       }
     });
 

package/src/services/editor.ts

@@ -108,10 +108,14 @@ class Editor extends BaseService {
   /**
    * 根据id获取组件、组件的父组件以及组件所属的页面节点
    * @param {number | string} id 组件id
+   * @param {boolean} raw 是否使用toRaw
    * @returns {EditorNodeInfo}
    */
-  public getNodeInfo(id: Id): EditorNodeInfo {
-    const root = toRaw(this.get<MApp | null>('root'));
+  public getNodeInfo(id: Id, raw = true): EditorNodeInfo {
+    let root = this.get<MApp | null>('root');
+    if (raw) {
+      root = toRaw(root);
+    }
     if (!root) return {};
 
     if (id === root.id) {
@@ -141,21 +145,23 @@ class Editor extends BaseService {
   /**
    * 根据ID获取指点节点配置
    * @param id 组件ID
+   * @param {boolean} raw 是否使用toRaw
    * @returns 组件节点配置
    */
-  public getNodeById(id: Id): MNode | undefined {
-    const { node } = this.getNodeInfo(id);
+  public getNodeById(id: Id, raw = true): MNode | undefined {
+    const { node } = this.getNodeInfo(id, raw);
     return node;
   }
 
   /**
    * 根据ID获取指点节点的父节点配置
    * @param id 组件ID
+   * @param {boolean} raw 是否使用toRaw
    * @returns 指点组件的父节点配置
    */
-  public getParentById(id: Id): MContainer | undefined {
+  public getParentById(id: Id, raw = true): MContainer | undefined {
     if (!this.get<MApp | null>('root')) return;
-    const { parent } = this.getNodeInfo(id);
+    const { parent } = this.getNodeInfo(id, raw);
     return parent;
   }
 
@@ -279,7 +285,7 @@ class Editor extends BaseService {
     } else if (curNode.items) {
       parentNode = curNode;
     } else {
-      parentNode = this.getParentById(curNode.id);
+      parentNode = this.getParentById(curNode.id, false);
     }
 
     if (!parentNode) throw new Error('未找到父元素');
@@ -332,7 +338,7 @@ class Editor extends BaseService {
 
     if (!root) throw new Error('没有root');
 
-    const { parent, node: curNode } = this.getNodeInfo(node.id);
+    const { parent, node: curNode } = this.getNodeInfo(node.id, false);
 
     if (!parent || !curNode) throw new Error('找不要删除的节点');
 
@@ -384,7 +390,7 @@ class Editor extends BaseService {
   public async update(config: MNode): Promise<MNode> {
     if (!config?.id) throw new Error('没有配置或者配置缺少id值');
 
-    const info = this.getNodeInfo(config.id);
+    const info = this.getNodeInfo(config.id, false);
 
     if (!info.node) throw new Error(`获取不到id为${config.id}的节点`);
 

package/src/theme/page-bar.scss

@@ -25,6 +25,7 @@
     justify-items: center;
     align-items: center;
     background-color: #f3f3f3;
+    white-space: nowrap;
 
     &.active {
       background-color: #fff;

package/src/utils/props.ts

@@ -248,6 +248,7 @@ export const getDefaultPropsValue = (type: string, id: string) =>
     ? {
         type,
         id,
+        layout: 'absolute',
         style: {},
         name: type,
         items: [],