Added more properties to root tour

also fixes issues with step properties always being set, thus making
root properties do nothing.

Author: snowe2010

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

@@ -8,15 +8,14 @@ import {
   withExposingConfigs,
   withMethodExposing
 } from "lowcoder-sdk";
-import { baseSelectRefMethods, TourChildrenMap, TourPropertyView } from "./tourCompConstants";
+import { baseSelectRefMethods, TourChildrenMap, TourPropertyView } from "./tourPropertyView";
 import { TourInputCommonConfig } from "./tourInputConstants";
 import { Tour, TourProps } from "antd";
 import React, { Suspense, 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 { PlacementType } from "@lowcoder-ee/comps/comps/tourComp/tourControlConstants";
 
 /**
  * This component builds the Property Panel and the fake 'UI' for the Tour component
@@ -48,20 +47,20 @@ let TourBasicComp = (function() {
       return {
         /**
          * I'm pretty sure it's safe to use dangerouslySetInnerHTML here as any creator of an app
-         * will have unrestricted access to the data of any user anyway. E.g. have a button that 
-         * just sends the current cookies wherever, thus the developer of the app must be trusted 
+         * will have unrestricted access to the data of any user anyway. E.g. have a button that
+         * just sends the current cookies wherever, thus the developer of the app must be trusted
          * in all cases
          * This even applies to things like <b onmouseover="alert('mouseover');">, because the
-         * app creator might desire functionality like this. 
+         * app creator might desire functionality like this.
          */
         title: (<div dangerouslySetInnerHTML={{ __html: step.title }} />),
         description: (<div dangerouslySetInnerHTML={{ __html: step.description }} />),
         target: target?.current,
         arrow: step.arrow,
-        placement: step.placement as PlacementType,
+        placement: step.placement === "" ? undefined : step.placement,
         mask: step.mask,
         cover: step.cover ? (<img src={step.cover} />) : undefined,
-        type: step.type || "default",
+        type: step.type === "" ? undefined : step.type,
       };
     });
 
@@ -71,8 +70,11 @@ let TourBasicComp = (function() {
           steps={steps}
           open={props.open.value}
           onClose={() => props.open.onChange(false)}
-          indicatorsRender={(current, total) => props.indicatorsRender(current,total)}
+          indicatorsRender={(current, total) => props.indicatorsRender(current, total)}
           disabledInteraction={props.disabledInteraction}
+          arrow={props.arrow}
+          placement={props.placement === "" ? undefined : props.placement}
+          type={props.type === "" ? undefined : props.type}
         />
       </Suspense>
     );

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

@@ -1,7 +1,8 @@
-export type PlacementType = 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'center';
-export type TourStepType = 'default' | 'primary';
+export type PlacementType = 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'center' | '';
+export type TourStepType = 'default' | 'primary' | '';
 
 export const PlacementOptions: {label: string, value: PlacementType}[] = [
+  { label: "​", value: ""},
   { label: "Center", value: "center"},
   { label: "Left", value: "left"},
   { label: "Left Top", value: "leftTop"},
@@ -18,6 +19,7 @@ export const PlacementOptions: {label: string, value: PlacementType}[] = [
 ];
 
 export const TypeOptions: {label: string, value: TourStepType}[] = [
+  { label: "​", value: ""},
   { label: "Default", value: "default"},
   { label: "Primary", value: "primary"},
 ];

…mps/comps/tourComp/tourCompConstants.tsx …omps/comps/tourComp/tourPropertyView.tsxclient/packages/lowcoder/src/comps/comps/tourComp/tourCompConstants.tsx renamed to client/packages/lowcoder/src/comps/comps/tourComp/tourPropertyView.tsx client/packages/lowcoder/src/comps/comps/tourComp/tourCompConstants.tsx renamed to client/packages/lowcoder/src/comps/comps/tourComp/tourPropertyView.tsx

@@ -1,7 +1,7 @@
 import { RecordConstructorToComp } from "lowcoder-core";
 import { BoolControl } from "../../controls/boolControl";
 import { LabelControl } from "../../controls/labelControl";
-import { AlkjdfControl, BoolCodeControl, MaskControl, StringControl } from "../../controls/codeControl";
+import { AlkjdfControl, ArrowControl, BoolCodeControl, MaskControl, StringControl } from "../../controls/codeControl";
 import { Section, sectionNames } from "lowcoder-design";
 import { SelectEventHandlerControl } from "../../controls/eventHandlerControl";
 import { stateComp } from "../../generators";
@@ -12,8 +12,12 @@ import { blurMethod, focusMethod } from "comps/utils/methodUtils";
 import { TourStepControl } from "@lowcoder-ee/comps/controls/tourStepControl";
 import { booleanExposingStateControl, dropdownControl } from "lowcoder-sdk";
 import { trans } from "i18n";
-import { PlacementOptions } from "@lowcoder-ee/comps/comps/tourComp/tourControlConstants";
-import { IndicatorsRenderTooltip, TourMaskTooltip } from "@lowcoder-ee/comps/comps/tourComp/tourTooltips";
+import { PlacementOptions, TypeOptions } from "@lowcoder-ee/comps/comps/tourComp/tourControlConstants";
+import {
+  IndicatorsRenderTooltip, TourArrowTooltip,
+  TourMaskTooltip,
+  TourPlacementTooltip, TourStepArrowTooltip, TourStepMaskTooltip
+} from "@lowcoder-ee/comps/comps/tourComp/tourTooltips";
 
 export const TourChildrenMap = {
   label: LabelControl,
@@ -29,6 +33,8 @@ export const TourChildrenMap = {
   disabledInteraction: BoolControl,
   mask: MaskControl,
   placement: dropdownControl(PlacementOptions, "bottom"),
+  arrow: ArrowControl,
+  type: dropdownControl(TypeOptions, "default"),
 };
 
 export const TourPropertyView = (
@@ -58,11 +64,19 @@ export const TourPropertyView = (
         label: trans("tour.mask.label"),
         tooltip: TourMaskTooltip,
       })}
-      {/*{children.placement.propertyView({*/}
-      {/*  label: trans("tour.placement.label"),*/}
-      {/*  tooltip: TourPlacementTooltip,*/}
-      {/*  radioButton: false*/}
-      {/*})}*/}
+      {children.placement.propertyView({
+        label: trans("tour.placement.label"),
+        tooltip: TourPlacementTooltip,
+        radioButton: false
+      })}
+      {children.arrow.propertyView({
+        label: trans("tour.arrow.label"),
+        tooltip: TourArrowTooltip,
+      })}
+      {children.type.propertyView({
+        label: trans("tour.type.label"),
+        tooltip: trans("tour.type.tooltip")
+      })}
     </Section>
 
     {/*{["layout", "both"].includes(*/}

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

@@ -33,7 +33,7 @@ let styleExample = {
 
 export const TourStepMaskTooltip = (
   <div>
-    {trans("tour.options.mask.tooltip")}:
+    {trans("tour.options.mask.tooltip")}
     <br />
     <br />
     {trans("tour.options.mask.tooltipValidTypes")}
@@ -48,7 +48,7 @@ export const TourStepMaskTooltip = (
 
 export const TourMaskTooltip = (
   <div>
-    {trans("tour.mask.tooltip")}:
+    {trans("tour.mask.tooltip")}
     <br />
     <br />
     {trans("tour.mask.tooltipValidTypes")}
@@ -63,7 +63,7 @@ export const TourMaskTooltip = (
 
 export const TourPlacementTooltip = (
   <div>
-    {trans("tour.placement.tooltip")}:
+    {trans("tour.placement.tooltip")}
     <br />
     <br />
     <h4>Valid options</h4>
@@ -101,7 +101,16 @@ export const TourPlacementTooltip = (
 const arrowTooltipSignature = `boolean | { pointAtCenter: boolean }`;
 export const TourStepArrowTooltip = (
   <div>
-    {trans("tour.options.arrow.tooltip")}:
+    {trans("tour.options.arrow.tooltip")}
+    <br />
+    <br />
+    <h4>{trans("tour.tooltipSignatureHeader")}</h4>
+    <code>{arrowTooltipSignature}</code>
+  </div>
+);
+export const TourArrowTooltip = (
+  <div>
+    {trans("tour.arrow.tooltip")}
     <br />
     <br />
     <h4>{trans("tour.tooltipSignatureHeader")}</h4>

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

@@ -386,11 +386,11 @@ let TourStep = new MultiCompBuilder(
     arrow: ArrowControl,
     title: StringControl,
     description: StringControl,
-    placement: dropdownControl(PlacementOptions, "bottom"),
+    placement: dropdownControl(PlacementOptions, ""),
     hidden: BoolCodeControl,
     mask: MaskControl,
     cover: StringControl,
-    type: dropdownControl(TypeOptions, "default"),
+    type: dropdownControl(TypeOptions, ""),
   },
   (props) => props
 ).build();

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -2876,14 +2876,23 @@ export const en = {
     },
     mask: {
       label: "Mask",
-      tooltip: "Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour.",
+      tooltip: "Whether to enable masking, change mask style and fill color by pass custom props, the default follows the `mask` property of Tour. Can be overridden at the step level.",
       tooltipValidTypes: "Valid input types: `true`, `false`, empty, or a JSON object following the CSSProperties Schema from Antd.",
     },
     placement: {
       label: "Placement",
-      tooltip: "Position of the guide card relative to the target element",
+      tooltip: "Position of the guide card relative to the target element. Can be overridden at the step level.",
       tooltipValidOptions: "center left leftTop leftBottom right rightTop rightBottom top topLeft topRight bottom bottomLeft bottomRight"
-    }
+    },
+    arrow: {
+      label: "Arrow",
+      tooltip: "Turns the arrow on and off or moves it to point at the center of the component, if desired, otherwise the arrow will always point near the top of the component. Can be overridden at the step level.",
+      tooltipFunctionSignature: "boolean | { pointAtCenter: boolean }",
+    },
+    type: {
+      label: "Type",
+      tooltip: "The type of tooltip, this affects the background color and text color. The colors can be controlled with the main tour styling section. Can be overridden at the step level."
+    },
   },
 
   docUrls: {