Skip to content

Commit 492430b

Browse files
mvladicmvladic
committed
refactoring
1 parent 295c572 commit 492430b

File tree

7 files changed

+99
-115
lines changed

7 files changed

+99
-115
lines changed

‎packages/project-editor/features/style/style.tsx

+78-43
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from "react";
22
import path from "path";
33
import { observable, computed, makeObservable } from "mobx";
4-
import { zipObject, map } from "lodash";
54

65
import { isValid, strToColor16 } from "eez-studio-shared/color";
76

@@ -30,7 +29,8 @@ import {
3029
propertyNotSetMessage,
3130
createObject,
3231
isEezObjectArray,
33-
getAncestorOfType
32+
getAncestorOfType,
33+
getClassInfo
3434
} from "project-editor/store";
3535
import {
3636
isDashboardProject,
@@ -65,42 +65,8 @@ import {
6565
import { checkExpression } from "project-editor/flow/expression";
6666
import type { IFlowContext } from "project-editor/flow/flow-interfaces";
6767

68-
export type BorderRadiusSpec = {
69-
topLeftX: number;
70-
topLeftY: number;
71-
topRightX: number;
72-
topRightY: number;
73-
bottomLeftX: number;
74-
bottomLeftY: number;
75-
bottomRightX: number;
76-
bottomRightY: number;
77-
};
78-
79-
////////////////////////////////////////////////////////////////////////////////
80-
81-
export function isWidgetParentOfStyle(object: IEezObject) {
82-
while (true) {
83-
if (object instanceof ProjectEditor.ComponentClass) {
84-
return true;
85-
}
86-
if (!getParent(object)) {
87-
return false;
88-
}
89-
object = getParent(object);
90-
}
91-
}
92-
9368
////////////////////////////////////////////////////////////////////////////////
9469

95-
function openCssHelpPage(cssAttributeName: string) {
96-
const { shell } = require("electron");
97-
shell.openExternal(
98-
`https://developer.mozilla.org/en-US/docs/Web/CSS/${
99-
cssAttributeName != "css" ? cssAttributeName : ""
100-
}`
101-
);
102-
}
103-
10470
const propertyMenu = (props: PropertyProps): Electron.MenuItem[] => {
10571
let menuItems: Electron.MenuItem[] = [];
10672

@@ -155,6 +121,14 @@ const backgroundColorPropertyMenu = (
155121

156122
////////////////////////////////////////////////////////////////////////////////
157123

124+
const conditionalStyleConditionProperty = makeExpressionProperty(
125+
{
126+
name: "condition",
127+
type: PropertyType.MultilineText
128+
},
129+
"boolean"
130+
);
131+
158132
export class ConditionalStyle extends EezObject {
159133
style: string;
160134
condition: string;
@@ -165,7 +139,8 @@ export class ConditionalStyle extends EezObject {
165139
name: "style",
166140
type: PropertyType.ObjectReference,
167141
referencedObjectCollectionPath: "allStyles"
168-
}
142+
},
143+
conditionalStyleConditionProperty
169144
],
170145
check: (
171146
conditionalStyleItem: ConditionalStyle,
@@ -888,10 +863,11 @@ const properties = [
888863
alwaysBuildProperty
889864
];
890865

891-
const propertiesMap: { [propertyName: string]: PropertyInfo } = zipObject(
892-
map(properties, p => p.name),
893-
map(properties, p => p)
894-
) as any;
866+
const propertiesMap: { [propertyName: string]: PropertyInfo } = {};
867+
for (const property of properties) {
868+
propertiesMap[property.name] = property;
869+
}
870+
console.log(propertiesMap);
895871

896872
////////////////////////////////////////////////////////////////////////////////
897873

@@ -2218,8 +2194,7 @@ export class Style extends EezObject {
22182194
`${getKey(this)}.${
22192195
conditionalStylesProperty.name
22202196
}[${index}].${
2221-
ProjectEditor.conditionalStyleConditionProperty
2222-
.name
2197+
conditionalStyleConditionProperty.name
22232198
}`
22242199
) ?? false;
22252200

@@ -2299,6 +2274,27 @@ registerClass("Style", Style);
22992274

23002275
////////////////////////////////////////////////////////////////////////////////
23012276

2277+
function isWidgetParentOfStyle(object: IEezObject) {
2278+
while (true) {
2279+
if (object instanceof ProjectEditor.ComponentClass) {
2280+
return true;
2281+
}
2282+
if (!getParent(object)) {
2283+
return false;
2284+
}
2285+
object = getParent(object);
2286+
}
2287+
}
2288+
2289+
function openCssHelpPage(cssAttributeName: string) {
2290+
const { shell } = require("electron");
2291+
shell.openExternal(
2292+
`https://developer.mozilla.org/en-US/docs/Web/CSS/${
2293+
cssAttributeName != "css" ? cssAttributeName : ""
2294+
}`
2295+
);
2296+
}
2297+
23022298
function getInheritedValue(
23032299
styleObject: Style,
23042300
propertyName: string,
@@ -2383,6 +2379,45 @@ export function getStyleProperty(
23832379
return inheritedValue?.value;
23842380
}
23852381

2382+
export function getAdditionalStyleFlowProperties(widget: Widget) {
2383+
const additionalProperties: PropertyInfo[] = [];
2384+
2385+
const classInfo = getClassInfo(widget);
2386+
2387+
for (const propertyInfo of classInfo.properties) {
2388+
if (
2389+
propertyInfo.type == PropertyType.Object &&
2390+
propertyInfo.typeClass == Style
2391+
) {
2392+
const style = (widget as any)[propertyInfo.name] as Style;
2393+
2394+
if (style.conditionalStyles) {
2395+
for (
2396+
let index = 0;
2397+
index < style.conditionalStyles.length;
2398+
index++
2399+
) {
2400+
additionalProperties.push(
2401+
Object.assign({}, conditionalStyleConditionProperty, {
2402+
name: `${propertyInfo.name}.${conditionalStylesProperty.name}[${index}].${conditionalStyleConditionProperty.name}`
2403+
})
2404+
);
2405+
}
2406+
}
2407+
2408+
if (style.dynamicCSS) {
2409+
additionalProperties.push(
2410+
Object.assign({}, dynamicCssProperty, {
2411+
name: `${propertyInfo.name}.${dynamicCssProperty.name}`
2412+
})
2413+
);
2414+
}
2415+
}
2416+
}
2417+
2418+
return additionalProperties;
2419+
}
2420+
23862421
////////////////////////////////////////////////////////////////////////////////
23872422

23882423
const feature: ProjectEditorFeature = {

‎packages/project-editor/flow/component.tsx

+2-48
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,7 @@ import type {
7878
Page
7979
} from "project-editor/features/page/page";
8080
import {
81-
conditionalStylesProperty,
82-
dynamicCssProperty,
81+
getAdditionalStyleFlowProperties,
8382
Style
8483
} from "project-editor/features/style/style";
8584
import type {
@@ -3216,52 +3215,7 @@ export class Widget extends Component {
32163215
return !widget.locked && !getTimelineEditorState(widget);
32173216
},
32183217

3219-
getAdditionalFlowProperties: (widget: Widget) => {
3220-
const additionalProperties: PropertyInfo[] = [];
3221-
3222-
const classInfo = getClassInfo(widget);
3223-
3224-
for (const propertyInfo of classInfo.properties) {
3225-
if (
3226-
propertyInfo.type == PropertyType.Object &&
3227-
propertyInfo.typeClass == Style
3228-
) {
3229-
const style = (widget as any)[propertyInfo.name] as Style;
3230-
3231-
if (style.conditionalStyles) {
3232-
for (
3233-
let index = 0;
3234-
index < style.conditionalStyles.length;
3235-
index++
3236-
) {
3237-
additionalProperties.push(
3238-
Object.assign(
3239-
{},
3240-
ProjectEditor.conditionalStyleConditionProperty,
3241-
{
3242-
name: `${propertyInfo.name}.${conditionalStylesProperty.name}[${index}].${ProjectEditor.conditionalStyleConditionProperty.name}`
3243-
}
3244-
)
3245-
);
3246-
}
3247-
}
3248-
3249-
if (style.dynamicCSS) {
3250-
additionalProperties.push(
3251-
Object.assign(
3252-
{},
3253-
ProjectEditor.conditionalStyleConditionProperty,
3254-
{
3255-
name: `${propertyInfo.name}.${dynamicCssProperty.name}`
3256-
}
3257-
)
3258-
);
3259-
}
3260-
}
3261-
}
3262-
3263-
return additionalProperties;
3264-
},
3218+
getAdditionalFlowProperties: getAdditionalStyleFlowProperties,
32653219

32663220
execute: (context: IDashboardComponentContext) => {
32673221
if (context.getOutputType("@widget")) {

‎packages/project-editor/flow/editor/eez-gui-draw.ts

+14-4
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,27 @@ import tinycolor from "tinycolor2";
33
import { getColorRGB, to16bitsColor } from "eez-studio-shared/color";
44

55
import { findBitmap } from "project-editor/project/project";
6-
import type {
7-
BorderRadiusSpec,
8-
Style
9-
} from "project-editor/features/style/style";
6+
import type { Style } from "project-editor/features/style/style";
107
import type { Font } from "project-editor/features/font/font";
118
import { ProjectEditor } from "project-editor/project-editor-interface";
129
import { getPixelByteIndex } from "project-editor/features/font/utils";
1310
import type { IFontExtract } from "project-editor/features/font/font-extract";
1411

1512
////////////////////////////////////////////////////////////////////////////////
1613

14+
type BorderRadiusSpec = {
15+
topLeftX: number;
16+
topLeftY: number;
17+
topRightX: number;
18+
topRightY: number;
19+
bottomLeftX: number;
20+
bottomLeftY: number;
21+
bottomRightX: number;
22+
bottomRightY: number;
23+
};
24+
25+
////////////////////////////////////////////////////////////////////////////////
26+
1727
let fgColor: string;
1828
let bgColor: string;
1929

‎packages/project-editor/flow/editor/flow-document.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import { Component } from "project-editor/flow/component";
2323
import { ProjectEditor } from "project-editor/project-editor-interface";
2424
import type { Page } from "project-editor/features/page/page";
2525
import { canPasteWithDependencies } from "project-editor/store/paste-with-dependencies";
26-
import { PageTabState } from "project-editor/features/page/PageEditor";
26+
import type { PageTabState } from "project-editor/features/page/PageEditor";
2727

2828
export class FlowDocument implements IDocument {
2929
constructor(

‎packages/project-editor/project-editor-create.tsx

+1-15
Original file line numberDiff line numberDiff line change
@@ -119,9 +119,8 @@ import {
119119
EnumMember
120120
} from "project-editor/features/variable/variable";
121121

122-
import { ConditionalStyle, Style } from "project-editor/features/style/style";
122+
import { Style } from "project-editor/features/style/style";
123123

124-
import { PropertyType } from "project-editor/core/object";
125124
import { evalProperty } from "project-editor/flow/helper";
126125
import { migrateLvglVersion } from "./lvgl/migrate";
127126
import { FlowTabState } from "project-editor/flow/flow-tab-state";
@@ -130,14 +129,6 @@ import { UserProperty } from "./flow/user-property";
130129
import { LVGLActionComponent } from "project-editor/lvgl/actions";
131130
import { FlowEditor } from "project-editor/flow/editor/editor";
132131

133-
export const conditionalStyleConditionProperty = makeExpressionProperty(
134-
{
135-
name: "condition",
136-
type: PropertyType.MultilineText
137-
},
138-
"boolean"
139-
);
140-
141132
export async function createProjectEditor(
142133
homeTabs: Tabs | undefined,
143134
ProjectEditorTabClass: typeof ProjectEditorTab
@@ -239,15 +230,10 @@ export async function createProjectEditor(
239230
makeExpressionProperty,
240231
evalProperty,
241232
checkProperty,
242-
conditionalStyleConditionProperty,
243233
FlowTabStateClass: FlowTabState,
244234
BuildFileClass: BuildFile,
245235
FlowEditorClass: FlowEditor
246236
};
247237

248-
ConditionalStyle.classInfo.properties.push(
249-
conditionalStyleConditionProperty
250-
);
251-
252238
return projectEditor;
253239
}

‎packages/project-editor/project-editor-interface.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,6 @@ import type {
9999

100100
import type { Style } from "project-editor/features/style/style";
101101
import type { evalProperty } from "project-editor/flow/helper";
102-
import type { PropertyInfo } from "project-editor/core/object";
103102
import type { migrateLvglVersion } from "project-editor/lvgl/migrate";
104103
import type { FlowTabState } from "project-editor/flow/flow-tab-state";
105104
import type { Color } from "project-editor/features/style/theme";
@@ -188,7 +187,6 @@ export interface IProjectEditor {
188187
makeExpressionProperty: typeof makeExpressionProperty;
189188
evalProperty: typeof evalProperty;
190189
checkProperty: typeof checkProperty;
191-
conditionalStyleConditionProperty: PropertyInfo;
192190
FlowTabStateClass: typeof FlowTabState;
193191
BuildFileClass: typeof BuildFile;
194192
FlowEditorClass: typeof FlowEditor;

‎packages/project-editor/store/editor.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@ import mobx from "mobx";
33
import { observable, computed, action, autorun, runInAction } from "mobx";
44
import * as FlexLayout from "flexlayout-react";
55

6+
import { objectEqual } from "eez-studio-shared/util";
7+
68
import { getParent, IEezObject } from "project-editor/core/object";
79
import { ProjectEditor } from "project-editor/project-editor-interface";
8-
import {
10+
import type {
911
IEditor,
1012
IEditorState
1113
} from "project-editor/project/ui/EditorComponent";
@@ -18,7 +20,6 @@ import {
1820
objectToString
1921
} from "project-editor/store/helper";
2022
import type { ProjectStore } from "project-editor/store";
21-
import { objectEqual } from "eez-studio-shared/util";
2223
import type { LVGLStyle } from "project-editor/lvgl/style";
2324

2425
////////////////////////////////////////////////////////////////////////////////

0 commit comments

Comments
 (0)