Merge pull request #9949 from zhangtao07/master

chore: flex布局设置优化
2024-11-29 18:48:45 +08:00 · 2024-04-01 20:52:48 +08:00 · 2024-04-01 20:52:48 +08:00 · d1dd59cc8a
commit d1dd59cc8a
parent 0891ef0cd9 b62ab81591
5 changed files with 86 additions and 56 deletions
--- a/packages/amis-editor-core/scss/style-control/_flex-layout.scss
+++ b/packages/amis-editor-core/scss/style-control/_flex-layout.scss
@ -24,6 +24,6 @@

  &-itemColumn {
    height: 100%;
-    background-color: #999;
+    background-color: #ccc;
  }
 }
--- a/packages/amis-editor/src/plugin/Container.tsx
+++ b/packages/amis-editor/src/plugin/Container.tsx
@ -141,24 +141,21 @@ export class ContainerPlugin extends LayoutBasePlugin {

    const node = context.node!;
    const isFlexItem = this.manager?.isFlexItem(node.id);
-    if (isFlexItem && context.node.parent?.children?.length > 1) {
-      let isColumnFlex = String(node.schema?.style?.flexDirection).includes(
-        'column'
+    if (isFlexItem) {
+      let isColumnFlex = this.manager.isFlexColumnItem(node.id);
+      context?.node.setHeightMutable(
+        node?.schema?.isFixedHeight && !isColumnFlex
      );
-      console.log(
-        'isColumnFlex',
-        isColumnFlex,
-        node.schema?.style?.flexDirection
+      context?.node.setWidthMutable(
+        (!isColumnFlex && context.node.parent?.children?.length > 1) ||
+          node.schema?.style?.flex === '0 0 150px'
      );
-      // context?.node.setHeightMutable(isColumnFlex);
-      context?.node.setWidthMutable(!isColumnFlex);
+    } else {
+      context?.node.setHeightMutable(node.schema?.isFixedHeight);
+      context?.node.setWidthMutable(node.schema?.isFixedWidth);
    }
  }

-  afterUpdate(event: PluginEvent<ActiveEventContext>) {
-    const node = event.context?.node;
-  }
-
  onWidthChangeStart(
    event: PluginEvent<
      ResizeMoveEventContext,
@ -177,11 +174,11 @@ export class ContainerPlugin extends LayoutBasePlugin {
    if (!parent) {
      return;
    }
-    console.log('on width change start');
    const resizer = context.resizer;
    const frameRect = parent.getBoundingClientRect();
    const rect = dom.getBoundingClientRect();
    const isFlexItem = this.manager?.isFlexItem(node.id);
+    const isColumnFlex = this.manager?.isFlexColumnItem(node.id);
    const schema = node.schema;
    const index = node.index;
    const isFlexSize =
@ -234,7 +231,7 @@ export class ContainerPlugin extends LayoutBasePlugin {
            }
          }
        } else {
-          if (isFlexItem) {
+          if (isFlexItem && !isColumnFlex) {
            node.updateState({
              style: {
                ...node.schema.style,
@ -270,7 +267,7 @@ export class ContainerPlugin extends LayoutBasePlugin {
            item.updateState({}, true);
          });
        } else {
-          if (isFlexItem) {
+          if (isFlexItem && !isColumnFlex) {
            node.updateSchema({
              style: {
                ...node.schema.style,
@ -296,18 +293,18 @@ export class ContainerPlugin extends LayoutBasePlugin {
    });
  }

-  onHeightChangeStart(
-    event: PluginEvent<
-      ResizeMoveEventContext,
-      {
-        onMove(e: MouseEvent): void;
-        onEnd(e: MouseEvent): void;
-      }
-    >
-  ) {
-    console.log('on height change start');
-    // return this.onSizeChangeStart(event, 'vertical');
-  }
+  // onHeightChangeStart(
+  //   event: PluginEvent<
+  //     ResizeMoveEventContext,
+  //     {
+  //       onMove(e: MouseEvent): void;
+  //       onEnd(e: MouseEvent): void;
+  //     }
+  //   >
+  // ) {
+  //   // console.log('on height change start');
+  //   // return this.onSizeChangeStart(event, 'vertical');
+  // }

  panelBodyCreator = (context: BaseEventContext) => {
    const curRendererSchema = context?.schema;
--- a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx
+++ b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx
@ -6,7 +6,8 @@ import {
  JSONPipeOut,
  LayoutBasePlugin,
  PluginEvent,
-  reGenerateID
+  reGenerateID,
+  tipedLabel
 } from 'amis-editor-core';
 import {getSchemaTpl} from 'amis-editor-core';
 import {Button, PlainObject} from 'amis';
@ -108,13 +109,7 @@ export class FlexPluginBase extends LayoutBasePlugin {
    if (/^[\d:]+$/.test(value) && isAlive(node)) {
      let list = value.trim().split(':');
      let children = node.children || [];
-
-      if (String(node.schema?.style?.flexDirection).includes('column')) {
-        list = list.reverse();
-        node.updateSchemaStyle({
-          flexDirection: 'row'
-        });
-      }
+      const isColumn = this.manager?.isFlexColumnItem(node.id);

      // 更新flex布局
      for (let i = 0; i < children.length; i++) {
@ -122,7 +117,7 @@ export class FlexPluginBase extends LayoutBasePlugin {
        child.updateSchemaStyle({
          flexGrow: +list[i],
          width: undefined,
-          flexBasis: 0,
+          flexBasis: isColumn ? 'auto' : 0,
          flex: '1 1 auto'
        });
      }
@ -130,7 +125,7 @@ export class FlexPluginBase extends LayoutBasePlugin {
      // 增加或删除列
      if (children.length < list.length) {
        for (let i = 0; i < list.length - children.length; i++) {
-          let newColumnSchema = defaultFlexColumnSchema();
+          let newColumnSchema = defaultFlexColumnSchema('', !isColumn);
          newColumnSchema.style.flexGrow = +list[i];
          this.manager.addElem(newColumnSchema, true, false);
        }
@ -214,6 +209,7 @@ export class FlexPluginBase extends LayoutBasePlugin {
    const isFlexColumnItem = this.manager?.isFlexColumnItem(context?.id);
    // 判断是否为吸附容器
    const isSorptionContainer = curRendererSchema?.isSorptionContainer || false;
+    const flexDirection = context.node?.schema?.style?.flexDirection || 'row';

    const positionTpl = [
      getSchemaTpl('layout:position', {
@ -239,6 +235,7 @@ export class FlexPluginBase extends LayoutBasePlugin {
                    getSchemaTpl('layout:flex-layout', {
                      name: 'layout',
                      label: '快捷版式设置',
+                      flexDirection,
                      pipeIn: () => {
                        if (isAlive(context.node)) {
                          let children = context.node?.children || [];
@ -323,10 +320,12 @@ export class FlexPluginBase extends LayoutBasePlugin {

                  getSchemaTpl('layout:flex-basis', {
                    label: '行间隔',
+                    tooltip: '垂直排布时，内部容器之间的间隔',
                    name: 'style.rowGap'
                  }),
                  getSchemaTpl('layout:flex-basis', {
                    label: '列间隔',
+                    tooltip: '水平排布时，内部容器之间的间隔',
                    name: 'style.columnGap'
                  }),

--- a/packages/amis-editor/src/renderer/style-control/FlexLayout.tsx
+++ b/packages/amis-editor/src/renderer/style-control/FlexLayout.tsx
@ -2,7 +2,7 @@
 * @file flex 快捷分栏布局设置
 */

-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import {InputBox, TooltipWrapper} from 'amis-ui';
 import {FormControlProps, FormItem} from 'amis-core';
 import cx from 'classnames';
@ -11,12 +11,14 @@ function LayoutItem({
  value,
  onSelect,
  active,
-  tip
+  tip,
+  flexDirection
 }: {
  value: string;
  onSelect: () => void;
  active?: boolean;
  tip?: string;
+  flexDirection?: React.CSSProperties['flexDirection'];
 }) {
  const items = String(value).split(':');
  return (
@ -25,7 +27,10 @@ function LayoutItem({
        className={cx('ae-FlexLayout-item', {
          active
        })}
-        style={{flex: value}}
+        style={{
+          flex: value,
+          flexDirection: flexDirection || 'row'
+        }}
        onClick={onSelect}
      >
        {items.map(val => (
@ -38,10 +43,12 @@ function LayoutItem({

 function FlexLayouts({
  onChange,
-  value
+  value,
+  flexDirection
 }: {
  onChange: (value: string) => void;
  value?: string;
+  flexDirection?: React.CSSProperties['flexDirection'];
 }) {
  const presetLayouts = [
    '1',
@ -53,14 +60,27 @@ function FlexLayouts({
    '1:2:1',
    '1:1:1:1'
  ];
-  let currentLayout = value;
-  if (value) {
-    // 转换成1:x格式
-    let items = String(value).split(':');
-    const min = Math.min.apply(null, items);
-    if (items.every(item => +item % min === 0)) {
-      items = items.map(item => String(+item / min));
-      currentLayout = items.join(':');
+  const [currentLayout, setCurrentLayout] = useState<string>('');
+  useEffect(() => {
+    if (value) {
+      // 转换成1:x格式
+      let items = String(value).split(':');
+      const min = Math.min.apply(null, items);
+      if (items.every(item => +item % min === 0)) {
+        items = items.map(item => String(+item / min));
+        let layout = items.join(':');
+        if (layout !== currentLayout) {
+          setCurrentLayout(items.join(':'));
+        }
+      } else if (value !== currentLayout) {
+        setCurrentLayout(value);
+      }
+    }
+  }, []);
+
+  function onChangeLayout() {
+    if (/\d[\d:]+\d$/.test(currentLayout)) {
+      onChange(currentLayout);
    }
  }

@ -72,7 +92,11 @@ function FlexLayouts({
            key={item}
            value={item}
            tip={`排列${item}`}
-            onSelect={() => onChange(item)}
+            flexDirection={flexDirection}
+            onSelect={() => {
+              setCurrentLayout(item);
+              onChange(item);
+            }}
            active={item === currentLayout}
          />
        ))}
@ -83,10 +107,16 @@ function FlexLayouts({
        <InputBox
          className="ae-FlexLayout-input"
          clearable={false}
-          value={value}
+          value={currentLayout}
          placeholder="例如 1:3:2"
-          onChange={val => (currentLayout = val)}
-          onBlur={() => currentLayout && onChange(currentLayout)}
+          onChange={val => setCurrentLayout(val)}
+          onBlur={() => currentLayout && onChangeLayout()}
+          onKeyDown={e => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              onChangeLayout();
+            }
+          }}
        />
      </div>
    </div>
--- a/packages/amis-editor/src/tpl/layout.tsx
+++ b/packages/amis-editor/src/tpl/layout.tsx
@ -623,6 +623,7 @@ setSchemaTpl(
  'layout:flex-basis',
  (config?: {
    label?: string;
+    tooltip?: string;
    name?: string;
    value?: string;
    visibleOn?: string;
@ -634,7 +635,8 @@ setSchemaTpl(
      type: 'input-number',
      label: tipedLabel(
        config?.label || '默认宽度',
-        '在分配多余空间之前，其默认占据的主轴空间（main size）'
+        config?.tooltip ||
+          '在分配多余空间之前，其默认占据的主轴空间（main size）'
      ),
      name: config?.name || 'style.flexBasis',
      value: config?.value || 'auto',
@ -1498,6 +1500,7 @@ setSchemaTpl(
    name?: string;
    label?: string;
    visibleOn?: string;
+    flexDirection?: string;
    pipeIn?: (value: any, data: any) => void;
    pipeOut?: (value: any, data: any) => void;
  }) => {
@ -1507,6 +1510,7 @@ setSchemaTpl(
      name: config?.name || 'layout',
      label: config?.label ?? false,
      visibleOn: config?.visibleOn,
+      flexDirection: config?.flexDirection,
      pipeIn: config?.pipeIn,
      pipeOut: config?.pipeOut
    };