Skip to content

Commit dbdb8cd

Browse files
mvladicmvladic
committed
LVGL widget flags and states more compact display in properties
1 parent a5b02fa commit dbdb8cd

File tree

10 files changed

+368
-356
lines changed

10 files changed

+368
-356
lines changed

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

+24
Original file line numberDiff line numberDiff line change
@@ -3599,3 +3599,27 @@
35993599
}
36003600
}
36013601
}
3602+
3603+
.EezStudio_ProjectEditor_GroupCheckboxes {
3604+
display: flex;
3605+
flex-wrap: wrap;
3606+
/*
3607+
margin: 5px 0;
3608+
*/
3609+
padding: 5px;
3610+
/*
3611+
border: 1px solid @borderColor;
3612+
border-radius: 4px;
3613+
*/
3614+
3615+
> .form-check {
3616+
margin-right: 10px;
3617+
min-width: 120px;
3618+
}
3619+
3620+
&.EezStudio_ProjectEditor_GroupCheckboxes_States {
3621+
> .form-check {
3622+
min-width: 120px;
3623+
}
3624+
}
3625+
}

‎packages/project-editor/features/variable/value-type.tsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import {
2727
PropertyInfo,
2828
PropertyProps
2929
} from "project-editor/core/object";
30-
import { Project, ProjectType } from "project-editor/project/project";
30+
import type { Project, ProjectType } from "project-editor/project/project";
3131
import { ProjectContext } from "project-editor/project/context";
3232
import { getPropertyValue } from "project-editor/ui-components/PropertyGrid/utils";
3333
import type {
@@ -318,10 +318,7 @@ class SystemEnum implements IEnum {
318318
projectStore.project.settings.general.projectType
319319
) != -1
320320
) {
321-
if (
322-
projectStore.project.settings.general.projectType ==
323-
ProjectType.LVGL
324-
) {
321+
if (projectStore.projectTypeTraits.isLVGL) {
325322
if (systemEnum.lvglVersion == undefined) {
326323
return true;
327324
}

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

+1
Original file line numberDiff line numberDiff line change
@@ -1802,6 +1802,7 @@ export class Component extends EezObject {
18021802
},
18031803
{
18041804
name: "absolutePosition",
1805+
displayName: "Absolute pos.",
18051806
type: PropertyType.String,
18061807
propertyGridGroup: geometryGroup,
18071808
computed: true,

‎packages/project-editor/lvgl/actions.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -3040,7 +3040,9 @@ export class LVGLActionComponent extends ActionComponent {
30403040
actionJs.endType = "literal";
30413041
actionJs.delayType = "literal";
30423042
actionJs.timeType = "literal";
3043+
actionJs.relative = actionJs.relative ?? false;
30433044
actionJs.relativeType = "literal";
3045+
actionJs.instant = actionJs.instant ?? false;
30443046
actionJs.instantType = "literal";
30453047
if (!actionJs.path) {
30463048
actionJs.path = "LINEAR";

‎packages/project-editor/lvgl/style-catalog.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ import {
4444
LV_LAYOUT_NONE
4545
} from "project-editor/lvgl/lvgl-constants";
4646
import { ProjectEditor } from "project-editor/project-editor-interface";
47-
import { getEnumItems } from "project-editor/ui-components/PropertyGrid/Property";
47+
import { getEnumItems } from "project-editor/ui-components/PropertyGrid/utils";
4848
import type { LVGLPageRuntime } from "./page-runtime";
4949

5050
////////////////////////////////////////////////////////////////////////////////

‎packages/project-editor/lvgl/widget-common.tsx

+1-289
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
1-
import React from "react";
2-
import { observer } from "mobx-react";
3-
41
import {
52
getParent,
63
getProperty,
74
IEezObject,
85
IMessage,
9-
MessageType,
10-
PropertyProps
6+
MessageType
117
} from "project-editor/core/object";
128
import { ProjectEditor } from "project-editor/project-editor-interface";
139
import {
@@ -22,295 +18,11 @@ import {
2218
LVGLTabWidget,
2319
type LVGLWidget
2420
} from "project-editor/lvgl/widgets";
25-
import { ProjectContext } from "project-editor/project/context";
26-
import { humanize } from "eez-studio-shared/string";
27-
import { Checkbox } from "project-editor/ui-components/PropertyGrid/Checkbox";
2821
import {
2922
LVGLPageEditorRuntime,
3023
type LVGLPageRuntime
3124
} from "project-editor/lvgl/page-runtime";
3225
import { evalConstantExpression } from "project-editor/flow/expression";
33-
import {
34-
LVGL_FLAG_CODES,
35-
LVGL_REACTIVE_FLAGS,
36-
LVGL_REACTIVE_STATES,
37-
LVGL_STATE_CODES
38-
} from "project-editor/lvgl/lvgl-constants";
39-
import { getLvglFlagCodes } from "./lvgl-versions";
40-
41-
////////////////////////////////////////////////////////////////////////////////
42-
43-
export const LVGLWidgetFlagsProperty = observer(
44-
class LVGLWidgetFlagsProperty extends React.Component<PropertyProps> {
45-
static contextType = ProjectContext;
46-
declare context: React.ContextType<typeof ProjectContext>;
47-
48-
render() {
49-
const flagNames: (keyof typeof LVGL_FLAG_CODES)[] = [];
50-
51-
this.props.objects.map((widget: LVGLWidget) => {
52-
const flags = Object.keys(
53-
getLvglFlagCodes(widget)
54-
) as (keyof typeof LVGL_FLAG_CODES)[];
55-
for (const flagName of flags) {
56-
if (
57-
flagNames.indexOf(flagName) == -1 &&
58-
LVGL_REACTIVE_FLAGS.indexOf(flagName) == -1
59-
) {
60-
flagNames.push(flagName);
61-
}
62-
}
63-
});
64-
65-
return (
66-
<div>
67-
{flagNames.map(flagName => {
68-
let values = this.props.objects.map(
69-
(widget: LVGLWidget) =>
70-
(widget.widgetFlags || "")
71-
.split("|")
72-
.indexOf(flagName) != -1
73-
);
74-
75-
let numEnabled = 0;
76-
let numDisabled = 0;
77-
values.forEach(value => {
78-
if (value) {
79-
numEnabled++;
80-
} else {
81-
numDisabled++;
82-
}
83-
});
84-
85-
let state =
86-
numEnabled == 0
87-
? false
88-
: numDisabled == 0
89-
? true
90-
: undefined;
91-
92-
return (
93-
<Checkbox
94-
key={flagName}
95-
state={state}
96-
label={humanize(flagName)}
97-
onChange={(value: boolean) => {
98-
this.context.undoManager.setCombineCommands(
99-
true
100-
);
101-
102-
if (value) {
103-
this.props.objects.forEach(
104-
(widget: LVGLWidget) => {
105-
const flags = Object.keys(
106-
getLvglFlagCodes(widget)
107-
) as (keyof typeof LVGL_FLAG_CODES)[];
108-
109-
if (
110-
flags.indexOf(flagName) ==
111-
-1
112-
) {
113-
return;
114-
}
115-
116-
const flagsArr =
117-
widget.widgetFlags.trim() !=
118-
""
119-
? widget.widgetFlags.split(
120-
"|"
121-
)
122-
: [];
123-
if (
124-
flagsArr.indexOf(
125-
flagName
126-
) == -1
127-
) {
128-
flagsArr.push(flagName);
129-
this.context.updateObject(
130-
widget,
131-
{
132-
widgetFlags:
133-
flagsArr.join(
134-
"|"
135-
)
136-
}
137-
);
138-
}
139-
}
140-
);
141-
} else {
142-
this.props.objects.forEach(
143-
(widget: LVGLWidget) => {
144-
const flags = Object.keys(
145-
getLvglFlagCodes(widget)
146-
) as (keyof typeof LVGL_FLAG_CODES)[];
147-
148-
if (
149-
flags.indexOf(flagName) ==
150-
-1
151-
) {
152-
return;
153-
}
154-
155-
const flagsArr = (
156-
widget.widgetFlags || ""
157-
).split("|");
158-
const i =
159-
flagsArr.indexOf(flagName);
160-
if (i != -1) {
161-
flagsArr.splice(i, 1);
162-
this.context.updateObject(
163-
widget,
164-
{
165-
widgetFlags:
166-
flagsArr.join(
167-
"|"
168-
)
169-
}
170-
);
171-
}
172-
}
173-
);
174-
}
175-
176-
this.context.undoManager.setCombineCommands(
177-
false
178-
);
179-
}}
180-
readOnly={this.props.readOnly}
181-
/>
182-
);
183-
})}
184-
</div>
185-
);
186-
}
187-
}
188-
);
189-
190-
////////////////////////////////////////////////////////////////////////////////
191-
192-
export const LVGLWidgetStatesProperty = observer(
193-
class LVGLWidgetStatesProperty extends React.Component<PropertyProps> {
194-
static contextType = ProjectContext;
195-
declare context: React.ContextType<typeof ProjectContext>;
196-
197-
render() {
198-
const stateNames: (keyof typeof LVGL_STATE_CODES)[] = [];
199-
200-
this.props.objects.map((widget: LVGLWidget) => {
201-
for (const stateName of Object.keys(
202-
LVGL_STATE_CODES
203-
) as (keyof typeof LVGL_STATE_CODES)[]) {
204-
if (
205-
stateNames.indexOf(stateName) == -1 &&
206-
LVGL_REACTIVE_STATES.indexOf(stateName) == -1
207-
) {
208-
stateNames.push(stateName);
209-
}
210-
}
211-
});
212-
213-
return (
214-
<div>
215-
{stateNames.map(stateName => {
216-
let values = this.props.objects.map(
217-
(widget: LVGLWidget) =>
218-
(widget.states || "")
219-
.split("|")
220-
.indexOf(stateName) != -1
221-
);
222-
223-
let numEnabled = 0;
224-
let numDisabled = 0;
225-
values.forEach(value => {
226-
if (value) {
227-
numEnabled++;
228-
} else {
229-
numDisabled++;
230-
}
231-
});
232-
233-
let state =
234-
numEnabled == 0
235-
? false
236-
: numDisabled == 0
237-
? true
238-
: undefined;
239-
240-
return (
241-
<Checkbox
242-
key={stateName}
243-
state={state}
244-
label={humanize(stateName)}
245-
onChange={(value: boolean) => {
246-
this.context.undoManager.setCombineCommands(
247-
true
248-
);
249-
250-
if (value) {
251-
this.props.objects.forEach(
252-
(widget: LVGLWidget) => {
253-
const statesArr =
254-
widget.states.trim() != ""
255-
? widget.states.split(
256-
"|"
257-
)
258-
: [];
259-
if (
260-
statesArr.indexOf(
261-
stateName
262-
) == -1
263-
) {
264-
statesArr.push(stateName);
265-
this.context.updateObject(
266-
widget,
267-
{
268-
states: statesArr.join(
269-
"|"
270-
)
271-
}
272-
);
273-
}
274-
}
275-
);
276-
} else {
277-
this.props.objects.forEach(
278-
(widget: LVGLWidget) => {
279-
const statesArr = (
280-
widget.states || ""
281-
).split("|");
282-
const i =
283-
statesArr.indexOf(
284-
stateName
285-
);
286-
if (i != -1) {
287-
statesArr.splice(i, 1);
288-
this.context.updateObject(
289-
widget,
290-
{
291-
states: statesArr.join(
292-
"|"
293-
)
294-
}
295-
);
296-
}
297-
}
298-
);
299-
}
300-
301-
this.context.undoManager.setCombineCommands(
302-
false
303-
);
304-
}}
305-
readOnly={this.props.readOnly}
306-
/>
307-
);
308-
})}
309-
</div>
310-
);
311-
}
312-
}
313-
);
31426

31527
export function getCode<T extends string>(
31628
arr: T[],

0 commit comments

Comments
 (0)