@tmagic/editor 1.1.0-beta.2 → 1.1.0-beta.5

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

@@ -29,13 +29,31 @@ declare class Props extends BaseService {
      * @param type 组件类型
      * @returns 组件初始值
      */
-    getPropsValue(type: string, defaultValue?: Record<string, any>): Promise<any>;
+    getPropsValue(type: string, { inputEvent, ...defaultValue }?: Record<string, any>): Promise<any>;
     createId(type: string | number): Promise<string>;
     /**
      * 将组件与组件的子元素配置中的id都设置成一个新的ID
      * @param {Object} config 组件配置
      */
-    setNewItemId(config: MNode, parent?: MPage): Promise<void>;
+    setNewItemId(config: MNode, parent?: MPage): Promise<MNode>;
+    /**
+     * 获取默认属性配置
+     * @param type 组件类型
+     * @returns Object
+     */
+    getDefaultPropsValue(type: string): Promise<{
+        type: string;
+        layout: string;
+        style: {};
+        name: string;
+        items: never[];
+    } | {
+        type: string;
+        style: {};
+        name: string;
+        layout?: undefined;
+        items?: undefined;
+    }>;
 }
 export declare type PropsService = Props;
 declare const _default: Props;

package/dist/types/src/type.d.ts

@@ -92,6 +92,7 @@ export interface EditorNodeInfo {
 export interface AddMNode {
     type: string;
     name?: string;
+    inputEvent?: DragEvent;
     [key: string]: any;
 }
 /**

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

@@ -36,23 +36,3 @@ export declare const fillConfig: (config?: FormConfig) => {
     })[];
 }[];
 export declare const DEFAULT_CONFIG: FormConfig;
-/**
- * 获取默认属性配置
- * @param type 组件类型
- * @returns Object
- */
-export declare const getDefaultPropsValue: (type: string, id: string) => {
-    type: string;
-    id: string;
-    layout: string;
-    style: {};
-    name: string;
-    items: never[];
-} | {
-    type: string;
-    id: string;
-    style: {};
-    name: string;
-    layout?: undefined;
-    items?: undefined;
-};

package/package.json

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

package/src/components/ScrollViewer.vue

@@ -55,7 +55,7 @@ export default defineComponent({
       style: computed(
         () => `
         width: ${props.width}px;
-        height: ${(props.height || 0) - 40}px;
+        height: ${props.height}px;
         position: absolute;
         margin-top: 30px;
       `,

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -41,8 +41,7 @@ import { computed, defineComponent, inject, ref } from 'vue';
 import serialize from 'serialize-javascript';
 
 import type StageCore from '@tmagic/stage';
-import { GHOST_EL_ID_PREFIX } from '@tmagic/stage';
-import { addClassName, removeClassNameByClassName } from '@tmagic/utils';
+import { removeClassNameByClassName } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
 import type { ComponentGroup, ComponentItem, Services, StageOptions } from '@editor/type';
@@ -125,19 +124,9 @@ export default defineComponent({
           return;
         }
 
-        if (timeout) return;
-
-        timeout = globalThis.setTimeout(async () => {
-          if (!stageOptions || !stage.value) return;
-          const doc = stage.value.renderer.contentWindow?.document;
-          const els = stage.value.getElementsFromPoint(e);
-          for (const el of els) {
-            if (doc && !el.id.startsWith(GHOST_EL_ID_PREFIX) && (await stageOptions.isContainer(el))) {
-              addClassName(el, doc, stageOptions?.containerHighlightClassName);
-              break;
-            }
-          }
-        }, stageOptions?.containerHighlightDuration);
+        if (timeout || !stage.value) return;
+
+        timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
       },
     };
   },

package/src/layouts/sidebar/LayerPanel.vue

@@ -61,11 +61,12 @@ import type { ElTree } from 'element-plus';
 import { throttle } from 'lodash-es';
 
 import type { MNode, MPage } from '@tmagic/schema';
-import { NodeType } from '@tmagic/schema';
+import { MContainer, NodeType } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
 
 import type { EditorService } from '@editor/services/editor';
 import type { Services } from '@editor/type';
+import { Layout } from '@editor/type';
 
 import LayerMenu from './LayerMenu.vue';
 
@@ -104,8 +105,16 @@ const useDrop = (tree: Ref<InstanceType<typeof ElTree> | undefined>, editorServi
     return false;
   },
 
-  handleDragEnd() {
+  async handleDragEnd(e: any) {
     if (!tree.value) return;
+    const { data: node } = e;
+    const parent = editorService?.getParentById(node.id, false) as MContainer;
+    const layout = await editorService?.getLayout(parent);
+    node.style.position = layout;
+    if (layout === Layout.RELATIVE) {
+      node.style.top = 0;
+      node.style.left = 0;
+    }
     const { data } = tree.value;
     const [page] = data as [MPage];
     editorService?.update(page);

package/src/layouts/workspace/Stage.vue

@@ -264,6 +264,8 @@ export default defineComponent({
             left,
           };
 
+          config.inputEvent = e;
+
           services?.editorService.add(config, parent);
         }
       },

package/src/services/BaseService.ts

@@ -36,18 +36,13 @@ const doAction = async (
     let beforeArgs = args;
 
     for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
-      let beforeReturnValue = (await beforeMethod(...beforeArgs)) || [];
+      beforeArgs = (await beforeMethod(...beforeArgs)) || [];
 
-      if (isError(beforeReturnValue)) throw beforeReturnValue;
+      if (isError(beforeArgs)) throw beforeArgs;
 
-      if (!Array.isArray(beforeReturnValue)) {
-        beforeReturnValue = [beforeReturnValue];
+      if (!Array.isArray(beforeArgs)) {
+        beforeArgs = [beforeArgs];
       }
-
-      beforeArgs = beforeArgs.map((v: any, index: number) => {
-        if (typeof beforeReturnValue[index] === 'undefined') return v;
-        return beforeReturnValue[index];
-      });
     }
 
     let returnValue: any = await fn(beforeArgs, sourceMethod.bind(scope));

package/src/services/editor.ts

@@ -40,7 +40,6 @@ import {
   isFixed,
   setLayout,
 } from '@editor/utils/editor';
-import { log } from '@editor/utils/logger';
 
 import BaseService from './BaseService';
 
@@ -90,7 +89,6 @@ class Editor extends BaseService {
    */
   public set<T = MNode>(name: keyof StoreState, value: T) {
     this.state[name] = value as any;
-    log('store set ', name, ' ', value);
 
     if (name === 'root') {
       this.state.pageLength = (value as unknown as MApp)?.items?.length || 0;
@@ -273,7 +271,8 @@ class Editor extends BaseService {
    * @returns 添加后的节点
    */
   public async add(addNode: AddMNode, parent?: MContainer | null): Promise<MNode> {
-    const { type, ...config } = addNode;
+    // 加入inputEvent是为给业务扩展时可以获取到更多的信息，只有在使用拖拽添加组件时才有改对象
+    const { type, inputEvent, ...config } = addNode;
     const curNode = this.get<MContainer>('node');
 
     let parentNode: MContainer | undefined;
@@ -305,7 +304,7 @@ class Editor extends BaseService {
     const stage = this.get<StageCore | null>('stage');
     const root = this.get<MApp>('root');
 
-    await stage?.add({ config: cloneDeep(newNode), root: cloneDeep(root) });
+    await stage?.add({ config: cloneDeep(newNode), parent: cloneDeep(parentNode), root: cloneDeep(root) });
 
     if (layout === Layout.ABSOLUTE) {
       const fixedLeft = fixNodeLeft(newNode, parentNode, stage?.renderer.contentWindow?.document);
@@ -322,10 +321,11 @@ class Editor extends BaseService {
       this.pushHistoryState();
     }
 
-    stage?.select(newNode.id);
-
     if (isPage) {
       this.state.pageLength += 1;
+    } else {
+      // 新增页面，这个时候页面还有渲染出来，此时select会出错，在runtime-ready的时候回去select
+      stage?.select(newNode.id);
     }
 
     this.emit('add', newNode);
@@ -507,7 +507,7 @@ class Editor extends BaseService {
       return;
     }
 
-    await propsService.setNewItemId(config, this.get('root'));
+    config = await propsService.setNewItemId(config, this.get('root'));
     if (config.style) {
       config.style = {
         ...config.style,
@@ -541,8 +541,8 @@ class Editor extends BaseService {
     const doc = stage?.renderer.contentWindow?.document;
 
     if (doc) {
-      const parentEl = doc.getElementById(`${parent.id}`);
       const el = doc.getElementById(`${node.id}`);
+      const parentEl = el?.offsetParent;
       if (parentEl && el) {
         node.style.left = (parentEl.clientWidth - el.clientWidth) / 2;
       }

package/src/services/props.ts

@@ -25,7 +25,7 @@ import { NodeType } from '@tmagic/schema';
 import { isPop, toLine } from '@tmagic/utils';
 
 import type { PropsState } from '@editor/type';
-import { DEFAULT_CONFIG, fillConfig, getDefaultPropsValue } from '@editor/utils/props';
+import { DEFAULT_CONFIG, fillConfig } from '@editor/utils/props';
 
 import BaseService from './BaseService';
 
@@ -36,7 +36,15 @@ class Props extends BaseService {
   });
 
   constructor() {
-    super(['setPropsConfig', 'getPropsConfig', 'setPropsValue', 'getPropsValue', 'createId', 'setNewItemId']);
+    super([
+      'setPropsConfig',
+      'getPropsConfig',
+      'setPropsValue',
+      'getPropsValue',
+      'createId',
+      'setNewItemId',
+      'getDefaultPropsValue',
+    ]);
   }
 
   public setPropsConfigs(configs: Record<string, FormConfig>) {
@@ -88,7 +96,7 @@ class Props extends BaseService {
    * @param type 组件类型
    * @returns 组件初始值
    */
-  public async getPropsValue(type: string, defaultValue: Record<string, any> = {}) {
+  public async getPropsValue(type: string, { inputEvent, ...defaultValue }: Record<string, any> = {}) {
     if (type === 'area') {
       const value = (await this.getPropsValue('button')) as MComponent;
       value.className = 'action-area';
@@ -99,12 +107,20 @@ class Props extends BaseService {
       return value;
     }
 
-    const data = cloneDeep(defaultValue as any);
-
-    await this.setNewItemId(data);
+    const [id, defaultPropsValue, data] = await Promise.all([
+      this.createId(type),
+      this.getDefaultPropsValue(type),
+      this.setNewItemId(
+        cloneDeep({
+          type,
+          ...defaultValue,
+        } as any),
+      ),
+    ]);
 
     return {
-      ...getDefaultPropsValue(type, await this.createId(type)),
+      id,
+      ...defaultPropsValue,
       ...mergeWith(cloneDeep(this.state.propsValueMap[type] || {}), data),
     };
   }
@@ -133,6 +149,29 @@ class Props extends BaseService {
         await this.setNewItemId(item, config as MPage);
       }
     }
+
+    return config;
+  }
+
+  /**
+   * 获取默认属性配置
+   * @param type 组件类型
+   * @returns Object
+   */
+  public async getDefaultPropsValue(type: string) {
+    return ['page', 'container'].includes(type)
+      ? {
+          type,
+          layout: 'absolute',
+          style: {},
+          name: type,
+          items: [],
+        }
+      : {
+          type,
+          style: {},
+          name: type,
+        };
   }
 }
 

package/src/services/ui.ts

@@ -155,10 +155,16 @@ class Ui extends BaseService {
     const { stageRect, stageContainerRect } = state;
     const { height, width } = stageContainerRect;
     if (!width || !height) return 1;
-    if (width > stageRect.width && height > stageRect.height) {
+
+    // 30为标尺的大小
+    const stageWidth = stageRect.width + 30;
+    const stageHeight = stageRect.height + 30;
+
+    if (width > stageWidth && height > stageHeight) {
       return 1;
     }
-    return Math.min((width - 100) / stageRect.width || 1, (height - 100) / stageRect.height || 1);
+    // 60/80是为了不要让画布太过去贴住四周（这样好看些）
+    return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1);
   }
 }
 

package/src/theme/framework.scss

@@ -35,7 +35,7 @@
       justify-content: center;
       align-items: center;
       flex-direction: column;
-      height: calc(100% - $--page-bar-height);
+      height: calc(100% - #{$--page-bar-height});
     }
 
     &-content {

package/src/theme/stage.scss

@@ -1,7 +1,7 @@
 .m-editor-stage {
   position: relative;
   width: 100%;
-  height: calc(100% - $--page-bar-height);
+  height: calc(100% - #{$--page-bar-height});
   overflow: hidden;
   display: flex;
   justify-content: center;
@@ -13,9 +13,9 @@
   height: 100%;
   z-index: 0;
   position: relative;
-  border: 1px solid $--border-color;
   transition: transform 0.3s;
   box-sizing: content-box;
+  box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
 
   &::-webkit-scrollbar {
     width: 0 !important;

package/src/type.ts

@@ -125,6 +125,7 @@ export interface EditorNodeInfo {
 export interface AddMNode {
   type: string;
   name?: string;
+  inputEvent?: DragEvent;
   [key: string]: any;
 }
 

package/src/utils/editor.ts

@@ -223,7 +223,8 @@ export const fixNodeLeft = (config: MNode, parent: MContainer, doc?: Document) =
   const el = doc.getElementById(`${config.id}`);
   const parentEl = doc.getElementById(`${parent.id}`);
 
-  if (el && parentEl && el.offsetWidth + config.style?.left > parentEl.offsetWidth) {
+  const left = Number(config.style?.left) || 0;
+  if (el && parentEl && el.offsetWidth + left > parentEl.offsetWidth) {
     return parentEl.offsetWidth - el.offsetWidth;
   }
 

package/src/utils/props.ts

@@ -237,25 +237,3 @@ export const fillConfig = (config: FormConfig = []) => [
 
 // 默认组件属性表单配置
 export const DEFAULT_CONFIG: FormConfig = fillConfig([]);
-
-/**
- * 获取默认属性配置
- * @param type 组件类型
- * @returns Object
- */
-export const getDefaultPropsValue = (type: string, id: string) =>
-  ['page', 'container'].includes(type)
-    ? {
-        type,
-        id,
-        layout: 'absolute',
-        style: {},
-        name: type,
-        items: [],
-      }
-    : {
-        type,
-        id,
-        style: {},
-        name: type,
-      };