WIP Add support waiting for N seconds or frames during text dialogue (currently buggy when using variable width fonts)

Author: chrismaltby

src/components/forms/TextWaitInputSelect.tsx

@@ -1,8 +1,9 @@
 import InputPicker from "components/forms/InputPicker";
 import React, { useEffect, useRef } from "react";
 import { useCallback } from "react";
+import l10n from "shared/lib/lang/l10n";
 import styled from "styled-components";
-import { FormRow } from "ui/form/layout/FormLayout";
+import { FormField, FormRow } from "ui/form/layout/FormLayout";
 
 interface TextWaitInputSelectProps {
   value: string[];
@@ -59,13 +60,18 @@ export const TextWaitInputSelect = ({
   return (
     <Form onFocus={onFocus} onBlur={onFocusOut}>
       <FormRow>
-        <InputPicker
-          id="replaceInput"
-          value={value}
-          onChange={onChange}
-          autoFocus
-          multiple
-        />
+        <FormField
+          name="replaceInput"
+          label={l10n("FIELD_WAIT_UNTIL_BUTTON_PRESSED")}
+        >
+          <InputPicker
+            id="replaceInput"
+            value={value}
+            onChange={onChange}
+            autoFocus
+            multiple
+          />
+        </FormField>
       </FormRow>
     </Form>
   );

src/components/forms/TextWaitTimeSelect.tsx

@@ -0,0 +1,98 @@
+import { UnitSelectLabelButton } from "components/forms/UnitsSelectLabelButton";
+import React, { useEffect, useRef } from "react";
+import { useCallback } from "react";
+import { TimeUnitType } from "shared/lib/entities/entitiesTypes";
+import l10n from "shared/lib/lang/l10n";
+import { ensureNumber } from "shared/types";
+import styled from "styled-components";
+import { FormField, FormRow } from "ui/form/layout/FormLayout";
+import { NumberInput } from "ui/form/NumberInput";
+
+interface TextWaitTimeSelectProps {
+  value: number;
+  units: "frames" | "time";
+  onChange: (newValue: number) => void;
+  onChangeUnits: (newUnits: "frames" | "time") => void;
+  onBlur: () => void;
+}
+
+const Form = styled.form`
+  min-width: 200px;
+  padding-top: 5px;
+`;
+
+export const TextWaitTimeSelect = ({
+  value,
+  units,
+  onChange,
+  onChangeUnits,
+  onBlur,
+}: TextWaitTimeSelectProps) => {
+  const timerRef = useRef<ReturnType<typeof setTimeout>>();
+
+  const debouncedLeave = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(() => {
+      onBlur();
+    }, 250);
+  }, [onBlur]);
+
+  useEffect(() => {
+    return () => {
+      // Cleanup timer
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+
+  const onFocus = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+  }, []);
+
+  const onFocusOut = useCallback(
+    (event: React.FocusEvent<HTMLFormElement, Element>) => {
+      if (event.currentTarget.contains(event.relatedTarget)) {
+        return;
+      }
+      debouncedLeave();
+    },
+    [debouncedLeave]
+  );
+
+  return (
+    <Form onFocus={onFocus} onBlur={onFocusOut}>
+      <FormRow>
+        <FormField
+          name="replaceWaitTime"
+          label={
+            <>
+              {l10n("EVENT_WAIT")}
+              <UnitSelectLabelButton
+                value={units}
+                allowedValues={["time", "frames"]}
+                onChange={(value) => {
+                  onChangeUnits(value as TimeUnitType);
+                }}
+              />
+            </>
+          }
+        >
+          <NumberInput
+            id="replaceWaitTime"
+            value={value}
+            onChange={(e) => {
+              const value = ensureNumber(parseFloat(e.currentTarget.value), 0);
+              onChange(value);
+            }}
+            autoFocus
+          />
+        </FormField>
+      </FormRow>
+    </Form>
+  );
+};

src/components/forms/UnitsSelectLabelButton.tsx

@@ -70,6 +70,7 @@ export const UnitSelectLabelButton = ({
           showArrow={false}
           size="small"
           variant="transparent"
+          type="button"
         >
           {allValues.map((item) => (
             <MenuItem
@@ -82,7 +83,7 @@ export const UnitSelectLabelButton = ({
           ))}
         </DropdownButton>
       ) : (
-        <Button size="small" variant="transparent">
+        <Button size="small" variant="transparent" type="button">
           {currentValue}
         </Button>
       )}

src/components/script/ScriptEditorEventHelper.tsx

@@ -94,7 +94,7 @@ export const ScriptEditorEventHelper: FC<ScriptEditorEventHelperProps> = ({
       0
     );
     return (
-      <RelativePortal offsetX={-10} offsetY={10} pin="top-right">
+      <RelativePortal offsetX={-10} offsetY={10} pin="top-right" zIndex={-1}>
         <PreviewWrapper>
           {Array.isArray(text) ? (
             text.map((text: string, index) => (
@@ -146,7 +146,7 @@ export const ScriptEditorEventHelper: FC<ScriptEditorEventHelperProps> = ({
       0
     );
     return (
-      <RelativePortal offsetX={-10} offsetY={10} pin="top-right">
+      <RelativePortal offsetX={-10} offsetY={10} pin="top-right" zIndex={-1}>
         <PreviewWrapper>
           <DialoguePreview
             text={text}
@@ -175,7 +175,7 @@ export const ScriptEditorEventHelper: FC<ScriptEditorEventHelperProps> = ({
     ].splice(0, toInt(event.args?.items));
 
     return (
-      <RelativePortal offsetX={-10} offsetY={10} pin="top-right">
+      <RelativePortal offsetX={-10} offsetY={10} pin="top-right" zIndex={-1}>
         <MenuPreview
           items={items}
           layout={event.args?.layout === "dialogue" ? "dialogue" : "menu"}
@@ -191,7 +191,7 @@ export const ScriptEditorEventHelper: FC<ScriptEditorEventHelperProps> = ({
     ];
 
     return (
-      <RelativePortal offsetX={-10} offsetY={10} pin="top-right">
+      <RelativePortal offsetX={-10} offsetY={10} pin="top-right" zIndex={-1}>
         <MenuPreview items={items} layout="dialogue" />
       </RelativePortal>
     );

src/components/ui/buttons/DropdownButton.tsx

@@ -533,6 +533,7 @@ export const DropdownButton: FC<DropdownButtonProps & ButtonProps> = React.memo(
           tabIndex={0}
           ref={buttonRef}
           role={"button"}
+          type="button"
           aria-haspopup={true}
           aria-expanded={isOpen}
           onMouseDown={onMouseDown}