From e819f57a1b9ebb7638ffe9285dc7b11f6fc5cbfc Mon Sep 17 00:00:00 2001 From: Martin Vladic Date: Sat, 12 Oct 2024 13:53:35 +0200 Subject: [PATCH] #582 --- packages/home/documentation-browser/model.tsx | 6 ++- packages/project-editor/core/object.ts | 8 +++- packages/project-editor/flow/component.tsx | 8 +++- .../flow/components/actions/index.tsx | 45 +++++++++++++++++-- .../flow/components/components-registry.ts | 20 +++++++-- .../flow/editor/ComponentsPalette.tsx | 3 +- 6 files changed, 78 insertions(+), 12 deletions(-) diff --git a/packages/home/documentation-browser/model.tsx b/packages/home/documentation-browser/model.tsx index d2345b56..df405ffc 100644 --- a/packages/home/documentation-browser/model.tsx +++ b/packages/home/documentation-browser/model.tsx @@ -397,8 +397,10 @@ class Model { continue; } - let { label, icon, titleStyle } = - getComponentVisualData(componentClass); + let { label, icon, titleStyle } = getComponentVisualData( + componentClass, + undefined // projectStore is undefined here + ); const componentInfoType = isProperSubclassOf( componentClass.objectClass.classInfo, diff --git a/packages/project-editor/core/object.ts b/packages/project-editor/core/object.ts index b3170497..064e301d 100644 --- a/packages/project-editor/core/object.ts +++ b/packages/project-editor/core/object.ts @@ -382,7 +382,13 @@ export interface ClassInfo { icon?: React.ReactNode; getIcon?: (object: IEezObject) => React.ReactNode; - componentHeaderColor?: string; + componentHeaderColor?: + | (( + object?: IEezObject, + componentClass?: IObjectClassInfo, + projectStore?: ProjectStore + ) => string) + | string; componentHeaderTextColor?: string; beforeLoadHook?: ( diff --git a/packages/project-editor/flow/component.tsx b/packages/project-editor/flow/component.tsx index da4d6cc9..b59f1c96 100644 --- a/packages/project-editor/flow/component.tsx +++ b/packages/project-editor/flow/component.tsx @@ -4007,8 +4007,14 @@ function renderActionComponent( let titleStyle: React.CSSProperties | undefined; if (classInfo.componentHeaderColor) { + let backgroundColor; + if (typeof classInfo.componentHeaderColor == "string") { + backgroundColor = classInfo.componentHeaderColor; + } else { + backgroundColor = classInfo.componentHeaderColor(actionNode); + } titleStyle = { - backgroundColor: classInfo.componentHeaderColor + backgroundColor }; } diff --git a/packages/project-editor/flow/components/actions/index.tsx b/packages/project-editor/flow/components/actions/index.tsx index 43eb8d62..aa66b72b 100644 --- a/packages/project-editor/flow/components/actions/index.tsx +++ b/packages/project-editor/flow/components/actions/index.tsx @@ -21,7 +21,8 @@ import { getParent, MessageType, getId, - IMessage + IMessage, + IObjectClassInfo } from "project-editor/core/object"; import { getAncestorOfType, @@ -30,6 +31,7 @@ import { getListLabel, getProjectStore, Message, + ProjectStore, propertyNotFoundMessage, propertyNotSetMessage, Section @@ -2106,7 +2108,28 @@ export class CallActionActionComponent extends ActionComponent { ), - componentHeaderColor: "#C7E9C0", + componentHeaderColor: ( + 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 "#9CBA93"; + } + } + + return "#C7E9C0"; + }, open: (object: CallActionActionComponent) => { object.open(); }, @@ -4404,8 +4427,15 @@ export class LabelOutActionComponent extends ActionComponent { let titleStyle: React.CSSProperties | undefined; if (classInfo.componentHeaderColor) { + let backgroundColor; + if (typeof classInfo.componentHeaderColor == "string") { + backgroundColor = classInfo.componentHeaderColor; + } else { + backgroundColor = classInfo.componentHeaderColor(this); + } + titleStyle = { - backgroundColor: classInfo.componentHeaderColor + backgroundColor }; } @@ -4542,8 +4572,15 @@ export class LabelInActionComponent extends ActionComponent { let titleStyle: React.CSSProperties | undefined; if (classInfo.componentHeaderColor) { + let backgroundColor; + if (typeof classInfo.componentHeaderColor == "string") { + backgroundColor = classInfo.componentHeaderColor; + } else { + backgroundColor = classInfo.componentHeaderColor(this); + } + titleStyle = { - backgroundColor: classInfo.componentHeaderColor + backgroundColor }; } diff --git a/packages/project-editor/flow/components/components-registry.ts b/packages/project-editor/flow/components/components-registry.ts index 656ee2ce..3143ef32 100644 --- a/packages/project-editor/flow/components/components-registry.ts +++ b/packages/project-editor/flow/components/components-registry.ts @@ -222,7 +222,10 @@ export function getComponentName(componentClassName: string) { return name; } -export function getComponentVisualData(componentClass: IObjectClassInfo) { +export function getComponentVisualData( + componentClass: IObjectClassInfo, + projectStore: ProjectStore | undefined +) { const classInfo = componentClass.objectClass.classInfo; let icon = classInfo.icon as any; let label = componentClass.displayName @@ -232,10 +235,21 @@ export function getComponentVisualData(componentClass: IObjectClassInfo) { let titleStyle: React.CSSProperties | undefined; if (classInfo.componentHeaderColor) { + let backgroundColor; + if (typeof classInfo.componentHeaderColor == "string") { + backgroundColor = classInfo.componentHeaderColor; + } else { + backgroundColor = classInfo.componentHeaderColor( + undefined, + componentClass, + projectStore + ); + } + titleStyle = { - backgroundColor: classInfo.componentHeaderColor, + backgroundColor, color: tinycolor - .mostReadable(classInfo.componentHeaderColor, ["#fff", "0x333"]) + .mostReadable(backgroundColor, ["#fff", "0x333"]) .toHexString() }; } diff --git a/packages/project-editor/flow/editor/ComponentsPalette.tsx b/packages/project-editor/flow/editor/ComponentsPalette.tsx index cfdd0ba9..58e4a55d 100644 --- a/packages/project-editor/flow/editor/ComponentsPalette.tsx +++ b/packages/project-editor/flow/editor/ComponentsPalette.tsx @@ -377,7 +377,8 @@ const PaletteItem = observer( }); const { icon, label, titleStyle } = getComponentVisualData( - this.props.componentClass + this.props.componentClass, + this.context ); return (