npm - @babylonjs/shared-ui-components - Versions diffs - 6.39.0 → 6.40.0 - Mend

@babylonjs/shared-ui-components 6.39.0 → 6.40.0

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 (43) hide show

package/components/TextInputWithSubmit.d.ts CHANGED Viewed

@@ -8,5 +8,7 @@ export interface ITextInputProps {
 }
 /**
  * This component represents a text input that can be submitted or cancelled on buttons
+ * @param props properties
+ * @returns TextInputWithSubmit element
  */
 export declare const TextInputWithSubmit: (props: ITextInputProps) => JSX.Element;

package/components/TextInputWithSubmit.js CHANGED Viewed

@@ -8,6 +8,8 @@ import cancelIcon from "../imgs/deleteGridElementDark.svg";
 import { ClassNames } from "./classNames.js";
 /**
  * This component represents a text input that can be submitted or cancelled on buttons
+ * @param props properties
+ * @returns TextInputWithSubmit element
  */
 export const TextInputWithSubmit = (props) => {
     const [value, setValue] = useState("");

package/components/TextInputWithSubmit.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextInputWithSubmit.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/TextInputWithSubmit.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,KAAK,MAAM,oCAAoC,CAAC;AAEvD,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAC5D,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAU1C~~;;GAEG~~;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAAsB,EAAE,EAAE;IAC1D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAE5F,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,QAAQ,GAAG,CAAC,KAA0C,EAAE,EAAE;QAC5D,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,KAAK,CAAC,YAAY,EAAE,EAAE,CAAC;QACvB,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,KAAK,CAAC,aACpE,KAAK,CAAC,KAAK,IAAI,0BAAQ,KAAK,CAAC,KAAK,GAAS,EAC5C,gBAAO,SAAS,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAC,MAAM,EAAC,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,EAC/G,0BACI,KAAC,MAAM,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,eAAe,EAAC,SAAS,EAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC,KAAK,YACnG,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,GAAQ,GACvC,EACT,KAAC,MAAM,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,eAAe,EAAC,SAAS,EAAC,OAAO,EAAE,aAAa,YACjF,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,GAAQ,GACvC,IACP,IACJ,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { useEffect, useState } from \"react\";\r\nimport { Button } from \"./Button\";\r\nimport { Icon } from \"./Icon\";\r\nimport style from \"./TextInputWithSubmit.modules.scss\";\r\n\r\nimport submitIcon from \"../imgs/confirmGridElementDark.svg\";\r\nimport cancelIcon from \"../imgs/deleteGridElementDark.svg\";\r\nimport { ClassNames } from \"./classNames\";\r\n\r\nexport interface ITextInputProps {\r\n label?: string;\r\n placeholder?: string;\r\n submitValue: (newValue: string) => void; // Function to call when the value is updated\r\n validateValue?: (value: string) => boolean; // Function to call to validate the value\r\n cancelSubmit?: () => void; // Function to call when the user cancels the submit\r\n}\r\n\r\n/*\r\n This component represents a text input that can be submitted or cancelled on buttons\r\n */\r\nexport const TextInputWithSubmit = (props: ITextInputProps) => {\r\n const [value, setValue] = useState(\"\");\r\n const [valid, setValid] = useState(props.validateValue ? props.validateValue(value) : true);\r\n\r\n useEffect(() => {\r\n setValid(props.validateValue ? props.validateValue(value) : true);\r\n }, [value]);\r\n\r\n const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n setValue(event.target.value);\r\n };\r\n\r\n const onClickSubmit = () => {\r\n props.submitValue(value);\r\n };\r\n\r\n const onClickCancel = () => {\r\n props.cancelSubmit?.();\r\n setValue(\"\");\r\n };\r\n\r\n return (\r\n <div className={ClassNames({ line: true, valid, invalid: !valid }, style)}>\r\n {props.label && <label>{props.label}</label>}\r\n <input className={style.input} type=\"text\" placeholder={props.placeholder} value={value} onChange={onChange} />\r\n <div>\r\n <Button color=\"light\" size=\"smaller\" backgroundColor=\"inherit\" onClick={onClickSubmit} disabled={!valid}>\r\n <Icon icon={submitIcon} color=\"dark\"></Icon>\r\n </Button>\r\n <Button color=\"light\" size=\"smaller\" backgroundColor=\"inherit\" onClick={onClickCancel}>\r\n <Icon icon={cancelIcon} color=\"dark\"></Icon>\r\n </Button>\r\n </div>\r\n </div>\r\n );\r\n};\r\n"]}
1	+ {"version":3,"file":"TextInputWithSubmit.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/TextInputWithSubmit.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,KAAK,MAAM,oCAAoC,CAAC;AAEvD,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAC5D,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAU1C;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAAsB,EAAE,EAAE;IAC1D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAE5F,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,QAAQ,GAAG,CAAC,KAA0C,EAAE,EAAE;QAC5D,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,KAAK,CAAC,YAAY,EAAE,EAAE,CAAC;QACvB,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,KAAK,CAAC,aACpE,KAAK,CAAC,KAAK,IAAI,0BAAQ,KAAK,CAAC,KAAK,GAAS,EAC5C,gBAAO,SAAS,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAC,MAAM,EAAC,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,EAC/G,0BACI,KAAC,MAAM,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,eAAe,EAAC,SAAS,EAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC,KAAK,YACnG,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,GAAQ,GACvC,EACT,KAAC,MAAM,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,eAAe,EAAC,SAAS,EAAC,OAAO,EAAE,aAAa,YACjF,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,GAAQ,GACvC,IACP,IACJ,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { useEffect, useState } from \"react\";\r\nimport { Button } from \"./Button\";\r\nimport { Icon } from \"./Icon\";\r\nimport style from \"./TextInputWithSubmit.modules.scss\";\r\n\r\nimport submitIcon from \"../imgs/confirmGridElementDark.svg\";\r\nimport cancelIcon from \"../imgs/deleteGridElementDark.svg\";\r\nimport { ClassNames } from \"./classNames\";\r\n\r\nexport interface ITextInputProps {\r\n label?: string;\r\n placeholder?: string;\r\n submitValue: (newValue: string) => void; // Function to call when the value is updated\r\n validateValue?: (value: string) => boolean; // Function to call to validate the value\r\n cancelSubmit?: () => void; // Function to call when the user cancels the submit\r\n}\r\n\r\n/*\r\n This component represents a text input that can be submitted or cancelled on buttons\r\n * @param props properties\r\n * @returns TextInputWithSubmit element\r\n */\r\nexport const TextInputWithSubmit = (props: ITextInputProps) => {\r\n const [value, setValue] = useState(\"\");\r\n const [valid, setValid] = useState(props.validateValue ? props.validateValue(value) : true);\r\n\r\n useEffect(() => {\r\n setValid(props.validateValue ? props.validateValue(value) : true);\r\n }, [value]);\r\n\r\n const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n setValue(event.target.value);\r\n };\r\n\r\n const onClickSubmit = () => {\r\n props.submitValue(value);\r\n };\r\n\r\n const onClickCancel = () => {\r\n props.cancelSubmit?.();\r\n setValue(\"\");\r\n };\r\n\r\n return (\r\n <div className={ClassNames({ line: true, valid, invalid: !valid }, style)}>\r\n {props.label && <label>{props.label}</label>}\r\n <input className={style.input} type=\"text\" placeholder={props.placeholder} value={value} onChange={onChange} />\r\n <div>\r\n <Button color=\"light\" size=\"smaller\" backgroundColor=\"inherit\" onClick={onClickSubmit} disabled={!valid}>\r\n <Icon icon={submitIcon} color=\"dark\"></Icon>\r\n </Button>\r\n <Button color=\"light\" size=\"smaller\" backgroundColor=\"inherit\" onClick={onClickCancel}>\r\n <Icon icon={cancelIcon} color=\"dark\"></Icon>\r\n </Button>\r\n </div>\r\n </div>\r\n );\r\n};\r\n"]}

package/components/layout/DraggableIcon.d.ts CHANGED Viewed

@@ -19,5 +19,7 @@ export interface IDraggableIconProps {
 }
 /**
  * An icon that can be dragged by the user
+ * @param props properties
+ * @returns draggable icon element
  */
 export declare const DraggableIcon: FC<IDraggableIconProps>;

package/components/layout/DraggableIcon.js CHANGED Viewed

@@ -2,6 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useDrag } from "react-dnd";
 /**
  * An icon that can be dragged by the user
+ * @param props properties
+ * @returns draggable icon element
  */
 export const DraggableIcon = (props) => {
     const [, drag] = useDrag(() => ({

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DraggableIcon.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/DraggableIcon.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAqBpC~~;;GAEG~~;AACH,MAAM,CAAC,MAAM,aAAa,GAA4B,CAAC,KAAK,EAAE,EAAE;IAC5D,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC5B,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,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,CAAC,CAAC;IACJ,OAAO,cAAK,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,GAAI,CAAC;AAC9C,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport { useDrag } from \"react-dnd\";\r\nimport type { ElementTypes, TabDrag } from \"./types\";\r\n\r\n/*\r\n Arguments for the DraggableIcon component.\r\n /\r\nexport interface IDraggableIconProps {\r\n /\r\n Icon source\r\n /\r\n src: string;\r\n /\r\n Object that will be passed to the drag event\r\n /\r\n item: TabDrag;\r\n /\r\n Type of drag event\r\n /\r\n type: ElementTypes;\r\n}\r\n\r\n/\r\n An icon that can be dragged by the user\r\n */\r\nexport const DraggableIcon: FC<IDraggableIconProps> = (props) => {\r\n const [, drag] = useDrag(() => ({\r\n type: props.type,\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 return <img ref={drag} src={props.src} />;\r\n};\r\n"]}
1	+ {"version":3,"file":"DraggableIcon.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/DraggableIcon.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAqBpC;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAA4B,CAAC,KAAK,EAAE,EAAE;IAC5D,MAAM,CAAC,EAAE,IAAI,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC5B,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,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,CAAC,CAAC;IACJ,OAAO,cAAK,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,GAAI,CAAC;AAC9C,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport { useDrag } from \"react-dnd\";\r\nimport type { ElementTypes, TabDrag } from \"./types\";\r\n\r\n/*\r\n Arguments for the DraggableIcon component.\r\n /\r\nexport interface IDraggableIconProps {\r\n /\r\n Icon source\r\n /\r\n src: string;\r\n /\r\n Object that will be passed to the drag event\r\n /\r\n item: TabDrag;\r\n /\r\n Type of drag event\r\n /\r\n type: ElementTypes;\r\n}\r\n\r\n/\r\n An icon that can be dragged by the user\r\n * @param props properties\r\n * @returns draggable icon element\r\n */\r\nexport const DraggableIcon: FC<IDraggableIconProps> = (props) => {\r\n const [, drag] = useDrag(() => ({\r\n type: props.type,\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 return <img ref={drag} src={props.src} />;\r\n};\r\n"]}

package/components/layout/FlexibleDragHandler.d.ts CHANGED Viewed

@@ -14,5 +14,7 @@ export interface IFlexibleDragHandlerProps {
 }
 /**
  * This component receives the drop events and updates the layout accordingly
+ * @param props properties
+ * @returns DragHandler element
  */
 export declare const FlexibleDragHandler: FC<IFlexibleDragHandlerProps>;

package/components/layout/FlexibleDragHandler.js CHANGED Viewed

@@ -7,6 +7,8 @@ import { addPercentageStringToNumber, getPosInLayout } from "./utils.js";
 import { LayoutContext } from "./LayoutContext.js";
 /**
  * This component receives the drop events and updates the layout accordingly
+ * @param props properties
+ * @returns DragHandler element
  */
 export const FlexibleDragHandler = (props) => {
     const { layout, setLayout } = useContext(LayoutContext);

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":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,sCAAwB;AAE1C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,OAAO,EAAE,2BAA2B,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAchD~~;;GAEG~~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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":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,sCAAwB;AAE1C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,OAAO,EAAE,2BAA2B,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAchD;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAkC,CAAC,KAAK,EAAE,EAAE;IACxE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IACxD,yBAAyB;IACzB,MAAM,UAAU,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACnD,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC7B,MAAM,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC;QACjC,KAAK,CAAC,IAAI,EAAE,OAAO;YACf,MAAM,OAAO,GAAG,IAAkB,CAAC;YAEnC,MAAM,EAAE,GAAG,OAAO,CAAC,eAAe,EAAE,CAAC;YACrC,MAAM,GAAG,GAAG,IAAI,OAAO,CAAC,EAAG,CAAC,CAAC,EAAE,EAAG,CAAC,CAAC,CAAC,CAAC;YACtC,IAAI,UAAU,CAAC,OAAO,EAAE;gBACpB,IAAI,OAAO,CAAC,WAAW,EAAE,KAAK,YAAY,CAAC,UAAU,EAAE;oBACnD,QAAQ,CAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,YAAY,EAAE,GAAG,EAAE,UAAU,CAAC,OAAO,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;iBACjG;aACJ;YACD,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;QAC7B,CAAC;QACD,IAAI,CAAC,IAAI,EAAE,OAAO;YACd,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;QAC9B,CAAC;KACJ,CAAC,CAAC,CAAC;IAEJ,MAAM,iBAAiB,GAAG,CAAC,MAAoC,EAAE,QAA4B,EAAE,EAAE;QAC7F,IAAI,QAAQ,KAAK,OAAO,EAAE;YACtB,OAAQ,MAAuB,CAAC,QAAQ,CAAC,CAAC;SAC7C;aAAM;YACH,OAAQ,MAAwB,CAAC,QAAQ,CAAC,CAAC;SAC9C;IACL,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,MAAoC,EAAE,QAA4B,EAAE,KAAa,EAAE,EAAE;QAC5G,IAAI,QAAQ,KAAK,OAAO,EAAE;YACrB,MAAuB,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC;SAC9C;aAAM;YACF,MAAwB,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC;SAC/C;IACL,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAClB,GAAY,EACZ,OAAgB,EAChB,IAAwB,EACxB,OAAe,EACf,IAAwB,EACxB,OAAe,EACf,IAAe,EACf,YAAoB,EACpB,QAA4B,EAC5B,aAAqB,EACvB,EAAE;QACA,wBAAwB;QACxB,MAAM,QAAQ,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;QAE3C,IAAI;YACA,kBAAkB;YAClB,MAAM,cAAc,GAAG,cAAc,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;YAC7D,MAAM,cAAc,GAAG,cAAc,CAAC,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;YAE7D,IAAI,cAAc,IAAI,cAAc,EAAE;gBAClC,MAAM,QAAQ,GAAG,CAAC,QAAQ,GAAG,YAAY,CAAC,GAAG,GAAG,CAAC;gBAEjD,MAAM,SAAS,GAAG,2BAA2B,CAAC,iBAAiB,CAAC,cAAc,EAAE,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC;gBACrG,MAAM,SAAS,GAAG,2BAA2B,CAAC,iBAAiB,CAAC,cAAc,EAAE,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;gBAEtG,IAAI,SAAS,IAAI,aAAa,IAAI,SAAS,IAAI,aAAa,EAAE;oBAC1D,iBAAiB,CAAC,cAAc,EAAE,QAAQ,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;oBACxE,iBAAiB,CAAC,cAAc,EAAE,QAAQ,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;iBAC3E;gBAED,SAAS,CAAC,EAAE,GAAG,MAAM,EAAE,CAAC,CAAC;aAC5B;SACJ;QAAC,OAAO,CAAC,EAAE;YACR,uFAAuF;YACvF,OAAO;SACV;IACL,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,CAAC,GAAY,EAAE,OAAgB,EAAE,IAAqC,EAAE,EAAE;QAC/F,aAAa,CAAC,GAAG,EAAE,OAAO,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;IAChI,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,CAAC,GAAY,EAAE,OAAgB,EAAE,IAAqC,EAAE,EAAE;QAClG,aAAa,CAAC,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;IAChI,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,MAAc,EAAE,GAAY,EAAE,OAAgB,EAAE,IAAsB,EAAE,EAAE;QACrG,IAAI,IAAI,KAAK,KAAK,EAAE;YAChB,gBAAgB,CAAC,GAAG,EAAE,OAAO,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC;SACnD;aAAM;YACH,mBAAmB,CAAC,GAAG,EAAE,OAAO,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC;SACtD;QACD,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;IAC7B,CAAC,CAAC;IAEF,OAAO,CACH,cAAK,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YACnD,KAAK,CAAC,QAAQ,GACb,CACT,CAAC;AACN,CAAC,CAAC","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 * @param props properties\r\n * @returns DragHandler element\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.d.ts CHANGED Viewed

@@ -15,5 +15,7 @@ export interface IFlexibleDropZoneProps {
 /**
  * This component contains the drag and drop zone for the resize bars that
  * allow redefining width and height of layout elements
+ * @param props properties
+ * @returns drop zone element
  */
 export declare const FlexibleDropZone: FC<IFlexibleDropZoneProps>;

package/components/layout/FlexibleDropZone.js CHANGED Viewed

@@ -5,6 +5,8 @@ import { ResizeDirections } from "./types.js";
 /**
  * This component contains the drag and drop zone for the resize bars that
  * allow redefining width and height of layout elements
+ * @param props properties
+ * @returns drop zone element
  */
 export const FlexibleDropZone = (props) => {
     return (_jsxs("div", { className: style.flexibleDropZoneContainer, children: [props.children, _jsx(FlexibleResizeBar, { rowNumber: props.rowNumber, columnNumber: props.columnNumber, direction: ResizeDirections.COLUMN }), _jsx(FlexibleResizeBar, { rowNumber: props.rowNumber, columnNumber: props.columnNumber, direction: ResizeDirections.ROW })] }));

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;;;;;GAKG;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 * @param props properties\r\n * @returns drop zone element\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.d.ts CHANGED Viewed

@@ -6,5 +6,6 @@ export interface IFlexibleGridContainerProps {
 }
 /**
  * Component responsible for mapping the layout to the actual components
+ * @returns GridContainer element
  */
 export declare const FlexibleGridContainer: FC<IFlexibleGridContainerProps>;

package/components/layout/FlexibleGridContainer.js CHANGED Viewed

@@ -7,6 +7,7 @@ import { FlexibleTabsContainer } from "./FlexibleTabsContainer.js";
 import style from "./FlexibleGridContainer.modules.scss";
 /**
  * Component responsible for mapping the layout to the actual components
+ * @returns GridContainer element
  */
 export const FlexibleGridContainer = () => {
     const context = useContext(LayoutContext);

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;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAoC,GAAG,EAAE;IACvE,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC;IAC3B,MAAM,OAAO,GACT,MAAM,IAAI,MAAM,CAAC,OAAO;QACpB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAW,EAAE,SAAiB,EAAE,EAAE;YAClD,OAAO,CACH,KAAC,cAAc,IAAiB,KAAK,EAAE,MAAM,CAAC,KAAK,YAC9C,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAQ,EAAE,MAAc,EAAE,EAAE;oBAC1C,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,YAC9B,KAAC,gBAAgB,IAAC,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,YACxD,KAAC,qBAAqB,IAAC,IAAI,EAAE,GAAG,CAAC,IAAI,EAAE,WAAW,EAAE,GAAG,CAAC,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,GAAI,GAClG,IAHkB,GAAG,CAAC,EAAE,CAIzC,CACT,CAAC;gBACN,CAAC,CAAC,IATe,MAAM,CAAC,EAAE,CAUb,CACpB,CAAC;QACN,CAAC,CAAC;QACJ,CAAC,CAAC,EAAE,CAAC;IACb,OAAO,cAAK,SAAS,EAAE,KAAK,CAAC,YAAY,YAAG,OAAO,GAAO,CAAC;AAC/D,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport { useContext } from \"react\";\r\nimport { LayoutContext } from \"./LayoutContext\";\r\nimport { FlexibleColumn } from \"./FlexibleColumn\";\r\nimport { FlexibleDropZone } from \"./FlexibleDropZone\";\r\nimport { FlexibleTabsContainer } from \"./FlexibleTabsContainer\";\r\nimport 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 * @returns GridContainer element\r\n */\r\nexport const FlexibleGridContainer: FC<IFlexibleGridContainerProps> = () => {\r\n const context = useContext(LayoutContext);\r\n const { layout } = context;\r\n const columns =\r\n layout && layout.columns\r\n ? layout.columns.map((column: any, columnIdx: number) => {\r\n return (\r\n <FlexibleColumn key={column.id} width={column.width}>\r\n {column.rows.map((row: any, rowIdx: number) => {\r\n return (\r\n <div style={{ height: row.height }} key={row.id}>\r\n <FlexibleDropZone rowNumber={rowIdx} columnNumber={columnIdx}>\r\n <FlexibleTabsContainer tabs={row.tabs} selectedTab={row.selectedTab} rowIndex={rowIdx} columnIndex={columnIdx} />\r\n </FlexibleDropZone>\r\n </div>\r\n );\r\n })}\r\n </FlexibleColumn>\r\n );\r\n })\r\n : [];\r\n return <div className={style.flexibleGrid}>{columns}</div>;\r\n};\r\n"]}

package/components/layout/FlexibleGridLayout.d.ts CHANGED Viewed

@@ -12,5 +12,7 @@ export interface IFlexibleGridLayoutProps {
 /**
  * This component represents a grid layout that can be resized and rearranged
  * by the user.
+ * @param props properties
+ * @returns layout element
  */
 export declare const FlexibleGridLayout: FC<IFlexibleGridLayoutProps>;

package/components/layout/FlexibleGridLayout.js CHANGED Viewed

@@ -8,6 +8,8 @@ import { FlexibleGridContainer } from "./FlexibleGridContainer.js";
 /**
  * This component represents a grid layout that can be resized and rearranged
  * by the user.
+ * @param props properties
+ * @returns layout element
  */
 export const FlexibleGridLayout = (props) => {
     const [layout, setLayout] = useState(props.layoutDefinition);

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;;;;;GAKG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAiC,CAAC,KAAK,EAAE,EAAE;IACtE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAC7D,MAAM,YAAY,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IAC5D,MAAM,aAAa,GAAG,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,YAAY,CAAC,OAAO,EAAE;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 * @param props properties\r\n * @returns layout element\r\n */\r\nexport const FlexibleGridLayout: FC<IFlexibleGridLayoutProps> = (props) => {\r\n const [layout, setLayout] = useState(props.layoutDefinition);\r\n const containerDiv = useRef<Nullable<HTMLDivElement>>(null);\r\n const containerSize = useRef({ width: 0, height: 0 });\r\n\r\n useEffect(() => {\r\n if (containerDiv.current) {\r\n containerSize.current.width = containerDiv.current.clientWidth;\r\n containerSize.current.height = containerDiv.current.clientHeight;\r\n }\r\n }, [containerDiv]);\r\n\r\n return (\r\n <DndProvider backend={TouchBackend} options={{ enableMouseEvents: true }}>\r\n <LayoutContext.Provider value={{ layout, setLayout }}>\r\n <FlexibleDragHandler containerSize={containerSize.current}>\r\n <div style={{ width: \"100%\", height: \"100%\" }} ref={containerDiv}>\r\n <FlexibleGridContainer />\r\n </div>\r\n </FlexibleDragHandler>\r\n </LayoutContext.Provider>\r\n </DndProvider>\r\n );\r\n};\r\n"]}

package/components/layout/FlexibleResizeBar.d.ts CHANGED Viewed

@@ -36,5 +36,7 @@ export type ResizeItem = {
 };
 /**
  * A component that renders a bar that the user can drag to resize.
+ * @param props properties
+ * @returns resize bar element
  */
 export declare const FlexibleResizeBar: FC<IFlexibleRowResizerProps>;

package/components/layout/FlexibleResizeBar.js CHANGED Viewed

@@ -5,6 +5,8 @@ import { ClassNames } from "../classNames.js";
 import style from "./FlexibleResizeBar.modules.scss";
 /**
  * A component that renders a bar that the user can drag to resize.
+ * @param props properties
+ * @returns resize bar element
  */
 export const FlexibleResizeBar = (props) => {
     const [_, drag] = useDrag(() => ({

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;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAiC,CAAC,KAAK,EAAE,EAAE;IACrE,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC7B,IAAI,EAAE,YAAY,CAAC,UAAU;QAC7B,IAAI,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,YAAY,EAAE,KAAK,CAAC,YAAY,EAAE;QAClG,OAAO,CAAC,OAAO;YACX,OAAO;gBACH,UAAU,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE;aACrC,CAAC;QACN,CAAC;KACJ,CAAC,CAAC,CAAC;IACJ,OAAO,CACH,cACI,SAAS,EAAE,UAAU,CAAC,EAAE,cAAc,EAAE,KAAK,CAAC,SAAS,KAAK,gBAAgB,CAAC,GAAG,EAAE,iBAAiB,EAAE,KAAK,CAAC,SAAS,KAAK,gBAAgB,CAAC,MAAM,EAAE,EAAE,KAAK,CAAC,EAC1J,GAAG,EAAE,IAAI,GACX,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport { useDrag } from \"react-dnd\";\r\nimport { ResizeDirections, ElementTypes } from \"./types\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport 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 * @param props properties\r\n * @returns resize bar element\r\n */\r\nexport const FlexibleResizeBar: FC<IFlexibleRowResizerProps> = (props) => {\r\n const [_, drag] = useDrag(() => ({\r\n type: ElementTypes.RESIZE_BAR,\r\n item: { direction: props.direction, rowNumber: props.rowNumber, columnNumber: props.columnNumber },\r\n collect(monitor) {\r\n return {\r\n isDragging: !!monitor.isDragging(),\r\n };\r\n },\r\n }));\r\n return (\r\n <div\r\n className={ClassNames({ rowDragHandler: props.direction === ResizeDirections.ROW, columnDragHandler: props.direction === ResizeDirections.COLUMN }, style)}\r\n ref={drag}\r\n />\r\n );\r\n};\r\n"]}

package/components/layout/FlexibleTab.d.ts CHANGED Viewed

@@ -30,5 +30,7 @@ export interface IFlexibleTabProps {
  * to activate or drag to reorder. It also listens for
  * drop events if the user wants to drop another tab
  * after it.
+ * @param props properties
+ * @returns FlexibleTab element
  */
 export declare const FlexibleTab: FC<IFlexibleTabProps>;

package/components/layout/FlexibleTab.js CHANGED Viewed

@@ -8,6 +8,8 @@ import style from "./FlexibleTab.modules.scss";
  * to activate or drag to reorder. It also listens for
  * drop events if the user wants to drop another tab
  * after it.
+ * @param props properties
+ * @returns FlexibleTab element
  */
 export const FlexibleTab = (props) => {
     const [{ isDragging }, drag] = useDrag(() => ({

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;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAA0B,CAAC,KAAK,EAAE,EAAE;IACxD,MAAM,CAAC,EAAE,UAAU,EAAE,EAAE,IAAI,CAAC,GAAG,OAAO,CAClC,GAAG,EAAE,CAAC,CAAC;QACH,IAAI,EAAE,YAAY,CAAC,GAAG;QACtB,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,OAAO,CAAC,OAAO;YACX,OAAO;gBACH,UAAU,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE;aACrC,CAAC;QACN,CAAC;KACJ,CAAC,EACF,CAAC,KAAK,CAAC,IAAI,CAAC,CACf,CAAC;IAEF,MAAM,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,IAAI,CAAC,GAAG,OAAO,CACvC,GAAG,EAAE,CAAC,CAAC;QACH,MAAM,EAAE,YAAY,CAAC,GAAG;QACxB,IAAI,EAAE,CAAC,IAAS,EAAE,OAAO,EAAE,EAAE;YACzB,KAAK,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACnC,CAAC;QACD,OAAO,CAAC,OAAO;YACX,OAAO;gBACH,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE;gBAC1B,OAAO,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,EAAE;aAC/B,CAAC;QACN,CAAC;KACJ,CAAC,EACF,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAC7B,CAAC;IACF,OAAO,CACH,eAAK,SAAS,EAAE,UAAU,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,CAAC,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,CAAC,aAC5I,cAAK,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,YAC3D,KAAK,CAAC,KAAK,GACV,EACN,cAAK,SAAS,EAAE,UAAU,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,eAAe,EAAE,OAAO,EAAE,EAAE,KAAK,CAAC,EAAE,GAAG,EAAE,IAAI,GAAQ,EAClG,cAAK,SAAS,EAAE,UAAU,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,oBAAoB,EAAE,MAAM,EAAE,EAAE,KAAK,CAAC,GAAQ,IACjG,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport { useDrag, useDrop } from \"react-dnd\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport { ElementTypes } from \"./types\";\r\nimport type { TabDrag } from \"./types\";\r\nimport 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 * @param props properties\r\n * @returns FlexibleTab element\r\n */\r\nexport const FlexibleTab: FC<IFlexibleTabProps> = (props) => {\r\n const [{ isDragging }, drag] = useDrag(\r\n () => ({\r\n type: ElementTypes.TAB,\r\n item: props.item,\r\n collect(monitor) {\r\n return {\r\n isDragging: !!monitor.isDragging(),\r\n };\r\n },\r\n }),\r\n [props.item]\r\n );\r\n\r\n const [{ isOver, canDrop }, drop] = useDrop(\r\n () => ({\r\n accept: ElementTypes.TAB,\r\n drop: (item: any, monitor) => {\r\n props.onTabDroppedAction(item);\r\n },\r\n collect(monitor) {\r\n return {\r\n isOver: !!monitor.isOver(),\r\n canDrop: !!monitor.canDrop(),\r\n };\r\n },\r\n }),\r\n [props.onTabDroppedAction]\r\n );\r\n return (\r\n <div className={ClassNames({ tab: true, tabSelected: props.selected, tabGrabbed: isDragging, tabNormal: !props.selected && !isDragging }, style)}>\r\n <div ref={drag} className={style.tabText} onClick={props.onClick}>\r\n {props.title}\r\n </div>\r\n <div className={ClassNames({ dropZone: true, dropZoneCanDrop: canDrop }, style)} ref={drop}></div>\r\n <div className={ClassNames({ dropBarIndicator: true, dropBarIndicatorOver: isOver }, style)}></div>\r\n </div>\r\n );\r\n};\r\n"]}

package/components/layout/FlexibleTabsContainer.d.ts CHANGED Viewed

@@ -24,5 +24,7 @@ export interface IFlexibleTabsContainerProps {
 /**
  * This component contains a set of tabs of which only one is visible at a time.
  * The tabs can also be dragged from and to different containers.
+ * @param props properties
+ * @returns tabs container element
  */
 export declare const FlexibleTabsContainer: FC<IFlexibleTabsContainerProps>;

package/components/layout/FlexibleTabsContainer.js CHANGED Viewed

@@ -10,6 +10,8 @@ import { ElementTypes } from "./types.js";
 /**
  * This component contains a set of tabs of which only one is visible at a time.
  * The tabs can also be dragged from and to different containers.
+ * @param props properties
+ * @returns tabs container element
  */
 export const FlexibleTabsContainer = (props) => {
     const { layout, setLayout } = useContext(LayoutContext);

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":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,KAAK,MAAM,sCAAsC,CAAC;AAEzD,OAAO,QAAQ,MAAM,mCAAmC,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,yCAAyC,EAAE,MAAM,SAAS,CAAC;AACpF,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAwBvC~~;;;GAGG~~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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 * @param props properties\r\n * @returns tabs container element\r\n */\r\nexport const FlexibleTabsContainer: FC<IFlexibleTabsContainerProps> = (props) => {\r\n const { layout, setLayout } = useContext(LayoutContext);\r\n const { tabs, selectedTab } = props;\r\n const selectedTabId = props.selectedTab !== undefined ? props.selectedTab : tabs[0].id;\r\n const selectedTabArray = tabs.filter((tab) => tab.id === selectedTabId);\r\n const selectedTabObject = selectedTabArray.length > 0 ? selectedTabArray[0] : null;\r\n\r\n const selectTab = (tabId: string) => {\r\n const layoutPos = getPosInLayout(layout, props.columnIndex, props.rowIndex) as LayoutTabsRow;\r\n layoutPos.selectedTab = tabId;\r\n setLayout({ ...layout });\r\n };\r\n\r\n const addTabAfter = (droppedTabItem: TabDrag, dropZoneTabId: string) => {\r\n // Get layout element corresponding to dropped tabs\r\n const layoutDropped = getPosInLayout(layout, droppedTabItem.columnNumber, droppedTabItem.rowNumber) as LayoutTabsRow;\r\n // Get layout element corresponding to dropzone\r\n const layoutDropZone = getPosInLayout(layout, props.columnIndex, props.rowIndex) as LayoutTabsRow;\r\n\r\n for (const { id } of droppedTabItem.tabs) {\r\n const droppedTabIndex = layoutDropped.tabs.findIndex((tab: any) => tab.id === id);\r\n const droppedTab = layoutDropped.tabs[droppedTabIndex];\r\n // Add dropped tab after dropZoneTabId\r\n const dropZoneIndex = layoutDropZone.tabs.findIndex((tab: any) => tab.id === dropZoneTabId);\r\n layoutDropZone.tabs.splice(dropZoneIndex + 1, 0, droppedTab);\r\n // Remove dropped tab from its original position\r\n layoutDropped.tabs.splice(droppedTabIndex, 1);\r\n }\r\n\r\n if (layoutDropped.tabs.length === 0) {\r\n // Check if the layout that was dropped from is empty now\r\n removeLayoutRowAndRedistributePercentages(layout, droppedTabItem.columnNumber, droppedTabItem.rowNumber);\r\n } else if (droppedTabItem.tabs.map((tab: any) => tab.id).includes(layoutDropped.selectedTab)) {\r\n //Check if the layout that was dropped from's active tab is still in the layout\r\n layoutDropped.selectedTab = layoutDropped.tabs[0].id;\r\n }\r\n\r\n // Update layout\r\n setLayout({ ...layout });\r\n };\r\n\r\n return (\r\n <div className={style.rootContainer}>\r\n <div draggable={false} className={style.tabsLineContainer}>\r\n <div className={style.tabsContainer}>\r\n {tabs.map((tab) => {\r\n return (\r\n <FlexibleTab\r\n key={tab.id}\r\n title={tab.title}\r\n selected={tab.id === selectedTab}\r\n onClick={() => selectTab(tab.id)}\r\n item={{ rowNumber: props.rowIndex, columnNumber: props.columnIndex, tabs: [{ id: tab.id }] }}\r\n onTabDroppedAction={(item) => addTabAfter(item, tab.id)}\r\n />\r\n );\r\n })}\r\n </div>\r\n <DraggableIcon\r\n src={dragIcon}\r\n item={{ rowNumber: props.rowIndex, columnNumber: props.columnIndex, tabs: tabs.map((t) => ({ id: t.id })) }}\r\n type={ElementTypes.TAB_GROUP}\r\n />\r\n </div>\r\n <div className={style.contentContainer}>{selectedTabObject?.component}</div>\r\n </div>\r\n );\r\n};\r\n"]}

package/components/layout/utils.d.ts CHANGED Viewed

@@ -16,10 +16,14 @@ export declare const getPosInLayout: (layout: Layout, column: number, row?: numb
 export declare const removeLayoutRowAndRedistributePercentages: (layout: Layout, column: number, row: number) => void;
 /**
  * Add a percentage string to a number
+ * @param p1 the percentage string
+ * @param p2 the number
+ * @returns the sum of the percentage string and the number
  */
 export declare const addPercentageStringToNumber: (p1: string, p2: number) => number;
 /**
  * Parses a percentage string into a number
  * @param p the percentage string
+ * @returns the parsed number
  */
 export declare const parsePercentage: (p: string) => number;

package/components/layout/utils.js CHANGED Viewed

@@ -50,6 +50,9 @@ export const removeLayoutRowAndRedistributePercentages = (layout, column, row) =
 };
 /**
  * Add a percentage string to a number
+ * @param p1 the percentage string
+ * @param p2 the number
+ * @returns the sum of the percentage string and the number
  */
 export const addPercentageStringToNumber = (p1, p2) => {
     // Convert both values to numbers
@@ -61,6 +64,7 @@ export const addPercentageStringToNumber = (p1, p2) => {
 /**
  * Parses a percentage string into a number
  * @param p the percentage string
+ * @returns the parsed number
  */
 export const parsePercentage = (p) => {
     return Number.parseFloat(p.replace("%", ""));

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;;;;;GAKG;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;;;;GAIG;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 * @param p1 the percentage string\r\n * @param p2 the number\r\n * @returns the sum of the percentage string and the number\r\n /\r\nexport const addPercentageStringToNumber = (p1: string, p2: number): number => {\r\n // Convert both values to numbers\r\n const np1 = Number.parseFloat(p1.replace(\"%\", \"\"));\r\n const np2 = p2;\r\n\r\n const nr = np1 + np2;\r\n return nr;\r\n};\r\n\r\n/\r\n Parses a percentage string into a number\r\n * @param p the percentage string\r\n * @returns the parsed number\r\n */\r\nexport const parsePercentage = (p: string): number => {\r\n return Number.parseFloat(p.replace(\"%\", \"\"));\r\n};\r\n"]}

package/components/reactGraphSystem/GraphConnectorHandle.d.ts CHANGED Viewed

@@ -39,5 +39,6 @@ export interface IGraphConnectorHandlerProps {
 /**
  * This component is used to initiate a connection between two nodes. Simply
  * drag the handle in a node and drop it in another node to create a connection.
+ * @returns connector element
  */
 export declare const GraphConnectorHandler: FC<IGraphConnectorHandlerProps>;

package/components/reactGraphSystem/GraphConnectorHandle.js CHANGED Viewed

@@ -7,6 +7,7 @@ import { useGraphContext } from "./useGraphContext.js";
 /**
  * This component is used to initiate a connection between two nodes. Simply
  * drag the handle in a node and drop it in another node to create a connection.
+ * @returns connector element
  */
 export const GraphConnectorHandler = ({ parentId, parentX, parentY, offsetX = 0, offsetY = 0, parentWidth, parentHeight, parentContainerId }) => {
     const { onNodesConnected } = useGraphContext();

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;;;;GAIG;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 * @returns connector element\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/GraphLine.d.ts CHANGED Viewed

@@ -36,5 +36,7 @@ export declare const MarkerArrowId = "arrow";
 /**
  * This component draws a SVG line between two points, with an optional marker
  * indicating direction
+ * @param props properties
+ * @returns graph line element
  */
 export declare const GraphLine: FC<IGraphLineProps>;

package/components/reactGraphSystem/GraphLine.js CHANGED Viewed

@@ -4,6 +4,8 @@ export const MarkerArrowId = "arrow";
 /**
  * This component draws a SVG line between two points, with an optional marker
  * indicating direction
+ * @param props properties
+ * @returns graph line element
  */
 export const GraphLine = (props) => {
     const { id, x1, x2, y1, y2, selected, directional = true } = props;

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

package/components/reactGraphSystem/GraphNodesContainer.d.ts CHANGED Viewed

@@ -5,5 +5,7 @@ export interface IGraphContainerProps {
 }
 /**
  * This component contains all the nodes and handles their dragging
+ * @param props properties
+ * @returns graph node container element
  */
 export declare const GraphNodesContainer: FC<IGraphContainerProps>;

package/components/reactGraphSystem/GraphNodesContainer.js CHANGED Viewed

@@ -4,6 +4,8 @@ import { useEffect, useRef } from "react";
 import { useDragLayer } from "react-dnd";
 /**
  * This component contains all the nodes and handles their dragging
+ * @param props properties
+ * @returns graph node container element
  */
 export const GraphNodesContainer = (props) => {
     const lastDragPos = useRef(null);

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

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

package/lines/floatLineComponent.d.ts CHANGED Viewed

@@ -25,6 +25,7 @@ interface IFloatLineComponentProps {
     unit?: React.ReactNode;
     onDragStart?: (newValue: number) => void;
     onDragStop?: (newValue: number) => void;
+    disabled?: boolean;
 }
 export declare class FloatLineComponent extends React.Component<IFloatLineComponentProps, {
     value: string;

package/lines/floatLineComponent.js CHANGED Viewed

@@ -160,7 +160,7 @@ export class FloatLineComponent extends React.Component {
                                         if (this.props.onEnter) {
                                             this.props.onEnter(this._store);
                                         }
-                                    }, placeholder: placeholder, onFocus: () => this.lock(), onChange: (evt) => this.updateValue(evt.target.value) }), this.props.arrows && (_jsx(InputArrowsComponent, { incrementValue: (amount) => this.incrementValue(amount), setDragging: (newDragging) => {
+                                    }, placeholder: placeholder, onFocus: () => this.lock(), onChange: (evt) => this.updateValue(evt.target.value), disabled: this.props.disabled }), this.props.arrows && (_jsx(InputArrowsComponent, { incrementValue: (amount) => this.incrementValue(amount), setDragging: (newDragging) => {
                                         const currentDragging = this.state.dragging;
                                         // drag stopped
                                         if (!currentDragging && newDragging && this.props.onDragStart) {

package/lines/floatLineComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"floatLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/floatLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\n\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\nimport { SliderLineComponent } from \"./sliderLineComponent\";\r\nimport { Tools } from \"core/Misc/tools\";\r\nimport { conflictingValuesPlaceholder } from \"./targetsProxy\";\r\nimport { InputArrowsComponent } from \"./inputArrowsComponent\";\r\n\r\ninterface IFloatLineComponentProps {\r\n label: string;\r\n target: any;\r\n propertyName: string;\r\n lockObject: LockObject;\r\n onChange?: (newValue: number) => void;\r\n isInteger?: boolean;\r\n onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n additionalClass?: string;\r\n step?: string;\r\n digits?: number;\r\n useEuler?: boolean;\r\n min?: number;\r\n max?: number;\r\n smallUI?: boolean;\r\n onEnter?: (newValue: number) => void;\r\n icon?: string;\r\n iconLabel?: string;\r\n defaultValue?: number;\r\n arrows?: boolean;\r\n unit?: React.ReactNode;\r\n onDragStart?: (newValue: number) => void;\r\n onDragStop?: (newValue: number) => void;\r\n}\r\n\r\nexport class FloatLineComponent extends React.Component<IFloatLineComponentProps, { value: string; dragging: boolean }> {\r\n private _localChange = false;\r\n private _store: number;\r\n\r\n constructor(props: IFloatLineComponentProps) {\r\n super(props);\r\n\r\n const currentValue = this.props.target[this.props.propertyName];\r\n this.state = { value: this.getValueString(currentValue, this.props), dragging: false };\r\n this._store = currentValue;\r\n }\r\n\r\n componentWillUnmount() {\r\n this.unlock();\r\n }\r\n\r\n getValueString(value: any, props: IFloatLineComponentProps): string {\r\n if (value) {\r\n if (value === conflictingValuesPlaceholder) {\r\n return conflictingValuesPlaceholder;\r\n } else if (props.isInteger) {\r\n return value.toFixed(0);\r\n } else {\r\n return value.toFixed(props.digits \|\| 4);\r\n }\r\n }\r\n return \"0\";\r\n }\r\n\r\n shouldComponentUpdate(nextProps: IFloatLineComponentProps, nextState: { value: string; dragging: boolean }) {\r\n if (this._localChange) {\r\n this._localChange = false;\r\n return true;\r\n }\r\n\r\n const newValue = nextProps.target[nextProps.propertyName];\r\n const newValueString = this.getValueString(newValue, nextProps);\r\n\r\n if (newValueString !== nextState.value) {\r\n nextState.value = newValueString;\r\n return true;\r\n }\r\n\r\n if (nextState.dragging != this.state.dragging \|\| nextProps.unit !== this.props.unit \|\| nextProps.isInteger !== this.props.isInteger) {\r\n return true;\r\n }\r\n\r\n return false;\r\n }\r\n\r\n raiseOnPropertyChanged(newValue: number, previousValue: number) {\r\n if (this.props.onChange) {\r\n this.props.onChange(newValue);\r\n }\r\n\r\n if (!this.props.onPropertyChangedObservable) {\r\n return;\r\n }\r\n this.props.onPropertyChangedObservable.notifyObservers({\r\n object: this.props.target,\r\n property: this.props.propertyName,\r\n value: newValue,\r\n initialValue: previousValue,\r\n });\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 let valueAsNumber: number;\r\n\r\n if (this.props.isInteger) {\r\n valueAsNumber = parseInt(valueString);\r\n } else {\r\n valueAsNumber = parseFloat(valueString);\r\n }\r\n\r\n if (!isNaN(valueAsNumber)) {\r\n if (this.props.min !== undefined) {\r\n if (valueAsNumber < this.props.min) {\r\n valueAsNumber = this.props.min;\r\n valueString = valueAsNumber.toString();\r\n }\r\n }\r\n if (this.props.max !== undefined) {\r\n if (valueAsNumber > this.props.max) {\r\n valueAsNumber = this.props.max;\r\n valueString = valueAsNumber.toString();\r\n }\r\n }\r\n } else if (this.props.defaultValue != null) {\r\n valueAsNumber = this.props.defaultValue;\r\n }\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.target[this.props.propertyName] = valueAsNumber;\r\n this.raiseOnPropertyChanged(valueAsNumber, this._store);\r\n\r\n this._store = valueAsNumber;\r\n }\r\n\r\n lock() {\r\n if (this.props.lockObject) {\r\n this.props.lockObject.lock = true;\r\n }\r\n }\r\n\r\n unlock() {\r\n if (this.props.lockObject) {\r\n this.props.lockObject.lock = false;\r\n }\r\n }\r\n\r\n incrementValue(amount: number, processStep: boolean = true) {\r\n if (processStep && this.props.step) {\r\n amount = parseFloat(this.props.step);\r\n }\r\n\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(2));\r\n }\r\n\r\n onKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\r\n const step = parseFloat(this.props.step \|\| this.props.isInteger ? \"1\" : \"0.01\");\r\n const handleArrowKey = (sign: number) => {\r\n if (event.shiftKey) {\r\n sign = 10;\r\n if (event.ctrlKey \|\| event.metaKey) {\r\n sign = 10;\r\n }\r\n }\r\n\r\n this.incrementValue(sign step, false);\r\n event.preventDefault();\r\n };\r\n\r\n if (event.key === \"ArrowUp\") {\r\n handleArrowKey(1);\r\n } else if (event.key === \"ArrowDown\") {\r\n handleArrowKey(-1);\r\n }\r\n if (event.key === \"Enter\" && this.props.onEnter) {\r\n this.props.onEnter(this._store);\r\n }\r\n }\r\n\r\n render() {\r\n let valueAsNumber: number;\r\n\r\n if (this.props.isInteger) {\r\n valueAsNumber = parseInt(this.state.value);\r\n } else {\r\n valueAsNumber = parseFloat(this.state.value);\r\n }\r\n\r\n let className = this.props.smallUI ? \"short\" : \"value\";\r\n if (this.state.dragging) {\r\n className += \" dragging\";\r\n }\r\n if (this.props.arrows) {\r\n className += \" hasArrows\";\r\n }\r\n\r\n const value = this.state.value === conflictingValuesPlaceholder ? \"\" : this.state.value;\r\n const placeholder = this.state.value === conflictingValuesPlaceholder ? conflictingValuesPlaceholder : \"\";\r\n return (\r\n <>\r\n {!this.props.useEuler && (\r\n <div className={this.props.additionalClass ? this.props.additionalClass + \" floatLine\" : \"floatLine\"}>\r\n {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n {(!this.props.icon \|\| this.props.label != \"\") && (\r\n <div className=\"label\" title={this.props.label}>\r\n {this.props.label}\r\n </div>\r\n )}\r\n <div className={className}>\r\n <input\r\n type={\"number\"}\r\n step={this.props.step \|\| this.props.isInteger ? \"1\" : \"0.01\"}\r\n className=\"numeric-input\"\r\n onKeyDown={(evt) => this.onKeyDown(evt)}\r\n value={value}\r\n onBlur={() => {\r\n this.unlock();\r\n if (this.props.onEnter) {\r\n this.props.onEnter(this._store);\r\n }\r\n }}\r\n placeholder={placeholder}\r\n onFocus={() => this.lock()}\r\n onChange={(evt) => this.updateValue(evt.target.value)}\r\n />\r\n {this.props.arrows && (\r\n <InputArrowsComponent\r\n incrementValue={(amount) => this.incrementValue(amount)}\r\n setDragging={(newDragging) => {\r\n const currentDragging = this.state.dragging;\r\n // drag stopped\r\n if (!currentDragging && newDragging && this.props.onDragStart) {\r\n this.props.onDragStart(valueAsNumber);\r\n } else if (currentDragging && !newDragging && this.props.onDragStop) {\r\n this.props.onDragStop(valueAsNumber);\r\n }\r\n this.setState({ dragging: newDragging });\r\n }}\r\n />\r\n )}\r\n </div>\r\n {this.props.unit}\r\n </div>\r\n )}\r\n {this.props.useEuler && (\r\n <SliderLineComponent\r\n lockObject={this.props.lockObject}\r\n label={this.props.label}\r\n minimum={0}\r\n maximum={360}\r\n step={0.1}\r\n directValue={Tools.ToDegrees(valueAsNumber)}\r\n onChange={(value) => this.updateValue(Tools.ToRadians(value).toString())}\r\n />\r\n )}\r\n </>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"floatLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/floatLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\n\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\nimport { SliderLineComponent } from \"./sliderLineComponent\";\r\nimport { Tools } from \"core/Misc/tools\";\r\nimport { conflictingValuesPlaceholder } from \"./targetsProxy\";\r\nimport { InputArrowsComponent } from \"./inputArrowsComponent\";\r\n\r\ninterface IFloatLineComponentProps {\r\n label: string;\r\n target: any;\r\n propertyName: string;\r\n lockObject: LockObject;\r\n onChange?: (newValue: number) => void;\r\n isInteger?: boolean;\r\n onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n additionalClass?: string;\r\n step?: string;\r\n digits?: number;\r\n useEuler?: boolean;\r\n min?: number;\r\n max?: number;\r\n smallUI?: boolean;\r\n onEnter?: (newValue: number) => void;\r\n icon?: string;\r\n iconLabel?: string;\r\n defaultValue?: number;\r\n arrows?: boolean;\r\n unit?: React.ReactNode;\r\n onDragStart?: (newValue: number) => void;\r\n onDragStop?: (newValue: number) => void;\r\n disabled?: boolean;\r\n}\r\n\r\nexport class FloatLineComponent extends React.Component<IFloatLineComponentProps, { value: string; dragging: boolean }> {\r\n private _localChange = false;\r\n private _store: number;\r\n\r\n constructor(props: IFloatLineComponentProps) {\r\n super(props);\r\n\r\n const currentValue = this.props.target[this.props.propertyName];\r\n this.state = { value: this.getValueString(currentValue, this.props), dragging: false };\r\n this._store = currentValue;\r\n }\r\n\r\n componentWillUnmount() {\r\n this.unlock();\r\n }\r\n\r\n getValueString(value: any, props: IFloatLineComponentProps): string {\r\n if (value) {\r\n if (value === conflictingValuesPlaceholder) {\r\n return conflictingValuesPlaceholder;\r\n } else if (props.isInteger) {\r\n return value.toFixed(0);\r\n } else {\r\n return value.toFixed(props.digits \|\| 4);\r\n }\r\n }\r\n return \"0\";\r\n }\r\n\r\n shouldComponentUpdate(nextProps: IFloatLineComponentProps, nextState: { value: string; dragging: boolean }) {\r\n if (this._localChange) {\r\n this._localChange = false;\r\n return true;\r\n }\r\n\r\n const newValue = nextProps.target[nextProps.propertyName];\r\n const newValueString = this.getValueString(newValue, nextProps);\r\n\r\n if (newValueString !== nextState.value) {\r\n nextState.value = newValueString;\r\n return true;\r\n }\r\n\r\n if (nextState.dragging != this.state.dragging \|\| nextProps.unit !== this.props.unit \|\| nextProps.isInteger !== this.props.isInteger) {\r\n return true;\r\n }\r\n\r\n return false;\r\n }\r\n\r\n raiseOnPropertyChanged(newValue: number, previousValue: number) {\r\n if (this.props.onChange) {\r\n this.props.onChange(newValue);\r\n }\r\n\r\n if (!this.props.onPropertyChangedObservable) {\r\n return;\r\n }\r\n this.props.onPropertyChangedObservable.notifyObservers({\r\n object: this.props.target,\r\n property: this.props.propertyName,\r\n value: newValue,\r\n initialValue: previousValue,\r\n });\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 let valueAsNumber: number;\r\n\r\n if (this.props.isInteger) {\r\n valueAsNumber = parseInt(valueString);\r\n } else {\r\n valueAsNumber = parseFloat(valueString);\r\n }\r\n\r\n if (!isNaN(valueAsNumber)) {\r\n if (this.props.min !== undefined) {\r\n if (valueAsNumber < this.props.min) {\r\n valueAsNumber = this.props.min;\r\n valueString = valueAsNumber.toString();\r\n }\r\n }\r\n if (this.props.max !== undefined) {\r\n if (valueAsNumber > this.props.max) {\r\n valueAsNumber = this.props.max;\r\n valueString = valueAsNumber.toString();\r\n }\r\n }\r\n } else if (this.props.defaultValue != null) {\r\n valueAsNumber = this.props.defaultValue;\r\n }\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.target[this.props.propertyName] = valueAsNumber;\r\n this.raiseOnPropertyChanged(valueAsNumber, this._store);\r\n\r\n this._store = valueAsNumber;\r\n }\r\n\r\n lock() {\r\n if (this.props.lockObject) {\r\n this.props.lockObject.lock = true;\r\n }\r\n }\r\n\r\n unlock() {\r\n if (this.props.lockObject) {\r\n this.props.lockObject.lock = false;\r\n }\r\n }\r\n\r\n incrementValue(amount: number, processStep: boolean = true) {\r\n if (processStep && this.props.step) {\r\n amount = parseFloat(this.props.step);\r\n }\r\n\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(2));\r\n }\r\n\r\n onKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\r\n const step = parseFloat(this.props.step \|\| this.props.isInteger ? \"1\" : \"0.01\");\r\n const handleArrowKey = (sign: number) => {\r\n if (event.shiftKey) {\r\n sign = 10;\r\n if (event.ctrlKey \|\| event.metaKey) {\r\n sign = 10;\r\n }\r\n }\r\n\r\n this.incrementValue(sign step, false);\r\n event.preventDefault();\r\n };\r\n\r\n if (event.key === \"ArrowUp\") {\r\n handleArrowKey(1);\r\n } else if (event.key === \"ArrowDown\") {\r\n handleArrowKey(-1);\r\n }\r\n if (event.key === \"Enter\" && this.props.onEnter) {\r\n this.props.onEnter(this._store);\r\n }\r\n }\r\n\r\n render() {\r\n let valueAsNumber: number;\r\n\r\n if (this.props.isInteger) {\r\n valueAsNumber = parseInt(this.state.value);\r\n } else {\r\n valueAsNumber = parseFloat(this.state.value);\r\n }\r\n\r\n let className = this.props.smallUI ? \"short\" : \"value\";\r\n if (this.state.dragging) {\r\n className += \" dragging\";\r\n }\r\n if (this.props.arrows) {\r\n className += \" hasArrows\";\r\n }\r\n\r\n const value = this.state.value === conflictingValuesPlaceholder ? \"\" : this.state.value;\r\n const placeholder = this.state.value === conflictingValuesPlaceholder ? conflictingValuesPlaceholder : \"\";\r\n return (\r\n <>\r\n {!this.props.useEuler && (\r\n <div className={this.props.additionalClass ? this.props.additionalClass + \" floatLine\" : \"floatLine\"}>\r\n {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n {(!this.props.icon \|\| this.props.label != \"\") && (\r\n <div className=\"label\" title={this.props.label}>\r\n {this.props.label}\r\n </div>\r\n )}\r\n <div className={className}>\r\n <input\r\n type={\"number\"}\r\n step={this.props.step \|\| this.props.isInteger ? \"1\" : \"0.01\"}\r\n className=\"numeric-input\"\r\n onKeyDown={(evt) => this.onKeyDown(evt)}\r\n value={value}\r\n onBlur={() => {\r\n this.unlock();\r\n if (this.props.onEnter) {\r\n this.props.onEnter(this._store);\r\n }\r\n }}\r\n placeholder={placeholder}\r\n onFocus={() => this.lock()}\r\n onChange={(evt) => this.updateValue(evt.target.value)}\r\n disabled={this.props.disabled}\r\n />\r\n {this.props.arrows && (\r\n <InputArrowsComponent\r\n incrementValue={(amount) => this.incrementValue(amount)}\r\n setDragging={(newDragging) => {\r\n const currentDragging = this.state.dragging;\r\n // drag stopped\r\n if (!currentDragging && newDragging && this.props.onDragStart) {\r\n this.props.onDragStart(valueAsNumber);\r\n } else if (currentDragging && !newDragging && this.props.onDragStop) {\r\n this.props.onDragStop(valueAsNumber);\r\n }\r\n this.setState({ dragging: newDragging });\r\n }}\r\n />\r\n )}\r\n </div>\r\n {this.props.unit}\r\n </div>\r\n )}\r\n {this.props.useEuler && (\r\n <SliderLineComponent\r\n lockObject={this.props.lockObject}\r\n label={this.props.label}\r\n minimum={0}\r\n maximum={360}\r\n step={0.1}\r\n directValue={Tools.ToDegrees(valueAsNumber)}\r\n onChange={(value) => this.updateValue(Tools.ToRadians(value).toString())}\r\n />\r\n )}\r\n </>\r\n );\r\n }\r\n}\r\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@babylonjs/shared-ui-components",
-    "version": "6.39.0",
+    "version": "6.40.0",
     "main": "index.js",
     "module": "index.js",
     "types": "index.d.ts",