#582

Author: mvladic

packages/eez-studio-ui/_stylesheets/project-editor.less

@@ -502,6 +502,14 @@
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
+
+        & > img,
+        & > svg {
+            flex-shrink: 0;
+            height: 20px;
+            object-fit: contain;
+            margin-right: 4px;
+        }
     }
 
     .EezStudio_PropertiesPanel_Body {

packages/project-editor/core/object.ts

@@ -381,7 +381,11 @@ export interface ClassInfo {
     ) => IEezObject | PropertyInfo | undefined;
 
     icon?: React.ReactNode;
-    getIcon?: (object: IEezObject) => React.ReactNode;
+    getIcon?: (
+        object?: IEezObject,
+        componentClass?: IObjectClassInfo,
+        projectStore?: ProjectStore
+    ) => React.ReactNode | undefined;
 
     componentHeaderColor?:
         | ((

packages/project-editor/flow/components/actions/index.tsx

@@ -119,6 +119,8 @@ import {
 import { makeEndInstruction } from "project-editor/flow/expression/instructions";
 import { ProjectEditor } from "project-editor/project-editor-interface";
 import {
+    CALL_ACTION_ICON,
+    CALL_NATIVE_ACTION_ICON,
     CLIPBOARD_WRITE_ICON,
     LANGUAGE_ICON,
     LOG_ICON,
@@ -2096,20 +2098,29 @@ export class CallActionActionComponent extends ActionComponent {
             }
             return component.action;
         },
-        icon: (
-            <svg
-                viewBox="0 0 24 24"
-                strokeWidth="2"
-                stroke="currentColor"
-                fill="none"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-            >
-                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                <path d="M7 4a12.25 12.25 0 0 0 0 16"></path>
-                <path d="M17 4a12.25 12.25 0 0 1 0 16"></path>
-            </svg>
-        ),
+        icon: CALL_ACTION_ICON,
+        getIcon: (
+            object?: CallActionActionComponent,
+            componentClass?: IObjectClassInfo,
+            projectStore?: ProjectStore
+        ) => {
+            let actionName;
+            if (object) {
+                actionName = object.action;
+                projectStore = ProjectEditor.getProjectStore(object);
+            } else if (componentClass) {
+                actionName = componentClass.props?.action;
+            }
+
+            if (projectStore && actionName) {
+                const action = findAction(projectStore.project, actionName);
+                if (action && action.implementationType == "native") {
+                    return CALL_NATIVE_ACTION_ICON;
+                }
+            }
+
+            return undefined;
+        },
         componentHeaderColor: (
             object?: CallActionActionComponent,
             componentClass?: IObjectClassInfo,

packages/project-editor/flow/components/components-registry.ts

@@ -227,7 +227,17 @@ export function getComponentVisualData(
     projectStore: ProjectStore | undefined
 ) {
     const classInfo = componentClass.objectClass.classInfo;
-    let icon = classInfo.icon as any;
+
+    let icon;
+
+    if (classInfo.getIcon) {
+        icon = classInfo.getIcon(undefined, componentClass, projectStore);
+    }
+
+    if (icon == undefined) {
+        icon = classInfo.icon as any;
+    }
+
     let label = componentClass.displayName
         ? componentClass.displayName
         : classInfo.componentPaletteLabel ||

packages/project-editor/project/ui/PropertiesPanel.tsx

@@ -7,6 +7,7 @@ import { getParent } from "project-editor/core/object";
 import {
     EezValueObject,
     getAncestorOfType,
+    getObjectIcon,
     getPropertiesPanelLabel,
     isObjectExists
 } from "project-editor/store";
@@ -44,6 +45,8 @@ export const PropertiesPanel = observer(
                 )
                 .filter(object => isObjectExists(object));
 
+            let icon = null;
+
             if (objects.length == 0) {
                 title = "Nothing selected";
             } else if (objects.length == 1) {
@@ -52,6 +55,7 @@ export const PropertiesPanel = observer(
                     object = getParent(object);
                 }
 
+                icon = getObjectIcon(object);
                 title = getPropertiesPanelLabel(object);
             } else {
                 title = "Multiple objects selected";
@@ -70,6 +74,7 @@ export const PropertiesPanel = observer(
             return (
                 <div className="EezStudio_PropertiesPanel">
                     <div className="EezStudio_PropertiesPanel_Header">
+                        {typeof icon === "string" ? <img src={icon} /> : icon}
                         {title}
                     </div>
                     <div className="EezStudio_PropertiesPanel_Body">

packages/project-editor/store/helper.ts

@@ -323,12 +323,15 @@ export function getClassInfo(object: IEezObject): ClassInfo {
 export function getObjectIcon(object: IEezObject) {
     const classInfo = getClassInfo(object);
 
-    if (classInfo.icon) {
-        return classInfo.icon;
+    if (classInfo.getIcon) {
+        const icon = classInfo.getIcon(object);
+        if (icon) {
+            return icon;
+        }
     }
 
-    if (classInfo.getIcon) {
-        return classInfo.getIcon(object);
+    if (classInfo.icon) {
+        return classInfo.icon;
     }
 
     return undefined;

packages/project-editor/ui-components/icons.tsx

@@ -3527,3 +3527,25 @@ export const RECORD_VIDEO_ICON: any = (
         <path d="m13.846 9.692c2.293.004 4.15 1.862 4.154 4.154v.004c0 2.294-1.86 4.154-4.154 4.154s-4.154-1.86-4.154-4.154c0-1.148.466-2.187 1.218-2.939.728-.753 1.747-1.22 2.876-1.22h.063-.003zm10.154-6h.055c1.002 0 1.908.414 2.554 1.081l.001.001c.668.647 1.082 1.553 1.082 2.555v.058-.003 12.924c-.001 2.039-1.653 3.691-3.692 3.692h-20.308c-2.039-.001-3.691-1.653-3.692-3.692v-12.923c0-.016 0-.036 0-.055 0-1.002.414-1.908 1.081-2.554l.001-.001c.647-.668 1.553-1.082 2.555-1.082h.058-.003 3.23l.735-1.962c.212-.507.557-.922.993-1.213l.01-.006c.411-.311.929-.501 1.49-.512h.002 7.385c.564.011 1.081.201 1.499.517l-.006-.005c.445.297.791.712.996 1.201l.007.018.735 1.962zm-10.154 16.616c.027 0 .059.001.091.001 1.755 0 3.341-.727 4.472-1.896l.002-.002c1.171-1.133 1.897-2.719 1.897-4.474 0-.032 0-.064-.001-.096v.005c0-.027.001-.06.001-.092 0-1.755-.727-3.341-1.896-4.472l-.002-.002c-1.167-1.172-2.781-1.897-4.565-1.897s-3.398.725-4.565 1.896c-1.171 1.133-1.897 2.719-1.897 4.474 0 .032 0 .064.001.096v-.005c0 .028-.001.061-.001.094 0 1.755.726 3.34 1.894 4.471l.002.002c1.133 1.171 2.719 1.897 4.474 1.897.033 0 .065 0 .097-.001h-.005z" />
     </svg>
 );
+
+export const CALL_ACTION_ICON: any = (
+    <svg
+        viewBox="0 0 24 24"
+        strokeWidth="2"
+        stroke="currentColor"
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+    >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M7 4a12.25 12.25 0 0 0 0 16"></path>
+        <path d="M17 4a12.25 12.25 0 0 1 0 16"></path>
+    </svg>
+);
+
+export const CALL_NATIVE_ACTION_ICON: any = (
+    <svg viewBox="0 0 24 24">
+        <path fill="none" d="M0 0h24v24H0z" />
+        <path d="M4 18v-3.7a1.5 1.5 0 0 0-1.5-1.5H2v-1.6h.5A1.5 1.5 0 0 0 4 9.7V6a3 3 0 0 1 3-3h1v2H7a1 1 0 0 0-1 1v4.1A2 2 0 0 1 4.626 12 2 2 0 0 1 6 13.9V18a1 1 0 0 0 1 1h1v2H7a3 3 0 0 1-3-3m16-3.7V18a3 3 0 0 1-3 3h-1v-2h1a1 1 0 0 0 1-1v-4.1a2 2 0 0 1 1.374-1.9A2 2 0 0 1 18 10.1V6a1 1 0 0 0-1-1h-1V3h1a3 3 0 0 1 3 3v3.7a1.5 1.5 0 0 0 1.5 1.5h.5v1.6h-.5a1.5 1.5 0 0 0-1.5 1.5" />
+    </svg>
+);