From 555828ca29a3c0a44950964acd38b4a2fa9b4406 Mon Sep 17 00:00:00 2001 From: srikant Date: Tue, 3 Sep 2024 12:54:56 +0530 Subject: [PATCH 01/18] #2137 Increase View Size of Modeler Node Panel Signed-off-by: srikant --- .../properties-main/properties-main.jsx | 45 ++++++++++++------- .../properties-main/properties-main.scss | 18 +++++++- 2 files changed, 47 insertions(+), 16 deletions(-) diff --git a/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx b/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx index 3e6289dc7b..fcda72c27a 100644 --- a/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx +++ b/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx @@ -30,7 +30,6 @@ import { Size } from "./../constants/form-constants"; import { validateParameterDefAgainstSchema } from "../schema-validator/properties-schema-validator.js"; import { has, isEqual, omit, pick, cloneDeep } from "lodash"; import Icon from "./../../icons/icon.jsx"; -import { Button } from "@carbon/react"; import { Provider } from "react-redux"; import logger from "../../../utils/logger"; import TitleEditor from "./../components/title-editor"; @@ -95,6 +94,10 @@ class PropertiesMain extends React.Component { this._getResizeButton = this._getResizeButton.bind(this); this._isResizeButtonRequired = this._isResizeButtonRequired.bind(this); this.onBlur = this.onBlur.bind(this); + + this.startResizing = this.startResizing.bind(this); + this.resizeElement = this.resizeElement.bind(this); + this.stopResizing = this.stopResizing.bind(this); } componentDidMount() { @@ -426,6 +429,28 @@ class PropertiesMain extends React.Component { this.propertiesController.setEditorSize(newEditorSize); } + startResizing(e) { + this.resizing = true; + this.startX = e.clientX; + this.startWidth = this.commonProperties.offsetWidth; + + document.addEventListener("mousemove", this.resizeElement); + document.addEventListener("mouseup", this.stopResizing); + } + + resizeElement(e) { + if (this.resizing) { + const newWidth = this.startWidth + (this.startX - e.clientX); + this.commonProperties.style.width = `${newWidth}px`; + } + } + + stopResizing() { + this.resizing = false; + document.removeEventListener("mousemove", this.resizeElement); + document.removeEventListener("mouseup", this.stopResizing); + } + resize() { if (this.propertiesController.getForm().editorSize === Size.SMALL) { if (this.state.editorSize === Size.SMALL) { @@ -464,7 +489,6 @@ class PropertiesMain extends React.Component { let propertiesDialog = []; let propertiesTitle =
; let buttonsContainer =
; - let resizeBtn = null; let hasHeading = false; if (this.props.propertiesConfig.rightFlyout) { @@ -492,18 +516,6 @@ class PropertiesMain extends React.Component { showPropertiesButtons={this.state.showPropertiesButtons} disableSaveOnRequiredErrors={this.props.propertiesConfig.disableSaveOnRequiredErrors} />); - if (this._isResizeButtonRequired()) { - const resizeIcon = this._getResizeButton(); - // Resize button label can be "Expand" or "Contract" - const resizeBtnLabel = (resizeIcon.props && resizeIcon.props.className === "properties-resize-caret-left") - ? PropertyUtils.formatMessage(this.props.intl, MESSAGE_KEYS.PROPERTIESEDIT_RESIZEBUTTON_EXPAND_LABEL) - : PropertyUtils.formatMessage(this.props.intl, MESSAGE_KEYS.PROPERTIESEDIT_RESIZEBUTTON_CONTRACT_LABEL); - resizeBtn = ( - - ); - } } const editorForm = ( + {this._isResizeButtonRequired() &&
}