chore(TagResize): Add flag to resizable tags (#270)

packages/scene-composer/package.json

@@ -154,10 +154,10 @@
   "jest": {
     "coverageThreshold": {
       "global": {
-        "lines": 76.64,
-        "statements": 75.75,
-        "functions": 76.03,
-        "branches": 62.22,
+        "lines": 76.84,
+        "statements": 75.97,
+        "functions": 76.16,
+        "branches": 62.5,
         "branchesTrue": 100
       }
     }

packages/scene-composer/src/components/panels/SceneNodeInspectorPanel.tsx

@@ -5,7 +5,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { Checkbox, FormField, Input, TextContent } from '@awsui/components-react';
 
 import useLifecycleLogging from '../../logger/react-logger/hooks/useLifecycleLogging';
-import { KnownComponentType } from '../../interfaces';
+import { COMPOSER_FEATURES, KnownComponentType } from '../../interfaces';
 import { RecursivePartial } from '../../utils/typeUtils';
 import { ISceneNodeInternal, useEditorState, useSceneDocument } from '../../store';
 import { sceneComposerIdContext } from '../../common/sceneComposerIdContext';
@@ -14,9 +14,10 @@ import { toNumber } from '../../utils/stringUtils';
 import { isLinearPlaneMotionIndicator } from '../../utils/sceneComponentUtils';
 import LogProvider from '../../logger/react-logger/log-provider';
 import { findComponentByType, isEnvironmentNode } from '../../utils/nodeUtils';
+import { getGlobalSettings } from '../../common/GlobalSettings';
 
 import { ComponentEditor } from './ComponentEditor';
-import { Matrix3XInputGrid, ExpandableInfoSection, Triplet } from './CommonPanelComponents';
+import { ExpandableInfoSection, Matrix3XInputGrid, Triplet } from './CommonPanelComponents';
 import DebugInfoPanel from './scene-components/debug/DebugPanel';
 
 export const SceneNodeInspectorPanel: React.FC = () => {
@@ -27,6 +28,8 @@ export const SceneNodeInspectorPanel: React.FC = () => {
   const selectedSceneNode = getSceneNodeByRef(selectedSceneNodeRef);
   const intl = useIntl();
 
+  const tagResizeEnabled = getGlobalSettings().featureConfig[COMPOSER_FEATURES.TagResize];
+
   const i18nKnownComponentTypesStrings = defineMessages({
     [KnownComponentType.ModelRef]: {
       defaultMessage: 'Model Reference',
@@ -77,6 +80,13 @@ export const SceneNodeInspectorPanel: React.FC = () => {
     [selectedSceneNode],
   );
 
+  const isTagComponent = useMemo(
+    () => !!findComponentByType(selectedSceneNode, KnownComponentType.Tag),
+    [selectedSceneNode],
+  );
+
+  const shouldShowScale = !((isTagComponent && !tagResizeEnabled) || isCameraComponent);
+
   const readonly: Triplet<boolean> = [false, false, false];
 
   const handleInputChanges = (value: RecursivePartial<ISceneNodeInternal>) => {
@@ -157,7 +167,7 @@ export const SceneNodeInspectorPanel: React.FC = () => {
                 applySnapToFloorConstraint();
               }, 100)}
             />
-            {!isCameraComponent && (
+            {shouldShowScale && (
               <Matrix3XInputGrid
                 name={intl.formatMessage({ defaultMessage: 'Scale', description: 'Input Grid title name' })}
                 labels={['X', 'Y', 'Z']}

packages/scene-composer/src/components/three-fiber/EditorTransformControls.tsx

@@ -1,5 +1,5 @@
 import * as THREE from 'three';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { useThree } from '@react-three/fiber';
 
 import useLogger from '../../logger/react-logger/hooks/useLogger';
@@ -8,21 +8,30 @@ import { useStore } from '../../store';
 import { TransformControls as TransformControlsImpl } from '../../three/TransformControls';
 import { snapObjectToFloor } from '../../three/transformUtils';
 import { isLinearPlaneMotionIndicator } from '../../utils/sceneComponentUtils';
-import { isEnvironmentNode } from '../../utils/nodeUtils';
+import { findComponentByType, isEnvironmentNode } from '../../utils/nodeUtils';
+import { getGlobalSettings } from '../../common/GlobalSettings';
+import { COMPOSER_FEATURES, KnownComponentType } from '../../interfaces';
 
 export function EditorTransformControls() {
   const { domElement } = useThree(({ gl }) => gl);
   const log = useLogger('EditorTransformControls');
   const camera = useThree(({ camera }) => camera);
   const sceneComposerId = useContext(sceneComposerIdContext);
   const transformControlMode = useStore(sceneComposerId)((state) => state.transformControlMode);
+  const setTransformControlsMode = useStore(sceneComposerId)((state) => state.setTransformControlMode);
   const setTransformControls = useStore(sceneComposerId)((state) => state.setTransformControls);
   const selectedSceneNodeRef = useStore(sceneComposerId)((state) => state.selectedSceneNodeRef);
   const selectedSceneNode = useStore(sceneComposerId)((state) => state.getSceneNodeByRef(selectedSceneNodeRef));
   const getObject3DBySceneNodeRef = useStore(sceneComposerId)((state) => state.getObject3DBySceneNodeRef);
   const addingWidget = useStore(sceneComposerId)((state) => state.addingWidget);
 
   const [transformControls] = useState(() => new TransformControlsImpl(camera, domElement));
+  const tagResizeEnabled = getGlobalSettings().featureConfig[COMPOSER_FEATURES.TagResize];
+
+  const isTagComponent = useMemo(
+    () => !!findComponentByType(selectedSceneNode, KnownComponentType.Tag),
+    [selectedSceneNode],
+  );
 
   // Set transform controls' camera
   useEffect(() => {
@@ -42,6 +51,10 @@ export function EditorTransformControls() {
 
   useEffect(() => {
     if (selectedSceneNode) {
+      if (isTagComponent && !tagResizeEnabled && transformControlMode === 'scale') {
+        // Prevent the scale from being enabled
+        setTransformControlsMode('translate');
+      }
       // TODO: Fix TransformControls typings so we can remove @ts-ignore directive
       // TransformControls defines properties using Object.defineProperty but TypeScript cannot infer the types
       // https://github.com/microsoft/TypeScript/issues/28694

packages/scene-composer/src/components/toolbars/floatingToolbar/items/ObjectItemGroup.tsx

@@ -1,59 +1,81 @@
 import React, { useContext, useMemo } from 'react';
-import { useIntl, IntlShape } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
 import { DeleteSvg, RotateIconSvg, ScaleIconSvg, TranslateIconSvg } from '../../../../assets/svgs';
-import { KnownComponentType, TransformControlMode } from '../../../../interfaces';
+import { COMPOSER_FEATURES, KnownComponentType, TransformControlMode } from '../../../../interfaces';
 import { sceneComposerIdContext } from '../../../../common/sceneComposerIdContext';
 import { useEditorState, useSceneDocument } from '../../../../store';
 import { ToolbarItem } from '../../common/ToolbarItem';
 import { ToolbarItemGroup } from '../../common/styledComponents';
 import { ToolbarItemOptions } from '../../common/types';
+import { getGlobalSettings } from '../../../../common/GlobalSettings';
 
-const transformSelectorItems = (intl: IntlShape): (ToolbarItemOptions & { mode: TransformControlMode })[] => [
-  {
-    icon: { scale: 1.06, svg: TranslateIconSvg },
-    label: intl.formatMessage({ defaultMessage: 'Translate', description: 'Menu label' }),
-    mode: 'translate',
-    text: intl.formatMessage({ defaultMessage: 'Translate object', description: 'Menu Item' }),
-    uuid: 'transform-translate',
-  },
-  {
-    icon: { scale: 1.06, svg: RotateIconSvg },
-    label: intl.formatMessage({ defaultMessage: 'Rotate', description: 'Menu label' }),
-    mode: 'rotate',
-    text: intl.formatMessage({ defaultMessage: 'Rotate object', description: 'Menu Item' }),
-    uuid: 'transform-rotate',
-  },
-  {
-    icon: { scale: 1.06, svg: ScaleIconSvg },
-    label: intl.formatMessage({ defaultMessage: 'Scale', description: 'Menu label' }),
-    mode: 'scale',
-    text: intl.formatMessage({ defaultMessage: 'Scale object', description: 'Menu Item' }),
-    uuid: 'transform-scale',
-  },
-];
+enum TransformTypes {
+  Translate = 'transform-translate',
+  Rotate = 'transform-rotate',
+  Scale = 'transform-scale',
+}
+
+const labelStrings = defineMessages({
+  [TransformTypes.Translate]: { defaultMessage: 'Translate', description: 'Menu label' },
+  [TransformTypes.Rotate]: { defaultMessage: 'Rotate', description: 'Menu label' },
+  [TransformTypes.Scale]: { defaultMessage: 'Translate', description: 'Menu label' },
+});
+
+const textStrings = defineMessages({
+  [TransformTypes.Translate]: { defaultMessage: 'Translate object', description: 'Menu Item' },
+  [TransformTypes.Rotate]: { defaultMessage: 'Rotate object', description: 'Menu Item' },
+  [TransformTypes.Scale]: { defaultMessage: 'Scale object', description: 'Menu Item' },
+});
 
 export function ObjectItemGroup() {
   const sceneComposerId = useContext(sceneComposerIdContext);
   const intl = useIntl();
   const { selectedSceneNodeRef, transformControlMode, setTransformControlMode } = useEditorState(sceneComposerId);
   const { getSceneNodeByRef, removeSceneNode } = useSceneDocument(sceneComposerId);
+  const { formatMessage } = useIntl();
+
+  const tagResizeEnabled = getGlobalSettings().featureConfig[COMPOSER_FEATURES.TagResize];
 
   const isTagComponent = useMemo(() => {
     const selectedSceneNode = getSceneNodeByRef(selectedSceneNodeRef);
     return selectedSceneNode?.components.some((component) => component.type === KnownComponentType.Tag) === true;
   }, [selectedSceneNodeRef]);
 
+  const transformSelectorItems = [
+    {
+      icon: { scale: 1.06, svg: TranslateIconSvg },
+      uuid: TransformTypes.Translate,
+      mode: 'translate',
+    },
+    {
+      icon: { scale: 1.06, svg: RotateIconSvg },
+      uuid: TransformTypes.Rotate,
+      mode: 'rotate',
+    },
+    {
+      icon: { scale: 1.06, svg: ScaleIconSvg },
+      uuid: TransformTypes.Scale,
+      mode: 'scale',
+      isDisabled: isTagComponent && !tagResizeEnabled,
+    },
+  ].map(
+    (item) =>
+      ({
+        ...item,
+        label: labelStrings[item.uuid] ? formatMessage(labelStrings[item.uuid]) : undefined, // If there's a label string, show label
+        text: textStrings[item.uuid] ? formatMessage(textStrings[item.uuid]) : undefined, // if there's a text string, show text
+      } as ToolbarItemOptions & { mode: TransformControlMode }),
+  );
+
   const initialSelectedItem = useMemo(() => {
-    return (
-      transformSelectorItems(intl).find((item) => item.mode === transformControlMode) ?? transformSelectorItems(intl)[0]
-    );
-  }, [transformSelectorItems(intl), transformControlMode, isTagComponent]);
+    return transformSelectorItems.find((item) => item.mode === transformControlMode) ?? transformSelectorItems[0];
+  }, [transformSelectorItems, transformControlMode, isTagComponent]);
 
   const isDeleteDisabled = selectedSceneNodeRef === undefined;
 
   const translatedItems = useMemo(() => {
-    return transformSelectorItems(intl);
+    return transformSelectorItems;
   }, [intl, isTagComponent]);
 
   return (

packages/scene-composer/src/interfaces/feature.ts

@@ -10,6 +10,7 @@ export enum COMPOSER_FEATURES {
   ENHANCED_EDITING = 'ENHANCED_EDITING',
   CameraView = 'CameraView',
   EnvironmentModel = 'EnvironmentModel',
+  TagResize = 'TagResize',
 }
 
 export type FeatureConfig = Partial<Record<COMPOSER_FEATURES, boolean>>;

packages/scene-composer/stories/SceneComposer.stories.tsx

@@ -151,6 +151,7 @@ const knobsConfigurationDecorator = [
         [COMPOSER_FEATURES.ENHANCED_EDITING]: true,
         [COMPOSER_FEATURES.CameraView]: true,
         [COMPOSER_FEATURES.EnvironmentModel]: false,
+        [COMPOSER_FEATURES.TagResize]: true,
         ...args.config.featureConfig,
       },
       ...args.config,

packages/scene-composer/translations/IotAppKitSceneComposer.en_US.json

@@ -299,10 +299,6 @@
     "note": "label",
     "text": "Add color rule"
   },
-  "LztKh8": {
-    "note": "Menu label",
-    "text": "Scale"
-  },
   "MZtQw3": {
     "note": "75mm lens",
     "text": "75mm"