[WIP] Hoist visual editor selection state to shell layer

Composer/packages/client/src/ShellApi.ts

@@ -1,4 +1,4 @@
-import React, { useEffect, useContext, useMemo, useState } from 'react';
+import React, { useEffect, useContext, useMemo } from 'react';
 import { ShellData } from 'shared';
 import isEqual from 'lodash.isequal';
 import get from 'lodash.get';
@@ -52,10 +52,6 @@ const shellNavigator = (shellPage: string, opts: { id?: string } = {}) => {
 };
 
 export const ShellApi: React.FC = () => {
-  // HACK: `onSelect` should actually change some states
-  // TODO: (leilei, ze) fix it when refactoring shell state management.
-  const [, forceUpdate] = useState();
-
   const { state, actions } = useContext(StoreContext);
   const { dialogs, schemas, lgFiles, luFiles, designPageLocation, focusPath, breadcrumb, botName } = state;
   const updateDialog = actions.updateDialog;
@@ -93,7 +89,7 @@ export const ShellApi: React.FC = () => {
     apiClient.registerApi('navTo', navTo);
     apiClient.registerApi('onFocusEvent', focusEvent);
     apiClient.registerApi('onFocusSteps', focusSteps);
-    apiClient.registerApi('onSelect', onSelect);
+    apiClient.registerApi('syncEditorState', syncEditorState);
     apiClient.registerApi('shellNavigate', ({ shellPage, opts }) => shellNavigator(shellPage, opts));
     apiClient.registerApi('isExpression', ({ expression }) => isExpression(expression));
     apiClient.registerApi('createDialog', () => {
@@ -170,7 +166,8 @@ export const ShellApi: React.FC = () => {
       currentDialog,
       dialogId,
       focusedEvent: selected,
-      focusedSteps: focused ? [focused] : selected ? [selected] : [],
+      focusedSteps: focused ? [focused] : [],
+      focusedId: focused || selected || '',
       focusedTab: promptTab,
       hosted: !!isAbsHosted(),
     };
@@ -329,8 +326,8 @@ export const ShellApi: React.FC = () => {
     actions.focusTo(dataPath, fragment);
   }
 
-  function onSelect(ids) {
-    forceUpdate(ids);
+  function syncEditorState({ editorState }) {
+    actions.syncVisualEditorState(editorState);
   }
 
   return null;

Composer/packages/client/src/constants/index.ts

@@ -83,6 +83,7 @@ export enum ActionTypes {
   SET_ERROR = 'SET_ERROR',
   TO_START_BOT = 'TO_START_BOT',
   EDITOR_RESET_VISUAL = 'EDITOR_RESET_VISUAL',
+  EDITOR_SYNCSTATE_VISUAL = 'EDITOR_SYNCSTATE_VISUAL',
   USER_LOGIN_SUCCESS = 'USER_LOGIN_SUCCESS',
   USER_LOGIN_FAILURE = 'USER_LOGIN_FAILURE',
   USER_SESSION_EXPIRED = 'USER_SESSION_EXPIRED',

Composer/packages/client/src/extension-container/ExtensionContainer.tsx

@@ -55,8 +55,8 @@ const shellApi = {
     return apiClient.apiCall('onFocusSteps', { subPaths, fragment });
   },
 
-  onSelect: (ids: string[]) => {
-    return apiClient.apiCall('onSelect', { ids });
+  syncEditorState: editorState => {
+    return apiClient.apiCall('syncEditorState', { editorState });
   },
 
   shellNavigate: (shellPage, opts = {}) => {

Composer/packages/client/src/pages/design/index.tsx

@@ -110,7 +110,7 @@ const rootPath = BASEPATH.replace(/\/+$/g, '');
 
 function DesignPage(props) {
   const { state, actions } = useContext(StoreContext);
-  const { dialogs, designPageLocation, breadcrumb } = state;
+  const { dialogs, designPageLocation, breadcrumb, visualEditorActive } = state;
   const {
     removeDialog,
     setDesignPageLocation,
@@ -124,7 +124,6 @@ function DesignPage(props) {
   const { dialogId, selected } = designPageLocation;
   const [triggerModalVisible, setTriggerModalVisibility] = useState(false);
   const [triggerButtonVisible, setTriggerButtonVisibility] = useState(false);
-  const [nodeOperationAvailable, setNodeOperationAvailability] = useState(false);
 
   useEffect(() => {
     if (match) {
@@ -195,16 +194,6 @@ function DesignPage(props) {
     }
   };
 
-  useEffect(() => {
-    // HACK: wait until visual editor finish rerender.
-    // TODO: (ze) expose visual editor store to Shell and (leilei) intercept store events.
-    setTimeout(() => {
-      VisualEditorAPI.hasElementSelected().then(selected => {
-        setNodeOperationAvailability(selected);
-      });
-    }, 100);
-  });
-
   const toolbarItems = [
     {
       type: 'action',
@@ -234,7 +223,7 @@ function DesignPage(props) {
       type: 'action',
       text: formatMessage('Cut'),
       buttonProps: {
-        disabled: !nodeOperationAvailable,
+        disabled: !visualEditorActive,
         iconProps: {
           iconName: 'Cut',
         },
@@ -246,7 +235,7 @@ function DesignPage(props) {
       type: 'action',
       text: formatMessage('Copy'),
       buttonProps: {
-        disabled: !nodeOperationAvailable,
+        disabled: !visualEditorActive,
         iconProps: {
           iconName: 'Copy',
         },
@@ -258,7 +247,7 @@ function DesignPage(props) {
       type: 'action',
       text: formatMessage('Delete'),
       buttonProps: {
-        disabled: !nodeOperationAvailable,
+        disabled: !visualEditorActive,
         iconProps: {
           iconName: 'Delete',
         },

Composer/packages/client/src/store/action/editors.ts

@@ -8,3 +8,12 @@ export const resetVisualEditor: ActionCreator = ({ dispatch }, isReset) => {
     payload: { isReset },
   });
 };
+
+export const syncVisualEditorState: ActionCreator = ({ dispatch }, editorState) => {
+  dispatch({
+    type: ActionTypes.EDITOR_SYNCSTATE_VISUAL,
+    payload: {
+      editorState,
+    },
+  });
+};

Composer/packages/client/src/store/index.tsx

@@ -50,6 +50,7 @@ const initialState: State = {
   publishVersions: {},
   publishStatus: 'inactive',
   lastPublishChange: null,
+  visualEditorActive: false,
 };
 
 interface StoreContextValue {

Composer/packages/client/src/store/reducer/index.ts

@@ -224,6 +224,19 @@ const updatePublishStatus: ReducerFunc = (state, payload) => {
   return state;
 };
 
+const updateVisualEditorState: ReducerFunc = (state, { editorState }) => {
+  const arrayHasElements = (arr: any): boolean => Array.isArray(arr) && arr.length > 0;
+  const isVisualEditorActive = ({ selectedIds, focusedIds }): boolean => {
+    return arrayHasElements(selectedIds) || arrayHasElements(focusedIds);
+  };
+
+  const visualEditorActive = isVisualEditorActive(editorState);
+  if (visualEditorActive !== state.visualEditorActive) {
+    state.visualEditorActive = visualEditorActive;
+  }
+  return state;
+};
+
 export const reducer = createReducer({
   [ActionTypes.GET_PROJECT_SUCCESS]: getProjectSuccess,
   [ActionTypes.GET_RECENT_PROJECTS_SUCCESS]: getRecentProjectsSuccess,
@@ -261,4 +274,5 @@ export const reducer = createReducer({
   [ActionTypes.PUBLISH_ERROR]: updatePublishStatus,
   [ActionTypes.PUBLISH_BEGIN]: updatePublishStatus,
   [ActionTypes.GET_ENDPOINT_SUCCESS]: updateRemoteEndpoint,
+  [ActionTypes.EDITOR_SYNCSTATE_VISUAL]: updateVisualEditorState,
 } as { [type in ActionTypes]: ReducerFunc });

Composer/packages/client/src/store/types.ts

@@ -67,6 +67,7 @@ export interface State {
   publishVersions: any;
   publishStatus: any;
   lastPublishChange: any;
+  visualEditorActive: boolean;
 }
 
 export type ReducerFunc<T = any> = (state: State, payload: T) => State;

Composer/packages/extensions/obiformeditor/src/FormEditor.tsx

@@ -20,6 +20,7 @@ export interface FormEditorProps extends ShellData {
   onBlur?: () => void;
   onChange: (newData: object, updatePath?: string) => void;
   shellApi: ShellApi;
+  focusedId: string;
 }
 
 export const FormEditor: React.FunctionComponent<FormEditorProps> = props => {

Composer/packages/extensions/obiformeditor/src/ObiFormEditor.tsx

@@ -36,11 +36,11 @@ const ErrorInfo: React.FC<FallbackProps> = ({ componentStack, error }) => (
 
 const ObiFormEditor: React.FC<FormEditorProps> = props => {
   const onChange = data => {
-    props.onChange(data, props.focusedSteps[0]);
+    props.onChange(data, props.focusedId);
   };
 
   // only need to debounce the change handler when focusedSteps change
-  const debouncedOnChange = useMemo(() => debounce(onChange, 500), [props.focusedSteps[0]]);
+  const debouncedOnChange = useMemo(() => debounce(onChange, 500), [props.focusedId]);
   const key = get(props.data, '$designer.id', props.focusPath);
 
   return (

Composer/packages/extensions/visual-designer/__tests__/index.test.tsx

@@ -20,6 +20,7 @@ describe('<VisualDesigner />', () => {
   it('should render the visual designer', async () => {
     const { getByTestId } = render(
       <VisualDesigner
+        hosted={false}
         data={{ content: '{"json": "some data"}' }}
         currentDialog={{ id: 'Main', displayName: 'Main', isRoot: false }}
         dialogId="SomeDialog"

Composer/packages/extensions/visual-designer/demo/src/stories/VisualEditorDemo.js

@@ -116,6 +116,9 @@ export class VisualEditorDemo extends Component {
                 removeLgTemplate: () => {
                   return Promise.resolve(true);
                 },
+                syncEditorState: state => {
+                  console.log('SyncState:', state);
+                },
               }}
             />
           </div>

Composer/packages/extensions/visual-designer/src/actions/clearSelectionState.ts

@@ -0,0 +1,9 @@
+const CLEAR_SELECTIONSTATE = 'VISUAL/SET_SELECTIONSTATE';
+
+export default function setSelectionState() {
+  return {
+    type: CLEAR_SELECTIONSTATE,
+  };
+}
+
+export { CLEAR_SELECTIONSTATE };

Composer/packages/extensions/visual-designer/src/actions/setClipboard.ts

@@ -0,0 +1,14 @@
+import { BaseSchema } from 'shared';
+
+const SET_CLIPBOARD = 'VISUAL/SET_CLIPBOARD';
+
+export default function setClipboard(clipboardActions: BaseSchema[]) {
+  return {
+    type: SET_CLIPBOARD,
+    payload: {
+      actions: clipboardActions,
+    },
+  };
+}
+
+export { SET_CLIPBOARD };

Composer/packages/extensions/visual-designer/src/actions/setDragSelection.ts

@@ -0,0 +1,12 @@
+const SET_DRAGSELECTION = 'VISUAL/SET_DRAGSELECTION';
+
+export default function setSelection(seletedIds: string[]) {
+  return {
+    type: SET_DRAGSELECTION,
+    payload: {
+      ids: seletedIds,
+    },
+  };
+}
+
+export { SET_DRAGSELECTION };

Composer/packages/extensions/visual-designer/src/actions/setFocusState.ts

@@ -0,0 +1,12 @@
+const SET_FOCUSSTATE = 'VISUAL/SET_FOCUSSTATE';
+
+export default function setFocusState(focusedIds: string[]) {
+  return {
+    type: SET_FOCUSSTATE,
+    payload: {
+      ids: focusedIds,
+    },
+  };
+}
+
+export { SET_FOCUSSTATE };

Composer/packages/extensions/visual-designer/src/editors/ObiEditor.tsx

@@ -10,6 +10,7 @@ import { AttrNames } from '../constants/ElementAttributes';
 import { NodeRendererContext } from '../store/NodeRendererContext';
 import { SelectionContext, SelectionContextData } from '../store/SelectionContext';
 import { ClipboardContext } from '../store/ClipboardContext';
+import { StoreContext } from '../store/StoreContext';
 import {
   deleteNode,
   insert,
@@ -23,6 +24,9 @@ import { moveCursor } from '../utils/cursorTracker';
 import { NodeIndexGenerator } from '../utils/NodeIndexGetter';
 import { normalizeSelection } from '../utils/normalizeSelection';
 import { KeyboardZone } from '../components/lib/KeyboardZone';
+import setClipboard from '../actions/setClipboard';
+import setDragSelection from '../actions/setDragSelection';
+import clearSelectionState from '../actions/clearSelectionState';
 
 import { AdaptiveDialogEditor } from './AdaptiveDialogEditor';
 
@@ -33,21 +37,26 @@ export const ObiEditor: FC<ObiEditorProps> = ({
   onFocusSteps,
   onOpen,
   onChange,
-  onSelect,
   undo,
   redo,
 }): JSX.Element | null => {
   let divRef;
 
+  const { state, dispatch } = useContext(StoreContext);
   const { focusedId, focusedEvent, updateLgTemplate, getLgTemplates, removeLgTemplate } = useContext(
     NodeRendererContext
   );
   const [clipboardContext, setClipboardContext] = useState({
     clipboardActions: [],
-    setClipboardActions: actions => setClipboardContext({ ...clipboardContext, clipboardActions: actions }),
+    setClipboardActions: actions => {
+      // TODO (ze): retire local context in following refactoring PR.
+      dispatch(setClipboard(actions));
+      setClipboardContext({ ...clipboardContext, clipboardActions: actions });
+    },
   });
 
   const lgApi = { getLgTemplates, removeLgTemplate, updateLgTemplate };
+  // TODO: clean this long event dispatcher, migrate to redux-style
   const dispatchEvent = (eventName: NodeEventTypes, eventData: any): any => {
     let handler;
     switch (eventName) {
@@ -197,9 +206,6 @@ export const ObiEditor: FC<ObiEditorProps> = ({
     } else {
       setKeyBoardStatus('normal');
     }
-
-    // Notify container at every selection change.
-    onSelect(selectionContext.selectedIds);
   }, [focusedId, selectionContext]);
 
   useEffect(
@@ -218,15 +224,17 @@ export const ObiEditor: FC<ObiEditorProps> = ({
       const selectedIndices = selection.getSelectedIndices();
       const selectedIds = selectedIndices.map(index => nodeItems[index].key as string);
 
-      if (selectedIds.length === 1) {
-        // TODO: Change to focus all selected nodes after Form Editor support showing multiple nodes.
-        onFocusSteps(selectedIds);
-      }
-
+      // TODO (ze): retire local context in following refactoring PR.
+      dispatch(setDragSelection(selectedIds));
       setSelectionContext({
         ...selectionContext,
         selectedIds,
       });
+
+      if (selectedIds.length === 1) {
+        // TODO: Change to focus all selected nodes after Form Editor support showing multiple nodes.
+        onFocusSteps(selectedIds);
+      }
     },
   });
 
@@ -328,7 +336,7 @@ export const ObiEditor: FC<ObiEditorProps> = ({
               }}
               onClick={e => {
                 e.stopPropagation();
-                dispatchEvent(NodeEventTypes.Focus, { id: '' });
+                dispatch(clearSelectionState());
               }}
             >
               <AdaptiveDialogEditor
@@ -356,7 +364,6 @@ ObiEditor.defaultProps = {
   onFocusEvent: () => {},
   onOpen: () => {},
   onChange: () => {},
-  onSelect: () => {},
   undo: () => {},
   redo: () => {},
 };
@@ -366,12 +373,15 @@ interface ObiEditorProps {
   // Obi raw json
   data: any;
   focusedSteps: string[];
+  /**
+   * @param {string[]} stepIds A list of Adaptive action's id to be selected.
+   * @param {string} [fragment] Id of selected fragment in an action. Fragment means small elements.
+   */
   onFocusSteps: (stepIds: string[], fragment?: string) => any;
   focusedEvent: string;
   onFocusEvent: (eventId: string) => any;
   onOpen: (calleeDialog: string, callerId: string) => any;
   onChange: (newDialog: any) => any;
-  onSelect: (selection: any) => any;
   undo?: () => any;
   redo?: () => any;
 }