Skip to content

Commit

Permalink
refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@mvladic
mvladic committed Dec 5, 2024
1 parent 295c572 commit 492430b
Show file tree
Hide file tree
Showing 7 changed files with 99 additions and 115 deletions.
121 changes: 78 additions & 43 deletions packages/project-editor/features/style/style.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -30,7 +29,8 @@ import {
propertyNotSetMessage,
createObject,
isEezObjectArray,
getAncestorOfType
getAncestorOfType,
getClassInfo
} from "project-editor/store";
import {
isDashboardProject,
Expand Down Expand Up @@ -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[] = [];

Expand Down Expand Up @@ -155,6 +121,14 @@ const backgroundColorPropertyMenu = (

////////////////////////////////////////////////////////////////////////////////

const conditionalStyleConditionProperty = makeExpressionProperty(
{
name: "condition",
type: PropertyType.MultilineText
},
"boolean"
);

export class ConditionalStyle extends EezObject {
style: string;
condition: string;
Expand All @@ -165,7 +139,8 @@ export class ConditionalStyle extends EezObject {
name: "style",
type: PropertyType.ObjectReference,
referencedObjectCollectionPath: "allStyles"
}
},
conditionalStyleConditionProperty
],
check: (
conditionalStyleItem: ConditionalStyle,
Expand Down Expand Up @@ -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);

////////////////////////////////////////////////////////////////////////////////

Expand Down Expand Up @@ -2218,8 +2194,7 @@ export class Style extends EezObject {
`${getKey(this)}.${
conditionalStylesProperty.name
}[${index}].${
ProjectEditor.conditionalStyleConditionProperty
.name
conditionalStyleConditionProperty.name
}`
) ?? false;

Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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 = {
Expand Down
50 changes: 2 additions & 48 deletions packages/project-editor/flow/component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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")) {
Expand Down
18 changes: 14 additions & 4 deletions packages/project-editor/flow/editor/eez-gui-draw.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,27 @@ 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";
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;

Expand Down
2 changes: 1 addition & 1 deletion packages/project-editor/flow/editor/flow-document.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
16 changes: 1 addition & 15 deletions packages/project-editor/project-editor-create.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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
Expand Down Expand Up @@ -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;
}
2 changes: 0 additions & 2 deletions packages/project-editor/project-editor-interface.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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;
Expand Down
5 changes: 3 additions & 2 deletions packages/project-editor/store/editor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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";

////////////////////////////////////////////////////////////////////////////////
Expand Down

0 comments on commit 492430b

Please sign in to comment.