npm - @babylonjs/shared-ui-components - Versions diffs - 5.34.0 → 5.35.1 - Mend

@babylonjs/shared-ui-components 5.34.0 → 5.35.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (129) hide show

package/components/layout/FlexibleDragHandler.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlexibleDragHandler.js","sourceRoot":"","sources":["~~../../../../../../~~dev/sharedUiComponents/src/components/layout/FlexibleDragHandler.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FC } from \"react\";\r\nimport { useContext, useRef } from \"react\";\r\nimport { Vector2 } from \"core/Maths/math\";\r\nimport type { Nullable } from \"core/types\";\r\nimport { useDrop } from \"react-dnd\";\r\nimport { ElementTypes } from \"./types\";\r\nimport type { LayoutTabsRow, LayoutColumn } from \"./types\";\r\nimport { addPercentageStringToNumber, getPosInLayout } from \"./utils\";\r\nimport { LayoutContext } from \"./LayoutContext\";\r\nimport type { ResizeItem } from \"./FlexibleResizeBar\";\r\n\r\n/*\r\n Arguments for the DragHandler component.\r\n /\r\nexport interface IFlexibleDragHandlerProps {\r\n /\r\n The size of the containing element. Used to calculate the percentage of\r\n * space occupied by the component\r\n /\r\n containerSize: { width: number; height: number };\r\n}\r\n\r\n/\r\n This component receives the drop events and updates the layout accordingly\r\n /\r\nexport const FlexibleDragHandler: FC<IFlexibleDragHandlerProps> = (props) => {\r\n const { layout, setLayout } = useContext(LayoutContext);\r\n // CLICK/DRAG INFORMATION\r\n const pointerPos = useRef<Nullable<Vector2>>(null);\r\n const [_, drop] = useDrop(() => ({\r\n accept: [ElementTypes.RESIZE_BAR],\r\n hover(item, monitor) {\r\n const anyitem = item as ResizeItem;\r\n\r\n const xy = monitor.getClientOffset();\r\n const pos = new Vector2(xy!.x, xy!.y);\r\n if (pointerPos.current) {\r\n if (monitor.getItemType() === ElementTypes.RESIZE_BAR) {\r\n onResize(anyitem.rowNumber, anyitem.columnNumber, pos, pointerPos.current, anyitem.direction);\r\n }\r\n }\r\n pointerPos.current = pos;\r\n },\r\n drop(item, monitor) {\r\n pointerPos.current = null;\r\n },\r\n }));\r\n\r\n const getLayoutProperty = (layout: LayoutColumn \| LayoutTabsRow, property: \"width\" \| \"height\") => {\r\n if (property === \"width\") {\r\n return (layout as LayoutColumn)[property];\r\n } else {\r\n return (layout as LayoutTabsRow)[property];\r\n }\r\n };\r\n\r\n const setLayoutProperty = (layout: LayoutColumn \| LayoutTabsRow, property: \"width\" \| \"height\", value: string) => {\r\n if (property === \"width\") {\r\n (layout as LayoutColumn)[property] = value;\r\n } else {\r\n (layout as LayoutTabsRow)[property] = value;\r\n }\r\n };\r\n\r\n const processResize = (\r\n pos: Vector2,\r\n prevPos: Vector2,\r\n row0: number \| undefined,\r\n column0: number,\r\n row1: number \| undefined,\r\n column1: number,\r\n axis: \"x\" \| \"y\",\r\n maxAxisValue: number,\r\n property: \"width\" \| \"height\",\r\n minFinalValue: number\r\n ) => {\r\n // Check axis difference\r\n const axisDiff = pos[axis] - prevPos[axis];\r\n\r\n try {\r\n // Get layout rows\r\n const layoutElement0 = getPosInLayout(layout, column0, row0);\r\n const layoutElement1 = getPosInLayout(layout, column1, row1);\r\n\r\n if (layoutElement0 && layoutElement1) {\r\n const percDiff = (axisDiff / maxAxisValue) 100;\r\n\r\n const newValue0 = addPercentageStringToNumber(getLayoutProperty(layoutElement0, property), percDiff);\r\n const newValue1 = addPercentageStringToNumber(getLayoutProperty(layoutElement1, property), -percDiff);\r\n\r\n if (newValue0 >= minFinalValue && newValue1 >= minFinalValue) {\r\n setLayoutProperty(layoutElement0, property, newValue0.toFixed(2) + \"%\");\r\n setLayoutProperty(layoutElement1, property, newValue1.toFixed(2) + \"%\");\r\n }\r\n\r\n setLayout({ ...layout });\r\n }\r\n } catch (e) {\r\n // If an error occurred, we're trying to resize something invalid, so don't do anything\r\n return;\r\n }\r\n };\r\n\r\n const processResizeRow = (pos: Vector2, prevPos: Vector2, args: { row: number; column: number }) => {\r\n processResize(pos, prevPos, args.row, args.column, args.row + 1, args.column, \"y\", props.containerSize.height, \"height\", 5);\r\n };\r\n\r\n const processResizeColumn = (pos: Vector2, prevPos: Vector2, args: { row: number; column: number }) => {\r\n processResize(pos, prevPos, undefined, args.column, undefined, args.column + 1, \"x\", props.containerSize.width, \"width\", 5);\r\n };\r\n\r\n const onResize = (row: number, column: number, pos: Vector2, prevPos: Vector2, type: \"row\" \| \"column\") => {\r\n if (type === \"row\") {\r\n processResizeRow(pos, prevPos, { row, column });\r\n } else {\r\n processResizeColumn(pos, prevPos, { row, column });\r\n }\r\n pointerPos.current = pos;\r\n };\r\n\r\n return (\r\n <div ref={drop} style={{ width: \"100%\", height: \"100%\" }}>\r\n {props.children}\r\n </div>\r\n );\r\n};\r\n"]}
1	+ {"version":3,"file":"FlexibleDragHandler.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleDragHandler.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FC } from \"react\";\r\nimport { useContext, useRef } from \"react\";\r\nimport { Vector2 } from \"core/Maths/math\";\r\nimport type { Nullable } from \"core/types\";\r\nimport { useDrop } from \"react-dnd\";\r\nimport { ElementTypes } from \"./types\";\r\nimport type { LayoutTabsRow, LayoutColumn } from \"./types\";\r\nimport { addPercentageStringToNumber, getPosInLayout } from \"./utils\";\r\nimport { LayoutContext } from \"./LayoutContext\";\r\nimport type { ResizeItem } from \"./FlexibleResizeBar\";\r\n\r\n/*\r\n Arguments for the DragHandler component.\r\n /\r\nexport interface IFlexibleDragHandlerProps {\r\n /\r\n The size of the containing element. Used to calculate the percentage of\r\n * space occupied by the component\r\n /\r\n containerSize: { width: number; height: number };\r\n}\r\n\r\n/\r\n This component receives the drop events and updates the layout accordingly\r\n /\r\nexport const FlexibleDragHandler: FC<IFlexibleDragHandlerProps> = (props) => {\r\n const { layout, setLayout } = useContext(LayoutContext);\r\n // CLICK/DRAG INFORMATION\r\n const pointerPos = useRef<Nullable<Vector2>>(null);\r\n const [_, drop] = useDrop(() => ({\r\n accept: [ElementTypes.RESIZE_BAR],\r\n hover(item, monitor) {\r\n const anyitem = item as ResizeItem;\r\n\r\n const xy = monitor.getClientOffset();\r\n const pos = new Vector2(xy!.x, xy!.y);\r\n if (pointerPos.current) {\r\n if (monitor.getItemType() === ElementTypes.RESIZE_BAR) {\r\n onResize(anyitem.rowNumber, anyitem.columnNumber, pos, pointerPos.current, anyitem.direction);\r\n }\r\n }\r\n pointerPos.current = pos;\r\n },\r\n drop(item, monitor) {\r\n pointerPos.current = null;\r\n },\r\n }));\r\n\r\n const getLayoutProperty = (layout: LayoutColumn \| LayoutTabsRow, property: \"width\" \| \"height\") => {\r\n if (property === \"width\") {\r\n return (layout as LayoutColumn)[property];\r\n } else {\r\n return (layout as LayoutTabsRow)[property];\r\n }\r\n };\r\n\r\n const setLayoutProperty = (layout: LayoutColumn \| LayoutTabsRow, property: \"width\" \| \"height\", value: string) => {\r\n if (property === \"width\") {\r\n (layout as LayoutColumn)[property] = value;\r\n } else {\r\n (layout as LayoutTabsRow)[property] = value;\r\n }\r\n };\r\n\r\n const processResize = (\r\n pos: Vector2,\r\n prevPos: Vector2,\r\n row0: number \| undefined,\r\n column0: number,\r\n row1: number \| undefined,\r\n column1: number,\r\n axis: \"x\" \| \"y\",\r\n maxAxisValue: number,\r\n property: \"width\" \| \"height\",\r\n minFinalValue: number\r\n ) => {\r\n // Check axis difference\r\n const axisDiff = pos[axis] - prevPos[axis];\r\n\r\n try {\r\n // Get layout rows\r\n const layoutElement0 = getPosInLayout(layout, column0, row0);\r\n const layoutElement1 = getPosInLayout(layout, column1, row1);\r\n\r\n if (layoutElement0 && layoutElement1) {\r\n const percDiff = (axisDiff / maxAxisValue) 100;\r\n\r\n const newValue0 = addPercentageStringToNumber(getLayoutProperty(layoutElement0, property), percDiff);\r\n const newValue1 = addPercentageStringToNumber(getLayoutProperty(layoutElement1, property), -percDiff);\r\n\r\n if (newValue0 >= minFinalValue && newValue1 >= minFinalValue) {\r\n setLayoutProperty(layoutElement0, property, newValue0.toFixed(2) + \"%\");\r\n setLayoutProperty(layoutElement1, property, newValue1.toFixed(2) + \"%\");\r\n }\r\n\r\n setLayout({ ...layout });\r\n }\r\n } catch (e) {\r\n // If an error occurred, we're trying to resize something invalid, so don't do anything\r\n return;\r\n }\r\n };\r\n\r\n const processResizeRow = (pos: Vector2, prevPos: Vector2, args: { row: number; column: number }) => {\r\n processResize(pos, prevPos, args.row, args.column, args.row + 1, args.column, \"y\", props.containerSize.height, \"height\", 5);\r\n };\r\n\r\n const processResizeColumn = (pos: Vector2, prevPos: Vector2, args: { row: number; column: number }) => {\r\n processResize(pos, prevPos, undefined, args.column, undefined, args.column + 1, \"x\", props.containerSize.width, \"width\", 5);\r\n };\r\n\r\n const onResize = (row: number, column: number, pos: Vector2, prevPos: Vector2, type: \"row\" \| \"column\") => {\r\n if (type === \"row\") {\r\n processResizeRow(pos, prevPos, { row, column });\r\n } else {\r\n processResizeColumn(pos, prevPos, { row, column });\r\n }\r\n pointerPos.current = pos;\r\n };\r\n\r\n return (\r\n <div ref={drop} style={{ width: \"100%\", height: \"100%\" }}>\r\n {props.children}\r\n </div>\r\n );\r\n};\r\n"]}

package/components/layout/FlexibleDropZone.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlexibleDropZone.js","sourceRoot":"","sources":["~~../../../../../../~~dev/sharedUiComponents/src/components/layout/FlexibleDropZone.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,iCAAiC,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAgB3C;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAA+B,CAAC,KAAK,EAAE,EAAE;IAClE,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 } from \"react\";\r\nimport style from \"./FlexibleDropZone.modules.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 */\r\nexport const FlexibleDropZone: FC<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"]}
1	+ {"version":3,"file":"FlexibleDropZone.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleDropZone.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,iCAAiC,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAgB3C;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAA+B,CAAC,KAAK,EAAE,EAAE;IAClE,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 } from \"react\";\r\nimport style from \"./FlexibleDropZone.modules.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 */\r\nexport const FlexibleDropZone: FC<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.js.map CHANGED Viewed

	@@ -1 +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,MAAM,sCAAsC,CAAC;AAOzD;;GAEG;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 style from \"./FlexibleGridContainer.modules.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 */\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"]}
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,MAAM,sCAAsC,CAAC;AAOzD;;GAEG;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 style from \"./FlexibleGridContainer.modules.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 */\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.js.map CHANGED Viewed

	@@ -1 +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;;;GAGG;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;YACtB,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;SACpE;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 */\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"]}
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;;;GAGG;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;YACtB,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;SACpE;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 */\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.js.map CHANGED Viewed

	@@ -1 +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,MAAM,kCAAkC,CAAC;AAsCrD;;GAEG;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 style from \"./FlexibleResizeBar.modules.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 */\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"]}
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,MAAM,kCAAkC,CAAC;AAsCrD;;GAEG;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 style from \"./FlexibleResizeBar.modules.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 */\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.js.map CHANGED Viewed

	@@ -1 +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,MAAM,4BAA4B,CAAC;AA4B/C;;;;;GAKG;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 style from \"./FlexibleTab.modules.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 */\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"]}
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,MAAM,4BAA4B,CAAC;AA4B/C;;;;;GAKG;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 style from \"./FlexibleTab.modules.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 */\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.js.map CHANGED Viewed

	@@ -1 +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 style from \"./FlexibleTabsContainer.modules.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 */\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"]}
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 style from \"./FlexibleTabsContainer.modules.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 */\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.js.map CHANGED Viewed

	@@ -1 +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"]}
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"]}

package/components/layout/types.js.map CHANGED Viewed

	@@ -1 +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"]}
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"]}

package/components/layout/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sourceRoot":"","sources":["~~../../../../../../~~dev/sharedUiComponents/src/components/layout/utils.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAc,EAAE,MAAc,EAAE,GAAY,EAAgC,EAAE;IACzG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;QACjB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;KAChE;IACD,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,CAAC,YAAY,EAAE;QACf,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;KAChE;IACD,IAAI,GAAG,KAAK,SAAS,EAAE;QACnB,OAAO,YAAY,CAAC;KACvB;IACD,OAAO,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClC,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,yCAAyC,GAAG,CAAC,MAAc,EAAE,MAAc,EAAE,GAAW,EAAE,EAAE;IACrG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;QACjB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;KAChE;IACD,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,CAAC,YAAY,EAAE;QACf,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;KAChE;IACD,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACzC,IAAI,CAAC,SAAS,EAAE;QACZ,MAAM,IAAI,KAAK,CAAC,wCAAwC,CAAC,CAAC;KAC7D;IACD,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC;IACnC,IAAI,SAAS,KAAK,SAAS,EAAE;QACzB,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAC;KAC/D;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;;GAEG;AACH,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;;;GAGG;AACH,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\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\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 /\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 */\r\nexport const parsePercentage = (p: string): number => {\r\n return Number.parseFloat(p.replace(\"%\", \"\"));\r\n};\r\n"]}
1	+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/utils.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAc,EAAE,MAAc,EAAE,GAAY,EAAgC,EAAE;IACzG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;QACjB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;KAChE;IACD,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,CAAC,YAAY,EAAE;QACf,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;KAChE;IACD,IAAI,GAAG,KAAK,SAAS,EAAE;QACnB,OAAO,YAAY,CAAC;KACvB;IACD,OAAO,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClC,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,yCAAyC,GAAG,CAAC,MAAc,EAAE,MAAc,EAAE,GAAW,EAAE,EAAE;IACrG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;QACjB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;KAChE;IACD,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,CAAC,YAAY,EAAE;QACf,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;KAChE;IACD,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACzC,IAAI,CAAC,SAAS,EAAE;QACZ,MAAM,IAAI,KAAK,CAAC,wCAAwC,CAAC,CAAC;KAC7D;IACD,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC;IACnC,IAAI,SAAS,KAAK,SAAS,EAAE;QACzB,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAC;KAC/D;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;;GAEG;AACH,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;;;GAGG;AACH,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\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\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 /\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 */\r\nexport const parsePercentage = (p: string): number => {\r\n return Number.parseFloat(p.replace(\"%\", \"\"));\r\n};\r\n"]}

package/components/lines/ColorLineComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorLineComponent.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/components/lines/ColorLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\nimport { NumericInputComponent } from \"./NumericInputComponent\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faMinus, faPlus } from \"@fortawesome/free-solid-svg-icons\";\r\nimport type { PropertyChangedEvent } from \"../../propertyChangedEvent\";\r\nimport { ColorPickerLineComponent } from \"./ColorPickerLineComponent\";\r\nimport type { LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\nimport style from \"./ColorLineComponent.modules.scss\";\r\n\r\nimport copyIcon from \"../../imgs/copy.svg\";\r\nimport { JoinClassNames } from \"../classNames\";\r\nconst emptyColor = new Color4(0, 0, 0, 0);\r\n\r\nexport interface IColorLineComponentProps {\r\n label: string;\r\n target: any;\r\n propertyName: string;\r\n onPropertyChangedObservable: Observable<PropertyChangedEvent>;\r\n onChange?: () => void;\r\n isLinear?: boolean;\r\n icon?: string;\r\n iconLabel?: string;\r\n disableAlpha?: boolean;\r\n lockObject: LockObject;\r\n}\r\n\r\ninterface IColorLineComponentState {\r\n isExpanded: boolean;\r\n color: Color4;\r\n}\r\n\r\nexport class ColorLineComponent extends React.Component<IColorLineComponentProps, IColorLineComponentState> {\r\n constructor(props: IColorLineComponentProps) {\r\n super(props);\r\n\r\n this.state = { isExpanded: false, color: this.getValue() };\r\n\r\n const target = this.props.target;\r\n target._isLinearColor = props.isLinear; // so that replayRecorder can append toLinearSpace() as appropriate\r\n }\r\n\r\n shouldComponentUpdate(nextProps: IColorLineComponentProps, nextState: IColorLineComponentState) {\r\n const stateColor = nextState.color;\r\n const propsColor = this.getValue(nextProps);\r\n if (stateColor !== this.state.color) {\r\n nextState.color = stateColor;\r\n return true;\r\n }\r\n if (propsColor !== this.state.color) {\r\n nextState.color = propsColor;\r\n return true;\r\n }\r\n if (nextState.isExpanded !== this.state.isExpanded) {\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n getValue(props = this.props): Color4 {\r\n const target = props.target;\r\n const property = target[props.propertyName];\r\n if (!property) return emptyColor;\r\n if (typeof property === \"string\") {\r\n // if (property === conflictingValuesPlaceholder) {\r\n // return emptyColor;\r\n // }\r\n return this._convertToColor(property);\r\n } else {\r\n if (props.isLinear) {\r\n return property.toGammaSpace();\r\n }\r\n return property.clone();\r\n }\r\n }\r\n\r\n setColorFromString(colorString: string) {\r\n const color = this._convertToColor(colorString);\r\n this.setColor(color);\r\n }\r\n\r\n setColor(newColor: Color4) {\r\n this.setState({ color: newColor.clone() });\r\n if (this.props.isLinear) {\r\n newColor.toLinearSpaceToRef(newColor);\r\n }\r\n // whether to set properties to color3 or color4\r\n const setColor = this.props.disableAlpha ? this._toColor3(newColor) : newColor;\r\n\r\n const target = this.props.target;\r\n const initialValue = target[this.props.propertyName];\r\n const value = typeof target[this.props.propertyName] === \"string\" ? setColor.toHexString() : setColor;\r\n // make the change\r\n target[this.props.propertyName] = value;\r\n // notify observers\r\n if (this.props.onPropertyChangedObservable) {\r\n this.props.onPropertyChangedObservable.notifyObservers({\r\n object: target,\r\n property: this.props.propertyName,\r\n value,\r\n initialValue,\r\n });\r\n }\r\n\r\n if (this.props.onChange) {\r\n this.props.onChange();\r\n }\r\n }\r\n\r\n switchExpandState() {\r\n this.setState({ isExpanded: !this.state.isExpanded });\r\n }\r\n\r\n updateStateR(value: number) {\r\n this.setColor(new Color4(value, this.state.color.g, this.state.color.b, this.state.color.a));\r\n }\r\n\r\n updateStateG(value: number) {\r\n this.setColor(new Color4(this.state.color.r, value, this.state.color.b, this.state.color.a));\r\n }\r\n\r\n updateStateB(value: number) {\r\n this.setColor(new Color4(this.state.color.r, this.state.color.g, value, this.state.color.a));\r\n }\r\n\r\n updateStateA(value: number) {\r\n if (this.props.disableAlpha) {\r\n return;\r\n }\r\n this.setColor(new Color4(this.state.color.r, this.state.color.g, this.state.color.b, value));\r\n }\r\n\r\n copyToClipboard() {\r\n const element = document.createElement(\"div\");\r\n element.textContent = this.state.color.toHexString();\r\n document.body.appendChild(element);\r\n\r\n if (window.getSelection) {\r\n const range = document.createRange();\r\n range.selectNode(element);\r\n window.getSelection()!.removeAllRanges();\r\n window.getSelection()!.addRange(range);\r\n }\r\n\r\n document.execCommand(\"copy\");\r\n element.remove();\r\n }\r\n\r\n private _convertToColor(color: string): Color4 {\r\n if (color === \"\" \|\| color === \"transparent\") {\r\n return emptyColor;\r\n }\r\n\r\n if (color.substring(0, 1) !== \"#\" \|\| (color.length !== 7 && color.length !== 9)) {\r\n const d = document.createElement(\"div\");\r\n d.style.color = color;\r\n document.body.append(d);\r\n const rgb = window.getComputedStyle(d).color;\r\n document.body.removeChild(d);\r\n\r\n const rgbArray = rgb\r\n .substring(4, rgb.length - 1)\r\n .replace(/ /g, \"\")\r\n .split(\",\");\r\n\r\n const alpha = rgbArray.length > 3 ? parseInt(rgbArray[3]) / 255 : 1.0;\r\n\r\n return new Color4(parseInt(rgbArray[0]) / 255, parseInt(rgbArray[1]) / 255, parseInt(rgbArray[2]) / 255, alpha);\r\n }\r\n\r\n if (this.props.disableAlpha) {\r\n const color3 = Color3.FromHexString(color);\r\n return new Color4(color3.r, color3.g, color3.b, 1.0);\r\n }\r\n\r\n return Color4.FromHexString(color);\r\n }\r\n\r\n private _toColor3(color: Color4) {\r\n return new Color3(color.r, color.g, color.b);\r\n }\r\n\r\n render() {\r\n const chevron = this.state.isExpanded ? <FontAwesomeIcon icon={faMinus} /> : <FontAwesomeIcon icon={faPlus} />;\r\n\r\n return (\r\n <div className={style.color3Line}>\r\n <div className={style.firstLine}>\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.label} title={this.props.label}>\r\n {this.props.label}\r\n </div>\r\n <div className={style.color3}>\r\n <ColorPickerLineComponent\r\n lockObject={this.props.lockObject}\r\n linearHint={this.props.isLinear}\r\n value={this.props.disableAlpha ? this._toColor3(this.state.color) : this.state.color}\r\n onColorChanged={(colorString) => {\r\n this.setColorFromString(colorString);\r\n }}\r\n />\r\n </div>\r\n <div className={JoinClassNames(style, \"copy\", \"hoverIcon\")} onClick={() => this.copyToClipboard()} title=\"Copy to clipboard\">\r\n <img src={copyIcon} alt=\"Copy\" />\r\n </div>\r\n <div className={JoinClassNames(\"expand\", \"hoverIcon\")} onClick={() => this.switchExpandState()} title=\"Expand\">\r\n {chevron}\r\n </div>\r\n </div>\r\n {this.state.isExpanded && (\r\n <div className={style.secondLine}>\r\n <NumericInputComponent lockObject={this.props.lockObject} label=\"r\" value={this.state.color.r} onChange={(value) => this.updateStateR(value)} />\r\n <NumericInputComponent lockObject={this.props.lockObject} label=\"g\" value={this.state.color.g} onChange={(value) => this.updateStateG(value)} />\r\n <NumericInputComponent lockObject={this.props.lockObject} label=\"b\" value={this.state.color.b} onChange={(value) => this.updateStateB(value)} />\r\n {this.props.disableAlpha \|\| (\r\n <NumericInputComponent lockObject={this.props.lockObject} label=\"a\" value={this.state.color.a} onChange={(value) => this.updateStateA(value)} />\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"ColorLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/lines/ColorLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\nimport { NumericInputComponent } from \"./NumericInputComponent\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faMinus, faPlus } from \"@fortawesome/free-solid-svg-icons\";\r\nimport type { PropertyChangedEvent } from \"../../propertyChangedEvent\";\r\nimport { ColorPickerLineComponent } from \"./ColorPickerLineComponent\";\r\nimport type { LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\nimport style from \"./ColorLineComponent.modules.scss\";\r\n\r\nimport copyIcon from \"../../imgs/copy.svg\";\r\nimport { JoinClassNames } from \"../classNames\";\r\nconst emptyColor = new Color4(0, 0, 0, 0);\r\n\r\nexport interface IColorLineComponentProps {\r\n label: string;\r\n target: any;\r\n propertyName: string;\r\n onPropertyChangedObservable: Observable<PropertyChangedEvent>;\r\n onChange?: () => void;\r\n isLinear?: boolean;\r\n icon?: string;\r\n iconLabel?: string;\r\n disableAlpha?: boolean;\r\n lockObject: LockObject;\r\n}\r\n\r\ninterface IColorLineComponentState {\r\n isExpanded: boolean;\r\n color: Color4;\r\n}\r\n\r\nexport class ColorLineComponent extends React.Component<IColorLineComponentProps, IColorLineComponentState> {\r\n constructor(props: IColorLineComponentProps) {\r\n super(props);\r\n\r\n this.state = { isExpanded: false, color: this.getValue() };\r\n\r\n const target = this.props.target;\r\n target._isLinearColor = props.isLinear; // so that replayRecorder can append toLinearSpace() as appropriate\r\n }\r\n\r\n shouldComponentUpdate(nextProps: IColorLineComponentProps, nextState: IColorLineComponentState) {\r\n const stateColor = nextState.color;\r\n const propsColor = this.getValue(nextProps);\r\n if (stateColor !== this.state.color) {\r\n nextState.color = stateColor;\r\n return true;\r\n }\r\n if (propsColor !== this.state.color) {\r\n nextState.color = propsColor;\r\n return true;\r\n }\r\n if (nextState.isExpanded !== this.state.isExpanded) {\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n getValue(props = this.props): Color4 {\r\n const target = props.target;\r\n const property = target[props.propertyName];\r\n if (!property) return emptyColor;\r\n if (typeof property === \"string\") {\r\n // if (property === conflictingValuesPlaceholder) {\r\n // return emptyColor;\r\n // }\r\n return this._convertToColor(property);\r\n } else {\r\n if (props.isLinear) {\r\n return property.toGammaSpace();\r\n }\r\n return property.clone();\r\n }\r\n }\r\n\r\n setColorFromString(colorString: string) {\r\n const color = this._convertToColor(colorString);\r\n this.setColor(color);\r\n }\r\n\r\n setColor(newColor: Color4) {\r\n this.setState({ color: newColor.clone() });\r\n if (this.props.isLinear) {\r\n newColor.toLinearSpaceToRef(newColor);\r\n }\r\n // whether to set properties to color3 or color4\r\n const setColor = this.props.disableAlpha ? this._toColor3(newColor) : newColor;\r\n\r\n const target = this.props.target;\r\n const initialValue = target[this.props.propertyName];\r\n const value = typeof target[this.props.propertyName] === \"string\" ? setColor.toHexString() : setColor;\r\n // make the change\r\n target[this.props.propertyName] = value;\r\n // notify observers\r\n if (this.props.onPropertyChangedObservable) {\r\n this.props.onPropertyChangedObservable.notifyObservers({\r\n object: target,\r\n property: this.props.propertyName,\r\n value,\r\n initialValue,\r\n });\r\n }\r\n\r\n if (this.props.onChange) {\r\n this.props.onChange();\r\n }\r\n }\r\n\r\n switchExpandState() {\r\n this.setState({ isExpanded: !this.state.isExpanded });\r\n }\r\n\r\n updateStateR(value: number) {\r\n this.setColor(new Color4(value, this.state.color.g, this.state.color.b, this.state.color.a));\r\n }\r\n\r\n updateStateG(value: number) {\r\n this.setColor(new Color4(this.state.color.r, value, this.state.color.b, this.state.color.a));\r\n }\r\n\r\n updateStateB(value: number) {\r\n this.setColor(new Color4(this.state.color.r, this.state.color.g, value, this.state.color.a));\r\n }\r\n\r\n updateStateA(value: number) {\r\n if (this.props.disableAlpha) {\r\n return;\r\n }\r\n this.setColor(new Color4(this.state.color.r, this.state.color.g, this.state.color.b, value));\r\n }\r\n\r\n copyToClipboard() {\r\n const element = document.createElement(\"div\");\r\n element.textContent = this.state.color.toHexString();\r\n document.body.appendChild(element);\r\n\r\n if (window.getSelection) {\r\n const range = document.createRange();\r\n range.selectNode(element);\r\n window.getSelection()!.removeAllRanges();\r\n window.getSelection()!.addRange(range);\r\n }\r\n\r\n document.execCommand(\"copy\");\r\n element.remove();\r\n }\r\n\r\n private _convertToColor(color: string): Color4 {\r\n if (color === \"\" \|\| color === \"transparent\") {\r\n return emptyColor;\r\n }\r\n\r\n if (color.substring(0, 1) !== \"#\" \|\| (color.length !== 7 && color.length !== 9)) {\r\n const d = document.createElement(\"div\");\r\n d.style.color = color;\r\n document.body.append(d);\r\n const rgb = window.getComputedStyle(d).color;\r\n document.body.removeChild(d);\r\n\r\n const rgbArray = rgb\r\n .substring(4, rgb.length - 1)\r\n .replace(/ /g, \"\")\r\n .split(\",\");\r\n\r\n const alpha = rgbArray.length > 3 ? parseInt(rgbArray[3]) / 255 : 1.0;\r\n\r\n return new Color4(parseInt(rgbArray[0]) / 255, parseInt(rgbArray[1]) / 255, parseInt(rgbArray[2]) / 255, alpha);\r\n }\r\n\r\n if (this.props.disableAlpha) {\r\n const color3 = Color3.FromHexString(color);\r\n return new Color4(color3.r, color3.g, color3.b, 1.0);\r\n }\r\n\r\n return Color4.FromHexString(color);\r\n }\r\n\r\n private _toColor3(color: Color4) {\r\n return new Color3(color.r, color.g, color.b);\r\n }\r\n\r\n render() {\r\n const chevron = this.state.isExpanded ? <FontAwesomeIcon icon={faMinus} /> : <FontAwesomeIcon icon={faPlus} />;\r\n\r\n return (\r\n <div className={style.color3Line}>\r\n <div className={style.firstLine}>\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.label} title={this.props.label}>\r\n {this.props.label}\r\n </div>\r\n <div className={style.color3}>\r\n <ColorPickerLineComponent\r\n lockObject={this.props.lockObject}\r\n linearHint={this.props.isLinear}\r\n value={this.props.disableAlpha ? this._toColor3(this.state.color) : this.state.color}\r\n onColorChanged={(colorString) => {\r\n this.setColorFromString(colorString);\r\n }}\r\n />\r\n </div>\r\n <div className={JoinClassNames(style, \"copy\", \"hoverIcon\")} onClick={() => this.copyToClipboard()} title=\"Copy to clipboard\">\r\n <img src={copyIcon} alt=\"Copy\" />\r\n </div>\r\n <div className={JoinClassNames(\"expand\", \"hoverIcon\")} onClick={() => this.switchExpandState()} title=\"Expand\">\r\n {chevron}\r\n </div>\r\n </div>\r\n {this.state.isExpanded && (\r\n <div className={style.secondLine}>\r\n <NumericInputComponent lockObject={this.props.lockObject} label=\"r\" value={this.state.color.r} onChange={(value) => this.updateStateR(value)} />\r\n <NumericInputComponent lockObject={this.props.lockObject} label=\"g\" value={this.state.color.g} onChange={(value) => this.updateStateG(value)} />\r\n <NumericInputComponent lockObject={this.props.lockObject} label=\"b\" value={this.state.color.b} onChange={(value) => this.updateStateB(value)} />\r\n {this.props.disableAlpha \|\| (\r\n <NumericInputComponent lockObject={this.props.lockObject} label=\"a\" value={this.state.color.a} onChange={(value) => this.updateStateA(value)} />\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}

package/components/lines/ColorPickerLineComponent.js.map CHANGED Viewed

	@@ -1 +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 { ColorPicker } from \"../colorPicker/ColorPicker\";\r\nimport type { LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\nimport style from \"./ColorPickerLineComponent.modules.scss\";\r\n\r\nexport interface IColorPickerComponentProps {\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<IColorPickerComponentProps, 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: IColorPickerComponentProps) {\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 shouldComponentUpdate(nextProps: IColorPickerComponentProps, 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 componentDidUpdate() {\r\n this.syncPositions();\r\n }\r\n\r\n componentDidMount() {\r\n this.syncPositions();\r\n }\r\n\r\n 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 <ColorPicker\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"]}
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 { ColorPicker } from \"../colorPicker/ColorPicker\";\r\nimport type { LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\nimport style from \"./ColorPickerLineComponent.modules.scss\";\r\n\r\nexport interface IColorPickerComponentProps {\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<IColorPickerComponentProps, 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: IColorPickerComponentProps) {\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 shouldComponentUpdate(nextProps: IColorPickerComponentProps, 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 componentDidUpdate() {\r\n this.syncPositions();\r\n }\r\n\r\n componentDidMount() {\r\n this.syncPositions();\r\n }\r\n\r\n 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 <ColorPicker\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/FileButtonLineComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileButtonLineComponent.js","sourceRoot":"","sources":["~~../../../../../../~~dev/sharedUiComponents/src/components/lines/FileButtonLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,wCAAwC,CAAC;AAU5D,MAAM,OAAO,uBAAwB,SAAQ,KAAK,CAAC,SAAwC;IAKvF,YAAY,KAAoC;QAC5C,KAAK,CAAC,KAAK,CAAC,CAAC;QAJT,QAAG,GAAG,uBAAuB,CAAC,YAAY,EAAE,CAAC;QAKjD,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IAC7C,CAAC;IAED,QAAQ,CAAC,GAAQ;QACb,MAAM,KAAK,GAAW,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC;QACvC,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE;YACvB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;SAChC;QAED,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;IAC1B,CAAC;IAED,MAAM;QACF,OAAO,CACH,eAAK,SAAS,EAAE,MAAM,CAAC,UAAU,aAC5B,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,GAAI,EACzG,gBAAO,OAAO,EAAE,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,YACjE,IAAI,CAAC,KAAK,CAAC,KAAK,GACb,EACR,gBAAO,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,EAAE,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAI,IAC9I,CACT,CAAC;IACN,CAAC;;AA5Bc,oCAAY,GAAG,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\r\nimport styles from \"./FileButtonLineComponent.modules.scss\";\r\n\r\nexport interface IFileButtonLineComponentProps {\r\n label: string;\r\n onClick: (file: File) => void;\r\n accept: string;\r\n icon?: string;\r\n iconLabel?: string;\r\n}\r\n\r\nexport class FileButtonLineComponent extends React.Component<IFileButtonLineComponentProps> {\r\n private static _IDGenerator = 0;\r\n private _id = FileButtonLineComponent._IDGenerator++;\r\n private _uploadInputRef: React.RefObject<HTMLInputElement>;\r\n\r\n constructor(props: IFileButtonLineComponentProps) {\r\n super(props);\r\n this._uploadInputRef = React.createRef();\r\n }\r\n\r\n onChange(evt: any) {\r\n const files: File[] = evt.target.files;\r\n if (files && files.length) {\r\n this.props.onClick(files[0]);\r\n }\r\n\r\n evt.target.value = \"\";\r\n }\r\n\r\n render() {\r\n return (\r\n <div className={styles.buttonLine}>\r\n {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} />}\r\n <label htmlFor={\"file-upload\" + this._id} className={styles.fileUpload}>\r\n {this.props.label}\r\n </label>\r\n <input ref={this._uploadInputRef} id={\"file-upload\" + this._id} type=\"file\" accept={this.props.accept} onChange={(evt) => this.onChange(evt)} />\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"FileButtonLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/lines/FileButtonLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,wCAAwC,CAAC;AAU5D,MAAM,OAAO,uBAAwB,SAAQ,KAAK,CAAC,SAAwC;IAKvF,YAAY,KAAoC;QAC5C,KAAK,CAAC,KAAK,CAAC,CAAC;QAJT,QAAG,GAAG,uBAAuB,CAAC,YAAY,EAAE,CAAC;QAKjD,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IAC7C,CAAC;IAED,QAAQ,CAAC,GAAQ;QACb,MAAM,KAAK,GAAW,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC;QACvC,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE;YACvB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;SAChC;QAED,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;IAC1B,CAAC;IAED,MAAM;QACF,OAAO,CACH,eAAK,SAAS,EAAE,MAAM,CAAC,UAAU,aAC5B,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,GAAI,EACzG,gBAAO,OAAO,EAAE,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,YACjE,IAAI,CAAC,KAAK,CAAC,KAAK,GACb,EACR,gBAAO,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,EAAE,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAI,IAC9I,CACT,CAAC;IACN,CAAC;;AA5Bc,oCAAY,GAAG,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\r\nimport styles from \"./FileButtonLineComponent.modules.scss\";\r\n\r\nexport interface IFileButtonLineComponentProps {\r\n label: string;\r\n onClick: (file: File) => void;\r\n accept: string;\r\n icon?: string;\r\n iconLabel?: string;\r\n}\r\n\r\nexport class FileButtonLineComponent extends React.Component<IFileButtonLineComponentProps> {\r\n private static _IDGenerator = 0;\r\n private _id = FileButtonLineComponent._IDGenerator++;\r\n private _uploadInputRef: React.RefObject<HTMLInputElement>;\r\n\r\n constructor(props: IFileButtonLineComponentProps) {\r\n super(props);\r\n this._uploadInputRef = React.createRef();\r\n }\r\n\r\n onChange(evt: any) {\r\n const files: File[] = evt.target.files;\r\n if (files && files.length) {\r\n this.props.onClick(files[0]);\r\n }\r\n\r\n evt.target.value = \"\";\r\n }\r\n\r\n render() {\r\n return (\r\n <div className={styles.buttonLine}>\r\n {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} />}\r\n <label htmlFor={\"file-upload\" + this._id} className={styles.fileUpload}>\r\n {this.props.label}\r\n </label>\r\n <input ref={this._uploadInputRef} id={\"file-upload\" + this._id} type=\"file\" accept={this.props.accept} onChange={(evt) => this.onChange(evt)} />\r\n </div>\r\n );\r\n }\r\n}\r\n"]}

package/components/lines/NumericInputComponent.js.map CHANGED Viewed

	@@ -1 +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 style from \"./NumericInputComponent.modules.scss\";\r\n\r\ninterface INumericInputComponentProps {\r\n label: 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 componentWillUnmount() {\r\n if (this.props.lockObject) {\r\n this.props.lockObject.lock = false;\r\n }\r\n }\r\n\r\n 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 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.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"]}
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 style from \"./NumericInputComponent.modules.scss\";\r\n\r\ninterface INumericInputComponentProps {\r\n label: 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 componentWillUnmount() {\r\n if (this.props.lockObject) {\r\n this.props.lockObject.lock = false;\r\n }\r\n }\r\n\r\n 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 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.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 CHANGED Viewed

	@@ -1 +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,MAAM,qCAAqC,CAAC;AAsBxD;;;GAGG;AACH,IAAK,YAGJ;AAHD,WAAK,YAAY;IACb,qDAAW,CAAA;IACX,mDAAU,CAAA;AACd,CAAC,EAHI,YAAY,KAAZ,YAAY,QAGhB;AAED,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAExC,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,aAAa,EAAE;YACpC,cAAc,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;SACvC;aAAM;YACH,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SAC5C;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,MAAA,KAAK,CAAC,aAAa,sDAAG,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,iBAA4B,KAAK,EAAE,aAAa,YAC3C,MAAA,KAAK,CAAC,aAAa,mCAAI,QAAQ,IADvB,aAAa,CAEjB,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 style from \"./OptionsLineComponent.modules.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"]}
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,MAAM,qCAAqC,CAAC;AAsBxD;;;GAGG;AACH,IAAK,YAGJ;AAHD,WAAK,YAAY;IACb,qDAAW,CAAA;IACX,mDAAU,CAAA;AACd,CAAC,EAHI,YAAY,KAAZ,YAAY,QAGhB;AAED,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAExC,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,aAAa,EAAE;YACpC,cAAc,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;SACvC;aAAM;YACH,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SAC5C;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,MAAA,KAAK,CAAC,aAAa,sDAAG,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,iBAA4B,KAAK,EAAE,aAAa,YAC3C,MAAA,KAAK,CAAC,aAAa,mCAAI,QAAQ,IADvB,aAAa,CAEjB,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 style from \"./OptionsLineComponent.modules.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/reactGraphSystem/GraphConnectorHandle.js.map CHANGED Viewed

	@@ -1 +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,MAAM,qCAAqC,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAwCpD;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAoC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,EAAE,OAAO,GAAG,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,EAAE,EAAE;IAC7K,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,GAAG,EAAE,EAAE;QACJ,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 } from \"react\";\r\nimport { useCallback } from \"react\";\r\nimport type { DropTargetMonitor } from \"react-dnd\";\r\nimport { useDrag, useDrop } from \"react-dnd\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport style from \"./GraphConnectorHandle.modules.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 */\r\nexport const GraphConnectorHandler: FC<IGraphConnectorHandlerProps> = ({ parentId, parentX, parentY, offsetX = 0, offsetY = 0, parentWidth, parentHeight, parentContainerId }) => {\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) => {\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"]}
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,MAAM,qCAAqC,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAwCpD;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAoC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,CAAC,EAAE,OAAO,GAAG,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,iBAAiB,EAAE,EAAE,EAAE;IAC7K,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,GAAG,EAAE,EAAE;QACJ,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 } from \"react\";\r\nimport { useCallback } from \"react\";\r\nimport type { DropTargetMonitor } from \"react-dnd\";\r\nimport { useDrag, useDrop } from \"react-dnd\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport style from \"./GraphConnectorHandle.modules.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 */\r\nexport const GraphConnectorHandler: FC<IGraphConnectorHandlerProps> = ({ parentId, parentX, parentY, offsetX = 0, offsetY = 0, parentWidth, parentHeight, parentContainerId }) => {\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) => {\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.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GraphContainer.js","sourceRoot":"","sources":["~~../../../../../../~~dev/sharedUiComponents/src/components/reactGraphSystem/GraphContainer.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,+BAA+B,CAAC;AAIlD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAA6B,CAAC,KAAK,EAAE,EAAE;IAC9D,OAAO,cAAK,SAAS,EAAE,KAAK,CAAC,SAAS,YAAG,KAAK,CAAC,QAAQ,GAAO,CAAC;AACnE,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport style from \"./GraphContainer.modules.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<IGraphContainerProps> = (props) => {\r\n return <div className={style.container}>{props.children}</div>;\r\n};\r\n"]}
1	+ {"version":3,"file":"GraphContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphContainer.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,+BAA+B,CAAC;AAIlD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAA6B,CAAC,KAAK,EAAE,EAAE;IAC9D,OAAO,cAAK,SAAS,EAAE,KAAK,CAAC,SAAS,YAAG,KAAK,CAAC,QAAQ,GAAO,CAAC;AACnE,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport style from \"./GraphContainer.modules.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<IGraphContainerProps> = (props) => {\r\n return <div className={style.container}>{props.children}</div>;\r\n};\r\n"]}

package/components/reactGraphSystem/GraphContextManager.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GraphContextManager.js","sourceRoot":"","sources":["~~../../../../../../~~dev/sharedUiComponents/src/components/reactGraphSystem/GraphContextManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAWtC,MAAM,CAAC,MAAM,mBAAmB,GAAG,aAAa,CAAgB,EAAE,CAAC,CAAC","sourcesContent":["import { createContext } from \"react\";\r\n\r\n/*\r\n this context is used to pass callbacks to the graph nodes and connections\r\n */\r\nexport interface IGraphContext {\r\n onNodesConnected?: (sourceId: string, targetId: string) => void;\r\n onLineSelected?: (lineId: string) => void;\r\n onNodeSelected?: (nodeId: string) => void;\r\n}\r\n\r\nexport const GraphContextManager = createContext<IGraphContext>({});\r\n"]}
1	+ {"version":3,"file":"GraphContextManager.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphContextManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAWtC,MAAM,CAAC,MAAM,mBAAmB,GAAG,aAAa,CAAgB,EAAE,CAAC,CAAC","sourcesContent":["import { createContext } from \"react\";\r\n\r\n/*\r\n this context is used to pass callbacks to the graph nodes and connections\r\n */\r\nexport interface IGraphContext {\r\n onNodesConnected?: (sourceId: string, targetId: string) => void;\r\n onLineSelected?: (lineId: string) => void;\r\n onNodeSelected?: (nodeId: string) => void;\r\n}\r\n\r\nexport const GraphContextManager = createContext<IGraphContext>({});\r\n"]}

package/components/reactGraphSystem/GraphLine.js.map CHANGED Viewed

	@@ -1 +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;;;GAGG;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 */\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"]}
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;;;GAGG;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 */\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.js.map CHANGED Viewed

	@@ -1 +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,GAAkC,CAAC,KAAK,EAAE,EAAE;IACxE,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,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 } 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<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 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"]}
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,GAAkC,CAAC,KAAK,EAAE,EAAE;IACxE,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,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 } 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<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 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.js.map CHANGED Viewed

	@@ -1 +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,MAAM,0BAA0B,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAcpD,MAAM,CAAC,MAAM,SAAS,GAAwB,CAAC,KAAK,EAAE,EAAE;IACpD,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 } from \"react\";\r\nimport { useDrag } from \"react-dnd\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport { GraphConnectorHandler } from \"./GraphConnectorHandle\";\r\nimport style from \"./GraphNode.modules.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 GraphNode: FC<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"]}
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,MAAM,0BAA0B,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAcpD,MAAM,CAAC,MAAM,SAAS,GAAwB,CAAC,KAAK,EAAE,EAAE;IACpD,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 } from \"react\";\r\nimport { useDrag } from \"react-dnd\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport { GraphConnectorHandler } from \"./GraphConnectorHandle\";\r\nimport style from \"./GraphNode.modules.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 GraphNode: FC<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"]}