origam · washibana · Mar 6, 2024 · Feb 29, 2024 · Feb 29, 2024 · Feb 29, 2024
@@ -47,7 +47,7 @@ export interface IFormFieldProps {
   isHidden?: boolean;
   hideCaption?: boolean;
   captionColor?: string;
-  toolTip?: string;
+  tooltip?: string;
   xmlNode?: any;
   value?: any;
   textualValue?: any;
@@ -70,7 +70,7 @@ export interface IFormFieldProps {
 export class FormField extends React.Component<IFormFieldProps> {
 
   @observable
-  toolTip: string | undefined | null;
+  dynamicTooltip: string | undefined | null;
 
   render() {
     const row = getSelectedRow(this.props.property);
@@ -84,23 +84,23 @@ export class FormField extends React.Component<IFormFieldProps> {
         <label
           className={S.caption}
           style={getCaptionStyle(this.props)}
-          title={getToolTip(this.props, this.toolTip)}
+          title={getTooltip(this.props.tooltip, this.dynamicTooltip)}
         >
           {this.props.caption}
         </label>
         }
         <div
           className={S.editor}
           style={getFormFieldStyle(this.props)}
-          title={getToolTip(this.props, this.toolTip)}
+          title={getTooltip(this.props.tooltip, this.dynamicTooltip)}
         >
           <FormViewEditor
             value={this.props.value}
             isRichText={this.props.isRichText}
             textualValue={this.props.textualValue}
             xmlNode={this.props.xmlNode}
             backgroundColor={this.props.backgroundColor}
-            onTextOverflowChanged={toolTip => this.toolTip = toolTip}
+            onTextOverflowChanged={tooltip => this.dynamicTooltip = tooltip}
             dock={this.props.dock}
           />
           {invalidMessage && (
@@ -172,12 +172,12 @@ export function getFormFieldStyle(props: IFormFieldProps) {
   };
 }
 
-export function getToolTip(props: IFormFieldProps, toolTip: string | undefined | null){
-  let finalToolTip = props.toolTip ?? "";
-  if (toolTip) {
-    finalToolTip = toolTip + "\n\n" + finalToolTip;
+export function getTooltip(propertyTooltip: string | undefined, additionalText: string | undefined | null = "" ){
+  let finalTooltip = propertyTooltip ?? "";
+  if (additionalText) {
+    finalTooltip = additionalText + "\n\n" + finalTooltip;
   }
-  return formatTooltipPlaintext(finalToolTip);
+  return formatTooltipPlaintext(finalTooltip);
 }
 
 
@@ -51,7 +51,7 @@ export interface NumberEditorProps
   onMount?(onChange?: (value: any) => void): void;
   onEditorBlur?(event: any): Promise<void>;
   subscribeToFocusManager?: (obj: IFocusable, onBlur: ()=> Promise<void>) => void;
-  onTextOverflowChanged?: (toolTip: string | null | undefined) => void;
+  onTextOverflowChanged?: (tooltip: string | null | undefined) => void;
   id?: string
 }
 

@@ -56,7 +56,7 @@ export class TextEditor extends React.Component<{
   onDoubleClick?(event: any): void;
   onEditorBlur?(event: any): void;
   onMount?(onChange?: (value: any) => void): void;
-  onTextOverflowChanged?: (toolTip: string | null | undefined) => void;
+  onTextOverflowChanged?: (tooltip: string | null | undefined) => void;
   dock?: IDockType;
 }> {
   disposers: any[] = [];

@@ -24,6 +24,7 @@ import { IOrderByDirection } from "model/entities/types/IOrderingConfiguration";
 import { Draggable, DraggableProvided } from "react-beautiful-dnd";
 import { action, observable } from "mobx";
 import cx from "classnames";
+import { formatTooltipPlaintext } from "gui/Components/ToolTip/FormatTooltipText";
 
 const MIN_COLUMN_WIDTH = 30;
 
@@ -38,6 +39,7 @@ export class Header extends React.Component<{
   columnIndex: number;
   orderingDirection: IOrderByDirection;
   orderingOrder: number;
+  tooltip?: string
   additionalHeaderContent?: () => React.ReactNode;
   onColumnWidthChange: (id: string, newWidth: number) => void;
   onColumnWidthChangeFinished: (id: string, newWidth: number) => void;
@@ -103,6 +105,13 @@ export class Header extends React.Component<{
     );
   }
 
+  getTooltip() {
+    const formattedTooltip = formatTooltipPlaintext(this.props.tooltip);
+    return formattedTooltip 
+      ? formattedTooltip 
+      : this.props.label;
+  }
+
   private renderHeader(provided?: DraggableProvided) {
     return <div className={S.root} ref={provided?.innerRef} {...provided?.draggableProps}>
       <div
@@ -113,7 +122,7 @@ export class Header extends React.Component<{
         onClick={(event) => this.onHeaderClick(event)}
         className={cx(S.header, "headerClickable")}
         style={this.makeHeaderStyle()}
-        title={this.props.label}
+        title={this.getTooltip()}
       >
         <div
           className={cx(S.inHeaderRow, "headerClickable")}>

@@ -104,7 +104,7 @@ along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
   flex-direction: row;
 }
 
-.toolTip {
+.tooltip {
   height: 100%;
   position: absolute;
   top: 0;
@@ -113,19 +113,14 @@ along with ORIGAM. If not, see <http://www.gnu.org/licenses/>.
   z-index: 100;
 }
 
-.toolTipContainer{
-  border-radius: 0px;
-  border: 1px;
-}
-
 .tooltipContent{
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: left;
 }
 
-.toolTipLine {
+.tooltipLine {
  white-space: pre-wrap;
   text-align: left;
 }
@@ -37,7 +37,7 @@ import Scroller from "./Scroller";
 import S from "./Table.module.scss";
 import { getTooltip, handleTableClick, handleTableMouseMove } from "./TableRendering/onClick";
 import { renderTable } from "./TableRendering/renderTable";
-import { IClickSubsItem, IMouseOverSubsItem, ITableRow, IToolTipData } from "./TableRendering/types";
+import { IClickSubsItem, IMouseOverSubsItem, ITableRow, ITooltipData } from "./TableRendering/types";
 import { IGridDimensions, ITableProps } from "./types";
 import { DragDropContext, Droppable } from "react-beautiful-dnd";
 import { onColumnOrderChangeFinished } from "model/actions-ui/DataView/TableView/onColumnOrderChangeFinished";
@@ -139,15 +139,15 @@ function createTableRenderer(ctx: any, gridDimensions: IGridDimensions) {
     });
   }
 
-  function getToolTipContent(event: any, boundingRectangle: DOMRect) {
+  function getTooltipContent(event: any, boundingRectangle: DOMRect) {
     return getTooltip(
       event.clientX - boundingRectangle.x + scrollLeftObs.get(),
       event.clientY - boundingRectangle.y + scrollTopObs.get(),
       mouseOverSubscriptions
     );
   }
 
-  return {drawTable, setScroll, handleClick, handleMouseMove, setViewportSize, getToolTipContent};
+  return {drawTable, setScroll, handleClick, handleMouseMove, setViewportSize, getTooltipContent: getTooltipContent};
 }
 
 export const Table: React.FC<ITableProps & {
@@ -342,15 +342,13 @@ export class RawTable extends React.Component<ITableProps & { isVisible: boolean
   }
 
   @observable
-  toolTipData: IToolTipData | undefined = undefined;
+  tooltipData: ITooltipData | undefined = undefined;
 
   @action.bound onMouseOver(event: any, boundingRectangle: DOMRect) {
-    this.toolTipData = undefined;
+    this.tooltipData = undefined;
     setTimeout(() => {
       runInAction(() => {
-        //console.log("mouseOver", boundingRectangle);
-        this.mouseInToolTipEnabledArea = true;
-        //this.toolTipData = this.tableRenderer.getToolTipContent(event, boundingRectangle);
+        this.mouseInTooltipEnabledArea = true;
       });
     });
   }
@@ -361,11 +359,11 @@ export class RawTable extends React.Component<ITableProps & { isVisible: boolean
   }
 
   @observable
-  mouseInToolTipEnabledArea = true;
+  mouseInTooltipEnabledArea = true;
 
-  @action.bound onMouseLeaveToolTipEnabledArea(event: any) {
+  @action.bound onMouseLeaveTooltipEnabledArea(event: any) {
     this.tablePanelView.currentTooltipText = undefined;
-    this.mouseInToolTipEnabledArea = false;
+    this.mouseInTooltipEnabledArea = false;
   }
 
   @action.bound handleScrollerClick(event: any) {
@@ -511,7 +509,7 @@ export class RawTable extends React.Component<ITableProps & { isVisible: boolean
                           scrollOffsetSource={this.props.scrollState}
                           worldBounds={contentRect.bounds!}
                           cellRectangle={editorCellRectangle!}
-                          onMouseEnter={(event) => this.onMouseLeaveToolTipEnabledArea(event)}
+                          onMouseEnter={(event) => this.onMouseLeaveTooltipEnabledArea(event)}
                         >
                           {this.props.renderEditor && this.props.renderEditor()}
                         </PositionedField>
@@ -529,7 +527,7 @@ export class RawTable extends React.Component<ITableProps & { isVisible: boolean
                         onClick={this.handleScrollerClick}
                         onMouseMove={this.handleScrollerMouseMove}
                         onMouseOver={this.onMouseOver}
-                        onMouseLeave={(event) => this.onMouseLeaveToolTipEnabledArea(event)}
+                        onMouseLeave={(event) => this.onMouseLeaveTooltipEnabledArea(event)}
                         onKeyDown={this.props.onKeyDown}
                         onFocus={this.props.onFocus}
                       />

@@ -27,7 +27,6 @@ import { CPR } from "utils/canvas";
 import { shadeHexColor } from "utils/colorUtils";
 import actionsUi from "model/actions-ui-tree";
 import { getDataView } from "model/selectors/DataView/getDataView";
-import { getShowToolTipsForMemoFieldsOnly } from "model/selectors/Workbench/getShowToolTipsForMemoFieldsOnly";
 import {
   currentCellErrorMessage,
   currentColumnLeft,
@@ -69,6 +68,7 @@ import {
   getPaddingRight,
   xCenter,
 } from "gui/Components/ScreenElements/Table/TableRendering/cells/dataCellRenderer";
+import { getWorkbenchLifecycle } from "model/selectors/getWorkbenchLifecycle";
 
 export function dataColumnsWidths() {
   return tableColumnIds().map((id) => columnWidths().get(id) || 100);
@@ -82,11 +82,11 @@ export function dataColumnsDraws() {
     clipCell();
     drawCellValue();
     registerClickHandler(id);
-    registerToolTipGetter(id);
+    registerTooltipGetter(id);
   });
 }
 
-function registerToolTipGetter(columnId: string) {
+function registerTooltipGetter(columnId: string) {
   const ctx2d = context2d();
   const property = currentProperty();
   const cellRenderer = currentDataCellRenderer(ctx2d);
@@ -98,7 +98,7 @@ function registerToolTipGetter(columnId: string) {
   }
 
   if (
-    getShowToolTipsForMemoFieldsOnly(property) &&
+    getShowTooltipsForMemoFieldsOnly(property) &&
     (property.column !== "Text" || !property.multiline)
   ) {
     return;
@@ -352,3 +352,7 @@ function getBackGroundColor() {
     }
   }
 }
+
+function getShowTooltipsForMemoFieldsOnly(ctx: any) {
+  return getWorkbenchLifecycle(ctx).portalSettings?.showTooltipsForMemoFieldsOnly;
+}
@@ -77,7 +77,7 @@ export function getTooltip(
 ) {
   for (let h of mouseOverSubscriptions) {
     if (h.x <= canvasX && h.x + h.w >= canvasX && h.y <= canvasY && h.y + h.h >= canvasY) {
-      return h.toolTipGetter(canvasX, canvasY, canvasX, canvasY);
+      return h.tooltipGetter(canvasX, canvasY, canvasX, canvasY);
     }
   }
   return undefined;

@@ -63,15 +63,15 @@ export interface IGroupTreeNode {
 export type ITableRow = any[] | IGroupRow;
 
 export interface IMouseOverSubsItem {
-  toolTipGetter(worldX: number, worldY: number, canvasX: number, canvasY: number): IToolTipData;
+  tooltipGetter(worldX: number, worldY: number, canvasX: number, canvasY: number): ITooltipData;
 
   x: number;
   y: number;
   w: number;
   h: number;
 }
 
-export interface IToolTipData {
+export interface ITooltipData {
   content: any;
   columnIndex: number;
   rowIndex: number;

@@ -47,7 +47,7 @@ function formatToolTipLines(content: string[]) {
   return (
     <div className={S.tooltipContent}>
       {linesToShow.map((line) => (
-        <div className={S.toolTipLine}>{line}</div>
+        <div className={S.tooltipLine}>{line}</div>
       ))}
     </div>
   );

@@ -26,7 +26,7 @@ import { getSelectedRow } from "model/selectors/DataView/getSelectedRow";
 import { FormRoot } from "./FormRoot";
 import { getSelectedRowId } from "model/selectors/TablePanelView/getSelectedRowId";
 import { getRowStateRowBgColor } from "model/selectors/RowState/getRowStateRowBgColor";
-import { FormField } from "gui/Components/Form/FormField";
+import { FormField, getTooltip } from "gui/Components/Form/FormField";
 import { FormSection } from "gui/Components/Form/FormSection";
 import { FormLabel } from "gui/Components/Form/FormLabel";
 import { RadioButton } from "gui/Components/Form/RadioButton";
@@ -178,18 +178,20 @@ export class FormBuilder extends React.Component<{
                   if (property.column === "CheckBox") {
                     return (
                       <Provider property={property}>
-                        <CheckBox
-                          fieldDimensions={dimensionsFromProperty(property)}
-                          isHidden={isHidden}
-                          checked={value}
-                          readOnly={!row || isReadOnly(property, rowId)}
-                          onKeyDown={(event) => self.onKeyDown(event)}
-                          subscribeToFocusManager={(radioInput) =>
-                            focusManager.subscribe(radioInput, property!.id, property!.tabIndex)
-                          }
-                          onClick={() => self?.props?.dataView?.formFocusManager.stopAutoFocus()}
-                          labelColor={foreGroundColor}
-                        />
+                        <div title={getTooltip(property.tooltip)}>
+                           <CheckBox
+                            fieldDimensions={dimensionsFromProperty(property)}
+                            isHidden={isHidden}
+                            checked={value}
+                            readOnly={!row || isReadOnly(property, rowId)}
+                            onKeyDown={(event) => self.onKeyDown(event)}
+                            subscribeToFocusManager={(radioInput) =>
+                              focusManager.subscribe(radioInput, property!.id, property!.tabIndex)
+                            }
+                            onClick={() => self?.props?.dataView?.formFocusManager.stopAutoFocus()}
+                            labelColor={foreGroundColor}
+                            />
+                        </div>
                       </Provider>
                     );
                   }
@@ -205,7 +207,7 @@ export class FormBuilder extends React.Component<{
                         captionColor={foreGroundColor}
                         dock={property.dock}
                         fieldDimensions={dimensionsFromProperty(property)}
-                        toolTip={property.toolTip}
+                        tooltip={property.tooltip}
                         value={value}
                         isRichText={property.isRichText}
                         textualValue={textualValue}

@@ -98,7 +98,7 @@ export class FormViewEditor extends React.Component<{
   onChange?: (event: any, value: any) => Promise<void>;
   onEditorBlur?: () => Promise<any>;
   backgroundColor?: string;
-  onTextOverflowChanged?: (toolTip: string | null | undefined) => void;
+  onTextOverflowChanged?: (tooltip: string | null | undefined) => void;
   dock?: IDockType;
 }> {
   focusManager: FormFocusManager;

@@ -60,6 +60,8 @@ import { isMobileLayoutActive } from "model/selectors/isMobileLayoutActive";
 import cx from "classnames";
 import { getGridFocusManager } from "model/entities/GridFocusManager";
 import {getScreenFocusManager} from "../../../../model/selectors/FormScreen/getScreenFocusManager";
+import { getTooltip } from "gui/Components/ScreenElements/Table/TableRendering/onClick";
+import { formatTooltipPlaintext } from "gui/Components/ToolTip/FormatTooltipText";
 
 interface ITableViewProps {
   dataView?: IDataView;
@@ -409,6 +411,7 @@ class HeaderRenderer implements IHeaderRendererData {
           isFirst={args.isFirst}
           width={args.columnWidth}
           label={header.label}
+          tooltip={property.tooltip}
           orderingDirection={header.ordering}
           orderingOrder={header.order + 1}
           onColumnWidthChange={this.onColumnWidthChange}