From d39b9d7f0bab177b0cde6e285f093700ebc3e6ad Mon Sep 17 00:00:00 2001 From: Long Alan Date: Wed, 5 Feb 2020 22:02:17 +0800 Subject: [PATCH 1/3] fix ui bug about choice input --- .../src/components/nodes/steps/ChoiceInput.tsx | 2 +- .../extensions/visual-designer/src/constants/ElementSizes.ts | 3 ++- .../visual-designer/src/layouters/measureJsonBoundary.ts | 5 ++++- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/steps/ChoiceInput.tsx b/Composer/packages/extensions/visual-designer/src/components/nodes/steps/ChoiceInput.tsx index 4584ffd4d5..e6e16636e7 100644 --- a/Composer/packages/extensions/visual-designer/src/components/nodes/steps/ChoiceInput.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/nodes/steps/ChoiceInput.tsx @@ -21,7 +21,7 @@ export const ChoiceInputChoices = ({ choices }) => { } return ( -
+
{choices.map(({ value }, index) => { if (index < 3) { return ( diff --git a/Composer/packages/extensions/visual-designer/src/constants/ElementSizes.ts b/Composer/packages/extensions/visual-designer/src/constants/ElementSizes.ts index b838a46645..dc0f0ba3db 100644 --- a/Composer/packages/extensions/visual-designer/src/constants/ElementSizes.ts +++ b/Composer/packages/extensions/visual-designer/src/constants/ElementSizes.ts @@ -33,7 +33,8 @@ export const ChoiceInputSize = { height: 22, }; -export const ChoiceInputMarginTop = 5; +export const ChoiceInputMarginTop = 8; +export const ChoiceInputMarginBottom = 8; export const EventNodeSize = { width: 240, diff --git a/Composer/packages/extensions/visual-designer/src/layouters/measureJsonBoundary.ts b/Composer/packages/extensions/visual-designer/src/layouters/measureJsonBoundary.ts index 9002f017ef..03420424b2 100644 --- a/Composer/packages/extensions/visual-designer/src/layouters/measureJsonBoundary.ts +++ b/Composer/packages/extensions/visual-designer/src/layouters/measureJsonBoundary.ts @@ -9,6 +9,7 @@ import { LoopIconSize, ChoiceInputSize, ChoiceInputMarginTop, + ChoiceInputMarginBottom, IconBrickSize, } from '../constants/ElementSizes'; import { transformIfCondtion } from '../transformers/transformIfCondition'; @@ -64,7 +65,9 @@ export function measureChoiceInputDetailBoundary(data): Boundary { const height = InitNodeSize.height + (data.choices && Array.isArray(data.choices) - ? (data.choices.length <= 4 ? data.choices.length : 4) * (ChoiceInputSize.height + ChoiceInputMarginTop) + ? data.choices.length < 4 + ? data.choices.length * (ChoiceInputSize.height + ChoiceInputMarginTop) + ChoiceInputMarginBottom + : 4 * (ChoiceInputSize.height + ChoiceInputMarginTop) : 0); return new Boundary(width, height); } From 2cb60999625be177c0568df82d60099c9b827d06 Mon Sep 17 00:00:00 2001 From: Long Alan Date: Wed, 5 Feb 2020 22:33:29 +0800 Subject: [PATCH 2/3] adjust --- .../src/components/nodes/steps/ChoiceInput.tsx | 2 +- .../extensions/visual-designer/src/constants/ElementSizes.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/steps/ChoiceInput.tsx b/Composer/packages/extensions/visual-designer/src/components/nodes/steps/ChoiceInput.tsx index e6e16636e7..4d86d79e4a 100644 --- a/Composer/packages/extensions/visual-designer/src/components/nodes/steps/ChoiceInput.tsx +++ b/Composer/packages/extensions/visual-designer/src/components/nodes/steps/ChoiceInput.tsx @@ -60,7 +60,7 @@ export const ChoiceInputChoices = ({ choices }) => { textAlign: 'center', fontFamily: 'Segoe UI', fontSize: '12px', - lineHeight: '19px', + lineHeight: '14px', boxSizing: 'border-box', }} > diff --git a/Composer/packages/extensions/visual-designer/src/constants/ElementSizes.ts b/Composer/packages/extensions/visual-designer/src/constants/ElementSizes.ts index dc0f0ba3db..9694194155 100644 --- a/Composer/packages/extensions/visual-designer/src/constants/ElementSizes.ts +++ b/Composer/packages/extensions/visual-designer/src/constants/ElementSizes.ts @@ -29,12 +29,12 @@ export const TriggerSize = InitNodeSize; export const TerminatorSize = { width: 14, height: 14 }; export const ChoiceInputSize = { - width: 145, + width: 155, height: 22, }; export const ChoiceInputMarginTop = 8; -export const ChoiceInputMarginBottom = 8; +export const ChoiceInputMarginBottom = 10; export const EventNodeSize = { width: 240, From 9e6c2cbe5641eefbb99ac8aa644844068b127d5c Mon Sep 17 00:00:00 2001 From: Long Alan Date: Mon, 10 Feb 2020 11:00:16 +0800 Subject: [PATCH 3/3] fix test error --- .../layouters/measureJsonBoundary.test.ts | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/Composer/packages/extensions/visual-designer/__tests__/layouters/measureJsonBoundary.test.ts b/Composer/packages/extensions/visual-designer/__tests__/layouters/measureJsonBoundary.test.ts index b9fcbab717..54f3ca632a 100644 --- a/Composer/packages/extensions/visual-designer/__tests__/layouters/measureJsonBoundary.test.ts +++ b/Composer/packages/extensions/visual-designer/__tests__/layouters/measureJsonBoundary.test.ts @@ -10,6 +10,7 @@ import { LoopIconSize, ChoiceInputSize, ChoiceInputMarginTop, + ChoiceInputMarginBottom, } from '../../src/constants/ElementSizes'; describe('measureJsonBoundary', () => { @@ -34,13 +35,23 @@ describe('measureJsonBoundary', () => { ); }); it("should return boundary whose size is determined by the data's choices when json.$type is choiceInput", () => { - const data: { [key: string]: any } = { + const data1: { [key: string]: any } = { $type: ObiTypes.ChoiceInputDetail, choices: [{ value: '1' }], }; - expect(measureJsonBoundary(data)).toEqual( - new Boundary(InitNodeSize.width, InitNodeSize.height + ChoiceInputSize.height + ChoiceInputMarginTop) + const data2: { [key: string]: any } = { + $type: ObiTypes.ChoiceInputDetail, + choices: [{ value: '1' }, { value: '2' }, { value: '3' }, { value: '4' }, { value: '5' }], + }; + expect(measureJsonBoundary(data1)).toEqual( + new Boundary( + InitNodeSize.width, + InitNodeSize.height + ChoiceInputSize.height + ChoiceInputMarginTop + ChoiceInputMarginBottom + ) + ); + expect(measureJsonBoundary(data2)).toEqual( + new Boundary(InitNodeSize.width, InitNodeSize.height + 4 * (ChoiceInputSize.height + ChoiceInputMarginTop)) ); }); });