fix: layout setting formly config

biaogebusy · Mar 5, 2024 · 205bcb7 · 205bcb7
1 parent c725fce
commit 205bcb7
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 59 deletions.
diff --git a/src/app/modules/builder/factory/getComponentSetting.ts b/src/app/modules/builder/factory/getComponentSetting.ts
@@ -43,6 +43,10 @@ export function getComponentSetting(content: any): FormlyFieldConfig[] {
               templateOptions: {
                 label: '上下间距',
                 options: [
+                  {
+                    label: '无',
+                    value: 'none',
+                  },
                   {
                     label: '超小',
                     value: 'xs',

diff --git a/src/app/modules/builder/factory/getInlinImg.ts b/src/app/modules/builder/factory/getInlinImg.ts
@@ -1,4 +1,5 @@
 import { FormlyFieldConfig } from '@ngx-formly/core';
+import { includes } from 'lodash-es';
 
 export function getInlineImg(ele: any): FormlyFieldConfig[] {
   return [
@@ -8,7 +9,9 @@ export function getInlineImg(ele: any): FormlyFieldConfig[] {
         {
           type: 'slider',
           key: 'width',
-          defaultValue: parseFloat(ele.style.width.replace('px')) || 0,
+          defaultValue: ele.style.width.includes('auto')
+            ? 0
+            : parseFloat(ele.style.width.replace('px')) || 0,
           className: 'width-100',
           templateOptions: {
             min: 0,
@@ -17,44 +20,26 @@ export function getInlineImg(ele: any): FormlyFieldConfig[] {
             label: '宽度',
             unit: 'px',
           },
+          expressionProperties: {
+            'templateOptions.unit': "model.width === 0 ? 'auto':'px'",
+          },
         },
         {
           type: 'slider',
           key: 'height',
           className: 'width-100',
-          defaultValue: parseFloat(ele.style.height.replace('px', '')) || 0,
+          defaultValue: ele.style.height.includes('auto')
+            ? 0
+            : parseFloat(ele.style.height.replace('px')) || 0,
           templateOptions: {
             min: 0,
             max: 2000,
             step: 2,
             label: '高度',
             unit: 'px',
           },
-        },
-        {
-          type: 'slider',
-          key: 'maxWidth',
-          className: 'width-100',
-          defaultValue: parseFloat(ele.style.maxWidth.replace('px', '')) || 0,
-          templateOptions: {
-            min: 0,
-            max: 2000,
-            step: 2,
-            label: '最大宽度',
-            unit: 'px',
-          },
-        },
-        {
-          type: 'slider',
-          key: 'maxHeight',
-          className: 'width-100',
-          defaultValue: parseFloat(ele.style.maxHeight.replace('px', '')) || 0,
-          templateOptions: {
-            min: 0,
-            max: 2000,
-            step: 2,
-            label: '最大高度',
-            unit: 'px',
+          expressionProperties: {
+            'templateOptions.unit': "model.height === 0 ? 'auto':'px'",
           },
         },
         {
@@ -84,6 +69,33 @@ export function getInlineImg(ele: any): FormlyFieldConfig[] {
             unit: 'px',
           },
         },
+        {
+          type: 'select',
+          key: 'boxShadow',
+          className: 'width-100',
+          defaultValue: ele.style.boxShadow || 'none',
+          templateOptions: {
+            label: '阴影',
+            options: [
+              {
+                label: '无',
+                value: 'none',
+              },
+              {
+                label: '小',
+                value: 'rgba(0, 0, 0, 0.1) 0 2px 4px',
+              },
+              {
+                label: '中',
+                value: 'rgba(0, 0, 0, 0.1) 0 4px 8px',
+              },
+              {
+                label: '大',
+                value: 'rgba(0, 0, 0, 0.1) 0 6px 12px',
+              },
+            ],
+          },
+        },
         {
           type: 'select',
           key: 'objectFit',

diff --git a/src/app/modules/builder/factory/getInlineText.ts b/src/app/modules/builder/factory/getInlineText.ts
@@ -47,68 +47,76 @@ export function getInlineText(ele: any): FormlyFieldConfig[] {
         {
           key: 'fontSize',
           type: 'slider',
-          defaultValue: parseFloat(view.style.fontSize.replace('px', '')) || 0,
+          defaultValue: view.style.fontSize.includes('inherit')
+            ? 0
+            : parseFloat(view.style.fontSize.replace('px')) || 0,
           className: 'width-100',
           templateOptions: {
             type: 'number',
-            min: 10,
+            min: 0,
             max: 100,
             step: 1,
             label: 'Size',
             unit: 'px',
           },
-        },
-        {
-          type: 'slider',
-          key: 'width',
-          defaultValue: parseFloat(view.style.width.replace('px', '')) || 0,
-          className: 'width-100',
-          templateOptions: {
-            min: 0,
-            max: 2000,
-            step: 2,
-            label: 'Width',
-            unit: 'px',
+          expressionProperties: {
+            'templateOptions.unit': "model.fontSize === 0 ? 'inherit':'px'",
           },
         },
         {
+          key: 'lineHeight',
           type: 'slider',
-          key: 'height',
+          defaultValue: view.style.lineHeight.includes('normal')
+            ? 0
+            : view.style.lineHeight,
           className: 'width-100',
-          defaultValue: parseFloat(view.style.height.replace('px', '')) || 0,
           templateOptions: {
+            type: 'number',
             min: 0,
-            max: 2000,
-            step: 2,
-            label: 'Height',
-            unit: 'px',
+            max: 2,
+            step: 0.1,
+            label: '行高',
+            unit: '',
+          },
+          expressionProperties: {
+            'templateOptions.unit': "model.lineHeight === 0 ? 'normal':''",
           },
         },
         {
           type: 'slider',
-          key: 'maxWidth',
+          key: 'width',
+          defaultValue: view.style.width.includes('auto')
+            ? 0
+            : parseFloat(view.style.width.replace('px')) || 0,
           className: 'width-100',
-          defaultValue: parseFloat(view.style.maxWidth.replace('px', '')) || 0,
           templateOptions: {
             min: 0,
             max: 2000,
             step: 2,
-            label: 'Max Width',
+            label: 'Width',
             unit: 'px',
           },
+          expressionProperties: {
+            'templateOptions.unit': "model.width === 0 ? 'auto':'px'",
+          },
         },
         {
           type: 'slider',
-          key: 'maxHeight',
+          key: 'height',
           className: 'width-100',
-          defaultValue: parseFloat(view.style.maxHeight.replace('px', '')) || 0,
+          defaultValue: view.style.height.includes('auto')
+            ? 0
+            : parseFloat(view.style.height.replace('px')) || 0,
           templateOptions: {
             min: 0,
             max: 2000,
             step: 2,
-            label: 'Max Height',
+            label: 'Height',
             unit: 'px',
           },
+          expressionProperties: {
+            'templateOptions.unit': "model.height === 0 ? 'auto':'px'",
+          },
         },
         {
           type: 'slider',

diff --git a/src/app/modules/builder/layout-builder/layout-builder.component.scss b/src/app/modules/builder/layout-builder/layout-builder.component.scss
@@ -76,11 +76,14 @@
         border-radius: 4px 4px 0 0;
         z-index: 10;
         white-space: nowrap;
-        right: 30px;
+        right: 30;
         top: auto;
         bottom: 0;
       }
       &:hover {
+        .toggle {
+          display: none;
+        }
         .block-toolbar {
           display: block;
         }

diff --git a/src/app/modules/builder/layout-builder/layout-builder.component.ts b/src/app/modules/builder/layout-builder/layout-builder.component.ts
@@ -16,7 +16,7 @@ import { DialogComponent } from '@uiux/widgets/dialog/dialog.component';
 import { defaultsDeep, isNumber } from 'lodash-es';
 import { Subject } from 'rxjs';
 import { Observable } from 'rxjs/internal/Observable';
-import { takeUntil } from 'rxjs/operators';
+import { delay, takeUntil } from 'rxjs/operators';
 import { getTitleField } from '../factory/getTitleField';
 import { getBtnVideo } from '../factory/getBtnVideo';
 import { getSwiper } from '../factory/getSwiper';
@@ -53,7 +53,7 @@ export class LayoutBuilderComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.builder.builderLayoutSetting$
-      .pipe(takeUntil(this.destroy$))
+      .pipe(takeUntil(this.destroy$), delay(200))
       .subscribe((data) => {
         const { i, index, value, uuid } = data;
         if (uuid === this.uuid) {

diff --git a/src/app/modules/builder/main/meta-edit/meta-edit.component.ts b/src/app/modules/builder/main/meta-edit/meta-edit.component.ts
@@ -177,9 +177,16 @@ export class MetaEditComponent implements OnInit, AfterViewInit {
       switch (key) {
         case 'fontSize':
           const fontSize =
-            style.fontSize === 0 ? 'auto' : style.fontSize + 'px';
+            style.fontSize === 0 ? 'inherit' : style.fontSize + 'px';
+          style[key] = fontSize;
           this.setStyle('fontSize', fontSize, value);
           break;
+        case 'lineHeight':
+          const lineHeight =
+            style.lineHeight === 0 ? 'normal' : style.lineHeight;
+          style[key] = lineHeight;
+          this.setStyle('lineHeight', lineHeight, value);
+          break;
         case 'width':
           const width = style.width === 0 ? 'auto' : style.width + 'px';
           style[key] = width;

diff --git a/src/app/uiux/widgets/form/formly-type/slider/slider.component.scss b/src/app/uiux/widgets/form/formly-type/slider/slider.component.scss
@@ -1,11 +1,11 @@
 .slider {
-  gap: 6px;
+  gap: 8px;
   .mat-slider {
     min-width: auto;
     flex: 1 1 auto;
   }
   .value {
-    flex: 0 0 50px;
+    flex: 0 0 60px;
     display: flex;
     text-align: center;
     justify-content: center;