Get tour step refs to persist past reload

I don't know exactly what I was doing wrong, so I copied the dropdown
control and modified it to accept the editor state. this could most
likely be done cleaner by allowing for the existing dropdown control to
accept a function with generic arguments, but that can be cleaned up
later.

Author: snowe2010

client/packages/lowcoder/src/comps/comps/tourComp/componentSelectorControl.tsx

@@ -46,7 +46,9 @@ const ExecuteCompTmpAction = (function() {
     params: ParamsValueControl
   };
   return new MultiCompBuilder(childrenMap, () => {
-    return () => undefined as (React.RefObject<HTMLElement> | undefined);
+    // return () => undefined as (React.RefObject<HTMLElement> | undefined);
+    // return () => undefined as (string | undefined);
+    return undefined as (string | undefined);
     // return () => Promise.resolve(undefined as unknown);
   })
     .setPropertyViewFn(() => <></>)
@@ -72,45 +74,24 @@ export function targetCompAction(params: ExecuteCompActionOptions) {
       }
     }
 
-    selectedComp: React.RefObject<HTMLDivElement> | undefined;
+    // selectedComp: React.RefObject<HTMLDivElement> | undefined;
+    selectedComp: string|undefined;
     compList: (GridItemComp | HookComp | InstanceType<typeof TemporaryStateItemComp>)[] = [];
 
-    updateSelectedComp(compName: string): void {
-      const compListItem = this.compList.find((compItem) => compItem.children.name.getView() === compName);
-      if (compListItem) {
-        console.log(`setting selected comp to ${compListItem}`)
-        this.selectedComp = ((compListItem as MultiBaseComp).children.comp as GridItemComp).getRef();
-      }
-    }
+    // updateSelectedComp(compName: string): void {
+    //   const compListItem = this.compList.find((compItem) => compItem.children.name.getView() === compName);
+    //   if (compListItem) {
+    //     console.log(`setting selected comp to ${compListItem}`)
+    //     this.selectedComp = ((compListItem as MultiBaseComp).children.comp as GridItemComp).getRef();
+    //   }
+    // }
 
-    override getView(): () => (React.RefObject<HTMLElement> | undefined) {
-      return () => this.selectedComp;
+    // override getView(): () => (React.RefObject<HTMLElement> | undefined) {
+    // override getView(): () => (string | undefined) {
+    override getView(): string | undefined {
+      return this.selectedComp;
     }
 
-    // override getView() {
-    //   const name = this.children.name.getView();
-    //   if (!name) {
-    //     return () => Promise.resolve();
-    //   }
-    //   return () =>
-    //     getPromiseAfterDispatch(
-    //       this.dispatch,
-    //       routeByNameAction(
-    //         name,
-    //         customAction<ExecuteAction>(
-    //           {
-    //             type: "execute",
-    //             methodName: this.children.methodName.getView(),
-    //             params: this.children.params.getView().map((x) => x.getView())
-    //           },
-    //           false
-    //         )
-    //       ),
-    //       {
-    //         notHandledError: trans("eventHandler.notHandledError")
-    //       }
-    //     );
-    // }
     exposingNode() {
       return this.node();
     }
@@ -130,7 +111,6 @@ export function targetCompAction(params: ExecuteCompActionOptions) {
             });
 
             function changeMethodAction(compName: string, methodName: string) {
-              console.log("sldjafldkdf")
               const currentMethods = compMethods[compName] ?? {};
               const params = currentMethods[methodName];
               return {
@@ -161,7 +141,8 @@ export function targetCompAction(params: ExecuteCompActionOptions) {
                       onChange={(value) => {
                         console.log(`the value is ${value}`);
                         // After the value is changed, update `selectedComp`
-                        this.updateSelectedComp(value);
+                        // this.updateSelectedComp(value);
+                        this.selectedComp = value;
 
                         console.log("am i here? ")
                         return this.dispatchChangeValueAction(

client/packages/lowcoder/src/comps/comps/tourComp/tourComp.tsx

@@ -2,7 +2,7 @@ import { styleControl } from "comps/controls/styleControl";
 import { SelectStyle } from "comps/controls/styleControlConstants";
 import { trans } from "i18n";
 import {
-  CommonNameConfig,
+  CommonNameConfig, MultiBaseComp,
   NameConfig,
   stringExposingStateControl,
   UICompBuilder,
@@ -13,6 +13,12 @@ import { baseSelectRefMethods, TourChildrenMap, TourPropertyView } from "./tourC
 import { TourInputCommonConfig } from "./tourInputConstants";
 import { Tour, TourProps } from "antd";
 import { PlacementType } from "@lowcoder-ee/comps/controls/tourStepControl";
+import { useContext } from "react";
+import { EditorContext } from "@lowcoder-ee/comps/editorState";
+import { GridItemComp } from "@lowcoder-ee/comps/comps/gridItemComp";
+import { HookComp } from "@lowcoder-ee/comps/hooks/hookComp";
+import { TemporaryStateItemComp } from "@lowcoder-ee/comps/comps/temporaryStateComp";
+import { delay } from "redux-saga/effects";
 
 /**
  * This component builds the Property Panel and the fake 'UI' for the Tour component
@@ -25,13 +31,31 @@ let TourBasicComp = (function () {
     // style: styleControl(SelectStyle),
   };
   return new UICompBuilder(childrenMap, (props, dispatch) => {
-  
+    const editorState = useContext(EditorContext);
+    console.log("EDITOR STATE IS HERE")
+    console.log(editorState)
+    const compMap: (GridItemComp | HookComp | InstanceType<typeof TemporaryStateItemComp>)[] = Object.values(editorState.getAllUICompMap());
+    console.log("COMP MAP IS HERE")
+    console.log(compMap)
+    
     const steps: TourProps['steps'] = props.options.map((step) => {
+      const targetName = step.target;
+      let target = undefined;
+      const compListItem = compMap.find((compItem) => compItem.children.name.getView() === targetName);
+      if (compListItem) {
+        console.log(`setting selected comp to ${compListItem}`)
+        try {
+          target = ((compListItem as MultiBaseComp).children.comp as GridItemComp).getRef();
+        } catch (e) {
+          target = ((compListItem as MultiBaseComp).children.comp as HookComp).getRef();
+        }
+      }
+      
       return {
         title: step.title,
         description: step.description,
-        target: step.target()?.current,
-        // arrow: step.arrow,
+        target: target?.current,
+        arrow: step.arrow || true,
         placement: step.placement as PlacementType,
       }
     })

client/packages/lowcoder/src/comps/controls/tourStepControl.tsx

@@ -1,4 +1,3 @@
-import { ViewDocIcon } from "assets/icons";
 import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { MultiCompBuilder, withDefault } from "comps/generators";
@@ -15,12 +14,14 @@ import {
   ConstructorToView,
   fromRecord,
   MultiBaseComp,
+  SimpleAbstractComp,
   withFunction
 } from "lowcoder-core";
-import { controlItem, Option } from "lowcoder-design";
-import styled from "styled-components";
+import { controlItem, Dropdown, Option, OptionsType, ValueFromOption } from "lowcoder-design";
 import { getNextEntityName } from "util/stringUtils";
-import { TargetCompAction } from "@lowcoder-ee/comps/comps/tourComp/componentSelectorControl";
+import { BoolControl, ControlParams } from "lowcoder-sdk";
+import { ReactNode, useContext, useEffect, useState } from "react";
+import { EditorContext, EditorState } from "@lowcoder-ee/comps/editorState";
 // import { PlacementType } from "@rc-component"
 export type PlacementType = 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'center';
 
@@ -205,35 +206,6 @@ export function manualTourStepsControl<T extends TourStepControlType>(
     : ManualOptionControl;
 }
 
-const TipLabel = styled.p`
-  display: inline;
-  margin: 2px 0 0 0;
-  padding: 0;
-
-  font-size: 13px;
-  color: #9195a3;
-  line-height: 18px;
-  cursor: pointer;
-
-  :hover g g {
-    stroke: #315efb;
-  }
-`;
-const DocIcon = styled(ViewDocIcon)`
-  transform: translateY(1px);
-  margin-right: 6px;
-`;
-
-const optionListDocUrl = trans("docUrls.optionList");
-const OptionTip = optionListDocUrl ? (
-  <TipLabel onClick={() => window.open(optionListDocUrl)}>
-    <DocIcon title={trans("optionsControl.viewDocs")} />
-    {trans("optionsControl.tip")}
-  </TipLabel>
-) : (
-  <></>
-);
-
 type TourStepChildType = { 
   title: InstanceType<typeof StringControl>,
 };
@@ -308,14 +280,131 @@ const PlacementOptions: {label: string, value: PlacementType}[] = [
   { label: "Bottom Right", value: "bottomRight"},
 ];
 
+
+export function editorStateDropdownControl<T extends OptionsType>(
+  options: ((editorState: EditorState) => T),
+  defaultValue: ValueFromOption<T>
+) {
+  return class extends editorStateDropdownAbstractControl(options, defaultValue) {
+    override getView() {
+      return this.value;
+    }
+  };
+}
+
+interface EditorStateDropdownControlParams<T extends OptionsType> extends ControlParams {
+  radioButton?: boolean;
+  border?: boolean;
+  type?: "oneline";
+  disabled?: boolean;
+  // parent comp may batch dispatch in some cases
+  disableDispatchValueChange?: boolean;
+  onChange?: (value: string) => void;
+  options?: T;
+  showSearch?: boolean;
+  dropdownStyle?: React.CSSProperties;
+  labelStyle?: React.CSSProperties;
+  IconType?: "OnlyAntd" | "All" | "default" | undefined;
+}
+type EditorStateDropdownOptions<T extends OptionsType> = (editorState: EditorState) => T;
+
+interface DropdownPropertyViewProps<T extends OptionsType>
+  extends Omit<EditorStateDropdownControlParams<T>, "options"> {
+  options: EditorStateDropdownOptions<T>;
+  onChange: (value: ValueFromOption<T>) => void;
+  value: ValueFromOption<T>;
+}
+
+function EditorStateDropdownPropertyView<T extends OptionsType>(props: DropdownPropertyViewProps<T>) {
+  const { options, onChange, value, ...params } = props;
+  const [finalOptions, setFinalOptions] = useState<T>(
+    typeof options === "function" ? ([] as unknown as T) : options
+  );
+  const editorState = useContext(EditorContext);
+
+  useEffect(() => {
+    if (typeof options !== "function") {
+      setFinalOptions(options);
+      return;
+    }
+    if (!finalOptions?.length) {
+      setFinalOptions(options(editorState))
+        //.then((items) => setFinalOptions(items));
+    }
+  }, [finalOptions.length, options]);
+
+  return (
+    <Dropdown
+      placement={params.placement}
+      toolTip={params.tooltip}
+      value={value}
+      options={finalOptions}
+      radioButton={params.radioButton}
+      border={params.border}
+      type={params.type}
+      label={params.label}
+      showSearch={params.showSearch}
+      onChange={onChange}
+      disabled={params.disabled}
+      dropdownStyle={props.dropdownStyle}
+      labelStyle={props.labelStyle}
+    />
+  );
+}
+
+/**
+ * Leave a getView method unimplemented, because the type cannot be changed by inheritance
+ */
+export function editorStateDropdownAbstractControl<T extends OptionsType>(
+  options: ((editorState: EditorState) => T),
+  defaultValue: ValueFromOption<T>
+) {
+  abstract class DropdownControl extends SimpleAbstractComp<ValueFromOption<T>> {
+    override getDefaultValue(): ValueFromOption<T> {
+      return defaultValue;
+    }
+
+    propertyView(params: EditorStateDropdownControlParams<T>) {
+      return controlItem(
+        { filterText: params.label },
+        <EditorStateDropdownPropertyView<T>
+          {...params}
+          value={this.value}
+          options={options}
+          onChange={(value) => {
+            if (!params.disableDispatchValueChange) {
+              this.dispatchChangeValueAction(value);
+            }
+            params.onChange?.(value);
+          }}
+        />
+      );
+    }
+
+    getPropertyView(): ReactNode {
+      throw new Error("Method not implemented.");
+    }
+  }
+
+  return DropdownControl;
+}
+
 let TourStep = new MultiCompBuilder(
   {
-    target: TargetCompAction,
-    // target: dropdownControl(editorState.getAllUICompMap(), ""),
-    arrow: BoolCodeControl,
+    // target: TargetCompAction,
+    target: editorStateDropdownControl((editorState) => {
+      console.log("Is editor defined? ")
+      console.log(editorState)
+      return Object.values(editorState.getAllUICompMap()).map((it) => ({
+        label: it.children.name.getView(),
+        value: it.children.name.getView(),
+      }))
+    },
+      ""),
+    arrow: BoolControl,
     title: StringControl,
     description: StringControl,
-    placement: dropdownControl(PlacementOptions, "center"),
+    placement: dropdownControl(PlacementOptions, "bottom"),
     hidden: BoolCodeControl,
   },
   (props) => props
@@ -333,11 +422,17 @@ TourStep = class extends TourStep implements TourStepCompProperty {
           label: "Description",
           placeholder: "Welcome to lowcoder, this is your first tutorial step",
         })}
-        {this.children.target.propertyView()}
+        {this.children.target.propertyView({
+          label: "TARGET",
+          radioButton: false,
+        })}
         {this.children.placement.propertyView({
           label: trans("textShow.verticalAlignment"),
           radioButton: false
         })}
+        {this.children.arrow.propertyView({
+          label: "Arrow"
+        })}
         {hiddenPropertyView(this.children)}
       </>
     );
@@ -346,7 +441,7 @@ TourStep = class extends TourStep implements TourStepCompProperty {
 
 export const TourStepControl = tourStepsControl(TourStep, {
   initOptions: [
-    { title: "BLAHHH", description: "I love tutorials" },
-    { title: "second title", description: "Because they mean I don't have to teach people" },
+    { title: "Welcome", description: "Welcome to lowcoder" },
+    { title: "Step 2", description: "This is a tutorial step" },
   ],
 });