diff --git a/packages/project-editor/features/style/style.tsx b/packages/project-editor/features/style/style.tsx index aaf7fd5f..4bc6a011 100644 --- a/packages/project-editor/features/style/style.tsx +++ b/packages/project-editor/features/style/style.tsx @@ -1,7 +1,6 @@ import React from "react"; import path from "path"; import { observable, computed, makeObservable } from "mobx"; -import { zipObject, map } from "lodash"; import { isValid, strToColor16 } from "eez-studio-shared/color"; @@ -30,7 +29,8 @@ import { propertyNotSetMessage, createObject, isEezObjectArray, - getAncestorOfType + getAncestorOfType, + getClassInfo } from "project-editor/store"; import { isDashboardProject, @@ -65,42 +65,8 @@ import { import { checkExpression } from "project-editor/flow/expression"; import type { IFlowContext } from "project-editor/flow/flow-interfaces"; -export type BorderRadiusSpec = { - topLeftX: number; - topLeftY: number; - topRightX: number; - topRightY: number; - bottomLeftX: number; - bottomLeftY: number; - bottomRightX: number; - bottomRightY: number; -}; - -//////////////////////////////////////////////////////////////////////////////// - -export function isWidgetParentOfStyle(object: IEezObject) { - while (true) { - if (object instanceof ProjectEditor.ComponentClass) { - return true; - } - if (!getParent(object)) { - return false; - } - object = getParent(object); - } -} - //////////////////////////////////////////////////////////////////////////////// -function openCssHelpPage(cssAttributeName: string) { - const { shell } = require("electron"); - shell.openExternal( - `https://developer.mozilla.org/en-US/docs/Web/CSS/${ - cssAttributeName != "css" ? cssAttributeName : "" - }` - ); -} - const propertyMenu = (props: PropertyProps): Electron.MenuItem[] => { let menuItems: Electron.MenuItem[] = []; @@ -155,6 +121,14 @@ const backgroundColorPropertyMenu = ( //////////////////////////////////////////////////////////////////////////////// +const conditionalStyleConditionProperty = makeExpressionProperty( + { + name: "condition", + type: PropertyType.MultilineText + }, + "boolean" +); + export class ConditionalStyle extends EezObject { style: string; condition: string; @@ -165,7 +139,8 @@ export class ConditionalStyle extends EezObject { name: "style", type: PropertyType.ObjectReference, referencedObjectCollectionPath: "allStyles" - } + }, + conditionalStyleConditionProperty ], check: ( conditionalStyleItem: ConditionalStyle, @@ -888,10 +863,11 @@ const properties = [ alwaysBuildProperty ]; -const propertiesMap: { [propertyName: string]: PropertyInfo } = zipObject( - map(properties, p => p.name), - map(properties, p => p) -) as any; +const propertiesMap: { [propertyName: string]: PropertyInfo } = {}; +for (const property of properties) { + propertiesMap[property.name] = property; +} +console.log(propertiesMap); //////////////////////////////////////////////////////////////////////////////// @@ -2218,8 +2194,7 @@ export class Style extends EezObject { `${getKey(this)}.${ conditionalStylesProperty.name }[${index}].${ - ProjectEditor.conditionalStyleConditionProperty - .name + conditionalStyleConditionProperty.name }` ) ?? false; @@ -2299,6 +2274,27 @@ registerClass("Style", Style); //////////////////////////////////////////////////////////////////////////////// +function isWidgetParentOfStyle(object: IEezObject) { + while (true) { + if (object instanceof ProjectEditor.ComponentClass) { + return true; + } + if (!getParent(object)) { + return false; + } + object = getParent(object); + } +} + +function openCssHelpPage(cssAttributeName: string) { + const { shell } = require("electron"); + shell.openExternal( + `https://developer.mozilla.org/en-US/docs/Web/CSS/${ + cssAttributeName != "css" ? cssAttributeName : "" + }` + ); +} + function getInheritedValue( styleObject: Style, propertyName: string, @@ -2383,6 +2379,45 @@ export function getStyleProperty( return inheritedValue?.value; } +export function getAdditionalStyleFlowProperties(widget: Widget) { + const additionalProperties: PropertyInfo[] = []; + + const classInfo = getClassInfo(widget); + + for (const propertyInfo of classInfo.properties) { + if ( + propertyInfo.type == PropertyType.Object && + propertyInfo.typeClass == Style + ) { + const style = (widget as any)[propertyInfo.name] as Style; + + if (style.conditionalStyles) { + for ( + let index = 0; + index < style.conditionalStyles.length; + index++ + ) { + additionalProperties.push( + Object.assign({}, conditionalStyleConditionProperty, { + name: `${propertyInfo.name}.${conditionalStylesProperty.name}[${index}].${conditionalStyleConditionProperty.name}` + }) + ); + } + } + + if (style.dynamicCSS) { + additionalProperties.push( + Object.assign({}, dynamicCssProperty, { + name: `${propertyInfo.name}.${dynamicCssProperty.name}` + }) + ); + } + } + } + + return additionalProperties; +} + //////////////////////////////////////////////////////////////////////////////// const feature: ProjectEditorFeature = { diff --git a/packages/project-editor/flow/component.tsx b/packages/project-editor/flow/component.tsx index 145bc76c..763f20ca 100644 --- a/packages/project-editor/flow/component.tsx +++ b/packages/project-editor/flow/component.tsx @@ -78,8 +78,7 @@ import type { Page } from "project-editor/features/page/page"; import { - conditionalStylesProperty, - dynamicCssProperty, + getAdditionalStyleFlowProperties, Style } from "project-editor/features/style/style"; import type { @@ -3216,52 +3215,7 @@ export class Widget extends Component { return !widget.locked && !getTimelineEditorState(widget); }, - getAdditionalFlowProperties: (widget: Widget) => { - const additionalProperties: PropertyInfo[] = []; - - const classInfo = getClassInfo(widget); - - for (const propertyInfo of classInfo.properties) { - if ( - propertyInfo.type == PropertyType.Object && - propertyInfo.typeClass == Style - ) { - const style = (widget as any)[propertyInfo.name] as Style; - - if (style.conditionalStyles) { - for ( - let index = 0; - index < style.conditionalStyles.length; - index++ - ) { - additionalProperties.push( - Object.assign( - {}, - ProjectEditor.conditionalStyleConditionProperty, - { - name: `${propertyInfo.name}.${conditionalStylesProperty.name}[${index}].${ProjectEditor.conditionalStyleConditionProperty.name}` - } - ) - ); - } - } - - if (style.dynamicCSS) { - additionalProperties.push( - Object.assign( - {}, - ProjectEditor.conditionalStyleConditionProperty, - { - name: `${propertyInfo.name}.${dynamicCssProperty.name}` - } - ) - ); - } - } - } - - return additionalProperties; - }, + getAdditionalFlowProperties: getAdditionalStyleFlowProperties, execute: (context: IDashboardComponentContext) => { if (context.getOutputType("@widget")) { diff --git a/packages/project-editor/flow/editor/eez-gui-draw.ts b/packages/project-editor/flow/editor/eez-gui-draw.ts index e4788da4..f519af0a 100644 --- a/packages/project-editor/flow/editor/eez-gui-draw.ts +++ b/packages/project-editor/flow/editor/eez-gui-draw.ts @@ -3,10 +3,7 @@ import tinycolor from "tinycolor2"; import { getColorRGB, to16bitsColor } from "eez-studio-shared/color"; import { findBitmap } from "project-editor/project/project"; -import type { - BorderRadiusSpec, - Style -} from "project-editor/features/style/style"; +import type { Style } from "project-editor/features/style/style"; import type { Font } from "project-editor/features/font/font"; import { ProjectEditor } from "project-editor/project-editor-interface"; import { getPixelByteIndex } from "project-editor/features/font/utils"; @@ -14,6 +11,19 @@ import type { IFontExtract } from "project-editor/features/font/font-extract"; //////////////////////////////////////////////////////////////////////////////// +type BorderRadiusSpec = { + topLeftX: number; + topLeftY: number; + topRightX: number; + topRightY: number; + bottomLeftX: number; + bottomLeftY: number; + bottomRightX: number; + bottomRightY: number; +}; + +//////////////////////////////////////////////////////////////////////////////// + let fgColor: string; let bgColor: string; diff --git a/packages/project-editor/flow/editor/flow-document.tsx b/packages/project-editor/flow/editor/flow-document.tsx index d2d65b96..d8c04127 100644 --- a/packages/project-editor/flow/editor/flow-document.tsx +++ b/packages/project-editor/flow/editor/flow-document.tsx @@ -23,7 +23,7 @@ import { Component } from "project-editor/flow/component"; import { ProjectEditor } from "project-editor/project-editor-interface"; import type { Page } from "project-editor/features/page/page"; import { canPasteWithDependencies } from "project-editor/store/paste-with-dependencies"; -import { PageTabState } from "project-editor/features/page/PageEditor"; +import type { PageTabState } from "project-editor/features/page/PageEditor"; export class FlowDocument implements IDocument { constructor( diff --git a/packages/project-editor/project-editor-create.tsx b/packages/project-editor/project-editor-create.tsx index 55358a21..f5582856 100644 --- a/packages/project-editor/project-editor-create.tsx +++ b/packages/project-editor/project-editor-create.tsx @@ -119,9 +119,8 @@ import { EnumMember } from "project-editor/features/variable/variable"; -import { ConditionalStyle, Style } from "project-editor/features/style/style"; +import { Style } from "project-editor/features/style/style"; -import { PropertyType } from "project-editor/core/object"; import { evalProperty } from "project-editor/flow/helper"; import { migrateLvglVersion } from "./lvgl/migrate"; import { FlowTabState } from "project-editor/flow/flow-tab-state"; @@ -130,14 +129,6 @@ import { UserProperty } from "./flow/user-property"; import { LVGLActionComponent } from "project-editor/lvgl/actions"; import { FlowEditor } from "project-editor/flow/editor/editor"; -export const conditionalStyleConditionProperty = makeExpressionProperty( - { - name: "condition", - type: PropertyType.MultilineText - }, - "boolean" -); - export async function createProjectEditor( homeTabs: Tabs | undefined, ProjectEditorTabClass: typeof ProjectEditorTab @@ -239,15 +230,10 @@ export async function createProjectEditor( makeExpressionProperty, evalProperty, checkProperty, - conditionalStyleConditionProperty, FlowTabStateClass: FlowTabState, BuildFileClass: BuildFile, FlowEditorClass: FlowEditor }; - ConditionalStyle.classInfo.properties.push( - conditionalStyleConditionProperty - ); - return projectEditor; } diff --git a/packages/project-editor/project-editor-interface.tsx b/packages/project-editor/project-editor-interface.tsx index 068949ea..60c32cf4 100644 --- a/packages/project-editor/project-editor-interface.tsx +++ b/packages/project-editor/project-editor-interface.tsx @@ -99,7 +99,6 @@ import type { import type { Style } from "project-editor/features/style/style"; import type { evalProperty } from "project-editor/flow/helper"; -import type { PropertyInfo } from "project-editor/core/object"; import type { migrateLvglVersion } from "project-editor/lvgl/migrate"; import type { FlowTabState } from "project-editor/flow/flow-tab-state"; import type { Color } from "project-editor/features/style/theme"; @@ -188,7 +187,6 @@ export interface IProjectEditor { makeExpressionProperty: typeof makeExpressionProperty; evalProperty: typeof evalProperty; checkProperty: typeof checkProperty; - conditionalStyleConditionProperty: PropertyInfo; FlowTabStateClass: typeof FlowTabState; BuildFileClass: typeof BuildFile; FlowEditorClass: typeof FlowEditor; diff --git a/packages/project-editor/store/editor.ts b/packages/project-editor/store/editor.ts index a340dac6..9da8689d 100644 --- a/packages/project-editor/store/editor.ts +++ b/packages/project-editor/store/editor.ts @@ -3,9 +3,11 @@ import mobx from "mobx"; import { observable, computed, action, autorun, runInAction } from "mobx"; import * as FlexLayout from "flexlayout-react"; +import { objectEqual } from "eez-studio-shared/util"; + import { getParent, IEezObject } from "project-editor/core/object"; import { ProjectEditor } from "project-editor/project-editor-interface"; -import { +import type { IEditor, IEditorState } from "project-editor/project/ui/EditorComponent"; @@ -18,7 +20,6 @@ import { objectToString } from "project-editor/store/helper"; import type { ProjectStore } from "project-editor/store"; -import { objectEqual } from "eez-studio-shared/util"; import type { LVGLStyle } from "project-editor/lvgl/style"; ////////////////////////////////////////////////////////////////////////////////