From 0b7c28dcec77fd7dc415ed76380f4aa63a5ad3b2 Mon Sep 17 00:00:00 2001 From: Martin Vladic Date: Wed, 2 Oct 2024 12:15:12 +0200 Subject: [PATCH] #567 --- .../_stylesheets/project-editor.less | 1 + packages/project-editor/flow/component.tsx | 8 ++ .../flow/components/actions/index.tsx | 97 +++++++++++++------ .../project-editor/flow/editor/render.tsx | 4 + .../project-editor/project-editor-create.tsx | 4 +- .../project-editor-interface.tsx | 4 +- 6 files changed, 87 insertions(+), 31 deletions(-) diff --git a/packages/eez-studio-ui/_stylesheets/project-editor.less b/packages/eez-studio-ui/_stylesheets/project-editor.less index f20a3962..684be3c9 100644 --- a/packages/eez-studio-ui/_stylesheets/project-editor.less +++ b/packages/eez-studio-ui/_stylesheets/project-editor.less @@ -1175,6 +1175,7 @@ .title-enclosure { overflow: hidden; + min-width: 0px; svg { fill-opacity: 30%; diff --git a/packages/project-editor/flow/component.tsx b/packages/project-editor/flow/component.tsx index eeb7f1d0..f3a257b2 100644 --- a/packages/project-editor/flow/component.tsx +++ b/packages/project-editor/flow/component.tsx @@ -4061,6 +4061,14 @@ function renderActionComponent( {executionStateInfo} {getLabel(actionNode)} + {actionNode instanceof + ProjectEditor.CommentActionComponentClass && + actionNode.collapsed && ( + + )} {seqOutputIndex != -1 && ( "", + label: (object: CommentActionComponent) => object.description, properties: [ { @@ -4039,14 +4039,29 @@ export class CommentActionComponent extends ActionComponent { 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 ) => { - 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 ( - { - const projectStore = getProjectStore(this); - projectStore.updateObject(this, { - text: value - }); - })} - > + !this.collapsed && ( + { + const projectStore = getProjectStore(this); + projectStore.updateObject(this, { + text: value + }); + })} + > + ) ); } } diff --git a/packages/project-editor/flow/editor/render.tsx b/packages/project-editor/flow/editor/render.tsx index f9124e29..3893eccd 100644 --- a/packages/project-editor/flow/editor/render.tsx +++ b/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 && diff --git a/packages/project-editor/project-editor-create.tsx b/packages/project-editor/project-editor-create.tsx index 4ce94511..0ed31661 100644 --- a/packages/project-editor/project-editor-create.tsx +++ b/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, diff --git a/packages/project-editor/project-editor-interface.tsx b/packages/project-editor/project-editor-interface.tsx index c2c62b0c..70234251 100644 --- a/packages/project-editor/project-editor-interface.tsx +++ b/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;