@tmagic/editor 1.1.0-beta.3 → 1.1.0-beta.4

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

@@ -29,7 +29,7 @@ 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

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/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.0-beta.3",
+  "version": "1.1.0-beta.4",
   "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.3",
-    "@tmagic/form": "1.1.0-beta.3",
-    "@tmagic/schema": "1.1.0-beta.3",
-    "@tmagic/stage": "1.1.0-beta.3",
-    "@tmagic/utils": "1.1.0-beta.3",
+    "@tmagic/core": "1.1.0-beta.4",
+    "@tmagic/form": "1.1.0-beta.4",
+    "@tmagic/schema": "1.1.0-beta.4",
+    "@tmagic/stage": "1.1.0-beta.4",
+    "@tmagic/utils": "1.1.0-beta.4",
     "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.3",
+    "@tmagic/form": "1.1.0-beta.4",
     "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/workspace/Stage.vue

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

package/src/services/editor.ts

@@ -271,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;
@@ -539,8 +540,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

@@ -88,7 +88,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';

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;
 }