@babylonjs/shared-ui-components 9.0.0 → 9.1.0

package/components/layout/FlexibleDropZone.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexibleDropZone.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleDropZone.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,KAAK,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAgB3C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAkD,CAAC,KAAK,EAAE,EAAE;IACrF,OAAO,CACH,eAAK,SAAS,EAAE,KAAK,CAAC,yBAAyB,aAC1C,KAAK,CAAC,QAAQ,EACf,KAAC,iBAAiB,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,YAAY,EAAE,KAAK,CAAC,YAAY,EAAE,SAAS,EAAE,gBAAgB,CAAC,MAAM,GAAI,EACvH,KAAC,iBAAiB,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,YAAY,EAAE,KAAK,CAAC,YAAY,EAAE,SAAS,EAAE,gBAAgB,CAAC,GAAG,GAAI,IAClH,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\r\nimport * as style from \"./FlexibleDropZone.module.scss\";\r\nimport { FlexibleResizeBar } from \"./FlexibleResizeBar\";\r\nimport { ResizeDirections } from \"./types\";\r\n\r\n/**\r\n * Arguments for the FlexibleDropZone component.\r\n */\r\nexport interface IFlexibleDropZoneProps {\r\n    /**\r\n     * The row number of the component in the layout\r\n     */\r\n    rowNumber: number;\r\n    /**\r\n     * The column number of the component in the layout\r\n     */\r\n    columnNumber: number;\r\n}\r\n\r\n/**\r\n * This component contains the drag and drop zone for the resize bars that\r\n * allow redefining width and height of layout elements\r\n * @param props properties\r\n * @returns drop zone element\r\n */\r\nexport const FlexibleDropZone: FC<PropsWithChildren<IFlexibleDropZoneProps>> = (props) => {\r\n    return (\r\n        <div className={style.flexibleDropZoneContainer}>\r\n            {props.children}\r\n            <FlexibleResizeBar rowNumber={props.rowNumber} columnNumber={props.columnNumber} direction={ResizeDirections.COLUMN} />\r\n            <FlexibleResizeBar rowNumber={props.rowNumber} columnNumber={props.columnNumber} direction={ResizeDirections.ROW} />\r\n        </div>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"FlexibleDropZone.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleDropZone.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,KAAK,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAgB3C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAkD,CAAC,KAAK,EAAE,EAAE;IACrF,OAAO,CACH,eAAK,SAAS,EAAE,KAAK,CAAC,yBAAyB,aAC1C,KAAK,CAAC,QAAQ,EACf,KAAC,iBAAiB,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,YAAY,EAAE,KAAK,CAAC,YAAY,EAAE,SAAS,EAAE,gBAAgB,CAAC,MAAM,GAAI,EACvH,KAAC,iBAAiB,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,YAAY,EAAE,KAAK,CAAC,YAAY,EAAE,SAAS,EAAE,gBAAgB,CAAC,GAAG,GAAI,IAClH,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { type FC, type PropsWithChildren } from \"react\";\r\nimport * as style from \"./FlexibleDropZone.module.scss\";\r\nimport { FlexibleResizeBar } from \"./FlexibleResizeBar\";\r\nimport { ResizeDirections } from \"./types\";\r\n\r\n/**\r\n * Arguments for the FlexibleDropZone component.\r\n */\r\nexport interface IFlexibleDropZoneProps {\r\n    /**\r\n     * The row number of the component in the layout\r\n     */\r\n    rowNumber: number;\r\n    /**\r\n     * The column number of the component in the layout\r\n     */\r\n    columnNumber: number;\r\n}\r\n\r\n/**\r\n * This component contains the drag and drop zone for the resize bars that\r\n * allow redefining width and height of layout elements\r\n * @param props properties\r\n * @returns drop zone element\r\n */\r\nexport const FlexibleDropZone: FC<PropsWithChildren<IFlexibleDropZoneProps>> = (props) => {\r\n    return (\r\n        <div className={style.flexibleDropZoneContainer}>\r\n            {props.children}\r\n            <FlexibleResizeBar rowNumber={props.rowNumber} columnNumber={props.columnNumber} direction={ResizeDirections.COLUMN} />\r\n            <FlexibleResizeBar rowNumber={props.rowNumber} columnNumber={props.columnNumber} direction={ResizeDirections.ROW} />\r\n        </div>\r\n    );\r\n};\r\n"]}

package/components/layout/FlexibleGridContainer.d.ts

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import { type FC } from "react";
 /**
  * Arguments for the GridContainer component.
  */

package/components/layout/FlexibleGridContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexibleGridContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleGridContainer.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,KAAK,KAAK,MAAM,qCAAqC,CAAC;AAO7D;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAoC,GAAG,EAAE;IACvE,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC;IAC3B,MAAM,OAAO,GACT,MAAM,IAAI,MAAM,CAAC,OAAO;QACpB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAW,EAAE,SAAiB,EAAE,EAAE;YAClD,OAAO,CACH,KAAC,cAAc,IAAiB,KAAK,EAAE,MAAM,CAAC,KAAK,YAC9C,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAQ,EAAE,MAAc,EAAE,EAAE;oBAC1C,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,YAC9B,KAAC,gBAAgB,IAAC,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,YACxD,KAAC,qBAAqB,IAAC,IAAI,EAAE,GAAG,CAAC,IAAI,EAAE,WAAW,EAAE,GAAG,CAAC,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,GAAI,GAClG,IAHkB,GAAG,CAAC,EAAE,CAIzC,CACT,CAAC;gBACN,CAAC,CAAC,IATe,MAAM,CAAC,EAAE,CAUb,CACpB,CAAC;QACN,CAAC,CAAC;QACJ,CAAC,CAAC,EAAE,CAAC;IACb,OAAO,cAAK,SAAS,EAAE,KAAK,CAAC,YAAY,YAAG,OAAO,GAAO,CAAC;AAC/D,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport { useContext } from \"react\";\r\nimport { LayoutContext } from \"./LayoutContext\";\r\nimport { FlexibleColumn } from \"./FlexibleColumn\";\r\nimport { FlexibleDropZone } from \"./FlexibleDropZone\";\r\nimport { FlexibleTabsContainer } from \"./FlexibleTabsContainer\";\r\nimport * as style from \"./FlexibleGridContainer.module.scss\";\r\n\r\n/**\r\n * Arguments for the GridContainer component.\r\n */\r\nexport interface IFlexibleGridContainerProps {}\r\n\r\n/**\r\n * Component responsible for mapping the layout to the actual components\r\n * @returns GridContainer element\r\n */\r\nexport const FlexibleGridContainer: FC<IFlexibleGridContainerProps> = () => {\r\n    const context = useContext(LayoutContext);\r\n    const { layout } = context;\r\n    const columns =\r\n        layout && layout.columns\r\n            ? layout.columns.map((column: any, columnIdx: number) => {\r\n                  return (\r\n                      <FlexibleColumn key={column.id} width={column.width}>\r\n                          {column.rows.map((row: any, rowIdx: number) => {\r\n                              return (\r\n                                  <div style={{ height: row.height }} key={row.id}>\r\n                                      <FlexibleDropZone rowNumber={rowIdx} columnNumber={columnIdx}>\r\n                                          <FlexibleTabsContainer tabs={row.tabs} selectedTab={row.selectedTab} rowIndex={rowIdx} columnIndex={columnIdx} />\r\n                                      </FlexibleDropZone>\r\n                                  </div>\r\n                              );\r\n                          })}\r\n                      </FlexibleColumn>\r\n                  );\r\n              })\r\n            : [];\r\n    return <div className={style.flexibleGrid}>{columns}</div>;\r\n};\r\n"]}
+{"version":3,"file":"FlexibleGridContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleGridContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAW,UAAU,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,KAAK,KAAK,MAAM,qCAAqC,CAAC;AAO7D;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAoC,GAAG,EAAE;IACvE,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC;IAC3B,MAAM,OAAO,GACT,MAAM,IAAI,MAAM,CAAC,OAAO;QACpB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAW,EAAE,SAAiB,EAAE,EAAE;YAClD,OAAO,CACH,KAAC,cAAc,IAAiB,KAAK,EAAE,MAAM,CAAC,KAAK,YAC9C,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAQ,EAAE,MAAc,EAAE,EAAE;oBAC1C,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,YAC9B,KAAC,gBAAgB,IAAC,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,YACxD,KAAC,qBAAqB,IAAC,IAAI,EAAE,GAAG,CAAC,IAAI,EAAE,WAAW,EAAE,GAAG,CAAC,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,GAAI,GAClG,IAHkB,GAAG,CAAC,EAAE,CAIzC,CACT,CAAC;gBACN,CAAC,CAAC,IATe,MAAM,CAAC,EAAE,CAUb,CACpB,CAAC;QACN,CAAC,CAAC;QACJ,CAAC,CAAC,EAAE,CAAC;IACb,OAAO,cAAK,SAAS,EAAE,KAAK,CAAC,YAAY,YAAG,OAAO,GAAO,CAAC;AAC/D,CAAC,CAAC","sourcesContent":["import { type FC, useContext } from \"react\";\r\nimport { LayoutContext } from \"./LayoutContext\";\r\nimport { FlexibleColumn } from \"./FlexibleColumn\";\r\nimport { FlexibleDropZone } from \"./FlexibleDropZone\";\r\nimport { FlexibleTabsContainer } from \"./FlexibleTabsContainer\";\r\nimport * as style from \"./FlexibleGridContainer.module.scss\";\r\n\r\n/**\r\n * Arguments for the GridContainer component.\r\n */\r\nexport interface IFlexibleGridContainerProps {}\r\n\r\n/**\r\n * Component responsible for mapping the layout to the actual components\r\n * @returns GridContainer element\r\n */\r\nexport const FlexibleGridContainer: FC<IFlexibleGridContainerProps> = () => {\r\n    const context = useContext(LayoutContext);\r\n    const { layout } = context;\r\n    const columns =\r\n        layout && layout.columns\r\n            ? layout.columns.map((column: any, columnIdx: number) => {\r\n                  return (\r\n                      <FlexibleColumn key={column.id} width={column.width}>\r\n                          {column.rows.map((row: any, rowIdx: number) => {\r\n                              return (\r\n                                  <div style={{ height: row.height }} key={row.id}>\r\n                                      <FlexibleDropZone rowNumber={rowIdx} columnNumber={columnIdx}>\r\n                                          <FlexibleTabsContainer tabs={row.tabs} selectedTab={row.selectedTab} rowIndex={rowIdx} columnIndex={columnIdx} />\r\n                                      </FlexibleDropZone>\r\n                                  </div>\r\n                              );\r\n                          })}\r\n                      </FlexibleColumn>\r\n                  );\r\n              })\r\n            : [];\r\n    return <div className={style.flexibleGrid}>{columns}</div>;\r\n};\r\n"]}

package/components/layout/FlexibleGridLayout.d.ts

@@ -1,5 +1,5 @@
-import type { FC } from "react";
-import type { Layout } from "./types.js";
+import { type FC } from "react";
+import { type Layout } from "./types.js";
 /**
  * Arguments for the Layout component.
  */

package/components/layout/FlexibleGridLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexibleGridLayout.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleGridLayout.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAahE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAiC,CAAC,KAAK,EAAE,EAAE;IACtE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAC7D,MAAM,YAAY,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IAC5D,MAAM,aAAa,GAAG,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YACvB,aAAa,CAAC,OAAO,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC;YAC/D,aAAa,CAAC,OAAO,CAAC,MAAM,GAAG,YAAY,CAAC,OAAO,CAAC,YAAY,CAAC;QACrE,CAAC;IACL,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACH,KAAC,WAAW,IAAC,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,YACpE,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,YAChD,KAAC,mBAAmB,IAAC,aAAa,EAAE,aAAa,CAAC,OAAO,YACrD,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,YAAY,YAC5D,KAAC,qBAAqB,KAAG,GACvB,GACY,GACD,GACf,CACjB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport { useRef, useEffect, useState } from \"react\";\r\nimport type { Nullable } from \"core/types\";\r\nimport { DndProvider } from \"react-dnd\";\r\nimport { TouchBackend } from \"react-dnd-touch-backend\";\r\nimport { FlexibleDragHandler } from \"./FlexibleDragHandler\";\r\nimport { LayoutContext } from \"./LayoutContext\";\r\nimport { FlexibleGridContainer } from \"./FlexibleGridContainer\";\r\nimport type { Layout } from \"./types\";\r\n\r\n/**\r\n * Arguments for the Layout component.\r\n */\r\nexport interface IFlexibleGridLayoutProps {\r\n    /**\r\n     * A definition of the layout which can be changed by the user\r\n     */\r\n    layoutDefinition: Layout;\r\n}\r\n\r\n/**\r\n * This component represents a grid layout that can be resized and rearranged\r\n * by the user.\r\n * @param props properties\r\n * @returns layout element\r\n */\r\nexport const FlexibleGridLayout: FC<IFlexibleGridLayoutProps> = (props) => {\r\n    const [layout, setLayout] = useState(props.layoutDefinition);\r\n    const containerDiv = useRef<Nullable<HTMLDivElement>>(null);\r\n    const containerSize = useRef({ width: 0, height: 0 });\r\n\r\n    useEffect(() => {\r\n        if (containerDiv.current) {\r\n            containerSize.current.width = containerDiv.current.clientWidth;\r\n            containerSize.current.height = containerDiv.current.clientHeight;\r\n        }\r\n    }, [containerDiv]);\r\n\r\n    return (\r\n        <DndProvider backend={TouchBackend} options={{ enableMouseEvents: true }}>\r\n            <LayoutContext.Provider value={{ layout, setLayout }}>\r\n                <FlexibleDragHandler containerSize={containerSize.current}>\r\n                    <div style={{ width: \"100%\", height: \"100%\" }} ref={containerDiv}>\r\n                        <FlexibleGridContainer />\r\n                    </div>\r\n                </FlexibleDragHandler>\r\n            </LayoutContext.Provider>\r\n        </DndProvider>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"FlexibleGridLayout.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleGridLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAW,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAahE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAiC,CAAC,KAAK,EAAE,EAAE;IACtE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAC7D,MAAM,YAAY,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IAC5D,MAAM,aAAa,GAAG,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YACvB,aAAa,CAAC,OAAO,CAAC,KAAK,GAAG,YAAY,CAAC,OAAO,CAAC,WAAW,CAAC;YAC/D,aAAa,CAAC,OAAO,CAAC,MAAM,GAAG,YAAY,CAAC,OAAO,CAAC,YAAY,CAAC;QACrE,CAAC;IACL,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACH,KAAC,WAAW,IAAC,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,YACpE,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,YAChD,KAAC,mBAAmB,IAAC,aAAa,EAAE,aAAa,CAAC,OAAO,YACrD,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,YAAY,YAC5D,KAAC,qBAAqB,KAAG,GACvB,GACY,GACD,GACf,CACjB,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { type FC, useRef, useEffect, useState } from \"react\";\r\nimport { type Nullable } from \"core/types\";\r\nimport { DndProvider } from \"react-dnd\";\r\nimport { TouchBackend } from \"react-dnd-touch-backend\";\r\nimport { FlexibleDragHandler } from \"./FlexibleDragHandler\";\r\nimport { LayoutContext } from \"./LayoutContext\";\r\nimport { FlexibleGridContainer } from \"./FlexibleGridContainer\";\r\nimport { type Layout } from \"./types\";\r\n\r\n/**\r\n * Arguments for the Layout component.\r\n */\r\nexport interface IFlexibleGridLayoutProps {\r\n    /**\r\n     * A definition of the layout which can be changed by the user\r\n     */\r\n    layoutDefinition: Layout;\r\n}\r\n\r\n/**\r\n * This component represents a grid layout that can be resized and rearranged\r\n * by the user.\r\n * @param props properties\r\n * @returns layout element\r\n */\r\nexport const FlexibleGridLayout: FC<IFlexibleGridLayoutProps> = (props) => {\r\n    const [layout, setLayout] = useState(props.layoutDefinition);\r\n    const containerDiv = useRef<Nullable<HTMLDivElement>>(null);\r\n    const containerSize = useRef({ width: 0, height: 0 });\r\n\r\n    useEffect(() => {\r\n        if (containerDiv.current) {\r\n            containerSize.current.width = containerDiv.current.clientWidth;\r\n            containerSize.current.height = containerDiv.current.clientHeight;\r\n        }\r\n    }, [containerDiv]);\r\n\r\n    return (\r\n        <DndProvider backend={TouchBackend} options={{ enableMouseEvents: true }}>\r\n            <LayoutContext.Provider value={{ layout, setLayout }}>\r\n                <FlexibleDragHandler containerSize={containerSize.current}>\r\n                    <div style={{ width: \"100%\", height: \"100%\" }} ref={containerDiv}>\r\n                        <FlexibleGridContainer />\r\n                    </div>\r\n                </FlexibleDragHandler>\r\n            </LayoutContext.Provider>\r\n        </DndProvider>\r\n    );\r\n};\r\n"]}

package/components/layout/FlexibleResizeBar.d.ts

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import { type FC } from "react";
 import { ResizeDirections } from "./types.js";
 /**
  * Arguments for the ResizeBar component.

package/components/layout/FlexibleResizeBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexibleResizeBar.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleResizeBar.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,KAAK,MAAM,iCAAiC,CAAC;AAsCzD;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAiC,CAAC,KAAK,EAAE,EAAE;IACrE,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC7B,IAAI,EAAE,YAAY,CAAC,UAAU;QAC7B,IAAI,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,YAAY,EAAE,KAAK,CAAC,YAAY,EAAE;QAClG,OAAO,CAAC,OAAO;YACX,OAAO;gBACH,UAAU,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE;aACrC,CAAC;QACN,CAAC;KACJ,CAAC,CAAC,CAAC;IACJ,OAAO,CACH,cACI,SAAS,EAAE,UAAU,CAAC,EAAE,cAAc,EAAE,KAAK,CAAC,SAAS,KAAK,gBAAgB,CAAC,GAAG,EAAE,iBAAiB,EAAE,KAAK,CAAC,SAAS,KAAK,gBAAgB,CAAC,MAAM,EAAE,EAAE,KAAK,CAAC,EAC1J,GAAG,EAAE,IAAI,GACX,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport { useDrag } from \"react-dnd\";\r\nimport { ResizeDirections, ElementTypes } from \"./types\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport * as style from \"./FlexibleResizeBar.module.scss\";\r\n\r\n/**\r\n * Arguments for the ResizeBar component.\r\n */\r\nexport interface IFlexibleRowResizerProps {\r\n    /**\r\n     * Row number of the component that is being resized\r\n     */\r\n    rowNumber: number;\r\n    /**\r\n     * Column number of the component being resized\r\n     */\r\n    columnNumber: number;\r\n    /**\r\n     * If the resizing happens in row or column direction\r\n     */\r\n    direction: ResizeDirections;\r\n}\r\n\r\n/**\r\n * The item that will be sent to the drag event\r\n */\r\nexport type ResizeItem = {\r\n    /**\r\n     * If the resizing happens in row or column direction\r\n     */\r\n    direction: ResizeDirections;\r\n    /**\r\n     * The row number of the component that is being resized\r\n     */\r\n    rowNumber: number;\r\n    /**\r\n     * the column number of the component being resized\r\n     */\r\n    columnNumber: number;\r\n};\r\n\r\n/**\r\n * A component that renders a bar that the user can drag to resize.\r\n * @param props properties\r\n * @returns resize bar element\r\n */\r\nexport const FlexibleResizeBar: FC<IFlexibleRowResizerProps> = (props) => {\r\n    const [_, drag] = useDrag(() => ({\r\n        type: ElementTypes.RESIZE_BAR,\r\n        item: { direction: props.direction, rowNumber: props.rowNumber, columnNumber: props.columnNumber },\r\n        collect(monitor) {\r\n            return {\r\n                isDragging: !!monitor.isDragging(),\r\n            };\r\n        },\r\n    }));\r\n    return (\r\n        <div\r\n            className={ClassNames({ rowDragHandler: props.direction === ResizeDirections.ROW, columnDragHandler: props.direction === ResizeDirections.COLUMN }, style)}\r\n            ref={drag}\r\n        />\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"FlexibleResizeBar.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleResizeBar.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,KAAK,MAAM,iCAAiC,CAAC;AAsCzD;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAiC,CAAC,KAAK,EAAE,EAAE;IACrE,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC7B,IAAI,EAAE,YAAY,CAAC,UAAU;QAC7B,IAAI,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,YAAY,EAAE,KAAK,CAAC,YAAY,EAAE;QAClG,OAAO,CAAC,OAAO;YACX,OAAO;gBACH,UAAU,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE;aACrC,CAAC;QACN,CAAC;KACJ,CAAC,CAAC,CAAC;IACJ,OAAO,CACH,cACI,SAAS,EAAE,UAAU,CAAC,EAAE,cAAc,EAAE,KAAK,CAAC,SAAS,KAAK,gBAAgB,CAAC,GAAG,EAAE,iBAAiB,EAAE,KAAK,CAAC,SAAS,KAAK,gBAAgB,CAAC,MAAM,EAAE,EAAE,KAAK,CAAC,EAC1J,GAAG,EAAE,IAAI,GACX,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { type FC } from \"react\";\r\nimport { useDrag } from \"react-dnd\";\r\nimport { ResizeDirections, ElementTypes } from \"./types\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport * as style from \"./FlexibleResizeBar.module.scss\";\r\n\r\n/**\r\n * Arguments for the ResizeBar component.\r\n */\r\nexport interface IFlexibleRowResizerProps {\r\n    /**\r\n     * Row number of the component that is being resized\r\n     */\r\n    rowNumber: number;\r\n    /**\r\n     * Column number of the component being resized\r\n     */\r\n    columnNumber: number;\r\n    /**\r\n     * If the resizing happens in row or column direction\r\n     */\r\n    direction: ResizeDirections;\r\n}\r\n\r\n/**\r\n * The item that will be sent to the drag event\r\n */\r\nexport type ResizeItem = {\r\n    /**\r\n     * If the resizing happens in row or column direction\r\n     */\r\n    direction: ResizeDirections;\r\n    /**\r\n     * The row number of the component that is being resized\r\n     */\r\n    rowNumber: number;\r\n    /**\r\n     * the column number of the component being resized\r\n     */\r\n    columnNumber: number;\r\n};\r\n\r\n/**\r\n * A component that renders a bar that the user can drag to resize.\r\n * @param props properties\r\n * @returns resize bar element\r\n */\r\nexport const FlexibleResizeBar: FC<IFlexibleRowResizerProps> = (props) => {\r\n    const [_, drag] = useDrag(() => ({\r\n        type: ElementTypes.RESIZE_BAR,\r\n        item: { direction: props.direction, rowNumber: props.rowNumber, columnNumber: props.columnNumber },\r\n        collect(monitor) {\r\n            return {\r\n                isDragging: !!monitor.isDragging(),\r\n            };\r\n        },\r\n    }));\r\n    return (\r\n        <div\r\n            className={ClassNames({ rowDragHandler: props.direction === ResizeDirections.ROW, columnDragHandler: props.direction === ResizeDirections.COLUMN }, style)}\r\n            ref={drag}\r\n        />\r\n    );\r\n};\r\n"]}

package/components/layout/FlexibleTab.d.ts

@@ -1,5 +1,5 @@
-import type { FC } from "react";
-import type { TabDrag } from "./types.js";
+import { type FC } from "react";
+import { type TabDrag } from "./types.js";
 /**
  * Arguments for the FlexibleTab component.
  */

package/components/layout/FlexibleTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexibleTab.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleTab.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,OAAO,KAAK,KAAK,MAAM,2BAA2B,CAAC;AA4BnD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAA0B,CAAC,KAAK,EAAE,EAAE;IACxD,MAAM,CAAC,EAAE,UAAU,EAAE,EAAE,IAAI,CAAC,GAAG,OAAO,CAClC,GAAG,EAAE,CAAC,CAAC;QACH,IAAI,EAAE,YAAY,CAAC,GAAG;QACtB,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,OAAO,CAAC,OAAO;YACX,OAAO;gBACH,UAAU,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE;aACrC,CAAC;QACN,CAAC;KACJ,CAAC,EACF,CAAC,KAAK,CAAC,IAAI,CAAC,CACf,CAAC;IAEF,MAAM,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,IAAI,CAAC,GAAG,OAAO,CACvC,GAAG,EAAE,CAAC,CAAC;QACH,MAAM,EAAE,YAAY,CAAC,GAAG;QACxB,IAAI,EAAE,CAAC,IAAS,EAAE,OAAO,EAAE,EAAE;YACzB,KAAK,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACnC,CAAC;QACD,OAAO,CAAC,OAAO;YACX,OAAO;gBACH,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE;gBAC1B,OAAO,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,EAAE;aAC/B,CAAC;QACN,CAAC;KACJ,CAAC,EACF,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAC7B,CAAC;IACF,OAAO,CACH,eAAK,SAAS,EAAE,UAAU,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,CAAC,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,CAAC,aAC5I,cAAK,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,YAC3D,KAAK,CAAC,KAAK,GACV,EACN,cAAK,SAAS,EAAE,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,eAAe,EAAE,OAAO,EAAE,EAAE,KAAK,CAAC,EAAE,GAAG,EAAE,IAAI,GAAQ,EAClG,cAAK,SAAS,EAAE,UAAU,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,oBAAoB,EAAE,MAAM,EAAE,EAAE,KAAK,CAAC,GAAQ,IACjG,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport { useDrag, useDrop } from \"react-dnd\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport { ElementTypes } from \"./types\";\r\nimport type { TabDrag } from \"./types\";\r\nimport * as style from \"./FlexibleTab.module.scss\";\r\n\r\n/**\r\n * Arguments for the FlexibleTab component.\r\n */\r\nexport interface IFlexibleTabProps {\r\n    /**\r\n     * The tab's title.\r\n     */\r\n    title: string;\r\n    /**\r\n     * If the tab is currently selected or not\r\n     */\r\n    selected: boolean;\r\n    /**\r\n     * What happens when the user clicks on the tab\r\n     */\r\n    onClick: () => void;\r\n    /**\r\n     * The object that will be sent to the drag event\r\n     */\r\n    item: TabDrag;\r\n    /**\r\n     * What happens when the user drops another tab after this one\r\n     */\r\n    onTabDroppedAction: (item: TabDrag) => void;\r\n}\r\n\r\n/**\r\n * A component that renders a tab that the user can click\r\n * to activate or drag to reorder. It also listens for\r\n * drop events if the user wants to drop another tab\r\n * after it.\r\n * @param props properties\r\n * @returns FlexibleTab element\r\n */\r\nexport const FlexibleTab: FC<IFlexibleTabProps> = (props) => {\r\n    const [{ isDragging }, drag] = useDrag(\r\n        () => ({\r\n            type: ElementTypes.TAB,\r\n            item: props.item,\r\n            collect(monitor) {\r\n                return {\r\n                    isDragging: !!monitor.isDragging(),\r\n                };\r\n            },\r\n        }),\r\n        [props.item]\r\n    );\r\n\r\n    const [{ isOver, canDrop }, drop] = useDrop(\r\n        () => ({\r\n            accept: ElementTypes.TAB,\r\n            drop: (item: any, monitor) => {\r\n                props.onTabDroppedAction(item);\r\n            },\r\n            collect(monitor) {\r\n                return {\r\n                    isOver: !!monitor.isOver(),\r\n                    canDrop: !!monitor.canDrop(),\r\n                };\r\n            },\r\n        }),\r\n        [props.onTabDroppedAction]\r\n    );\r\n    return (\r\n        <div className={ClassNames({ tab: true, tabSelected: props.selected, tabGrabbed: isDragging, tabNormal: !props.selected && !isDragging }, style)}>\r\n            <div ref={drag} className={style.tabText} onClick={props.onClick}>\r\n                {props.title}\r\n            </div>\r\n            <div className={ClassNames({ dropZone: true, dropZoneCanDrop: canDrop }, style)} ref={drop}></div>\r\n            <div className={ClassNames({ dropBarIndicator: true, dropBarIndicatorOver: isOver }, style)}></div>\r\n        </div>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"FlexibleTab.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleTab.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAgB,MAAM,SAAS,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,2BAA2B,CAAC;AA4BnD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAA0B,CAAC,KAAK,EAAE,EAAE;IACxD,MAAM,CAAC,EAAE,UAAU,EAAE,EAAE,IAAI,CAAC,GAAG,OAAO,CAClC,GAAG,EAAE,CAAC,CAAC;QACH,IAAI,EAAE,YAAY,CAAC,GAAG;QACtB,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,OAAO,CAAC,OAAO;YACX,OAAO;gBACH,UAAU,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE;aACrC,CAAC;QACN,CAAC;KACJ,CAAC,EACF,CAAC,KAAK,CAAC,IAAI,CAAC,CACf,CAAC;IAEF,MAAM,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,IAAI,CAAC,GAAG,OAAO,CACvC,GAAG,EAAE,CAAC,CAAC;QACH,MAAM,EAAE,YAAY,CAAC,GAAG;QACxB,IAAI,EAAE,CAAC,IAAS,EAAE,OAAO,EAAE,EAAE;YACzB,KAAK,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACnC,CAAC;QACD,OAAO,CAAC,OAAO;YACX,OAAO;gBACH,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE;gBAC1B,OAAO,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,EAAE;aAC/B,CAAC;QACN,CAAC;KACJ,CAAC,EACF,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAC7B,CAAC;IACF,OAAO,CACH,eAAK,SAAS,EAAE,UAAU,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,CAAC,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,CAAC,aAC5I,cAAK,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,YAC3D,KAAK,CAAC,KAAK,GACV,EACN,cAAK,SAAS,EAAE,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,eAAe,EAAE,OAAO,EAAE,EAAE,KAAK,CAAC,EAAE,GAAG,EAAE,IAAI,GAAQ,EAClG,cAAK,SAAS,EAAE,UAAU,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,oBAAoB,EAAE,MAAM,EAAE,EAAE,KAAK,CAAC,GAAQ,IACjG,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { type FC } from \"react\";\r\nimport { useDrag, useDrop } from \"react-dnd\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport { ElementTypes, type TabDrag } from \"./types\";\r\nimport * as style from \"./FlexibleTab.module.scss\";\r\n\r\n/**\r\n * Arguments for the FlexibleTab component.\r\n */\r\nexport interface IFlexibleTabProps {\r\n    /**\r\n     * The tab's title.\r\n     */\r\n    title: string;\r\n    /**\r\n     * If the tab is currently selected or not\r\n     */\r\n    selected: boolean;\r\n    /**\r\n     * What happens when the user clicks on the tab\r\n     */\r\n    onClick: () => void;\r\n    /**\r\n     * The object that will be sent to the drag event\r\n     */\r\n    item: TabDrag;\r\n    /**\r\n     * What happens when the user drops another tab after this one\r\n     */\r\n    onTabDroppedAction: (item: TabDrag) => void;\r\n}\r\n\r\n/**\r\n * A component that renders a tab that the user can click\r\n * to activate or drag to reorder. It also listens for\r\n * drop events if the user wants to drop another tab\r\n * after it.\r\n * @param props properties\r\n * @returns FlexibleTab element\r\n */\r\nexport const FlexibleTab: FC<IFlexibleTabProps> = (props) => {\r\n    const [{ isDragging }, drag] = useDrag(\r\n        () => ({\r\n            type: ElementTypes.TAB,\r\n            item: props.item,\r\n            collect(monitor) {\r\n                return {\r\n                    isDragging: !!monitor.isDragging(),\r\n                };\r\n            },\r\n        }),\r\n        [props.item]\r\n    );\r\n\r\n    const [{ isOver, canDrop }, drop] = useDrop(\r\n        () => ({\r\n            accept: ElementTypes.TAB,\r\n            drop: (item: any, monitor) => {\r\n                props.onTabDroppedAction(item);\r\n            },\r\n            collect(monitor) {\r\n                return {\r\n                    isOver: !!monitor.isOver(),\r\n                    canDrop: !!monitor.canDrop(),\r\n                };\r\n            },\r\n        }),\r\n        [props.onTabDroppedAction]\r\n    );\r\n    return (\r\n        <div className={ClassNames({ tab: true, tabSelected: props.selected, tabGrabbed: isDragging, tabNormal: !props.selected && !isDragging }, style)}>\r\n            <div ref={drag} className={style.tabText} onClick={props.onClick}>\r\n                {props.title}\r\n            </div>\r\n            <div className={ClassNames({ dropZone: true, dropZoneCanDrop: canDrop }, style)} ref={drop}></div>\r\n            <div className={ClassNames({ dropBarIndicator: true, dropBarIndicatorOver: isOver }, style)}></div>\r\n        </div>\r\n    );\r\n};\r\n"]}

package/components/layout/FlexibleTabsContainer.d.ts

@@ -1,5 +1,5 @@
-import type { FC } from "react";
-import type { LayoutTab } from "./types.js";
+import { type FC } from "react";
+import { type LayoutTab } from "./types.js";
 /**
  * Arguments for the TabsContainer component.
  */

package/components/layout/FlexibleTabsContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexibleTabsContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleTabsContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FC } from \"react\";\r\nimport { useContext } from \"react\";\r\nimport { FlexibleTab } from \"./FlexibleTab\";\r\nimport { LayoutContext } from \"./LayoutContext\";\r\nimport * as style from \"./FlexibleTabsContainer.module.scss\";\r\n\r\nimport dragIcon from \"../../imgs/dragDotsIcon_white.svg\";\r\nimport { getPosInLayout, removeLayoutRowAndRedistributePercentages } from \"./utils\";\r\nimport { DraggableIcon } from \"./DraggableIcon\";\r\nimport type { LayoutTab, LayoutTabsRow, TabDrag } from \"./types\";\r\nimport { ElementTypes } from \"./types\";\r\n\r\n/**\r\n * Arguments for the TabsContainer component.\r\n */\r\nexport interface IFlexibleTabsContainerProps {\r\n    /**\r\n     * The tabs to display\r\n     */\r\n    tabs: LayoutTab[];\r\n    /**\r\n     * Row index of component in layout\r\n     */\r\n    rowIndex: number;\r\n    /**\r\n     * Column index of component in layout\r\n     */\r\n    columnIndex: number;\r\n    /**\r\n     * Which tab is selected in the layout\r\n     */\r\n    selectedTab?: string;\r\n}\r\n\r\n/**\r\n * This component contains a set of tabs of which only one is visible at a time.\r\n * The tabs can also be dragged from and to different containers.\r\n * @param props properties\r\n * @returns tabs container element\r\n */\r\nexport const FlexibleTabsContainer: FC<IFlexibleTabsContainerProps> = (props) => {\r\n    const { layout, setLayout } = useContext(LayoutContext);\r\n    const { tabs, selectedTab } = props;\r\n    const selectedTabId = props.selectedTab !== undefined ? props.selectedTab : tabs[0].id;\r\n    const selectedTabArray = tabs.filter((tab) => tab.id === selectedTabId);\r\n    const selectedTabObject = selectedTabArray.length > 0 ? selectedTabArray[0] : null;\r\n\r\n    const selectTab = (tabId: string) => {\r\n        const layoutPos = getPosInLayout(layout, props.columnIndex, props.rowIndex) as LayoutTabsRow;\r\n        layoutPos.selectedTab = tabId;\r\n        setLayout({ ...layout });\r\n    };\r\n\r\n    const addTabAfter = (droppedTabItem: TabDrag, dropZoneTabId: string) => {\r\n        // Get layout element corresponding to dropped tabs\r\n        const layoutDropped = getPosInLayout(layout, droppedTabItem.columnNumber, droppedTabItem.rowNumber) as LayoutTabsRow;\r\n        // Get layout element corresponding to dropzone\r\n        const layoutDropZone = getPosInLayout(layout, props.columnIndex, props.rowIndex) as LayoutTabsRow;\r\n\r\n        for (const { id } of droppedTabItem.tabs) {\r\n            const droppedTabIndex = layoutDropped.tabs.findIndex((tab: any) => tab.id === id);\r\n            const droppedTab = layoutDropped.tabs[droppedTabIndex];\r\n            // Add dropped tab after dropZoneTabId\r\n            const dropZoneIndex = layoutDropZone.tabs.findIndex((tab: any) => tab.id === dropZoneTabId);\r\n            layoutDropZone.tabs.splice(dropZoneIndex + 1, 0, droppedTab);\r\n            // Remove dropped tab from its original position\r\n            layoutDropped.tabs.splice(droppedTabIndex, 1);\r\n        }\r\n\r\n        if (layoutDropped.tabs.length === 0) {\r\n            // Check if the layout that was dropped from is empty now\r\n            removeLayoutRowAndRedistributePercentages(layout, droppedTabItem.columnNumber, droppedTabItem.rowNumber);\r\n        } else if (droppedTabItem.tabs.map((tab: any) => tab.id).includes(layoutDropped.selectedTab)) {\r\n            //Check if the layout that was dropped from's active tab is still in the layout\r\n            layoutDropped.selectedTab = layoutDropped.tabs[0].id;\r\n        }\r\n\r\n        // Update layout\r\n        setLayout({ ...layout });\r\n    };\r\n\r\n    return (\r\n        <div className={style.rootContainer}>\r\n            <div draggable={false} className={style.tabsLineContainer}>\r\n                <div className={style.tabsContainer}>\r\n                    {tabs.map((tab) => {\r\n                        return (\r\n                            <FlexibleTab\r\n                                key={tab.id}\r\n                                title={tab.title}\r\n                                selected={tab.id === selectedTab}\r\n                                onClick={() => selectTab(tab.id)}\r\n                                item={{ rowNumber: props.rowIndex, columnNumber: props.columnIndex, tabs: [{ id: tab.id }] }}\r\n                                onTabDroppedAction={(item) => addTabAfter(item, tab.id)}\r\n                            />\r\n                        );\r\n                    })}\r\n                </div>\r\n                <DraggableIcon\r\n                    src={dragIcon}\r\n                    item={{ rowNumber: props.rowIndex, columnNumber: props.columnIndex, tabs: tabs.map((t) => ({ id: t.id })) }}\r\n                    type={ElementTypes.TAB_GROUP}\r\n                />\r\n            </div>\r\n            <div className={style.contentContainer}>{selectedTabObject?.component}</div>\r\n        </div>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"FlexibleTabsContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleTabsContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { type FC, useContext } from \"react\";\r\nimport { FlexibleTab } from \"./FlexibleTab\";\r\nimport { LayoutContext } from \"./LayoutContext\";\r\nimport * as style from \"./FlexibleTabsContainer.module.scss\";\r\n\r\nimport dragIcon from \"../../imgs/dragDotsIcon_white.svg\";\r\nimport { getPosInLayout, removeLayoutRowAndRedistributePercentages } from \"./utils\";\r\nimport { DraggableIcon } from \"./DraggableIcon\";\r\nimport { type LayoutTab, type LayoutTabsRow, type TabDrag, ElementTypes } from \"./types\";\r\n\r\n/**\r\n * Arguments for the TabsContainer component.\r\n */\r\nexport interface IFlexibleTabsContainerProps {\r\n    /**\r\n     * The tabs to display\r\n     */\r\n    tabs: LayoutTab[];\r\n    /**\r\n     * Row index of component in layout\r\n     */\r\n    rowIndex: number;\r\n    /**\r\n     * Column index of component in layout\r\n     */\r\n    columnIndex: number;\r\n    /**\r\n     * Which tab is selected in the layout\r\n     */\r\n    selectedTab?: string;\r\n}\r\n\r\n/**\r\n * This component contains a set of tabs of which only one is visible at a time.\r\n * The tabs can also be dragged from and to different containers.\r\n * @param props properties\r\n * @returns tabs container element\r\n */\r\nexport const FlexibleTabsContainer: FC<IFlexibleTabsContainerProps> = (props) => {\r\n    const { layout, setLayout } = useContext(LayoutContext);\r\n    const { tabs, selectedTab } = props;\r\n    const selectedTabId = props.selectedTab !== undefined ? props.selectedTab : tabs[0].id;\r\n    const selectedTabArray = tabs.filter((tab) => tab.id === selectedTabId);\r\n    const selectedTabObject = selectedTabArray.length > 0 ? selectedTabArray[0] : null;\r\n\r\n    const selectTab = (tabId: string) => {\r\n        const layoutPos = getPosInLayout(layout, props.columnIndex, props.rowIndex) as LayoutTabsRow;\r\n        layoutPos.selectedTab = tabId;\r\n        setLayout({ ...layout });\r\n    };\r\n\r\n    const addTabAfter = (droppedTabItem: TabDrag, dropZoneTabId: string) => {\r\n        // Get layout element corresponding to dropped tabs\r\n        const layoutDropped = getPosInLayout(layout, droppedTabItem.columnNumber, droppedTabItem.rowNumber) as LayoutTabsRow;\r\n        // Get layout element corresponding to dropzone\r\n        const layoutDropZone = getPosInLayout(layout, props.columnIndex, props.rowIndex) as LayoutTabsRow;\r\n\r\n        for (const { id } of droppedTabItem.tabs) {\r\n            const droppedTabIndex = layoutDropped.tabs.findIndex((tab: any) => tab.id === id);\r\n            const droppedTab = layoutDropped.tabs[droppedTabIndex];\r\n            // Add dropped tab after dropZoneTabId\r\n            const dropZoneIndex = layoutDropZone.tabs.findIndex((tab: any) => tab.id === dropZoneTabId);\r\n            layoutDropZone.tabs.splice(dropZoneIndex + 1, 0, droppedTab);\r\n            // Remove dropped tab from its original position\r\n            layoutDropped.tabs.splice(droppedTabIndex, 1);\r\n        }\r\n\r\n        if (layoutDropped.tabs.length === 0) {\r\n            // Check if the layout that was dropped from is empty now\r\n            removeLayoutRowAndRedistributePercentages(layout, droppedTabItem.columnNumber, droppedTabItem.rowNumber);\r\n        } else if (droppedTabItem.tabs.map((tab: any) => tab.id).includes(layoutDropped.selectedTab)) {\r\n            //Check if the layout that was dropped from's active tab is still in the layout\r\n            layoutDropped.selectedTab = layoutDropped.tabs[0].id;\r\n        }\r\n\r\n        // Update layout\r\n        setLayout({ ...layout });\r\n    };\r\n\r\n    return (\r\n        <div className={style.rootContainer}>\r\n            <div draggable={false} className={style.tabsLineContainer}>\r\n                <div className={style.tabsContainer}>\r\n                    {tabs.map((tab) => {\r\n                        return (\r\n                            <FlexibleTab\r\n                                key={tab.id}\r\n                                title={tab.title}\r\n                                selected={tab.id === selectedTab}\r\n                                onClick={() => selectTab(tab.id)}\r\n                                item={{ rowNumber: props.rowIndex, columnNumber: props.columnIndex, tabs: [{ id: tab.id }] }}\r\n                                onTabDroppedAction={(item) => addTabAfter(item, tab.id)}\r\n                            />\r\n                        );\r\n                    })}\r\n                </div>\r\n                <DraggableIcon\r\n                    src={dragIcon}\r\n                    item={{ rowNumber: props.rowIndex, columnNumber: props.columnIndex, tabs: tabs.map((t) => ({ id: t.id })) }}\r\n                    type={ElementTypes.TAB_GROUP}\r\n                />\r\n            </div>\r\n            <div className={style.contentContainer}>{selectedTabObject?.component}</div>\r\n        </div>\r\n    );\r\n};\r\n"]}

package/components/layout/LayoutContext.d.ts

@@ -1,4 +1,4 @@
-import type { Layout } from "./types.js";
+import { type Layout } from "./types.js";
 export declare const LayoutContext: import("react").Context<{
     /**
      * The layout object

package/components/layout/LayoutContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutContext.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/LayoutContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGtC,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CASvC,EAAE,MAAM,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { createContext } from \"react\";\r\nimport type { Layout } from \"./types\";\r\n\r\nexport const LayoutContext = createContext<{\r\n    /**\r\n     * The layout object\r\n     */\r\n    layout: Layout;\r\n    /**\r\n     * Function to set the layout object in the context\r\n     */\r\n    setLayout: (layout: Layout) => void;\r\n}>({ layout: {}, setLayout: () => {} });\r\n"]}
+{"version":3,"file":"LayoutContext.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/LayoutContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGtC,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CASvC,EAAE,MAAM,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { createContext } from \"react\";\r\nimport { type Layout } from \"./types\";\r\n\r\nexport const LayoutContext = createContext<{\r\n    /**\r\n     * The layout object\r\n     */\r\n    layout: Layout;\r\n    /**\r\n     * Function to set the layout object in the context\r\n     */\r\n    setLayout: (layout: Layout) => void;\r\n}>({ layout: {}, setLayout: () => {} });\r\n"]}

package/components/layout/types.d.ts

@@ -1,4 +1,4 @@
-import type { ReactElement } from "react";
+import { type ReactElement } from "react";
 export type LayoutTab = {
     /**
      * Tab id

package/components/layout/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/types.ts"],"names":[],"mappings":"AAgFA,MAAM,CAAN,IAAY,YAKX;AALD,WAAY,YAAY;IACpB,gCAAgB,CAAA;IAChB,yBAAS,CAAA;IACT,+BAAe,CAAA;IACf,0BAAU,CAAA;AACd,CAAC,EALW,YAAY,KAAZ,YAAY,QAKvB;AAED,MAAM,CAAN,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IACxB,+BAAW,CAAA;IACX,qCAAiB,CAAA;AACrB,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB,QAG3B","sourcesContent":["import type { ReactElement } from \"react\";\r\n\r\n// Define layout typing\r\n\r\nexport type LayoutTab = {\r\n    /**\r\n     * Tab id\r\n     */\r\n    id: string;\r\n    /**\r\n     * React component rendered by tab\r\n     */\r\n    component: ReactElement;\r\n    /**\r\n     * Tab title\r\n     */\r\n    title: string;\r\n};\r\n\r\nexport type LayoutTabsRow = {\r\n    /**\r\n     * row id\r\n     */\r\n    id: string;\r\n    /**\r\n     * row height in its containing column\r\n     */\r\n    height: string;\r\n    /**\r\n     * selected tab in row\r\n     */\r\n    selectedTab: string;\r\n    /**\r\n     * list of tabs contained in row\r\n     */\r\n    tabs: LayoutTab[];\r\n};\r\n\r\nexport type LayoutColumn = {\r\n    /**\r\n     * column id\r\n     */\r\n    id: string;\r\n    /**\r\n     * column width in the grid\r\n     */\r\n    width: string;\r\n    /**\r\n     * column rows\r\n     */\r\n    rows: LayoutTabsRow[];\r\n};\r\n\r\nexport type Layout = {\r\n    /**\r\n     * layout columns\r\n     */\r\n    columns?: LayoutColumn[];\r\n};\r\n\r\nexport type TabDrag = {\r\n    /**\r\n     * row number of the tab being dragged\r\n     */\r\n    rowNumber: number;\r\n    /**\r\n     * column number of the tab being dragged\r\n     */\r\n    columnNumber: number;\r\n    /**\r\n     * the tabs being dragged\r\n     */\r\n    tabs: {\r\n        /**\r\n         * id of tab being dragged\r\n         */\r\n        id: string;\r\n    }[];\r\n};\r\n\r\nexport enum ElementTypes {\r\n    RESIZE_BAR = \"0\",\r\n    TAB = \"1\",\r\n    TAB_GROUP = \"2\",\r\n    NONE = \"2\",\r\n}\r\n\r\nexport enum ResizeDirections {\r\n    ROW = \"row\",\r\n    COLUMN = \"column\",\r\n}\r\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/types.ts"],"names":[],"mappings":"AAgFA,MAAM,CAAN,IAAY,YAKX;AALD,WAAY,YAAY;IACpB,gCAAgB,CAAA;IAChB,yBAAS,CAAA;IACT,+BAAe,CAAA;IACf,0BAAU,CAAA;AACd,CAAC,EALW,YAAY,KAAZ,YAAY,QAKvB;AAED,MAAM,CAAN,IAAY,gBAGX;AAHD,WAAY,gBAAgB;IACxB,+BAAW,CAAA;IACX,qCAAiB,CAAA;AACrB,CAAC,EAHW,gBAAgB,KAAhB,gBAAgB,QAG3B","sourcesContent":["import { type ReactElement } from \"react\";\r\n\r\n// Define layout typing\r\n\r\nexport type LayoutTab = {\r\n    /**\r\n     * Tab id\r\n     */\r\n    id: string;\r\n    /**\r\n     * React component rendered by tab\r\n     */\r\n    component: ReactElement;\r\n    /**\r\n     * Tab title\r\n     */\r\n    title: string;\r\n};\r\n\r\nexport type LayoutTabsRow = {\r\n    /**\r\n     * row id\r\n     */\r\n    id: string;\r\n    /**\r\n     * row height in its containing column\r\n     */\r\n    height: string;\r\n    /**\r\n     * selected tab in row\r\n     */\r\n    selectedTab: string;\r\n    /**\r\n     * list of tabs contained in row\r\n     */\r\n    tabs: LayoutTab[];\r\n};\r\n\r\nexport type LayoutColumn = {\r\n    /**\r\n     * column id\r\n     */\r\n    id: string;\r\n    /**\r\n     * column width in the grid\r\n     */\r\n    width: string;\r\n    /**\r\n     * column rows\r\n     */\r\n    rows: LayoutTabsRow[];\r\n};\r\n\r\nexport type Layout = {\r\n    /**\r\n     * layout columns\r\n     */\r\n    columns?: LayoutColumn[];\r\n};\r\n\r\nexport type TabDrag = {\r\n    /**\r\n     * row number of the tab being dragged\r\n     */\r\n    rowNumber: number;\r\n    /**\r\n     * column number of the tab being dragged\r\n     */\r\n    columnNumber: number;\r\n    /**\r\n     * the tabs being dragged\r\n     */\r\n    tabs: {\r\n        /**\r\n         * id of tab being dragged\r\n         */\r\n        id: string;\r\n    }[];\r\n};\r\n\r\nexport enum ElementTypes {\r\n    RESIZE_BAR = \"0\",\r\n    TAB = \"1\",\r\n    TAB_GROUP = \"2\",\r\n    NONE = \"2\",\r\n}\r\n\r\nexport enum ResizeDirections {\r\n    ROW = \"row\",\r\n    COLUMN = \"column\",\r\n}\r\n"]}

package/components/layout/utils.d.ts

@@ -1,4 +1,4 @@
-import type { Layout, LayoutColumn, LayoutTabsRow } from "./types.js";
+import { type Layout, type LayoutColumn, type LayoutTabsRow } from "./types.js";
 /**
  * Given a column and row number in the layout, return the corresponding column/row
  * @param layout

package/components/layout/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/utils.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,gEAAgE;AAChE,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAc,EAAE,MAAc,EAAE,GAAY,EAAgC,EAAE;IACzG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;QAClB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IACjE,CAAC;IACD,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,CAAC,YAAY,EAAE,CAAC;QAChB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IACjE,CAAC;IACD,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;QACpB,OAAO,YAAY,CAAC;IACxB,CAAC;IACD,OAAO,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClC,CAAC,CAAC;AAEF;;;;;GAKG;AACH,gEAAgE;AAChE,MAAM,CAAC,MAAM,yCAAyC,GAAG,CAAC,MAAc,EAAE,MAAc,EAAE,GAAW,EAAE,EAAE;IACrG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;QAClB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IACjE,CAAC;IACD,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,CAAC,YAAY,EAAE,CAAC;QAChB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IACjE,CAAC;IACD,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACzC,IAAI,CAAC,SAAS,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,wCAAwC,CAAC,CAAC;IAC9D,CAAC;IACD,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC;IACnC,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAC;IAChE,CAAC;IACD,yBAAyB;IACzB,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAEjC,uDAAuD;IACvD,MAAM,SAAS,GAAG,eAAe,CAAC,SAAS,CAAC,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC;IACxE,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAQ,EAAE,EAAE;QACnC,GAAG,CAAC,MAAM,GAAG,2BAA2B,CAAC,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,GAAG,CAAC;IAC1E,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAEF;;;;;GAKG;AACH,gEAAgE;AAChE,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,EAAU,EAAE,EAAU,EAAU,EAAE;IAC1E,iCAAiC;IACjC,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;IACnD,MAAM,GAAG,GAAG,EAAE,CAAC;IAEf,MAAM,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;IACrB,OAAO,EAAE,CAAC;AACd,CAAC,CAAC;AAEF;;;;GAIG;AACH,gEAAgE;AAChE,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,CAAS,EAAU,EAAE;IACjD,OAAO,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;AACjD,CAAC,CAAC","sourcesContent":["import type { Layout, LayoutColumn, LayoutTabsRow } from \"./types\";\r\n\r\n/**\r\n * Given a column and row number in the layout, return the corresponding column/row\r\n * @param layout\r\n * @param column\r\n * @param row\r\n * @returns\r\n */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const getPosInLayout = (layout: Layout, column: number, row?: number): LayoutColumn | LayoutTabsRow => {\r\n    if (!layout.columns) {\r\n        throw new Error(\"Attempted to get position on empty layout\");\r\n    }\r\n    const columnLayout = layout.columns[column];\r\n    if (!columnLayout) {\r\n        throw new Error(\"Attempted to get an invalid layout column\");\r\n    }\r\n    if (row === undefined) {\r\n        return columnLayout;\r\n    }\r\n    return columnLayout.rows[row];\r\n};\r\n\r\n/**\r\n * Remove a row in position row, column from the layout, and redistribute heights of remaining rows\r\n * @param layout\r\n * @param column\r\n * @param row\r\n */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const removeLayoutRowAndRedistributePercentages = (layout: Layout, column: number, row: number) => {\r\n    if (!layout.columns) {\r\n        throw new Error(\"Attempted to get position on empty layout\");\r\n    }\r\n    const columnLayout = layout.columns[column];\r\n    if (!columnLayout) {\r\n        throw new Error(\"Attempted to get an invalid layout column\");\r\n    }\r\n    const rowLayout = columnLayout.rows[row];\r\n    if (!rowLayout) {\r\n        throw new Error(\"Attempted to get an invalid layout row\");\r\n    }\r\n    const rowHeight = rowLayout.height;\r\n    if (rowHeight === undefined) {\r\n        throw new Error(\"Attempted to remove a row with no height\");\r\n    }\r\n    // Remove row from layout\r\n    columnLayout.rows.splice(row, 1);\r\n\r\n    // Redistribute this row's height to the remaining rows\r\n    const percToAdd = parsePercentage(rowHeight) / columnLayout.rows.length;\r\n    columnLayout.rows.forEach((row: any) => {\r\n        row.height = addPercentageStringToNumber(row.height, percToAdd) + \"%\";\r\n    });\r\n};\r\n\r\n/**\r\n * Add a percentage string to a number\r\n * @param p1 the percentage string\r\n * @param p2 the number\r\n * @returns the sum of the percentage string and the number\r\n */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const addPercentageStringToNumber = (p1: string, p2: number): number => {\r\n    // Convert both values to numbers\r\n    const np1 = Number.parseFloat(p1.replace(\"%\", \"\"));\r\n    const np2 = p2;\r\n\r\n    const nr = np1 + np2;\r\n    return nr;\r\n};\r\n\r\n/**\r\n * Parses a percentage string into a number\r\n * @param p the percentage string\r\n * @returns the parsed number\r\n */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const parsePercentage = (p: string): number => {\r\n    return Number.parseFloat(p.replace(\"%\", \"\"));\r\n};\r\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/utils.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,gEAAgE;AAChE,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAc,EAAE,MAAc,EAAE,GAAY,EAAgC,EAAE;IACzG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;QAClB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IACjE,CAAC;IACD,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,CAAC,YAAY,EAAE,CAAC;QAChB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IACjE,CAAC;IACD,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;QACpB,OAAO,YAAY,CAAC;IACxB,CAAC;IACD,OAAO,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClC,CAAC,CAAC;AAEF;;;;;GAKG;AACH,gEAAgE;AAChE,MAAM,CAAC,MAAM,yCAAyC,GAAG,CAAC,MAAc,EAAE,MAAc,EAAE,GAAW,EAAE,EAAE;IACrG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;QAClB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IACjE,CAAC;IACD,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,CAAC,YAAY,EAAE,CAAC;QAChB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IACjE,CAAC;IACD,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACzC,IAAI,CAAC,SAAS,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,wCAAwC,CAAC,CAAC;IAC9D,CAAC;IACD,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC;IACnC,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAC;IAChE,CAAC;IACD,yBAAyB;IACzB,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAEjC,uDAAuD;IACvD,MAAM,SAAS,GAAG,eAAe,CAAC,SAAS,CAAC,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC;IACxE,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAQ,EAAE,EAAE;QACnC,GAAG,CAAC,MAAM,GAAG,2BAA2B,CAAC,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,GAAG,CAAC;IAC1E,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAEF;;;;;GAKG;AACH,gEAAgE;AAChE,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,EAAU,EAAE,EAAU,EAAU,EAAE;IAC1E,iCAAiC;IACjC,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;IACnD,MAAM,GAAG,GAAG,EAAE,CAAC;IAEf,MAAM,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;IACrB,OAAO,EAAE,CAAC;AACd,CAAC,CAAC;AAEF;;;;GAIG;AACH,gEAAgE;AAChE,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,CAAS,EAAU,EAAE;IACjD,OAAO,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;AACjD,CAAC,CAAC","sourcesContent":["import { type Layout, type LayoutColumn, type LayoutTabsRow } from \"./types\";\r\n\r\n/**\r\n * Given a column and row number in the layout, return the corresponding column/row\r\n * @param layout\r\n * @param column\r\n * @param row\r\n * @returns\r\n */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const getPosInLayout = (layout: Layout, column: number, row?: number): LayoutColumn | LayoutTabsRow => {\r\n    if (!layout.columns) {\r\n        throw new Error(\"Attempted to get position on empty layout\");\r\n    }\r\n    const columnLayout = layout.columns[column];\r\n    if (!columnLayout) {\r\n        throw new Error(\"Attempted to get an invalid layout column\");\r\n    }\r\n    if (row === undefined) {\r\n        return columnLayout;\r\n    }\r\n    return columnLayout.rows[row];\r\n};\r\n\r\n/**\r\n * Remove a row in position row, column from the layout, and redistribute heights of remaining rows\r\n * @param layout\r\n * @param column\r\n * @param row\r\n */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const removeLayoutRowAndRedistributePercentages = (layout: Layout, column: number, row: number) => {\r\n    if (!layout.columns) {\r\n        throw new Error(\"Attempted to get position on empty layout\");\r\n    }\r\n    const columnLayout = layout.columns[column];\r\n    if (!columnLayout) {\r\n        throw new Error(\"Attempted to get an invalid layout column\");\r\n    }\r\n    const rowLayout = columnLayout.rows[row];\r\n    if (!rowLayout) {\r\n        throw new Error(\"Attempted to get an invalid layout row\");\r\n    }\r\n    const rowHeight = rowLayout.height;\r\n    if (rowHeight === undefined) {\r\n        throw new Error(\"Attempted to remove a row with no height\");\r\n    }\r\n    // Remove row from layout\r\n    columnLayout.rows.splice(row, 1);\r\n\r\n    // Redistribute this row's height to the remaining rows\r\n    const percToAdd = parsePercentage(rowHeight) / columnLayout.rows.length;\r\n    columnLayout.rows.forEach((row: any) => {\r\n        row.height = addPercentageStringToNumber(row.height, percToAdd) + \"%\";\r\n    });\r\n};\r\n\r\n/**\r\n * Add a percentage string to a number\r\n * @param p1 the percentage string\r\n * @param p2 the number\r\n * @returns the sum of the percentage string and the number\r\n */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const addPercentageStringToNumber = (p1: string, p2: number): number => {\r\n    // Convert both values to numbers\r\n    const np1 = Number.parseFloat(p1.replace(\"%\", \"\"));\r\n    const np2 = p2;\r\n\r\n    const nr = np1 + np2;\r\n    return nr;\r\n};\r\n\r\n/**\r\n * Parses a percentage string into a number\r\n * @param p the percentage string\r\n * @returns the parsed number\r\n */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const parsePercentage = (p: string): number => {\r\n    return Number.parseFloat(p.replace(\"%\", \"\"));\r\n};\r\n"]}

package/components/lines/ColorPickerLineComponent.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import type { Color4, Color3 } from "@babylonjs/core/Maths/math.color.js";
-import type { LockObject } from "../../tabs/propertyGrids/lockObject.js";
+import { type Color4, type Color3 } from "@babylonjs/core/Maths/math.color.js";
+import { type LockObject } from "../../tabs/propertyGrids/lockObject.js";
 export interface IColorPickerLineComponentProps {
     value: Color4 | Color3;
     linearHint?: boolean;

package/components/lines/ColorPickerLineComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/lines/ColorPickerLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Color4, Color3 } from \"core/Maths/math.color\";\r\nimport { ColorPickerComponent } from \"../colorPicker/ColorPicker\";\r\nimport type { LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\nimport * as style from \"./ColorPickerLineComponent.module.scss\";\r\n\r\nexport interface IColorPickerLineComponentProps {\r\n    value: Color4 | Color3;\r\n    linearHint?: boolean;\r\n    onColorChanged: (newOne: string) => void;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    shouldPopRight?: boolean;\r\n    lockObject?: LockObject;\r\n    backgroundColor?: string;\r\n}\r\n\r\ninterface IColorPickerComponentState {\r\n    pickerEnabled: boolean;\r\n    color: Color3 | Color4;\r\n    hex: string;\r\n}\r\n\r\nexport class ColorPickerLineComponent extends React.Component<IColorPickerLineComponentProps, IColorPickerComponentState> {\r\n    private _floatRef: React.RefObject<HTMLDivElement>;\r\n    private _floatHostRef: React.RefObject<HTMLDivElement>;\r\n    private _coverRef: React.RefObject<HTMLDivElement>;\r\n\r\n    constructor(props: IColorPickerLineComponentProps) {\r\n        super(props);\r\n\r\n        this.state = { pickerEnabled: false, color: this.props.value, hex: this.getHexString(props) };\r\n\r\n        this._floatRef = React.createRef();\r\n        this._floatHostRef = React.createRef();\r\n        this._coverRef = React.createRef();\r\n    }\r\n\r\n    syncPositions() {\r\n        const div = this._floatRef.current as HTMLDivElement;\r\n        const host = this._floatHostRef.current as HTMLDivElement;\r\n\r\n        if (!div || !host) {\r\n            return;\r\n        }\r\n\r\n        let top = host.getBoundingClientRect().top;\r\n        const height = div.getBoundingClientRect().height;\r\n\r\n        if (top + height + 10 > window.innerHeight) {\r\n            top = window.innerHeight - height - 10;\r\n        }\r\n\r\n        div.style.top = top + \"px\";\r\n        if (!this.props.shouldPopRight) {\r\n            div.style.left = host.getBoundingClientRect().left - div.getBoundingClientRect().width + \"px\";\r\n        } else {\r\n            div.style.left = host.getBoundingClientRect().left + \"px\";\r\n        }\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: IColorPickerLineComponentProps, nextState: IColorPickerComponentState) {\r\n        const diffProps = this.getHexString(nextProps) !== this.getHexString();\r\n\r\n        if (diffProps) {\r\n            nextState.color = nextProps.value;\r\n            nextState.hex = this.getHexString(nextProps);\r\n        }\r\n\r\n        return diffProps || nextState.hex !== this.state.hex || nextState.pickerEnabled !== this.state.pickerEnabled;\r\n    }\r\n\r\n    getHexString(props = this.props) {\r\n        return props.value.toHexString();\r\n    }\r\n\r\n    override componentDidUpdate() {\r\n        this.syncPositions();\r\n    }\r\n\r\n    override componentDidMount() {\r\n        this.syncPositions();\r\n    }\r\n\r\n    override render() {\r\n        return (\r\n            <div className={style.colorPicker}>\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                <div className={style.colorRectBackground} ref={this._floatHostRef} onClick={() => this.setState({ pickerEnabled: true })}>\r\n                    <div className={style.colorRect} style={{ background: this.state.hex }}></div>\r\n                </div>\r\n                {this.state.pickerEnabled && (\r\n                    <>\r\n                        <div\r\n                            ref={this._coverRef}\r\n                            className={style.colorPickerCover}\r\n                            onClick={(evt) => {\r\n                                if (evt.target !== this._coverRef.current) {\r\n                                    return;\r\n                                }\r\n                                this.setState({ pickerEnabled: false });\r\n                            }}\r\n                        >\r\n                            <div className={style.colorPickerFloat} ref={this._floatRef}>\r\n                                <ColorPickerComponent\r\n                                    backgroundColor={this.props.backgroundColor}\r\n                                    lockObject={this.props.lockObject || ({} as any)}\r\n                                    color={this.state.color}\r\n                                    linearhint={this.props.linearHint}\r\n                                    onColorChanged={(color: Color3 | Color4) => {\r\n                                        const hex: string = color.toHexString();\r\n                                        this.setState({ hex, color });\r\n                                        this.props.onColorChanged(hex);\r\n                                    }}\r\n                                />\r\n                            </div>\r\n                        </div>\r\n                    </>\r\n                )}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"ColorPickerLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/lines/ColorPickerLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport { type Color4, type Color3 } from \"core/Maths/math.color\";\r\nimport { ColorPickerComponent } from \"../colorPicker/ColorPicker\";\r\nimport { type LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\nimport * as style from \"./ColorPickerLineComponent.module.scss\";\r\n\r\nexport interface IColorPickerLineComponentProps {\r\n    value: Color4 | Color3;\r\n    linearHint?: boolean;\r\n    onColorChanged: (newOne: string) => void;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    shouldPopRight?: boolean;\r\n    lockObject?: LockObject;\r\n    backgroundColor?: string;\r\n}\r\n\r\ninterface IColorPickerComponentState {\r\n    pickerEnabled: boolean;\r\n    color: Color3 | Color4;\r\n    hex: string;\r\n}\r\n\r\nexport class ColorPickerLineComponent extends React.Component<IColorPickerLineComponentProps, IColorPickerComponentState> {\r\n    private _floatRef: React.RefObject<HTMLDivElement>;\r\n    private _floatHostRef: React.RefObject<HTMLDivElement>;\r\n    private _coverRef: React.RefObject<HTMLDivElement>;\r\n\r\n    constructor(props: IColorPickerLineComponentProps) {\r\n        super(props);\r\n\r\n        this.state = { pickerEnabled: false, color: this.props.value, hex: this.getHexString(props) };\r\n\r\n        this._floatRef = React.createRef();\r\n        this._floatHostRef = React.createRef();\r\n        this._coverRef = React.createRef();\r\n    }\r\n\r\n    syncPositions() {\r\n        const div = this._floatRef.current as HTMLDivElement;\r\n        const host = this._floatHostRef.current as HTMLDivElement;\r\n\r\n        if (!div || !host) {\r\n            return;\r\n        }\r\n\r\n        let top = host.getBoundingClientRect().top;\r\n        const height = div.getBoundingClientRect().height;\r\n\r\n        if (top + height + 10 > window.innerHeight) {\r\n            top = window.innerHeight - height - 10;\r\n        }\r\n\r\n        div.style.top = top + \"px\";\r\n        if (!this.props.shouldPopRight) {\r\n            div.style.left = host.getBoundingClientRect().left - div.getBoundingClientRect().width + \"px\";\r\n        } else {\r\n            div.style.left = host.getBoundingClientRect().left + \"px\";\r\n        }\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: IColorPickerLineComponentProps, nextState: IColorPickerComponentState) {\r\n        const diffProps = this.getHexString(nextProps) !== this.getHexString();\r\n\r\n        if (diffProps) {\r\n            nextState.color = nextProps.value;\r\n            nextState.hex = this.getHexString(nextProps);\r\n        }\r\n\r\n        return diffProps || nextState.hex !== this.state.hex || nextState.pickerEnabled !== this.state.pickerEnabled;\r\n    }\r\n\r\n    getHexString(props = this.props) {\r\n        return props.value.toHexString();\r\n    }\r\n\r\n    override componentDidUpdate() {\r\n        this.syncPositions();\r\n    }\r\n\r\n    override componentDidMount() {\r\n        this.syncPositions();\r\n    }\r\n\r\n    override render() {\r\n        return (\r\n            <div className={style.colorPicker}>\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                <div className={style.colorRectBackground} ref={this._floatHostRef} onClick={() => this.setState({ pickerEnabled: true })}>\r\n                    <div className={style.colorRect} style={{ background: this.state.hex }}></div>\r\n                </div>\r\n                {this.state.pickerEnabled && (\r\n                    <>\r\n                        <div\r\n                            ref={this._coverRef}\r\n                            className={style.colorPickerCover}\r\n                            onClick={(evt) => {\r\n                                if (evt.target !== this._coverRef.current) {\r\n                                    return;\r\n                                }\r\n                                this.setState({ pickerEnabled: false });\r\n                            }}\r\n                        >\r\n                            <div className={style.colorPickerFloat} ref={this._floatRef}>\r\n                                <ColorPickerComponent\r\n                                    backgroundColor={this.props.backgroundColor}\r\n                                    lockObject={this.props.lockObject || ({} as any)}\r\n                                    color={this.state.color}\r\n                                    linearhint={this.props.linearHint}\r\n                                    onColorChanged={(color: Color3 | Color4) => {\r\n                                        const hex: string = color.toHexString();\r\n                                        this.setState({ hex, color });\r\n                                        this.props.onColorChanged(hex);\r\n                                    }}\r\n                                />\r\n                            </div>\r\n                        </div>\r\n                    </>\r\n                )}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/components/lines/NumericInputComponent.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { LockObject } from "../../tabs/propertyGrids/lockObject.js";
+import { type LockObject } from "../../tabs/propertyGrids/lockObject.js";
 interface INumericInputComponentProps {
     label: string;
     labelTooltip?: string;

package/components/lines/NumericInputComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumericInputComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/lines/NumericInputComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\nimport * as style from \"./NumericInputComponent.module.scss\";\r\n\r\ninterface INumericInputComponentProps {\r\n    label: string;\r\n    labelTooltip?: string;\r\n    value: number;\r\n    step?: number;\r\n    onChange: (value: number) => void;\r\n    precision?: number;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    lockObject: LockObject;\r\n}\r\n\r\nexport class NumericInputComponent extends React.Component<INumericInputComponentProps, { value: string }> {\r\n    // eslint-disable-next-line @typescript-eslint/naming-convention\r\n    static defaultProps = {\r\n        step: 1,\r\n    };\r\n\r\n    private _localChange = false;\r\n    constructor(props: INumericInputComponentProps) {\r\n        super(props);\r\n\r\n        this.state = { value: this.props.value.toFixed(this.props.precision !== undefined ? this.props.precision : 3) };\r\n    }\r\n\r\n    override componentWillUnmount() {\r\n        if (this.props.lockObject) {\r\n            this.props.lockObject.lock = false;\r\n        }\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: INumericInputComponentProps, nextState: { value: string }) {\r\n        if (this._localChange) {\r\n            return true;\r\n        }\r\n\r\n        if (nextProps.value.toString() !== nextState.value) {\r\n            nextState.value = nextProps.value.toFixed(this.props.precision !== undefined ? this.props.precision : 3);\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    updateValue(valueString: string) {\r\n        if (/[^0-9.-]/g.test(valueString)) {\r\n            return;\r\n        }\r\n\r\n        const valueAsNumber = parseFloat(valueString);\r\n\r\n        this._localChange = true;\r\n        this.setState({ value: valueString });\r\n\r\n        if (isNaN(valueAsNumber)) {\r\n            return;\r\n        }\r\n\r\n        this.props.onChange(valueAsNumber);\r\n    }\r\n\r\n    onBlur() {\r\n        this._localChange = false;\r\n        const valueAsNumber = parseFloat(this.state.value);\r\n\r\n        if (this.props.lockObject) {\r\n            this.props.lockObject.lock = false;\r\n        }\r\n\r\n        if (isNaN(valueAsNumber)) {\r\n            this.props.onChange(this.props.value);\r\n            return;\r\n        }\r\n\r\n        this.props.onChange(valueAsNumber);\r\n    }\r\n\r\n    incrementValue(amount: number) {\r\n        let currentValue = parseFloat(this.state.value);\r\n        if (isNaN(currentValue)) {\r\n            currentValue = 0;\r\n        }\r\n        this.updateValue((currentValue + amount).toFixed(this.props.precision !== undefined ? this.props.precision : 3));\r\n    }\r\n\r\n    onKeyDown(evt: React.KeyboardEvent<HTMLInputElement>) {\r\n        const step = this.props.step || 1;\r\n        const handleArrowKey = (sign: number) => {\r\n            if (evt.shiftKey) {\r\n                sign *= 10;\r\n                if (evt.ctrlKey || evt.metaKey) {\r\n                    sign *= 10;\r\n                }\r\n            }\r\n\r\n            this.incrementValue(sign * step);\r\n            evt.preventDefault();\r\n        };\r\n\r\n        if (evt.key === \"ArrowUp\") {\r\n            handleArrowKey(1);\r\n        } else if (evt.key === \"ArrowDown\") {\r\n            handleArrowKey(-1);\r\n        }\r\n    }\r\n\r\n    override render() {\r\n        return (\r\n            <div className={style.numeric}>\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                {this.props.label && (\r\n                    <div className={style.numericLabel} title={this.props.labelTooltip ?? this.props.label}>\r\n                        {`${this.props.label}: `}\r\n                    </div>\r\n                )}\r\n                <input\r\n                    type=\"number\"\r\n                    step={this.props.step}\r\n                    className={style.numericInput}\r\n                    value={this.state.value}\r\n                    onChange={(evt) => this.updateValue(evt.target.value)}\r\n                    onKeyDown={(evt) => this.onKeyDown(evt)}\r\n                    onFocus={() => {\r\n                        if (this.props.lockObject) {\r\n                            this.props.lockObject.lock = true;\r\n                        }\r\n                    }}\r\n                    onBlur={() => this.onBlur()}\r\n                />\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"NumericInputComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/lines/NumericInputComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport { type LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\nimport * as style from \"./NumericInputComponent.module.scss\";\r\n\r\ninterface INumericInputComponentProps {\r\n    label: string;\r\n    labelTooltip?: string;\r\n    value: number;\r\n    step?: number;\r\n    onChange: (value: number) => void;\r\n    precision?: number;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    lockObject: LockObject;\r\n}\r\n\r\nexport class NumericInputComponent extends React.Component<INumericInputComponentProps, { value: string }> {\r\n    // eslint-disable-next-line @typescript-eslint/naming-convention\r\n    static defaultProps = {\r\n        step: 1,\r\n    };\r\n\r\n    private _localChange = false;\r\n    constructor(props: INumericInputComponentProps) {\r\n        super(props);\r\n\r\n        this.state = { value: this.props.value.toFixed(this.props.precision !== undefined ? this.props.precision : 3) };\r\n    }\r\n\r\n    override componentWillUnmount() {\r\n        if (this.props.lockObject) {\r\n            this.props.lockObject.lock = false;\r\n        }\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: INumericInputComponentProps, nextState: { value: string }) {\r\n        if (this._localChange) {\r\n            return true;\r\n        }\r\n\r\n        if (nextProps.value.toString() !== nextState.value) {\r\n            nextState.value = nextProps.value.toFixed(this.props.precision !== undefined ? this.props.precision : 3);\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    updateValue(valueString: string) {\r\n        if (/[^0-9.-]/g.test(valueString)) {\r\n            return;\r\n        }\r\n\r\n        const valueAsNumber = parseFloat(valueString);\r\n\r\n        this._localChange = true;\r\n        this.setState({ value: valueString });\r\n\r\n        if (isNaN(valueAsNumber)) {\r\n            return;\r\n        }\r\n\r\n        this.props.onChange(valueAsNumber);\r\n    }\r\n\r\n    onBlur() {\r\n        this._localChange = false;\r\n        const valueAsNumber = parseFloat(this.state.value);\r\n\r\n        if (this.props.lockObject) {\r\n            this.props.lockObject.lock = false;\r\n        }\r\n\r\n        if (isNaN(valueAsNumber)) {\r\n            this.props.onChange(this.props.value);\r\n            return;\r\n        }\r\n\r\n        this.props.onChange(valueAsNumber);\r\n    }\r\n\r\n    incrementValue(amount: number) {\r\n        let currentValue = parseFloat(this.state.value);\r\n        if (isNaN(currentValue)) {\r\n            currentValue = 0;\r\n        }\r\n        this.updateValue((currentValue + amount).toFixed(this.props.precision !== undefined ? this.props.precision : 3));\r\n    }\r\n\r\n    onKeyDown(evt: React.KeyboardEvent<HTMLInputElement>) {\r\n        const step = this.props.step || 1;\r\n        const handleArrowKey = (sign: number) => {\r\n            if (evt.shiftKey) {\r\n                sign *= 10;\r\n                if (evt.ctrlKey || evt.metaKey) {\r\n                    sign *= 10;\r\n                }\r\n            }\r\n\r\n            this.incrementValue(sign * step);\r\n            evt.preventDefault();\r\n        };\r\n\r\n        if (evt.key === \"ArrowUp\") {\r\n            handleArrowKey(1);\r\n        } else if (evt.key === \"ArrowDown\") {\r\n            handleArrowKey(-1);\r\n        }\r\n    }\r\n\r\n    override render() {\r\n        return (\r\n            <div className={style.numeric}>\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                {this.props.label && (\r\n                    <div className={style.numericLabel} title={this.props.labelTooltip ?? this.props.label}>\r\n                        {`${this.props.label}: `}\r\n                    </div>\r\n                )}\r\n                <input\r\n                    type=\"number\"\r\n                    step={this.props.step}\r\n                    className={style.numericInput}\r\n                    value={this.state.value}\r\n                    onChange={(evt) => this.updateValue(evt.target.value)}\r\n                    onKeyDown={(evt) => this.onKeyDown(evt)}\r\n                    onFocus={() => {\r\n                        if (this.props.lockObject) {\r\n                            this.props.lockObject.lock = true;\r\n                        }\r\n                    }}\r\n                    onBlur={() => this.onBlur()}\r\n                />\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/components/lines/OptionsLineComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"OptionsLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/lines/OptionsLineComponent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,KAAK,KAAK,MAAM,oCAAoC,CAAC;AAsB5D;;;GAGG;AACH,IAAK,YAGJ;AAHD,WAAK,YAAY;IACb,qDAAW,CAAA;IACX,mDAAU,CAAA;AACd,CAAC,EAHI,YAAY,KAAZ,YAAY,QAGhB;AAED,MAAM,YAAY,GAAG,iBAAiB,CAAC;AAEvC,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAiC,EAAE,EAAE;IACtE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,yBAAyB;IAE/F,MAAM,cAAc,GAAG,CAAC,GAAmC,EAAE,EAAE;QAC3D,IAAI,GAAG,CAAC,MAAM,CAAC,KAAK,KAAK,YAAY,EAAE,CAAC;YACpC,cAAc,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QACxC,CAAC;aAAM,CAAC;YACJ,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC7C,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,KAAK,CAAC;QAC5B,MAAM,SAAS,GAAG,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC;QAC5F,KAAK,CAAC,aAAa,EAAE,CAAC,SAAS,CAAC,CAAC;QACjC,KAAK,CAAC,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACxC,cAAc,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC3B,cAAc,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,KAAK,CAAC,WAAW,aAC5B,WAAW,KAAK,YAAY,CAAC,MAAM,IAAI,CACpC,KAAC,mBAAmB,IAChB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,KAAK,CAAC,oBAAoB,EACvC,aAAa,EAAE,KAAK,CAAC,sBAAsB,EAC3C,YAAY,EAAE,iBAAiB,GACjC,CACL,EACA,WAAW,KAAK,YAAY,CAAC,OAAO,IAAI,CACrC,kBAAQ,SAAS,EAAE,KAAK,CAAC,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,CAAC,mBAAmB,aAC7F,KAAK,CAAC,aAAa,IAAI,CACpB,iBAA2B,KAAK,EAAE,YAAY,YACzC,KAAK,CAAC,aAAa,IAAI,QAAQ,IADvB,YAAY,CAEhB,CACZ,EACA,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC3B,iBAAwB,KAAK,EAAE,MAAM,CAAC,KAAK,YACtC,MAAM,CAAC,KAAK,IADJ,MAAM,CAAC,EAAE,CAEb,CACZ,CAAC,IACG,CACZ,IACC,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { ChangeEvent } from \"react\";\r\nimport { useState } from \"react\";\r\nimport { TextInputWithSubmit } from \"../TextInputWithSubmit\";\r\nimport * as style from \"./OptionsLineComponent.module.scss\";\r\n\r\n/**\r\n * This components represents an options menu with optional\r\n * customizable properties. Option IDs should be unique.\r\n */\r\nexport interface IOption {\r\n    label: string;\r\n    value: string;\r\n    id: string;\r\n}\r\n\r\nexport interface IOptionsLineComponentProps {\r\n    options: IOption[];\r\n    addOptionPlaceholder?: string; // Placeholder text to display when adding a new option\r\n    onOptionAdded?: (newOption: IOption) => void; // Optional function that can be used to add a new option to the menu\r\n    onOptionSelected: (selectedOptionValue: string) => void;\r\n    selectedOptionValue: string; // The value of the currently selected option\r\n    validateNewOptionValue?: (newOptionValue: string) => boolean; // Optional function that can be used to validate the value of a new option\r\n    addOptionText?: string; // Optional text to display on the add option button\r\n}\r\n\r\n/**\r\n * We have two possible states. The user starts in the Default option, and can choose to\r\n * add a new option.\r\n */\r\nenum OptionStates {\r\n    Default = 0, // Default state,\r\n    Adding = 1, // State when the user is adding a new option to the menu\r\n}\r\n\r\nconst OptionAddKey = \"addCustomOption\";\r\n\r\nexport const OptionsLineComponent = (props: IOptionsLineComponentProps) => {\r\n    const [optionState, setOptionState] = useState(OptionStates.Default); // State of the component\r\n\r\n    const onOptionChange = (evt: ChangeEvent<HTMLSelectElement>) => {\r\n        if (evt.target.value === OptionAddKey) {\r\n            setOptionState(OptionStates.Adding);\r\n        } else {\r\n            props.onOptionSelected(evt.target.value);\r\n        }\r\n    };\r\n\r\n    const onOptionAdd = (value: string) => {\r\n        const newOptionText = value;\r\n        const newOption = { label: newOptionText, value: newOptionText, id: Date.now().toString() };\r\n        props.onOptionAdded?.(newOption);\r\n        props.onOptionSelected(newOption.value);\r\n        setOptionState(OptionStates.Default);\r\n    };\r\n\r\n    const onCancelOptionAdd = () => {\r\n        setOptionState(OptionStates.Default);\r\n    };\r\n\r\n    return (\r\n        <div className={style.optionsLine}>\r\n            {optionState === OptionStates.Adding && (\r\n                <TextInputWithSubmit\r\n                    submitValue={onOptionAdd}\r\n                    placeholder={props.addOptionPlaceholder}\r\n                    validateValue={props.validateNewOptionValue}\r\n                    cancelSubmit={onCancelOptionAdd}\r\n                />\r\n            )}\r\n            {optionState === OptionStates.Default && (\r\n                <select className={style.optionsSelect} onChange={onOptionChange} value={props.selectedOptionValue}>\r\n                    {props.onOptionAdded && (\r\n                        <option key={OptionAddKey} value={OptionAddKey}>\r\n                            {props.addOptionText ?? \"Custom\"}\r\n                        </option>\r\n                    )}\r\n                    {props.options.map((option) => (\r\n                        <option key={option.id} value={option.value}>\r\n                            {option.label}\r\n                        </option>\r\n                    ))}\r\n                </select>\r\n            )}\r\n        </div>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"OptionsLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/lines/OptionsLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoB,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,KAAK,KAAK,MAAM,oCAAoC,CAAC;AAsB5D;;;GAGG;AACH,IAAK,YAGJ;AAHD,WAAK,YAAY;IACb,qDAAW,CAAA;IACX,mDAAU,CAAA;AACd,CAAC,EAHI,YAAY,KAAZ,YAAY,QAGhB;AAED,MAAM,YAAY,GAAG,iBAAiB,CAAC;AAEvC,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAiC,EAAE,EAAE;IACtE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,yBAAyB;IAE/F,MAAM,cAAc,GAAG,CAAC,GAAmC,EAAE,EAAE;QAC3D,IAAI,GAAG,CAAC,MAAM,CAAC,KAAK,KAAK,YAAY,EAAE,CAAC;YACpC,cAAc,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QACxC,CAAC;aAAM,CAAC;YACJ,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC7C,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,KAAK,CAAC;QAC5B,MAAM,SAAS,GAAG,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC;QAC5F,KAAK,CAAC,aAAa,EAAE,CAAC,SAAS,CAAC,CAAC;QACjC,KAAK,CAAC,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACxC,cAAc,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC3B,cAAc,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,KAAK,CAAC,WAAW,aAC5B,WAAW,KAAK,YAAY,CAAC,MAAM,IAAI,CACpC,KAAC,mBAAmB,IAChB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,KAAK,CAAC,oBAAoB,EACvC,aAAa,EAAE,KAAK,CAAC,sBAAsB,EAC3C,YAAY,EAAE,iBAAiB,GACjC,CACL,EACA,WAAW,KAAK,YAAY,CAAC,OAAO,IAAI,CACrC,kBAAQ,SAAS,EAAE,KAAK,CAAC,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,CAAC,mBAAmB,aAC7F,KAAK,CAAC,aAAa,IAAI,CACpB,iBAA2B,KAAK,EAAE,YAAY,YACzC,KAAK,CAAC,aAAa,IAAI,QAAQ,IADvB,YAAY,CAEhB,CACZ,EACA,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC3B,iBAAwB,KAAK,EAAE,MAAM,CAAC,KAAK,YACtC,MAAM,CAAC,KAAK,IADJ,MAAM,CAAC,EAAE,CAEb,CACZ,CAAC,IACG,CACZ,IACC,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { type ChangeEvent, useState } from \"react\";\r\nimport { TextInputWithSubmit } from \"../TextInputWithSubmit\";\r\nimport * as style from \"./OptionsLineComponent.module.scss\";\r\n\r\n/**\r\n * This components represents an options menu with optional\r\n * customizable properties. Option IDs should be unique.\r\n */\r\nexport interface IOption {\r\n    label: string;\r\n    value: string;\r\n    id: string;\r\n}\r\n\r\nexport interface IOptionsLineComponentProps {\r\n    options: IOption[];\r\n    addOptionPlaceholder?: string; // Placeholder text to display when adding a new option\r\n    onOptionAdded?: (newOption: IOption) => void; // Optional function that can be used to add a new option to the menu\r\n    onOptionSelected: (selectedOptionValue: string) => void;\r\n    selectedOptionValue: string; // The value of the currently selected option\r\n    validateNewOptionValue?: (newOptionValue: string) => boolean; // Optional function that can be used to validate the value of a new option\r\n    addOptionText?: string; // Optional text to display on the add option button\r\n}\r\n\r\n/**\r\n * We have two possible states. The user starts in the Default option, and can choose to\r\n * add a new option.\r\n */\r\nenum OptionStates {\r\n    Default = 0, // Default state,\r\n    Adding = 1, // State when the user is adding a new option to the menu\r\n}\r\n\r\nconst OptionAddKey = \"addCustomOption\";\r\n\r\nexport const OptionsLineComponent = (props: IOptionsLineComponentProps) => {\r\n    const [optionState, setOptionState] = useState(OptionStates.Default); // State of the component\r\n\r\n    const onOptionChange = (evt: ChangeEvent<HTMLSelectElement>) => {\r\n        if (evt.target.value === OptionAddKey) {\r\n            setOptionState(OptionStates.Adding);\r\n        } else {\r\n            props.onOptionSelected(evt.target.value);\r\n        }\r\n    };\r\n\r\n    const onOptionAdd = (value: string) => {\r\n        const newOptionText = value;\r\n        const newOption = { label: newOptionText, value: newOptionText, id: Date.now().toString() };\r\n        props.onOptionAdded?.(newOption);\r\n        props.onOptionSelected(newOption.value);\r\n        setOptionState(OptionStates.Default);\r\n    };\r\n\r\n    const onCancelOptionAdd = () => {\r\n        setOptionState(OptionStates.Default);\r\n    };\r\n\r\n    return (\r\n        <div className={style.optionsLine}>\r\n            {optionState === OptionStates.Adding && (\r\n                <TextInputWithSubmit\r\n                    submitValue={onOptionAdd}\r\n                    placeholder={props.addOptionPlaceholder}\r\n                    validateValue={props.validateNewOptionValue}\r\n                    cancelSubmit={onCancelOptionAdd}\r\n                />\r\n            )}\r\n            {optionState === OptionStates.Default && (\r\n                <select className={style.optionsSelect} onChange={onOptionChange} value={props.selectedOptionValue}>\r\n                    {props.onOptionAdded && (\r\n                        <option key={OptionAddKey} value={OptionAddKey}>\r\n                            {props.addOptionText ?? \"Custom\"}\r\n                        </option>\r\n                    )}\r\n                    {props.options.map((option) => (\r\n                        <option key={option.id} value={option.value}>\r\n                            {option.label}\r\n                        </option>\r\n                    ))}\r\n                </select>\r\n            )}\r\n        </div>\r\n    );\r\n};\r\n"]}

package/components/propertyTabComponentBase.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionComponent, PropsWithChildren } from "react";
+import { type FunctionComponent, type PropsWithChildren } from "react";
 /**
  * A wrapper component for the property tab that provides a consistent layout and styling.
  * It uses a Pane and an Accordion to organize the content, so its direct children

package/components/propertyTabComponentBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"propertyTabComponentBase.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/propertyTabComponentBase.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAyC,CAAC,KAAK,EAAE,EAAE;IACpF,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAExC,IAAI,OAAO,CAAC,SAAS,EAAE,CAAC;QACpB,OAAO,CACH,KAAC,IAAI,IAAC,KAAK,EAAE,OAAO,CAAC,QAAQ,YACzB,KAAC,SAAS,cAAE,KAAK,CAAC,QAAQ,GAAa,GACpC,CACV,CAAC;IACN,CAAC;IAED,OAAO,CACH,eAAK,EAAE,EAAC,aAAa,aACjB,eAAK,EAAE,EAAC,QAAQ,aACZ,cAAK,EAAE,EAAC,MAAM,EAAC,GAAG,EAAC,oEAAoE,GAAG,EAC1F,cAAK,EAAE,EAAC,OAAO,YAAE,OAAO,CAAC,QAAQ,GAAO,IACtC,EACN,wBAAM,KAAK,CAAC,QAAQ,GAAO,IACzB,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { useContext } from \"react\";\r\nimport type { FunctionComponent, PropsWithChildren } from \"react\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\nimport { Pane } from \"../fluent/hoc/pane\";\r\nimport { Accordion } from \"../fluent/primitives/accordion\";\r\n\r\n/**\r\n * A wrapper component for the property tab that provides a consistent layout and styling.\r\n * It uses a Pane and an Accordion to organize the content, so its direct children\r\n * must have 'title' props to be compatible with the Accordion structure.\r\n * @param props The props to pass to the component.\r\n * @returns The rendered component.\r\n */\r\nexport const PropertyTabComponentBase: FunctionComponent<PropsWithChildren> = (props) => {\r\n    const context = useContext(ToolContext);\r\n\r\n    if (context.useFluent) {\r\n        return (\r\n            <Pane title={context.toolName}>\r\n                <Accordion>{props.children}</Accordion>\r\n            </Pane>\r\n        );\r\n    }\r\n\r\n    return (\r\n        <div id=\"propertyTab\">\r\n            <div id=\"header\">\r\n                <img id=\"logo\" src=\"https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png\" />\r\n                <div id=\"title\">{context.toolName}</div>\r\n            </div>\r\n            <div>{props.children}</div>\r\n        </div>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"propertyTabComponentBase.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/propertyTabComponentBase.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkD,MAAM,OAAO,CAAC;AACnF,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAyC,CAAC,KAAK,EAAE,EAAE;IACpF,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAExC,IAAI,OAAO,CAAC,SAAS,EAAE,CAAC;QACpB,OAAO,CACH,KAAC,IAAI,IAAC,KAAK,EAAE,OAAO,CAAC,QAAQ,YACzB,KAAC,SAAS,cAAE,KAAK,CAAC,QAAQ,GAAa,GACpC,CACV,CAAC;IACN,CAAC;IAED,OAAO,CACH,eAAK,EAAE,EAAC,aAAa,aACjB,eAAK,EAAE,EAAC,QAAQ,aACZ,cAAK,EAAE,EAAC,MAAM,EAAC,GAAG,EAAC,oEAAoE,GAAG,EAC1F,cAAK,EAAE,EAAC,OAAO,YAAE,OAAO,CAAC,QAAQ,GAAO,IACtC,EACN,wBAAM,KAAK,CAAC,QAAQ,GAAO,IACzB,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { useContext, type FunctionComponent, type PropsWithChildren } from \"react\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\nimport { Pane } from \"../fluent/hoc/pane\";\r\nimport { Accordion } from \"../fluent/primitives/accordion\";\r\n\r\n/**\r\n * A wrapper component for the property tab that provides a consistent layout and styling.\r\n * It uses a Pane and an Accordion to organize the content, so its direct children\r\n * must have 'title' props to be compatible with the Accordion structure.\r\n * @param props The props to pass to the component.\r\n * @returns The rendered component.\r\n */\r\nexport const PropertyTabComponentBase: FunctionComponent<PropsWithChildren> = (props) => {\r\n    const context = useContext(ToolContext);\r\n\r\n    if (context.useFluent) {\r\n        return (\r\n            <Pane title={context.toolName}>\r\n                <Accordion>{props.children}</Accordion>\r\n            </Pane>\r\n        );\r\n    }\r\n\r\n    return (\r\n        <div id=\"propertyTab\">\r\n            <div id=\"header\">\r\n                <img id=\"logo\" src=\"https://www.babylonjs.com/Assets/logo-babylonjs-social-twitter.png\" />\r\n                <div id=\"title\">{context.toolName}</div>\r\n            </div>\r\n            <div>{props.children}</div>\r\n        </div>\r\n    );\r\n};\r\n"]}

package/components/reactGraphSystem/GraphConnectorHandle.d.ts

@@ -1,4 +1,4 @@
-import type { FC, PropsWithChildren } from "react";
+import { type FC, type PropsWithChildren } from "react";
 /**
  * Props for the connector
  */

package/components/reactGraphSystem/GraphConnectorHandle.js.map

@@ -1 +1 @@
-{"version":3,"file":"GraphConnectorHandle.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphConnectorHandle.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,KAAK,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAwCpD;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAuD,CAAC,EACtF,QAAQ,EACR,OAAO,EACP,OAAO,EACP,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,CAAC,EACX,WAAW,EACX,YAAY,EACZ,iBAAiB,GACpB,EAAE,EAAE;IACD,MAAM,EAAE,gBAAgB,EAAE,GAAG,eAAe,EAAE,CAAC;IAC/C,MAAM,OAAO,GAAG,OAAO,GAAG,WAAW,GAAG,CAAC,CAAC;IAC1C,MAAM,OAAO,GAAG,OAAO,GAAG,YAAY,GAAG,CAAC,CAAC;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAC,GAAG,OAAO,CACvB,GAAG,EAAE,CAAC,CAAC;QACH,IAAI,EAAE,WAAW;QACjB,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,iBAAiB,EAAE;QACjF,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,SAAS;KAChE,CAAC,EACF,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC,CAC/B,CAAC;IACF,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QACzC,MAAM,EAAE,WAAW;QACnB,OAAO,EAAE,CAAC,OAA0B,EAAE,EAAE,CAAC,CAAC;YACtC,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE;SAC3B,CAAC;QACF,OAAO,EAAE,CAAC,IAAS,EAAE,EAAE;YACnB,OAAO,IAAI,CAAC,iBAAiB,KAAK,iBAAiB,CAAC;QACxD,CAAC;QACD,IAAI,EAAE,CAAC,IAAS,EAAE,EAAE;YAChB,gBAAgB,IAAI,gBAAgB,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAClE,CAAC;KACJ,CAAC,CAAC,CAAC;IACJ,MAAM,SAAS,GAAG,WAAW,CACzB,CAAC,GAAuB,EAAE,EAAE;QACxB,OAAO,CAAC,GAAG,CAAC,CAAC;QACb,OAAO,CAAC,GAAG,CAAC,CAAC;IACjB,CAAC,EACD,CAAC,OAAO,EAAE,OAAO,CAAC,CACrB,CAAC;IACF,OAAO,cAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,KAAK,CAAC,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,OAAO,GAAG,IAAI,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,EAAE,GAAI,CAAC;AAC1J,CAAC,CAAC","sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\r\nimport { useCallback } from \"react\";\r\nimport type { ConnectableElement, DropTargetMonitor } from \"react-dnd\";\r\nimport { useDrag, useDrop } from \"react-dnd\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport * as style from \"./GraphConnectorHandle.module.scss\";\r\nimport { useGraphContext } from \"./useGraphContext\";\r\n\r\n/**\r\n * Props for the connector\r\n */\r\nexport interface IGraphConnectorHandlerProps {\r\n    /**\r\n     * id of the parent node\r\n     */\r\n    parentId: string;\r\n    /**\r\n     * x position of the parent node\r\n     */\r\n    parentX: number;\r\n    /**\r\n     * y position of the parent node\r\n     */\r\n    parentY: number;\r\n    /**\r\n     * x position of the connector relative to the parent node\r\n     */\r\n    offsetX?: number;\r\n    /**\r\n     * y position of the connector relative to the parent node\r\n     */\r\n    offsetY?: number;\r\n    /**\r\n     * width of the parent node\r\n     */\r\n    parentWidth: number;\r\n    /**\r\n     * height of the parent node\r\n     */\r\n    parentHeight: number;\r\n    /**\r\n     * id of the container where its parent node is\r\n     */\r\n    parentContainerId: string;\r\n}\r\n\r\n/**\r\n * This component is used to initiate a connection between two nodes. Simply\r\n * drag the handle in a node and drop it in another node to create a connection.\r\n * @returns connector element\r\n */\r\nexport const GraphConnectorHandler: FC<PropsWithChildren<IGraphConnectorHandlerProps>> = ({\r\n    parentId,\r\n    parentX,\r\n    parentY,\r\n    offsetX = 0,\r\n    offsetY = 0,\r\n    parentWidth,\r\n    parentHeight,\r\n    parentContainerId,\r\n}) => {\r\n    const { onNodesConnected } = useGraphContext();\r\n    const centerX = offsetX + parentWidth / 2;\r\n    const centerY = offsetY + parentHeight / 2;\r\n    const [, dragRef] = useDrag(\r\n        () => ({\r\n            type: \"connector\",\r\n            item: { parentId, x: parentX + centerX, y: parentY + centerY, parentContainerId },\r\n            canDrag: () => parentX !== undefined && parentY !== undefined,\r\n        }),\r\n        [parentId, parentX, parentY]\r\n    );\r\n    const [{ isOver }, dropRef] = useDrop(() => ({\r\n        accept: \"connector\",\r\n        collect: (monitor: DropTargetMonitor) => ({\r\n            isOver: monitor.isOver(),\r\n        }),\r\n        canDrop: (item: any) => {\r\n            return item.parentContainerId === parentContainerId;\r\n        },\r\n        drop: (item: any) => {\r\n            onNodesConnected && onNodesConnected(item.parentId, parentId);\r\n        },\r\n    }));\r\n    const attachRef = useCallback(\r\n        (ref: ConnectableElement) => {\r\n            dragRef(ref);\r\n            dropRef(ref);\r\n        },\r\n        [dragRef, dropRef]\r\n    );\r\n    return <div ref={attachRef} className={ClassNames({ handle: true, hovered: isOver }, style)} style={{ top: centerY + \"px\", left: centerX + \"px\" }} />;\r\n};\r\n"]}
+{"version":3,"file":"GraphConnectorHandle.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphConnectorHandle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAmC,WAAW,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAmD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC9F,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,KAAK,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAwCpD;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAuD,CAAC,EACtF,QAAQ,EACR,OAAO,EACP,OAAO,EACP,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,CAAC,EACX,WAAW,EACX,YAAY,EACZ,iBAAiB,GACpB,EAAE,EAAE;IACD,MAAM,EAAE,gBAAgB,EAAE,GAAG,eAAe,EAAE,CAAC;IAC/C,MAAM,OAAO,GAAG,OAAO,GAAG,WAAW,GAAG,CAAC,CAAC;IAC1C,MAAM,OAAO,GAAG,OAAO,GAAG,YAAY,GAAG,CAAC,CAAC;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAC,GAAG,OAAO,CACvB,GAAG,EAAE,CAAC,CAAC;QACH,IAAI,EAAE,WAAW;QACjB,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,CAAC,EAAE,OAAO,GAAG,OAAO,EAAE,iBAAiB,EAAE;QACjF,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,SAAS;KAChE,CAAC,EACF,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC,CAC/B,CAAC;IACF,MAAM,CAAC,EAAE,MAAM,EAAE,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QACzC,MAAM,EAAE,WAAW;QACnB,OAAO,EAAE,CAAC,OAA0B,EAAE,EAAE,CAAC,CAAC;YACtC,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE;SAC3B,CAAC;QACF,OAAO,EAAE,CAAC,IAAS,EAAE,EAAE;YACnB,OAAO,IAAI,CAAC,iBAAiB,KAAK,iBAAiB,CAAC;QACxD,CAAC;QACD,IAAI,EAAE,CAAC,IAAS,EAAE,EAAE;YAChB,gBAAgB,IAAI,gBAAgB,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAClE,CAAC;KACJ,CAAC,CAAC,CAAC;IACJ,MAAM,SAAS,GAAG,WAAW,CACzB,CAAC,GAAuB,EAAE,EAAE;QACxB,OAAO,CAAC,GAAG,CAAC,CAAC;QACb,OAAO,CAAC,GAAG,CAAC,CAAC;IACjB,CAAC,EACD,CAAC,OAAO,EAAE,OAAO,CAAC,CACrB,CAAC;IACF,OAAO,cAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,KAAK,CAAC,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,OAAO,GAAG,IAAI,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,EAAE,GAAI,CAAC;AAC1J,CAAC,CAAC","sourcesContent":["import { type FC, type PropsWithChildren, useCallback } from \"react\";\r\nimport { type ConnectableElement, type DropTargetMonitor, useDrag, useDrop } from \"react-dnd\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport * as style from \"./GraphConnectorHandle.module.scss\";\r\nimport { useGraphContext } from \"./useGraphContext\";\r\n\r\n/**\r\n * Props for the connector\r\n */\r\nexport interface IGraphConnectorHandlerProps {\r\n    /**\r\n     * id of the parent node\r\n     */\r\n    parentId: string;\r\n    /**\r\n     * x position of the parent node\r\n     */\r\n    parentX: number;\r\n    /**\r\n     * y position of the parent node\r\n     */\r\n    parentY: number;\r\n    /**\r\n     * x position of the connector relative to the parent node\r\n     */\r\n    offsetX?: number;\r\n    /**\r\n     * y position of the connector relative to the parent node\r\n     */\r\n    offsetY?: number;\r\n    /**\r\n     * width of the parent node\r\n     */\r\n    parentWidth: number;\r\n    /**\r\n     * height of the parent node\r\n     */\r\n    parentHeight: number;\r\n    /**\r\n     * id of the container where its parent node is\r\n     */\r\n    parentContainerId: string;\r\n}\r\n\r\n/**\r\n * This component is used to initiate a connection between two nodes. Simply\r\n * drag the handle in a node and drop it in another node to create a connection.\r\n * @returns connector element\r\n */\r\nexport const GraphConnectorHandler: FC<PropsWithChildren<IGraphConnectorHandlerProps>> = ({\r\n    parentId,\r\n    parentX,\r\n    parentY,\r\n    offsetX = 0,\r\n    offsetY = 0,\r\n    parentWidth,\r\n    parentHeight,\r\n    parentContainerId,\r\n}) => {\r\n    const { onNodesConnected } = useGraphContext();\r\n    const centerX = offsetX + parentWidth / 2;\r\n    const centerY = offsetY + parentHeight / 2;\r\n    const [, dragRef] = useDrag(\r\n        () => ({\r\n            type: \"connector\",\r\n            item: { parentId, x: parentX + centerX, y: parentY + centerY, parentContainerId },\r\n            canDrag: () => parentX !== undefined && parentY !== undefined,\r\n        }),\r\n        [parentId, parentX, parentY]\r\n    );\r\n    const [{ isOver }, dropRef] = useDrop(() => ({\r\n        accept: \"connector\",\r\n        collect: (monitor: DropTargetMonitor) => ({\r\n            isOver: monitor.isOver(),\r\n        }),\r\n        canDrop: (item: any) => {\r\n            return item.parentContainerId === parentContainerId;\r\n        },\r\n        drop: (item: any) => {\r\n            onNodesConnected && onNodesConnected(item.parentId, parentId);\r\n        },\r\n    }));\r\n    const attachRef = useCallback(\r\n        (ref: ConnectableElement) => {\r\n            dragRef(ref);\r\n            dropRef(ref);\r\n        },\r\n        [dragRef, dropRef]\r\n    );\r\n    return <div ref={attachRef} className={ClassNames({ handle: true, hovered: isOver }, style)} style={{ top: centerY + \"px\", left: centerX + \"px\" }} />;\r\n};\r\n"]}

package/components/reactGraphSystem/GraphContainer.d.ts

@@ -1,4 +1,4 @@
-import type { FC, PropsWithChildren } from "react";
+import { type FC, type PropsWithChildren } from "react";
 export interface IGraphContainerProps {
 }
 /**

package/components/reactGraphSystem/GraphContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"GraphContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphContainer.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,KAAK,MAAM,8BAA8B,CAAC;AAItD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAgD,CAAC,KAAK,EAAE,EAAE;IACjF,OAAO,cAAK,SAAS,EAAE,KAAK,CAAC,SAAS,YAAG,KAAK,CAAC,QAAQ,GAAO,CAAC;AACnE,CAAC,CAAC","sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\r\nimport * as style from \"./GraphContainer.module.scss\";\r\n\r\nexport interface IGraphContainerProps {}\r\n\r\n/**\r\n * This component is just a simple container to keep the nodes and lines containers\r\n * together\r\n * @param props\r\n * @returns\r\n */\r\nexport const GraphContainer: FC<PropsWithChildren<IGraphContainerProps>> = (props) => {\r\n    return <div className={style.container}>{props.children}</div>;\r\n};\r\n"]}
+{"version":3,"file":"GraphContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphContainer.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,KAAK,MAAM,8BAA8B,CAAC;AAItD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAgD,CAAC,KAAK,EAAE,EAAE;IACjF,OAAO,cAAK,SAAS,EAAE,KAAK,CAAC,SAAS,YAAG,KAAK,CAAC,QAAQ,GAAO,CAAC;AACnE,CAAC,CAAC","sourcesContent":["import { type FC, type PropsWithChildren } from \"react\";\r\nimport * as style from \"./GraphContainer.module.scss\";\r\n\r\nexport interface IGraphContainerProps {}\r\n\r\n/**\r\n * This component is just a simple container to keep the nodes and lines containers\r\n * together\r\n * @param props\r\n * @returns\r\n */\r\nexport const GraphContainer: FC<PropsWithChildren<IGraphContainerProps>> = (props) => {\r\n    return <div className={style.container}>{props.children}</div>;\r\n};\r\n"]}

package/components/reactGraphSystem/GraphLine.d.ts

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import { type FC } from "react";
 /**
  * props for the GraphLine component
  */

package/components/reactGraphSystem/GraphLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"GraphLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphLine.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAmCpD,MAAM,CAAC,MAAM,aAAa,GAAG,OAAO,CAAC;AAErC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,SAAS,GAAwB,CAAC,KAAsB,EAAE,EAAE;IACrE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,WAAW,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IACnE,MAAM,EAAE,cAAc,EAAE,GAAG,eAAe,EAAE,CAAC;IAE7C,4CAA4C;IAC5C,MAAM,OAAO,GAAG,GAAG,EAAE;QACjB,EAAE,IAAI,cAAc,IAAI,cAAc,CAAC,EAAE,CAAC,CAAC;IAC/C,CAAC,CAAC;IAEF,MAAM,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC;IACzB,MAAM,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC;IAEzB,OAAO,CACH,eACI,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAC9C,WAAW,EAAE,CAAC,EACd,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EACrC,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,QAAQ,aAAa,GAAG,CAAC,CAAC,CAAC,EAAE,GACxD,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport { useGraphContext } from \"./useGraphContext\";\r\n/**\r\n * props for the GraphLine component\r\n */\r\nexport interface IGraphLineProps {\r\n    /**\r\n     * id of the line. temporary lines can have no id\r\n     */\r\n    id?: string;\r\n    /**\r\n     * starting x pos of the line\r\n     */\r\n    x1: number;\r\n    /**\r\n     * ending x pos of the line\r\n     */\r\n    x2: number;\r\n    /**\r\n     * starting y pos of the line\r\n     */\r\n    y1: number;\r\n    /**\r\n     * ending y pos of the line\r\n     */\r\n    y2: number;\r\n    /**\r\n     * is the line selected\r\n     */\r\n    selected?: boolean;\r\n    /**\r\n     * does the line have a direction\r\n     */\r\n    directional?: boolean;\r\n}\r\n\r\nexport const MarkerArrowId = \"arrow\";\r\n\r\n/**\r\n * This component draws a SVG line between two points, with an optional marker\r\n * indicating direction\r\n * @param props properties\r\n * @returns graph line element\r\n */\r\nexport const GraphLine: FC<IGraphLineProps> = (props: IGraphLineProps) => {\r\n    const { id, x1, x2, y1, y2, selected, directional = true } = props;\r\n    const { onLineSelected } = useGraphContext();\r\n\r\n    // Line is only selectable when it has an id\r\n    const onClick = () => {\r\n        id && onLineSelected && onLineSelected(id);\r\n    };\r\n\r\n    const xm = (x1 + x2) / 2;\r\n    const ym = (y1 + y2) / 2;\r\n\r\n    return (\r\n        <path\r\n            d={`M ${x1} ${y1} L ${xm} ${ym} L ${x2} ${y2}`}\r\n            strokeWidth={3}\r\n            stroke={selected ? \"yellow\" : \"black\"}\r\n            onClick={onClick}\r\n            markerMid={directional ? `url(#${MarkerArrowId})` : \"\"}\r\n        />\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"GraphLine.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphLine.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAmCpD,MAAM,CAAC,MAAM,aAAa,GAAG,OAAO,CAAC;AAErC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,SAAS,GAAwB,CAAC,KAAsB,EAAE,EAAE;IACrE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,WAAW,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IACnE,MAAM,EAAE,cAAc,EAAE,GAAG,eAAe,EAAE,CAAC;IAE7C,4CAA4C;IAC5C,MAAM,OAAO,GAAG,GAAG,EAAE;QACjB,EAAE,IAAI,cAAc,IAAI,cAAc,CAAC,EAAE,CAAC,CAAC;IAC/C,CAAC,CAAC;IAEF,MAAM,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC;IACzB,MAAM,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC;IAEzB,OAAO,CACH,eACI,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAC9C,WAAW,EAAE,CAAC,EACd,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EACrC,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,QAAQ,aAAa,GAAG,CAAC,CAAC,CAAC,EAAE,GACxD,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { type FC } from \"react\";\r\nimport { useGraphContext } from \"./useGraphContext\";\r\n/**\r\n * props for the GraphLine component\r\n */\r\nexport interface IGraphLineProps {\r\n    /**\r\n     * id of the line. temporary lines can have no id\r\n     */\r\n    id?: string;\r\n    /**\r\n     * starting x pos of the line\r\n     */\r\n    x1: number;\r\n    /**\r\n     * ending x pos of the line\r\n     */\r\n    x2: number;\r\n    /**\r\n     * starting y pos of the line\r\n     */\r\n    y1: number;\r\n    /**\r\n     * ending y pos of the line\r\n     */\r\n    y2: number;\r\n    /**\r\n     * is the line selected\r\n     */\r\n    selected?: boolean;\r\n    /**\r\n     * does the line have a direction\r\n     */\r\n    directional?: boolean;\r\n}\r\n\r\nexport const MarkerArrowId = \"arrow\";\r\n\r\n/**\r\n * This component draws a SVG line between two points, with an optional marker\r\n * indicating direction\r\n * @param props properties\r\n * @returns graph line element\r\n */\r\nexport const GraphLine: FC<IGraphLineProps> = (props: IGraphLineProps) => {\r\n    const { id, x1, x2, y1, y2, selected, directional = true } = props;\r\n    const { onLineSelected } = useGraphContext();\r\n\r\n    // Line is only selectable when it has an id\r\n    const onClick = () => {\r\n        id && onLineSelected && onLineSelected(id);\r\n    };\r\n\r\n    const xm = (x1 + x2) / 2;\r\n    const ym = (y1 + y2) / 2;\r\n\r\n    return (\r\n        <path\r\n            d={`M ${x1} ${y1} L ${xm} ${ym} L ${x2} ${y2}`}\r\n            strokeWidth={3}\r\n            stroke={selected ? \"yellow\" : \"black\"}\r\n            onClick={onClick}\r\n            markerMid={directional ? `url(#${MarkerArrowId})` : \"\"}\r\n        />\r\n    );\r\n};\r\n"]}

package/components/reactGraphSystem/GraphLinesContainer.d.ts

@@ -1,4 +1,4 @@
-import type { FC, PropsWithChildren } from "react";
+import { type FC, type PropsWithChildren } from "react";
 /**
  * props for the GraphLineContainer
  */

package/components/reactGraphSystem/GraphLinesContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"GraphLinesContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphLinesContainer.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAYvD;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAqD,CAAC,KAAK,EAAE,EAAE;IAC3F,MAAM,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC/C,MAAM,EAAE,WAAW;QACnB,OAAO,EAAE,CAAC,IAAS,EAAE,EAAE;YACnB,OAAO,IAAI,CAAC,iBAAiB,KAAK,KAAK,CAAC,EAAE,CAAC;QAC/C,CAAC;QACD,OAAO,EAAE,CAAC,OAA0B,EAAE,EAAE,CAAC,CAAC;YACtC,4EAA4E;YAC5E,KAAK,EAAE,OAAO,CAAC,OAAO,EAAS;YAC/B,KAAK,EAAE,OAAO,CAAC,8BAA8B,EAAS;SACzD,CAAC;KACL,CAAC,CAAC,CAAC;IACJ,OAAO,CACH,eAAK,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,GAAG,EAAE,OAAO,aACxC,yBACI,iBAAQ,EAAE,EAAE,aAAa,EAAE,WAAW,EAAC,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,GAAG,EAAC,MAAM,EAAC,MAAM,YACzF,eAAM,CAAC,EAAC,uBAAuB,EAAC,MAAM,EAAC,OAAO,GAAG,GAC5C,GACN,EACN,KAAK,CAAC,QAAQ,EACd,KAAK,IAAI,KAAK,CAAC,iBAAiB,KAAK,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC,CAAC,KAAK,SAAS,IAAI,KAAK,CAAC,CAAC,KAAK,SAAS,IAAI,KAAK,IAAI,CACzG,KAAC,SAAS,IAAC,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAI,CACzG,IACC,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\r\nimport type { DropTargetMonitor } from \"react-dnd\";\r\nimport { useDrop } from \"react-dnd\";\r\nimport { GraphLine, MarkerArrowId } from \"./GraphLine\";\r\n\r\n/**\r\n * props for the GraphLineContainer\r\n */\r\nexport interface IGraphLinesContainerProps {\r\n    /**\r\n     * id of the container\r\n     */\r\n    id: string;\r\n}\r\n\r\n/**\r\n * this component handles the dragging of new connections\r\n * @param props\r\n * @returns\r\n */\r\nexport const GraphLinesContainer: FC<PropsWithChildren<IGraphLinesContainerProps>> = (props) => {\r\n    const [{ start, delta }, dropRef] = useDrop(() => ({\r\n        accept: \"connector\",\r\n        canDrop: (item: any) => {\r\n            return item.parentContainerId === props.id;\r\n        },\r\n        collect: (monitor: DropTargetMonitor) => ({\r\n            // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\r\n            start: monitor.getItem() as any,\r\n            delta: monitor.getDifferenceFromInitialOffset() as any,\r\n        }),\r\n    }));\r\n    return (\r\n        <svg width=\"100%\" height=\"100%\" ref={dropRef}>\r\n            <defs>\r\n                <marker id={MarkerArrowId} markerWidth=\"15\" markerHeight=\"15\" refX=\"5\" refY=\"5\" orient=\"auto\">\r\n                    <path d=\"M 0 0 L 10 5 L 0 10 z\" stroke=\"black\" />\r\n                </marker>\r\n            </defs>\r\n            {props.children}\r\n            {start && start.parentContainerId === props.id && start.x !== undefined && start.y !== undefined && delta && (\r\n                <GraphLine x1={start.x} y1={start.y} x2={start.x + delta.x} y2={start.y + delta.y} selected={false} />\r\n            )}\r\n        </svg>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"GraphLinesContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphLinesContainer.tsx"],"names":[],"mappings":";AACA,OAAO,EAA0B,OAAO,EAAE,MAAM,WAAW,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAYvD;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAqD,CAAC,KAAK,EAAE,EAAE;IAC3F,MAAM,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC/C,MAAM,EAAE,WAAW;QACnB,OAAO,EAAE,CAAC,IAAS,EAAE,EAAE;YACnB,OAAO,IAAI,CAAC,iBAAiB,KAAK,KAAK,CAAC,EAAE,CAAC;QAC/C,CAAC;QACD,OAAO,EAAE,CAAC,OAA0B,EAAE,EAAE,CAAC,CAAC;YACtC,4EAA4E;YAC5E,KAAK,EAAE,OAAO,CAAC,OAAO,EAAS;YAC/B,KAAK,EAAE,OAAO,CAAC,8BAA8B,EAAS;SACzD,CAAC;KACL,CAAC,CAAC,CAAC;IACJ,OAAO,CACH,eAAK,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,GAAG,EAAE,OAAO,aACxC,yBACI,iBAAQ,EAAE,EAAE,aAAa,EAAE,WAAW,EAAC,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,GAAG,EAAC,MAAM,EAAC,MAAM,YACzF,eAAM,CAAC,EAAC,uBAAuB,EAAC,MAAM,EAAC,OAAO,GAAG,GAC5C,GACN,EACN,KAAK,CAAC,QAAQ,EACd,KAAK,IAAI,KAAK,CAAC,iBAAiB,KAAK,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC,CAAC,KAAK,SAAS,IAAI,KAAK,CAAC,CAAC,KAAK,SAAS,IAAI,KAAK,IAAI,CACzG,KAAC,SAAS,IAAC,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAI,CACzG,IACC,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { type FC, type PropsWithChildren } from \"react\";\r\nimport { type DropTargetMonitor, useDrop } from \"react-dnd\";\r\nimport { GraphLine, MarkerArrowId } from \"./GraphLine\";\r\n\r\n/**\r\n * props for the GraphLineContainer\r\n */\r\nexport interface IGraphLinesContainerProps {\r\n    /**\r\n     * id of the container\r\n     */\r\n    id: string;\r\n}\r\n\r\n/**\r\n * this component handles the dragging of new connections\r\n * @param props\r\n * @returns\r\n */\r\nexport const GraphLinesContainer: FC<PropsWithChildren<IGraphLinesContainerProps>> = (props) => {\r\n    const [{ start, delta }, dropRef] = useDrop(() => ({\r\n        accept: \"connector\",\r\n        canDrop: (item: any) => {\r\n            return item.parentContainerId === props.id;\r\n        },\r\n        collect: (monitor: DropTargetMonitor) => ({\r\n            // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\r\n            start: monitor.getItem() as any,\r\n            delta: monitor.getDifferenceFromInitialOffset() as any,\r\n        }),\r\n    }));\r\n    return (\r\n        <svg width=\"100%\" height=\"100%\" ref={dropRef}>\r\n            <defs>\r\n                <marker id={MarkerArrowId} markerWidth=\"15\" markerHeight=\"15\" refX=\"5\" refY=\"5\" orient=\"auto\">\r\n                    <path d=\"M 0 0 L 10 5 L 0 10 z\" stroke=\"black\" />\r\n                </marker>\r\n            </defs>\r\n            {props.children}\r\n            {start && start.parentContainerId === props.id && start.x !== undefined && start.y !== undefined && delta && (\r\n                <GraphLine x1={start.x} y1={start.y} x2={start.x + delta.x} y2={start.y + delta.y} selected={false} />\r\n            )}\r\n        </svg>\r\n    );\r\n};\r\n"]}

package/components/reactGraphSystem/GraphNode.d.ts

@@ -1,4 +1,4 @@
-import type { FC, PropsWithChildren } from "react";
+import { type FC, type PropsWithChildren } from "react";
 export interface IGraphNodeProps {
     id: string;
     name: string;

package/components/reactGraphSystem/GraphNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"GraphNode.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphNode.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,KAAK,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAcpD,MAAM,CAAC,MAAM,eAAe,GAA2C,CAAC,KAAK,EAAE,EAAE;IAC7E,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,GAAG,EAAE,MAAM,GAAG,EAAE,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,KAAK,CAAC;IACrG,MAAM,EAAE,cAAc,EAAE,GAAG,eAAe,EAAE,CAAC;IAE7C,MAAM,CAAC,EAAE,OAAO,CAAC,GAAG,OAAO,CACvB,GAAG,EAAE,CAAC,CAAC;QACH,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,EAAE,EAAE,EAAE,iBAAiB,EAAE;QAC/B,OAAO,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;YACnB,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE;SACjC,CAAC;KACL,CAAC,EACF,EAAE,CACL,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACjB,cAAc,IAAI,cAAc,CAAC,EAAE,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,OAAO,CACH,cACI,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,KAAK,CAAC,EACnE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,IAAI,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,EAC5E,OAAO,EAAE,OAAO,YAEhB,eAAK,SAAS,EAAE,KAAK,CAAC,SAAS,aAC3B,uBAAK,IAAI,GAAM,EACf,KAAC,qBAAqB,IAClB,iBAAiB,EAAE,iBAAiB,EACpC,QAAQ,EAAE,EAAE,EACZ,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,MAAM,GAAG,CAAC,EACpB,WAAW,EAAE,KAAK,EAClB,YAAY,EAAE,MAAM,GACtB,EACD,KAAK,CAAC,QAAQ,IACb,GACJ,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\r\nimport { useDrag } from \"react-dnd\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport { GraphConnectorHandler } from \"./GraphConnectorHandle\";\r\nimport * as style from \"./GraphNode.module.scss\";\r\nimport { useGraphContext } from \"./useGraphContext\";\r\n\r\nexport interface IGraphNodeProps {\r\n    id: string;\r\n    name: string;\r\n    x: number;\r\n    y: number;\r\n    selected?: boolean;\r\n    width?: number;\r\n    height?: number;\r\n    highlighted?: boolean;\r\n    parentContainerId: string;\r\n}\r\n\r\nexport const SingleGraphNode: FC<PropsWithChildren<IGraphNodeProps>> = (props) => {\r\n    const { id, name, x, y, selected, width = 100, height = 40, highlighted, parentContainerId } = props;\r\n    const { onNodeSelected } = useGraphContext();\r\n\r\n    const [, dragRef] = useDrag(\r\n        () => ({\r\n            type: \"node\",\r\n            item: { id, parentContainerId },\r\n            collect: (monitor) => ({\r\n                isDrag: !!monitor.isDragging(),\r\n            }),\r\n        }),\r\n        []\r\n    );\r\n\r\n    const onClick = () => {\r\n        onNodeSelected && onNodeSelected(id);\r\n    };\r\n\r\n    return (\r\n        <div\r\n            ref={dragRef}\r\n            className={ClassNames({ node: true, selected, highlighted }, style)}\r\n            style={{ left: x, top: y, minWidth: width + \"px\", minHeight: height + \"px\" }}\r\n            onClick={onClick}\r\n        >\r\n            <div className={style.container}>\r\n                <h2>{name}</h2>\r\n                <GraphConnectorHandler\r\n                    parentContainerId={parentContainerId}\r\n                    parentId={id}\r\n                    parentX={x}\r\n                    parentY={y}\r\n                    offsetY={-height / 2}\r\n                    parentWidth={width}\r\n                    parentHeight={height}\r\n                />\r\n                {props.children}\r\n            </div>\r\n        </div>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"GraphNode.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphNode.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,KAAK,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAcpD,MAAM,CAAC,MAAM,eAAe,GAA2C,CAAC,KAAK,EAAE,EAAE;IAC7E,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,GAAG,EAAE,MAAM,GAAG,EAAE,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,KAAK,CAAC;IACrG,MAAM,EAAE,cAAc,EAAE,GAAG,eAAe,EAAE,CAAC;IAE7C,MAAM,CAAC,EAAE,OAAO,CAAC,GAAG,OAAO,CACvB,GAAG,EAAE,CAAC,CAAC;QACH,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,EAAE,EAAE,EAAE,iBAAiB,EAAE;QAC/B,OAAO,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;YACnB,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE;SACjC,CAAC;KACL,CAAC,EACF,EAAE,CACL,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACjB,cAAc,IAAI,cAAc,CAAC,EAAE,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,OAAO,CACH,cACI,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,KAAK,CAAC,EACnE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,IAAI,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,EAC5E,OAAO,EAAE,OAAO,YAEhB,eAAK,SAAS,EAAE,KAAK,CAAC,SAAS,aAC3B,uBAAK,IAAI,GAAM,EACf,KAAC,qBAAqB,IAClB,iBAAiB,EAAE,iBAAiB,EACpC,QAAQ,EAAE,EAAE,EACZ,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,MAAM,GAAG,CAAC,EACpB,WAAW,EAAE,KAAK,EAClB,YAAY,EAAE,MAAM,GACtB,EACD,KAAK,CAAC,QAAQ,IACb,GACJ,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { type FC, type PropsWithChildren } from \"react\";\r\nimport { useDrag } from \"react-dnd\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport { GraphConnectorHandler } from \"./GraphConnectorHandle\";\r\nimport * as style from \"./GraphNode.module.scss\";\r\nimport { useGraphContext } from \"./useGraphContext\";\r\n\r\nexport interface IGraphNodeProps {\r\n    id: string;\r\n    name: string;\r\n    x: number;\r\n    y: number;\r\n    selected?: boolean;\r\n    width?: number;\r\n    height?: number;\r\n    highlighted?: boolean;\r\n    parentContainerId: string;\r\n}\r\n\r\nexport const SingleGraphNode: FC<PropsWithChildren<IGraphNodeProps>> = (props) => {\r\n    const { id, name, x, y, selected, width = 100, height = 40, highlighted, parentContainerId } = props;\r\n    const { onNodeSelected } = useGraphContext();\r\n\r\n    const [, dragRef] = useDrag(\r\n        () => ({\r\n            type: \"node\",\r\n            item: { id, parentContainerId },\r\n            collect: (monitor) => ({\r\n                isDrag: !!monitor.isDragging(),\r\n            }),\r\n        }),\r\n        []\r\n    );\r\n\r\n    const onClick = () => {\r\n        onNodeSelected && onNodeSelected(id);\r\n    };\r\n\r\n    return (\r\n        <div\r\n            ref={dragRef}\r\n            className={ClassNames({ node: true, selected, highlighted }, style)}\r\n            style={{ left: x, top: y, minWidth: width + \"px\", minHeight: height + \"px\" }}\r\n            onClick={onClick}\r\n        >\r\n            <div className={style.container}>\r\n                <h2>{name}</h2>\r\n                <GraphConnectorHandler\r\n                    parentContainerId={parentContainerId}\r\n                    parentId={id}\r\n                    parentX={x}\r\n                    parentY={y}\r\n                    offsetY={-height / 2}\r\n                    parentWidth={width}\r\n                    parentHeight={height}\r\n                />\r\n                {props.children}\r\n            </div>\r\n        </div>\r\n    );\r\n};\r\n"]}

package/components/reactGraphSystem/GraphNodesContainer.d.ts

@@ -1,4 +1,4 @@
-import type { FC, PropsWithChildren } from "react";
+import { type FC, type PropsWithChildren } from "react";
 export interface IGraphContainerProps {
     onNodeMoved: (id: string, x: number, y: number) => void;
     id: string;

package/components/reactGraphSystem/GraphNodesContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"GraphNodesContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphNodesContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,sCAAwB;AAG1C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAMzC;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAgD,CAAC,KAAK,EAAE,EAAE;IACtF,MAAM,WAAW,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAEpD,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,YAAY,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;QACnE,aAAa,EAAE,OAAO,CAAC,qBAAqB,EAAE;QAC9C,IAAI,EAAE,OAAO,CAAC,OAAO,EAAE;QACvB,UAAU,EAAE,OAAO,CAAC,UAAU,EAAE;KACnC,CAAC,CAAC,CAAC;IAEJ,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,aAAa,IAAI,IAAI,EAAE,CAAC;YACxB,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;gBACtB,MAAM,KAAK,GAAG,IAAI,OAAO,CAAC,aAAa,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;gBAC1F,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;YACnD,CAAC;YACD,WAAW,CAAC,OAAO,GAAG,IAAI,OAAO,CAAC,aAAa,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;QACxE,CAAC;IACL,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;IAC1B,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,UAAU,EAAE,CAAC;YACd,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;QAC/B,CAAC;IACL,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IACjB,OAAO,wBAAM,KAAK,CAAC,QAAQ,GAAO,CAAC;AACvC,CAAC,CAAC","sourcesContent":["import { Vector2 } from \"core/Maths/math\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { FC, PropsWithChildren } from \"react\";\r\nimport { useEffect, useRef } from \"react\";\r\nimport { useDragLayer } from \"react-dnd\";\r\nexport interface IGraphContainerProps {\r\n    onNodeMoved: (id: string, x: number, y: number) => void;\r\n    id: string;\r\n}\r\n\r\n/**\r\n * This component contains all the nodes and handles their dragging\r\n * @param props properties\r\n * @returns graph node container element\r\n */\r\nexport const GraphNodesContainer: FC<PropsWithChildren<IGraphContainerProps>> = (props) => {\r\n    const lastDragPos = useRef<Nullable<Vector2>>(null);\r\n\r\n    const { currentOffset, item, isDragging } = useDragLayer((monitor) => ({\r\n        currentOffset: monitor.getSourceClientOffset(),\r\n        item: monitor.getItem(),\r\n        isDragging: monitor.isDragging(),\r\n    }));\r\n\r\n    useEffect(() => {\r\n        if (currentOffset && item) {\r\n            if (lastDragPos.current) {\r\n                const delta = new Vector2(currentOffset.x, currentOffset.y).subtract(lastDragPos.current);\r\n                props.onNodeMoved?.(item.id, delta.x, delta.y);\r\n            }\r\n            lastDragPos.current = new Vector2(currentOffset.x, currentOffset.y);\r\n        }\r\n    }, [currentOffset, item]);\r\n    useEffect(() => {\r\n        if (!isDragging) {\r\n            lastDragPos.current = null;\r\n        }\r\n    }, [isDragging]);\r\n    return <div>{props.children}</div>;\r\n};\r\n"]}
+{"version":3,"file":"GraphNodesContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphNodesContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAmC,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAMzC;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAgD,CAAC,KAAK,EAAE,EAAE;IACtF,MAAM,WAAW,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAEpD,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,YAAY,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;QACnE,aAAa,EAAE,OAAO,CAAC,qBAAqB,EAAE;QAC9C,IAAI,EAAE,OAAO,CAAC,OAAO,EAAE;QACvB,UAAU,EAAE,OAAO,CAAC,UAAU,EAAE;KACnC,CAAC,CAAC,CAAC;IAEJ,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,aAAa,IAAI,IAAI,EAAE,CAAC;YACxB,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;gBACtB,MAAM,KAAK,GAAG,IAAI,OAAO,CAAC,aAAa,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;gBAC1F,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;YACnD,CAAC;YACD,WAAW,CAAC,OAAO,GAAG,IAAI,OAAO,CAAC,aAAa,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;QACxE,CAAC;IACL,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;IAC1B,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,UAAU,EAAE,CAAC;YACd,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;QAC/B,CAAC;IACL,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IACjB,OAAO,wBAAM,KAAK,CAAC,QAAQ,GAAO,CAAC;AACvC,CAAC,CAAC","sourcesContent":["import { Vector2 } from \"core/Maths/math\";\r\nimport { type Nullable } from \"core/types\";\r\nimport { type FC, type PropsWithChildren, useEffect, useRef } from \"react\";\r\nimport { useDragLayer } from \"react-dnd\";\r\nexport interface IGraphContainerProps {\r\n    onNodeMoved: (id: string, x: number, y: number) => void;\r\n    id: string;\r\n}\r\n\r\n/**\r\n * This component contains all the nodes and handles their dragging\r\n * @param props properties\r\n * @returns graph node container element\r\n */\r\nexport const GraphNodesContainer: FC<PropsWithChildren<IGraphContainerProps>> = (props) => {\r\n    const lastDragPos = useRef<Nullable<Vector2>>(null);\r\n\r\n    const { currentOffset, item, isDragging } = useDragLayer((monitor) => ({\r\n        currentOffset: monitor.getSourceClientOffset(),\r\n        item: monitor.getItem(),\r\n        isDragging: monitor.isDragging(),\r\n    }));\r\n\r\n    useEffect(() => {\r\n        if (currentOffset && item) {\r\n            if (lastDragPos.current) {\r\n                const delta = new Vector2(currentOffset.x, currentOffset.y).subtract(lastDragPos.current);\r\n                props.onNodeMoved?.(item.id, delta.x, delta.y);\r\n            }\r\n            lastDragPos.current = new Vector2(currentOffset.x, currentOffset.y);\r\n        }\r\n    }, [currentOffset, item]);\r\n    useEffect(() => {\r\n        if (!isDragging) {\r\n            lastDragPos.current = null;\r\n        }\r\n    }, [isDragging]);\r\n    return <div>{props.children}</div>;\r\n};\r\n"]}