fix(Tag style): custom color to support icon rules

awslabs · Aug 11, 2023 · dd3bbee · dd3bbee
1 parent ff0bbe3
commit dd3bbee
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/scene-composer/src/augmentations/components/three-fiber/anchor/AnchorWidget.tsx b/packages/scene-composer/src/augmentations/components/three-fiber/anchor/AnchorWidget.tsx
@@ -42,6 +42,8 @@ export interface AnchorWidgetProps {
   navLink?: INavLink;
 }
 
+type overrideCustomColorType = (value: string | undefined) => void;
+
 // Adds the custom objects to React Three Fiber
 extend({ Anchor, WidgetVisual, WidgetSprite });
 
@@ -89,7 +91,7 @@ export function AsyncLoadedAnchorWidget({
   const linesRef = useRef<THREE.LineSegments>(null);
 
   const [_parent, setParent] = useState<THREE.Object3D | undefined>(getObject3DFromSceneNodeRef(node.parentRef));
-
+  const [overrideCustomColor, setOverrideCustomColor] = useState<string | undefined>(undefined);
   const baseScale = useMemo(() => {
     // NOTE: For Fixed Size value was [0.05, 0.05, 1]
     const defaultScale = autoRescale ? [0.05, 0.05, 1] : [0.5, 0.5, 1];
@@ -104,11 +106,13 @@ export function AsyncLoadedAnchorWidget({
 
   // Evaluate visual state based on data binding
   const visualState = useMemo(() => {
+    getCustomIconColor(ruleResult, setOverrideCustomColor);
     const ruleTargetInfo = getSceneResourceInfo(ruleResult as string);
     // Anchor widget only accepts icon, otherwise, default to Info icon
     return ruleTargetInfo.type === SceneResourceType.Icon ? ruleTargetInfo.value : defaultIcon;
   }, [ruleResult]);
 
+  const visualRuleCustomColor = overrideCustomColor !== undefined ? overrideCustomColor : chosenColor;
   const defaultVisualMap = useMemo(() => {
     // NOTE: Due to the refactor from a Widget Visual (SVG to Mesh) to a Widget Sprite (SVG to Sprite)
     //  we need a new way of showing selection. This is done by showing a transparent larger image BEHIND the
@@ -133,19 +137,20 @@ export function AsyncLoadedAnchorWidget({
       CustomIconSvgString,
     ];
     return iconStrings.map((iconString, index) => {
-      if (keys[index] === 'Custom') {
-        const modifiedSvg = modifySvgColor(iconString, chosenColor);
+      const iconStyle = keys[index];
+      if (iconStyle === 'Custom') {
+        const modifiedSvg = modifySvgColor(iconString, visualRuleCustomColor);
         return svgIconToWidgetSprite(
           modifiedSvg,
-          keys[index],
-          chosenColor ? `${keys[index]}-${chosenColor}` : keys[index],
+          iconStyle,
+          visualRuleCustomColor ? `${iconStyle}-${visualRuleCustomColor}` : iconStyle,
           isAlwaysVisible,
           !autoRescale,
         );
       }
-      return svgIconToWidgetSprite(iconString, keys[index], keys[index], isAlwaysVisible, !autoRescale);
+      return svgIconToWidgetSprite(iconString, iconStyle, iconStyle, isAlwaysVisible, !autoRescale);
     });
-  }, [autoRescale, chosenColor]);
+  }, [autoRescale, visualRuleCustomColor]);
 
   const isAnchor = (nodeRef?: string) => {
     const node = getSceneNodeByRef(nodeRef);
@@ -268,6 +273,20 @@ export const AnchorWidget: React.FC<AnchorWidgetProps> = (props: AnchorWidgetPro
     </React.Suspense>
   );
 };
+
+/**
+ * This method sets the custom icon color if it is returned from the rule.
+ * @param ruleTarget
+ * @param setOverrideCustomColor
+ */
+function getCustomIconColor(ruleTarget: string | number, setOverrideCustomColor: overrideCustomColorType) {
+  const ruleColor =
+    typeof ruleTarget === 'string' && ruleTarget.includes('Custom-')
+      ? ruleTarget.split(':')[1].split('-')[1]
+      : undefined;
+  setOverrideCustomColor(ruleColor);
+}
+
 /**
  * This method parse the svg string and fill the color
  * @param iconString

diff --git a/...-composer/src/augmentations/components/three-fiber/anchor/__tests__/AnchorWidget.spec.tsx b/...-composer/src/augmentations/components/three-fiber/anchor/__tests__/AnchorWidget.spec.tsx
@@ -135,6 +135,28 @@ describe('AnchorWidget', () => {
     expect(container).toMatchSnapshot();
   });
 
+  it('should render correctly with data binding custom rule', () => {
+    setStore('test-ref', 'test-ref');
+    getSceneRuleMapByIdMock.mockImplementation((id) =>
+      id == 'rule-id'
+        ? {
+            statements: [
+              {
+                expression: "alarm_status == 'ACTIVE'",
+                target: 'iottwinmaker.common.icon:Custom-#ffffff',
+              },
+            ],
+          }
+        : undefined,
+    );
+    const container = renderer.create(
+      <AnchorWidget node={node} defaultIcon={DefaultAnchorStatus.Info} ruleBasedMapId='rule-id' />,
+    );
+
+    expect(container.root.findByType('anchor').props.visualState).toEqual('Custom');
+    expect(container).toMatchSnapshot();
+  });
+
   it('should render correctly with non default tag settings', () => {
     setStore('test-ref', 'test-ref');
     (useTagSettings as jest.Mock).mockReturnValue({ scale: 3, autoRescale: true });

diff --git a/...ntations/components/three-fiber/anchor/__tests__/__snapshots__/AnchorWidget.spec.tsx.snap b/...ntations/components/three-fiber/anchor/__tests__/__snapshots__/AnchorWidget.spec.tsx.snap
@@ -189,6 +189,69 @@ exports[`AnchorWidget should render correctly with an offset 1`] = `
 </group>
 `;
 
+exports[`AnchorWidget should render correctly with data binding custom rule 1`] = `
+<group
+  visible={true}
+>
+  <group
+    scale={
+      Vector3 {
+        "x": 1,
+        "y": 1,
+        "z": 1,
+      }
+    }
+  >
+    <lineSegments>
+      <lineBasicMaterial
+        color="#ffffff"
+      />
+      <bufferGeometry
+        attach="geometry"
+      />
+    </lineSegments>
+    <anchor
+      isSelected={true}
+      onClick={[Function]}
+      position={
+        Array [
+          0,
+          0,
+          0,
+        ]
+      }
+      scale={
+        Array [
+          0.5,
+          0.5,
+          1,
+        ]
+      }
+      visualState="Custom"
+    >
+      <div
+        data-test-id="Selected"
+      />
+      <div
+        data-test-id="Info"
+      />
+      <div
+        data-test-id="Warning"
+      />
+      <div
+        data-test-id="Error"
+      />
+      <div
+        data-test-id="Video"
+      />
+      <div
+        data-test-id="Custom-#ffffff"
+      />
+    </anchor>
+  </group>
+</group>
+`;
+
 exports[`AnchorWidget should render correctly with data binding rule 1`] = `
 <group
   visible={true}

diff --git a/...ages/scene-composer/src/components/panels/scene-rule-components/SceneRuleTargetEditor.tsx b/...ages/scene-composer/src/components/panels/scene-rule-components/SceneRuleTargetEditor.tsx
@@ -95,7 +95,12 @@ export const SceneRuleTargetEditor: React.FC<ISceneRuleTargetEditorProps> = ({
           {isAllValid && (
             <ColorPicker
               color={chosenColor}
-              onSelectColor={(newColor) => setChosenColor(newColor)}
+              onSelectColor={(newColor) => {
+                const colorWithIcon =
+                  targetInfo.value === 'Custom' ? `${targetInfo.value}-${newColor}` : targetInfo.value;
+                onChange(convertToIotTwinMakerNamespace(targetInfo.type, colorWithIcon));
+                setChosenColor(newColor);
+              }}
               label={formatMessage({ defaultMessage: 'Colors', description: 'Colors' })}
             />
           )}