fix: builder drag,picker change

biaogebusy · Apr 8, 2024 · 663472b · 663472b
1 parent 95c5f4a
commit 663472b
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 25 deletions.
diff --git a/src/app/core/branding/footer/common.scss b/src/app/core/branding/footer/common.scss
@@ -11,11 +11,9 @@
 }
 
 .shape > svg {
-  -webkit-transform: scale(2);
   transform: scale(2);
   width: 100%;
   height: auto;
-  -webkit-transform-origin: top center;
   transform-origin: top center;
 }
 .brand {

diff --git a/src/app/core/state/BuilderState.ts b/src/app/core/state/BuilderState.ts
@@ -11,7 +11,7 @@ import { ICard1v1 } from '@core/interface/widgets/ICard';
 import { UtilitiesService } from '@core/service/utilities.service';
 import { LocalStorageService } from 'ngx-webstorage';
 import { BehaviorSubject, Subject } from 'rxjs';
-import { get, map, set } from 'lodash-es';
+import { cloneDeep, get, map, set } from 'lodash-es';
 import { DOCUMENT } from '@angular/common';
 import { ScreenService } from '@core/service/screen.service';
 import { getComponentSetting } from '@modules/builder/factory/getComponentSetting';
@@ -179,11 +179,17 @@ export class BuilderState {
     this.updatePage();
   }
 
-  updatePageContentByPath(path: string, content: any, addType?: string): void {
+  updatePageContentByPath(
+    path: string,
+    content: any,
+    addType?: 'add' | 'move'
+  ): void {
     const { body } = this.currentPage;
     if (!addType) {
       set(body, path, content);
-    } else {
+    }
+
+    if (addType === 'add') {
       const lastDotIndex = path.lastIndexOf('.');
       const before = path.slice(0, lastDotIndex);
       const index = path.slice(lastDotIndex + 1);
@@ -193,6 +199,10 @@ export class BuilderState {
         set(body, before, targetArray);
       }
     }
+
+    if (addType === 'move') {
+      set(body, path, content);
+    }
     this.updatePage();
   }
 
@@ -217,10 +227,9 @@ export class BuilderState {
   transferComponet(event: CdkDragDrop<string[]>): void {
     const { body } = this.currentPage;
     // base 和 component的数据结构不同，需要做判断
-    const component = event.item.data.type
-      ? event.item.data
-      : event.item.data.content;
-    body.splice(event.currentIndex, 0, component);
+    const { data } = event.item;
+    const component = data.type ? data : data.content;
+    body.splice(event.currentIndex, 0, cloneDeep(component));
     this.updatePage(event.currentIndex);
   }
 

diff --git a/src/app/modules/builder/layout-builder/layout-builder.component.ts b/src/app/modules/builder/layout-builder/layout-builder.component.ts
@@ -1,6 +1,5 @@
 import {
   AfterViewInit,
-  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   ElementRef,
@@ -44,7 +43,6 @@ import { ScreenService } from '@core/service/screen.service';
   selector: 'app-layout-builder',
   templateUrl: './layout-builder.component.html',
   styleUrls: ['./layout-builder.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LayoutBuilderComponent
   implements OnInit, AfterViewInit, OnDestroy
@@ -112,7 +110,6 @@ export class LayoutBuilderComponent
   }
 
   addBlock(addType: string, content: any, event: any): void {
-    console.log('path:', this.util.generatePath(event.target));
     this.dialog.open(DialogComponent, {
       width: '700px',
       position: { bottom: '20px' },

diff --git a/src/app/modules/builder/layout-builder/layout-setting/layout-setting.component.ts b/src/app/modules/builder/layout-builder/layout-setting/layout-setting.component.ts
@@ -50,13 +50,28 @@ export class LayoutSettingComponent implements OnDestroy {
   }
 
   drop(event: CdkDragDrop<string[]>) {
-    moveItemInArray(
-      this.content.content.elements,
-      event.previousIndex,
-      event.currentIndex
-    );
+    const { pageIndex, path, level, content } = this.content;
+    // component toolbar
+    if (pageIndex !== undefined && level === 'block') {
+      moveItemInArray(
+        this.content.content.elements,
+        event.previousIndex,
+        event.currentIndex
+      );
+
+      this.emitLayoutSetting(this.content.content);
+    }
 
-    this.emitLayoutSetting(this.content.content);
+    // layout builder
+    if (path && (level === 'layout' || level === 'widget')) {
+      moveItemInArray(
+        this.content.content.elements,
+        event.previousIndex,
+        event.currentIndex
+      );
+      // TODO: layout no change
+      this.builder.updatePageContentByPath(path, content, 'move');
+    }
   }
 
   emitLayoutSetting(content: any): void {

diff --git a/src/app/modules/builder/main/widget-picker/widget-picker.component.ts b/src/app/modules/builder/main/widget-picker/widget-picker.component.ts
@@ -34,14 +34,14 @@ export class WidgetPickerComponent implements OnInit {
   onSelect(widget: any): void {
     const { addType, path, pageIndex, content, level, uuid } = this.content;
     if (addType === 'widget') {
-      this.builder.updatePageContentByPath(path, widget.content, 'widget');
+      this.builder.updatePageContentByPath(path, { ...widget.content }, 'add');
     }
 
     if (addType === 'layout') {
       this.builder.updatePageContentByPath(
         path,
-        this.copyLayoutLastChild(content.elements, widget.content),
-        'layout'
+        this.copyLayoutLastChild(content.elements, { ...widget.content }),
+        'add'
       );
     }
 
@@ -51,7 +51,7 @@ export class WidgetPickerComponent implements OnInit {
         content.elements.splice(
           content.elements.length,
           0,
-          this.copyLayoutLastChild(content.elements, widget.content)
+          this.copyLayoutLastChild(content.elements, { ...widget.content })
         );
         this.builder.builderLayoutSetting$.next({
           value: content,
@@ -62,7 +62,9 @@ export class WidgetPickerComponent implements OnInit {
     } else {
       // loop element for elements
       if (level === 'block' && content.elements) {
-        content.elements.splice(content.elements.length, 0, widget.content);
+        content.elements.splice(content.elements.length, 0, {
+          ...widget.content,
+        });
         this.builder.builderLayoutSetting$.next({
           value: content,
           uuid,

diff --git a/src/app/modules/builder/sidebar/builder-uiux/builder-uiux.component.html b/src/app/modules/builder/sidebar/builder-uiux/builder-uiux.component.html
@@ -7,4 +7,4 @@
       <app-builder-panel [content]="widget.elements"></app-builder-panel>
     </div>
   </mat-tab>
-</mat-tab-group>
+</mat-tab-group>
diff --git a/src/stories/Changelog.stories.mdx b/src/stories/Changelog.stories.mdx
@@ -14,7 +14,7 @@ import { Meta } from "@storybook/addon-docs";
 
 # 更新日志
 
-## 4.2.5(2024-04-03)
+## 4.2.5(2024-04-07)
 
 - 移除了 text 富文本组件默认的动画效果，统一在 layout builder 中配置；
 - 移除了 assets/images 中特定产品的图片资源；