All files / src/components/world/inspector/actors ActorExtraCollisionFlags.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { useCallback, useMemo } from "react";
import { FormRow } from "ui/form/layout/FormLayout";
import entitiesActions from "store/features/entities/entitiesActions";
import { ActorNormalized } from "shared/lib/entities/entitiesTypes";
import { useAppDispatch, useAppSelector } from "store/hooks";
import { CheckboxField } from "ui/form/CheckboxField";
import {
  removeArrayElements,
  toggleArrayElement,
} from "shared/lib/helpers/array";
import { sceneSelectors } from "store/features/entities/entitiesSelectors";
import l10n, { L10NKey } from "shared/lib/lang/l10n";
 
interface ActorExtraCollisionFlagsProps {
  actor: ActorNormalized;
  sceneId?: string;
}
 
export const ActorExtraCollisionFlags = ({
  actor,
  sceneId,
}: ActorExtraCollisionFlagsProps) => {
  const dispatch = useAppDispatch();
 
  const sceneTypeKey = useAppSelector(
    (state) => sceneSelectors.selectById(state, sceneId ?? "")?.type,
  );
 
  const sceneTypeSchemas = useAppSelector((state) => state.engine.sceneTypes);
 
  const extraActorCollisionFlags = useMemo(() => {
    Iif (!sceneTypeKey || !sceneTypeSchemas) {
      return [];
    }
    return (
      sceneTypeSchemas.find((s) => s.key === sceneTypeKey)
        ?.extraActorCollisionFlags ?? []
    );
  }, [sceneTypeKey, sceneTypeSchemas]);
 
  const onChangeActorProp = useCallback(
    <K extends keyof ActorNormalized>(key: K, value: ActorNormalized[K]) => {
      dispatch(
        entitiesActions.editActor({
          actorId: actor.id,
          changes: {
            [key]: value,
          },
        }),
      );
    },
    [dispatch, actor.id],
  );
 
  Iif (!actor || extraActorCollisionFlags.length === 0) {
    return <></>;
  }
 
  return Array.from({
    length: Math.ceil(extraActorCollisionFlags.length / 2),
  }).map((_, rowIndex) => {
    const startIndex = rowIndex * 2;
    const items = extraActorCollisionFlags.slice(startIndex, startIndex + 2);
 
    return (
      <FormRow key={rowIndex}>
        {items.map((flagDef) => (
          <CheckboxField
            key={flagDef.key}
            name={flagDef.key}
            label={l10n(flagDef.label as L10NKey)}
            title={
              flagDef.description
                ? l10n(flagDef.description as L10NKey)
                : undefined
            }
            checked={actor.collisionExtraFlags.includes(flagDef.setFlag)}
            onChange={() => {
              onChangeActorProp(
                "collisionExtraFlags",
                removeArrayElements(
                  toggleArrayElement(
                    actor.collisionExtraFlags,
                    flagDef.setFlag,
                  ),
                  flagDef.clearFlags ?? [],
                ),
              );
            }}
          />
        ))}
      </FormRow>
    );
  });
};