fix: FlowEditor edges not shown in Electron container (#2638)

* give SVGContainer dynamic size * + FlowEdges * bypass breadcrumb CI Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com>
microsoft · Apr 15, 2020 · ed99f0b · ed99f0b
1 parent a056f53
commit ed99f0b
Show file tree

Hide file tree

Showing 10 changed files with 45 additions and 17 deletions.
diff --git a/Composer/cypress/integration/Breadcrumb.spec.ts b/Composer/cypress/integration/Breadcrumb.spec.ts
@@ -58,7 +58,7 @@ context('breadcrumb', () => {
     // Click on an action
     cy.withinEditor('VisualEditor', () => {
       cy.findByTestId('RuleEditor').within(() => {
-        cy.findByText('Send a response').click();
+        cy.findByText('Send a response').click({ force: true });
       });
     });
 

diff --git a/Composer/packages/extensions/visual-designer/src/components/groups/StepGroup.tsx b/Composer/packages/extensions/visual-designer/src/components/groups/StepGroup.tsx
@@ -16,9 +16,9 @@ import { StepRenderer } from '../renderers/StepRenderer';
 import { GraphLayout } from '../../models/GraphLayout';
 import { EdgeMenu } from '../menus/EdgeMenu';
 import { SVGContainer } from '../lib/SVGContainer';
-import { renderEdge } from '../lib/EdgeUtil';
 import { GraphNodeMap, useSmartLayout } from '../../hooks/useSmartLayout';
 import { designerCache } from '../../store/DesignerCache';
+import { FlowEdges } from '../lib/FlowEdges';
 
 const StepInterval = ElementInterval.y;
 
@@ -57,7 +57,9 @@ export const StepGroup: FunctionComponent<NodeProps> = ({
 
   return (
     <div css={{ width: boundary.width, height: boundary.height, position: 'relative' }}>
-      <SVGContainer hidden>{Array.isArray(edges) ? edges.map(x => renderEdge(x)) : null}</SVGContainer>
+      <SVGContainer width={boundary.width} height={boundary.height} hidden>
+        <FlowEdges edges={edges} />
+      </SVGContainer>
       {nodes
         ? nodes.map((node, index) => (
             <OffsetContainer key={`stepGroup/${node.id}/offset`} offset={node.offset}>

diff --git a/Composer/packages/extensions/visual-designer/src/components/lib/FlowEdges.tsx b/Composer/packages/extensions/visual-designer/src/components/lib/FlowEdges.tsx
@@ -0,0 +1,17 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import React, { FC } from 'react';
+
+import { Edge } from '../../models/EdgeData';
+
+import { renderEdge } from './EdgeUtil';
+
+export interface FlowEdgesProps {
+  edges: Edge[];
+}
+
+export const FlowEdges: FC<FlowEdgesProps> = ({ edges }) => {
+  if (!Array.isArray(edges)) return null;
+  return <>{edges.map(edge => renderEdge(edge))}</>;
+};
diff --git a/Composer/packages/extensions/visual-designer/src/components/lib/OffsetContainer.tsx b/Composer/packages/extensions/visual-designer/src/components/lib/OffsetContainer.tsx
@@ -13,7 +13,7 @@ interface OffsetContainerProps {
 
 export class OffsetContainer extends React.Component<OffsetContainerProps, object> {
   render(): ReactNode {
-    const { offset, children } = this.props;
+    const { offset, children, ...otherProps } = this.props;
     if (!offset) return children;
 
     return (
@@ -27,7 +27,7 @@ export class OffsetContainer extends React.Component<OffsetContainerProps, objec
             transitionProperty: 'left, right, top, bottom',
           },
         ]}
-        {...this.props}
+        {...otherProps}
       >
         {children}
       </div>

diff --git a/Composer/packages/extensions/visual-designer/src/components/lib/SVGContainer.tsx b/Composer/packages/extensions/visual-designer/src/components/lib/SVGContainer.tsx
@@ -1,10 +1,11 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 
-export const SVGContainer = ({ children, hidden = false }) => (
-  <svg width="100" height="100" overflow="visible" aria-hidden={hidden}>
+export const SVGContainer = ({ children, width = 100, height = 100, hidden = false }) => (
+  <svg css={{ overflow: 'visible', width, height, position: 'absolute', left: 0, top: 0 }} aria-hidden={hidden}>
     {children}
   </svg>
 );
diff --git a/Composer/packages/extensions/visual-designer/src/editors/StepEditor.tsx b/Composer/packages/extensions/visual-designer/src/editors/StepEditor.tsx
@@ -66,7 +66,7 @@ export const StepEditor = ({ id, data, onEvent, trigger, addCoachMarkRef }): JSX
       css={{ position: 'relative', width: editorWidth, height: editorHeight }}
       aria-label="step-editor"
     >
-      <SVGContainer>
+      <SVGContainer width={editorWidth} height={editorHeight}>
         {drawSVGEdge('editor-edge__head', editorAxisX, TriggerSize.height, EdgeDirection.Down, ElementInterval.y / 2)}
         {drawSVGEdge(
           'editor-edge__tail',

diff --git a/Composer/packages/extensions/visual-designer/src/widgets/ForeachWidget.tsx b/Composer/packages/extensions/visual-designer/src/widgets/ForeachWidget.tsx
@@ -15,10 +15,10 @@ import { LoopIndicator } from '../components/decorations/LoopIndicator';
 import { StepGroup } from '../components/groups';
 import { ElementWrapper } from '../components/renderers/ElementWrapper';
 import { ElementMeasurer } from '../components/renderers/ElementMeasurer';
-import { renderEdge } from '../components/lib/EdgeUtil';
 import { SVGContainer } from '../components/lib/SVGContainer';
 import { useSmartLayout, GraphNodeMap } from '../hooks/useSmartLayout';
 import { designerCache } from '../store/DesignerCache';
+import { FlowEdges } from '../components/lib/FlowEdges';
 
 enum ForeachNodes {
   Foreach = 'foreachNode',
@@ -97,7 +97,9 @@ export const ForeachWidget: FunctionComponent<ForeachWidgetProps> = ({ id, data,
             <LoopIndicator onClick={() => onEvent(NodeEventTypes.Focus, { id })} />
           </OffsetContainer>
         ))}
-      <SVGContainer>{Array.isArray(edges) ? edges.map(x => renderEdge(x)) : null}</SVGContainer>
+      <SVGContainer width={boundary.width} height={boundary.height}>
+        <FlowEdges edges={edges} />
+      </SVGContainer>
     </div>
   );
 };

diff --git a/Composer/packages/extensions/visual-designer/src/widgets/IfConditionWidget.tsx b/Composer/packages/extensions/visual-designer/src/widgets/IfConditionWidget.tsx
@@ -16,9 +16,9 @@ import { Diamond } from '../components/nodes/templates/Diamond';
 import { ElementWrapper } from '../components/renderers/ElementWrapper';
 import { ElementMeasurer } from '../components/renderers/ElementMeasurer';
 import { SVGContainer } from '../components/lib/SVGContainer';
-import { renderEdge } from '../components/lib/EdgeUtil';
 import { useSmartLayout, GraphNodeMap } from '../hooks/useSmartLayout';
 import { designerCache } from '../store/DesignerCache';
+import { FlowEdges } from '../components/lib/FlowEdges';
 
 enum IfElseNodes {
   Condition = 'conditionNode',
@@ -105,7 +105,9 @@ export const IfConditionWidget: FunctionComponent<IfConditionWidgetProps> = ({
           </OffsetContainer>
         );
       })}
-      <SVGContainer>{Array.isArray(edges) ? edges.map(x => renderEdge(x)) : null}</SVGContainer>
+      <SVGContainer width={boundary.width} height={boundary.height}>
+        <FlowEdges edges={edges} />
+      </SVGContainer>
     </div>
   );
 };

diff --git a/Composer/packages/extensions/visual-designer/src/widgets/PromptWidget.tsx b/Composer/packages/extensions/visual-designer/src/widgets/PromptWidget.tsx
@@ -14,12 +14,12 @@ import { OffsetContainer } from '../components/lib/OffsetContainer';
 import { ElementWrapper } from '../components/renderers/ElementWrapper';
 import { NodeEventTypes } from '../constants/NodeEventTypes';
 import { IconBrick } from '../components/decorations/IconBrick';
-import { renderEdge } from '../components/lib/EdgeUtil';
 import { SVGContainer } from '../components/lib/SVGContainer';
 import { GraphLayout } from '../models/GraphLayout';
 import { ElementMeasurer } from '../components/renderers/ElementMeasurer';
 import { useSmartLayout, GraphNodeMap } from '../hooks/useSmartLayout';
 import { designerCache } from '../store/DesignerCache';
+import { FlowEdges } from '../components/lib/FlowEdges';
 
 enum PromptNodes {
   BotAsks = 'botAsksNode',
@@ -91,7 +91,9 @@ export const PromptWidget: FC<PromptWdigetProps> = ({
           <IconBrick onClick={() => onEvent(NodeEventTypes.Focus, { id, tab: PromptTab.OTHER })} />
         </ElementWrapper>
       </OffsetContainer>
-      <SVGContainer>{Array.isArray(edges) ? edges.map(x => renderEdge(x)) : null}</SVGContainer>
+      <SVGContainer width={boundary.width} height={boundary.height}>
+        <FlowEdges edges={edges} />
+      </SVGContainer>
     </div>
   );
 };
diff --git a/Composer/packages/extensions/visual-designer/src/widgets/SwitchConditionWidget.tsx b/Composer/packages/extensions/visual-designer/src/widgets/SwitchConditionWidget.tsx
@@ -15,10 +15,10 @@ import { StepGroup } from '../components/groups';
 import { Diamond } from '../components/nodes/templates/Diamond';
 import { ElementWrapper } from '../components/renderers/ElementWrapper';
 import { ElementMeasurer } from '../components/renderers/ElementMeasurer';
-import { renderEdge } from '../components/lib/EdgeUtil';
 import { SVGContainer } from '../components/lib/SVGContainer';
 import { GraphNodeMap, useSmartLayout } from '../hooks/useSmartLayout';
 import { designerCache } from '../store/DesignerCache';
+import { FlowEdges } from '../components/lib/FlowEdges';
 
 enum SwitchNodes {
   Switch = 'switchNode',
@@ -114,7 +114,9 @@ export const SwitchConditionWidget: FunctionComponent<SwitchConditionWidgetProps
           />
         </OffsetContainer>
       ))}
-      <SVGContainer>{Array.isArray(edges) ? edges.map(x => renderEdge(x)) : null}</SVGContainer>
+      <SVGContainer width={boundary.width} height={boundary.height}>
+        <FlowEdges edges={edges} />
+      </SVGContainer>
     </div>
   );
 };