feat(scene composer): added icon picker changes

awslabs · Sep 1, 2023 · 8ca53b8 · 8ca53b8
1 parent 6945512
commit 8ca53b8
Show file tree

Hide file tree

Showing 25 changed files with 539 additions and 74 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/scene-composer/package.json b/packages/scene-composer/package.json
@@ -91,7 +91,7 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/debug": "^4.1.8",
-    "@types/jest": "^27.4.1",
+    "@types/jest": "^27.5.2",
     "@types/jexl": "^2.2.0",
     "@types/lodash": "^4.14.195",
     "@types/node": "^18.16.18",
@@ -134,6 +134,9 @@
     "@awsui/design-tokens": "^3.0.41",
     "@awsui/global-styles": "^1.0.12",
     "@formatjs/ts-transformer": "3.13.3",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@iot-app-kit/core": "7.3.1",
     "@iot-app-kit/react-components": "7.3.1",
     "@iot-app-kit/related-table": "7.3.1",

diff --git a/packages/scene-composer/src/assets/anchors/IconSvgs.tsx b/packages/scene-composer/src/assets/anchors/IconSvgs.tsx
@@ -1,5 +1,8 @@
+import {
+  iconHeight,
+  iconWidth,
+} from '../../components/panels/scene-components/tag-style/IconPicker/IconPickerUtils/IconPickerStyles';
 import { colors } from '../../utils/styleUtils';
-
 export const ErrorIconSvgString = `
   <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52' width='256' height='256'>
     <g fill='none' fillRule='evenodd' transform='translate(1 1)'>
@@ -63,9 +66,12 @@ export const SelectedIconSvgString = `
 
 export const CustomIconSvgString = `
   <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52' width='256' height='256'>
-    <g fill='none' fillRule='evenodd' transform='translate(1 1)'>
-      <ellipse cx='25' cy='25' rx='21' ry='21' stroke='${colors.customBlue}' stroke-width='2' />
-      <circle cx='25' cy='25' r='16' fill='${colors.customBlue}' />
+    <g fill='none' fillRule='evenodd' transform='translate(2 2)'>
+      <ellipse cx='26' cy='26' rx='21' ry='21' stroke='${colors.customBlue}' stroke-width='2' />
+      <circle cx='26' cy='26' r='16' fill='${colors.customBlue}'/>
+      <g transform='translate(26,26) scale(0.03) translate(${iconWidth}, ${iconHeight})'>
+        <path d='M22 80a48 48 0 1 1 96 0A48 48 0 1 1 48 80zM 224c0-17.7 14.3-32 32-32H96c17.7 0 32 14.3 32 32V448h32c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H64V256H32c-17.7 0-32-14.3-32-32z' fill='${colors.infoRingWhite}' />
+      </g>
     </g>
   </svg>
 `;
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
@@ -1,6 +1,7 @@
 import { ThreeEvent, extend } from '@react-three/fiber';
 import React, { ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import * as THREE from 'three';
+import { IconLookup, findIconDefinition } from '@fortawesome/fontawesome-svg-core';
 
 import {
   CustomIconSvgString,
@@ -13,6 +14,7 @@ import {
 import { Layers } from '../../../../common/constants';
 import { sceneComposerIdContext } from '../../../../common/sceneComposerIdContext';
 import { traverseSvg } from '../../../../components/panels/scene-components/tag-style/ColorPicker/ColorPickerUtils/SvgParserHelper';
+import useRuleResult from '../../../../hooks/useRuleResult';
 import useTagSettings from '../../../../hooks/useTagSettings';
 import {
   DefaultAnchorStatus,
@@ -31,11 +33,12 @@ import { colors } from '../../../../utils/styleUtils';
 import { Anchor } from '../../../three';
 import { WidgetSprite, WidgetVisual } from '../../../three/visuals';
 import svgIconToWidgetSprite from '../common/SvgIconToWidgetSprite';
-import useRuleResult from '../../../../hooks/useRuleResult';
+import { IIconLookup } from '../../../../models/SceneModels';
 
 export interface AnchorWidgetProps {
   node: ISceneNodeInternal;
   chosenColor?: string;
+  customIcon?: IIconLookup;
   defaultIcon: string;
   valueDataBinding?: IValueDataBinding;
   ruleBasedMapId?: string;
@@ -51,6 +54,7 @@ export function AsyncLoadedAnchorWidget({
   node,
   defaultIcon,
   chosenColor,
+  customIcon,
   valueDataBinding,
   ruleBasedMapId,
   navLink,
@@ -91,6 +95,13 @@ export function AsyncLoadedAnchorWidget({
 
   const [_parent, setParent] = useState<THREE.Object3D | undefined>(getObject3DFromSceneNodeRef(node.parentRef));
   const [overrideCustomColor, setOverrideCustomColor] = useState<string | undefined>(undefined);
+  const selectedIconDefinition = findIconDefinition({
+    prefix: customIcon?.prefix,
+    iconName: customIcon?.iconName,
+  } as IconLookup);
+  const newCustomIcon = selectedIconDefinition?.icon[4] as string;
+  const newIconWidth = selectedIconDefinition?.icon[0];
+  const newIconHeight = selectedIconDefinition?.icon[1];
   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];
@@ -137,19 +148,20 @@ export function AsyncLoadedAnchorWidget({
     ];
     return iconStrings.map((iconString, index) => {
       const iconStyle = keys[index];
-      if (iconStyle === 'Custom') {
-        const modifiedSvg = modifySvgColor(iconString, visualRuleCustomColor);
+      if (iconStyle === 'Custom' && (visualRuleCustomColor || newCustomIcon)) {
+        const modifiedIconStyle = visualRuleCustomColor || newCustomIcon;
+        const modifiedSvg = modifySvg(iconString, visualRuleCustomColor, newCustomIcon, newIconWidth, newIconHeight);
         return svgIconToWidgetSprite(
           modifiedSvg,
           iconStyle,
-          visualRuleCustomColor ? `${iconStyle}-${visualRuleCustomColor}` : iconStyle,
+          modifiedIconStyle ? `${iconStyle}-${modifiedIconStyle}` : iconStyle,
           isAlwaysVisible,
           !autoRescale,
         );
       }
       return svgIconToWidgetSprite(iconString, iconStyle, iconStyle, isAlwaysVisible, !autoRescale);
     });
-  }, [autoRescale, visualRuleCustomColor]);
+  }, [autoRescale, CustomIconSvgString, visualRuleCustomColor, newCustomIcon]);
 
   const isAnchor = (nodeRef?: string) => {
     const node = getSceneNodeByRef(nodeRef);
@@ -176,7 +188,16 @@ export function AsyncLoadedAnchorWidget({
         setHighlightedSceneNodeRef(node.ref);
       }
     }
-  }, [selectedSceneNodeRef, highlightedSceneNodeRef, isViewing, node, valueDataBinding, navLink, chosenColor]);
+  }, [
+    selectedSceneNodeRef,
+    highlightedSceneNodeRef,
+    isViewing,
+    node,
+    valueDataBinding,
+    navLink,
+    visualRuleCustomColor,
+    newCustomIcon,
+  ]);
 
   const onClick = useCallback(
     (event: ThreeEvent<MouseEvent>) => {
@@ -192,6 +213,7 @@ export function AsyncLoadedAnchorWidget({
               additionalComponentData: [
                 {
                   chosenColor,
+                  customIcon,
                   navLink,
                   dataBindingContext,
                 },
@@ -292,11 +314,17 @@ function getCustomIconColor(ruleTarget: string | number, setOverrideCustomColor:
  * @param chosenColor
  * @returns
  */
-function modifySvgColor(iconString: string, chosenColor: string | undefined): string {
+function modifySvg(
+  iconString: string,
+  chosenColor: string | undefined,
+  customIcon: string | undefined,
+  iconWidth: number | undefined,
+  iconHeight: number | undefined,
+): string {
   const parser = new DOMParser();
   const svgDocument = parser.parseFromString(iconString, 'image/svg+xml');
   const svgRoot = svgDocument.documentElement;
-  traverseSvg(svgRoot, chosenColor ?? colors.customBlue);
+  traverseSvg(svgRoot, chosenColor ?? colors.customBlue, customIcon ?? '', iconWidth, iconHeight);
   const modifiedSvg = svgRoot.outerHTML;
   return modifiedSvg;
 }