#567

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

@@ -1175,6 +1175,7 @@
 
         .title-enclosure {
             overflow: hidden;
+            min-width: 0px;
 
             svg {
                 fill-opacity: 30%;

packages/project-editor/flow/component.tsx

@@ -4061,6 +4061,14 @@ function renderActionComponent(
                     {executionStateInfo}
                     <span className="title-text">{getLabel(actionNode)}</span>
                 </div>
+                {actionNode instanceof
+                    ProjectEditor.CommentActionComponentClass &&
+                    actionNode.collapsed && (
+                        <Icon
+                            icon="material:arrow_drop_down"
+                            style={{ opacity: 0.5 }}
+                        />
+                    )}
                 {seqOutputIndex != -1 && (
                     <ComponentOutputSpan
                         componentOutput={actionNode.outputs[seqOutputIndex]}

packages/project-editor/flow/components/actions/index.tsx

@@ -4031,22 +4031,37 @@ export class CommentActionComponent extends ActionComponent {
     static classInfo = makeDerivedClassInfo(ActionComponent.classInfo, {
         flowComponentId: COMPONENT_TYPE_COMMENT_ACTION,
 
-        label: () => "",
+        label: (object: CommentActionComponent) => object.description,
 
         properties: [
             {
                 name: "text",
                 type: PropertyType.String,
                 hideInPropertyGrid: true,
                 hideInDocumentation: "all"
+            },
+            {
+                name: "collapsed",
+                type: PropertyType.Boolean,
+                hideInPropertyGrid: true,
+                hideInDocumentation: "none"
+            },
+            {
+                name: "expandedWidth",
+                type: PropertyType.Number,
+                hideInPropertyGrid: true,
+                hideInDocumentation: "none"
             }
         ],
         beforeLoadHook: (
             object: CommentActionComponent,
             jsObject: Partial<CommentActionComponent>
         ) => {
-            if (jsObject.description) {
-                delete jsObject.description;
+            if (jsObject.collapsed == undefined) {
+                jsObject.collapsed = false;
+            }
+            if (jsObject.expandedWidth == undefined) {
+                jsObject.expandedWidth = jsObject.width;
             }
         },
         icon: (
@@ -4063,37 +4078,59 @@ export class CommentActionComponent extends ActionComponent {
             left: 0,
             top: 0,
             width: 435,
-            height: 134
+            height: 134,
+            collapsed: false
+        },
+        open: (object: CommentActionComponent) => {
+            const collapsed = !object.collapsed;
+
+            if (collapsed) {
+                ProjectEditor.getProjectStore(object).updateObject(object, {
+                    collapsed: !object.collapsed,
+                    expandedWidth: object.width
+                });
+            } else {
+                ProjectEditor.getProjectStore(object).updateObject(object, {
+                    collapsed: !object.collapsed,
+                    width: object.expandedWidth
+                });
+            }
         }
     });
 
     text: string;
+    collapsed: boolean;
+    expandedWidth: number;
 
     override makeEditable() {
         super.makeEditable();
 
         makeObservable(this, {
-            text: observable
+            text: observable,
+            collapsed: observable,
+            expandedWidth: observable
         });
     }
 
     get autoSize(): AutoSize {
-        return "height";
+        return this.collapsed ? "both" : "height";
     }
 
     getResizeHandlers(): IResizeHandler[] | undefined | false {
-        return [
-            {
-                x: 0,
-                y: 50,
-                type: "w-resize"
-            },
-            {
-                x: 100,
-                y: 50,
-                type: "e-resize"
-            }
-        ];
+        return this.collapsed
+            ? []
+            : [
+                  {
+                      x: 0,
+                      y: 50,
+                      type: "w-resize"
+                  },
+                  {
+                      x: 100,
+                      y: 50,
+                      type: "e-resize"
+                  }
+              ];
     }
 
     getClassName(flowContext: IFlowContext) {
@@ -4105,17 +4142,19 @@ export class CommentActionComponent extends ActionComponent {
 
     getBody(flowContext: IFlowContext): React.ReactNode {
         return (
-            <TrixEditor
-                component={this}
-                flowContext={flowContext}
-                value={this.text}
-                setValue={action((value: string) => {
-                    const projectStore = getProjectStore(this);
-                    projectStore.updateObject(this, {
-                        text: value
-                    });
-                })}
-            ></TrixEditor>
+            !this.collapsed && (
+                <TrixEditor
+                    component={this}
+                    flowContext={flowContext}
+                    value={this.text}
+                    setValue={action((value: string) => {
+                        const projectStore = getProjectStore(this);
+                        projectStore.updateObject(this, {
+                            text: value
+                        });
+                    })}
+                ></TrixEditor>
+            )
         );
     }
 }

packages/project-editor/flow/editor/render.tsx

@@ -396,6 +396,10 @@ export const ComponentEnclosure = observer(
                             // component description
                             component instanceof
                                 ProjectEditor.ActionComponentClass &&
+                                !(
+                                    component instanceof
+                                    ProjectEditor.CommentActionComponentClass
+                                ) &&
                                 component.description &&
                                 flowContext.projectStore.uiStateStore
                                     .showComponentDescriptions &&

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

@@ -45,7 +45,8 @@ import { getObjectVariableTypeFromType } from "project-editor/features/variable/
 // ACTIONS
 import {
     OutputActionComponent,
-    CallActionActionComponent
+    CallActionActionComponent,
+    CommentActionComponent
 } from "project-editor/flow/components/actions";
 import "project-editor/flow/components/actions/execute-command";
 import "project-editor/flow/components/actions/stream";
@@ -174,6 +175,7 @@ export async function createProjectEditor(
         ActionClass: Action,
         ComponentClass: Component,
         ActionComponentClass: ActionComponent,
+        CommentActionComponentClass: CommentActionComponent,
         WidgetClass: Widget,
         ConnectionLineClass: ConnectionLine,
         UserWidgetWidgetClass: UserWidgetWidget,

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

@@ -64,7 +64,8 @@ import type { browseGlyph } from "project-editor/features/font/FontEditor";
 import type { Variable } from "project-editor/features/variable/variable";
 import type {
     OutputActionComponent,
-    CallActionActionComponent
+    CallActionActionComponent,
+    CommentActionComponent
 } from "project-editor/flow/components/actions";
 import type {
     ContainerWidget,
@@ -123,6 +124,7 @@ export interface IProjectEditor {
     ActionClass: typeof Action;
     ComponentClass: typeof Component;
     ActionComponentClass: typeof ActionComponent;
+    CommentActionComponentClass: typeof CommentActionComponent;
     WidgetClass: typeof Widget;
     ConnectionLineClass: typeof ConnectionLine;
     UserWidgetWidgetClass: typeof UserWidgetWidget;