@babylonjs/shared-ui-components 6.39.0 → 6.41.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
  1. package/components/TextInputWithSubmit.d.ts +2 -0
  2. package/components/TextInputWithSubmit.js +2 -0
  3. package/components/TextInputWithSubmit.js.map +1 -1
  4. package/components/layout/DraggableIcon.d.ts +2 -0
  5. package/components/layout/DraggableIcon.js +2 -0
  6. package/components/layout/DraggableIcon.js.map +1 -1
  7. package/components/layout/FlexibleDragHandler.d.ts +2 -0
  8. package/components/layout/FlexibleDragHandler.js +2 -0
  9. package/components/layout/FlexibleDragHandler.js.map +1 -1
  10. package/components/layout/FlexibleDropZone.d.ts +2 -0
  11. package/components/layout/FlexibleDropZone.js +2 -0
  12. package/components/layout/FlexibleDropZone.js.map +1 -1
  13. package/components/layout/FlexibleGridContainer.d.ts +1 -0
  14. package/components/layout/FlexibleGridContainer.js +1 -0
  15. package/components/layout/FlexibleGridContainer.js.map +1 -1
  16. package/components/layout/FlexibleGridLayout.d.ts +2 -0
  17. package/components/layout/FlexibleGridLayout.js +2 -0
  18. package/components/layout/FlexibleGridLayout.js.map +1 -1
  19. package/components/layout/FlexibleResizeBar.d.ts +2 -0
  20. package/components/layout/FlexibleResizeBar.js +2 -0
  21. package/components/layout/FlexibleResizeBar.js.map +1 -1
  22. package/components/layout/FlexibleTab.d.ts +2 -0
  23. package/components/layout/FlexibleTab.js +2 -0
  24. package/components/layout/FlexibleTab.js.map +1 -1
  25. package/components/layout/FlexibleTabsContainer.d.ts +2 -0
  26. package/components/layout/FlexibleTabsContainer.js +2 -0
  27. package/components/layout/FlexibleTabsContainer.js.map +1 -1
  28. package/components/layout/utils.d.ts +4 -0
  29. package/components/layout/utils.js +4 -0
  30. package/components/layout/utils.js.map +1 -1
  31. package/components/reactGraphSystem/GraphConnectorHandle.d.ts +1 -0
  32. package/components/reactGraphSystem/GraphConnectorHandle.js +1 -0
  33. package/components/reactGraphSystem/GraphConnectorHandle.js.map +1 -1
  34. package/components/reactGraphSystem/GraphLine.d.ts +2 -0
  35. package/components/reactGraphSystem/GraphLine.js +2 -0
  36. package/components/reactGraphSystem/GraphLine.js.map +1 -1
  37. package/components/reactGraphSystem/GraphNodesContainer.d.ts +2 -0
  38. package/components/reactGraphSystem/GraphNodesContainer.js +2 -0
  39. package/components/reactGraphSystem/GraphNodesContainer.js.map +1 -1
  40. package/lines/floatLineComponent.d.ts +1 -0
  41. package/lines/floatLineComponent.js +1 -1
  42. package/lines/floatLineComponent.js.map +1 -1
  43. package/package.json +1 -1
@@ -8,5 +8,7 @@ export interface ITextInputProps {
8
8
  }
9
9
  /**
10
10
  * This component represents a text input that can be submitted or cancelled on buttons
11
+ * @param props properties
12
+ * @returns TextInputWithSubmit element
11
13
  */
12
14
  export declare const TextInputWithSubmit: (props: ITextInputProps) => JSX.Element;
@@ -8,6 +8,8 @@ import cancelIcon from "../imgs/deleteGridElementDark.svg";
8
8
  import { ClassNames } from "./classNames.js";
9
9
  /**
10
10
  * This component represents a text input that can be submitted or cancelled on buttons
11
+ * @param props properties
12
+ * @returns TextInputWithSubmit element
11
13
  */
12
14
  export const TextInputWithSubmit = (props) => {
13
15
  const [value, setValue] = useState("");
@@ -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"]}
@@ -19,5 +19,7 @@ export interface IDraggableIconProps {
19
19
  }
20
20
  /**
21
21
  * An icon that can be dragged by the user
22
+ * @param props properties
23
+ * @returns draggable icon element
22
24
  */
23
25
  export declare const DraggableIcon: FC<IDraggableIconProps>;
@@ -2,6 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { useDrag } from "react-dnd";
3
3
  /**
4
4
  * An icon that can be dragged by the user
5
+ * @param props properties
6
+ * @returns draggable icon element
5
7
  */
6
8
  export const DraggableIcon = (props) => {
7
9
  const [, drag] = useDrag(() => ({
@@ -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"]}
@@ -14,5 +14,7 @@ export interface IFlexibleDragHandlerProps {
14
14
  }
15
15
  /**
16
16
  * This component receives the drop events and updates the layout accordingly
17
+ * @param props properties
18
+ * @returns DragHandler element
17
19
  */
18
20
  export declare const FlexibleDragHandler: FC<IFlexibleDragHandlerProps>;
@@ -7,6 +7,8 @@ import { addPercentageStringToNumber, getPosInLayout } from "./utils.js";
7
7
  import { LayoutContext } from "./LayoutContext.js";
8
8
  /**
9
9
  * This component receives the drop events and updates the layout accordingly
10
+ * @param props properties
11
+ * @returns DragHandler element
10
12
  */
11
13
  export const FlexibleDragHandler = (props) => {
12
14
  const { layout, setLayout } = useContext(LayoutContext);
@@ -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;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 */\r\nexport const FlexibleDragHandler: FC<IFlexibleDragHandlerProps> = (props) => {\r\n const { layout, setLayout } = useContext(LayoutContext);\r\n // CLICK/DRAG INFORMATION\r\n const pointerPos = useRef<Nullable<Vector2>>(null);\r\n const [_, drop] = useDrop(() => ({\r\n accept: [ElementTypes.RESIZE_BAR],\r\n hover(item, monitor) {\r\n const anyitem = item as ResizeItem;\r\n\r\n const xy = monitor.getClientOffset();\r\n const pos = new Vector2(xy!.x, xy!.y);\r\n if (pointerPos.current) {\r\n if (monitor.getItemType() === ElementTypes.RESIZE_BAR) {\r\n onResize(anyitem.rowNumber, anyitem.columnNumber, pos, pointerPos.current, anyitem.direction);\r\n }\r\n }\r\n pointerPos.current = pos;\r\n },\r\n drop(item, monitor) {\r\n pointerPos.current = null;\r\n },\r\n }));\r\n\r\n const getLayoutProperty = (layout: LayoutColumn | LayoutTabsRow, property: \"width\" | \"height\") => {\r\n if (property === \"width\") {\r\n return (layout as LayoutColumn)[property];\r\n } else {\r\n return (layout as LayoutTabsRow)[property];\r\n }\r\n };\r\n\r\n const setLayoutProperty = (layout: LayoutColumn | LayoutTabsRow, property: \"width\" | \"height\", value: string) => {\r\n if (property === \"width\") {\r\n (layout as LayoutColumn)[property] = value;\r\n } else {\r\n (layout as LayoutTabsRow)[property] = value;\r\n }\r\n };\r\n\r\n const processResize = (\r\n pos: Vector2,\r\n prevPos: Vector2,\r\n row0: number | undefined,\r\n column0: number,\r\n row1: number | undefined,\r\n column1: number,\r\n axis: \"x\" | \"y\",\r\n maxAxisValue: number,\r\n property: \"width\" | \"height\",\r\n minFinalValue: number\r\n ) => {\r\n // Check axis difference\r\n const axisDiff = pos[axis] - prevPos[axis];\r\n\r\n try {\r\n // Get layout rows\r\n const layoutElement0 = getPosInLayout(layout, column0, row0);\r\n const layoutElement1 = getPosInLayout(layout, column1, row1);\r\n\r\n if (layoutElement0 && layoutElement1) {\r\n const percDiff = (axisDiff / maxAxisValue) * 100;\r\n\r\n const newValue0 = addPercentageStringToNumber(getLayoutProperty(layoutElement0, property), percDiff);\r\n const newValue1 = addPercentageStringToNumber(getLayoutProperty(layoutElement1, property), -percDiff);\r\n\r\n if (newValue0 >= minFinalValue && newValue1 >= minFinalValue) {\r\n setLayoutProperty(layoutElement0, property, newValue0.toFixed(2) + \"%\");\r\n setLayoutProperty(layoutElement1, property, newValue1.toFixed(2) + \"%\");\r\n }\r\n\r\n setLayout({ ...layout });\r\n }\r\n } catch (e) {\r\n // If an error occurred, we're trying to resize something invalid, so don't do anything\r\n return;\r\n }\r\n };\r\n\r\n const processResizeRow = (pos: Vector2, prevPos: Vector2, args: { row: number; column: number }) => {\r\n processResize(pos, prevPos, args.row, args.column, args.row + 1, args.column, \"y\", props.containerSize.height, \"height\", 5);\r\n };\r\n\r\n const processResizeColumn = (pos: Vector2, prevPos: Vector2, args: { row: number; column: number }) => {\r\n processResize(pos, prevPos, undefined, args.column, undefined, args.column + 1, \"x\", props.containerSize.width, \"width\", 5);\r\n };\r\n\r\n const onResize = (row: number, column: number, pos: Vector2, prevPos: Vector2, type: \"row\" | \"column\") => {\r\n if (type === \"row\") {\r\n processResizeRow(pos, prevPos, { row, column });\r\n } else {\r\n processResizeColumn(pos, prevPos, { row, column });\r\n }\r\n pointerPos.current = pos;\r\n };\r\n\r\n return (\r\n <div ref={drop} style={{ width: \"100%\", height: \"100%\" }}>\r\n {props.children}\r\n </div>\r\n );\r\n};\r\n"]}
1
+ {"version":3,"file":"FlexibleDragHandler.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleDragHandler.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FC } from \"react\";\r\nimport { useContext, useRef } from \"react\";\r\nimport { Vector2 } from \"core/Maths/math\";\r\nimport type { Nullable } from \"core/types\";\r\nimport { useDrop } from \"react-dnd\";\r\nimport { ElementTypes } from \"./types\";\r\nimport type { LayoutTabsRow, LayoutColumn } from \"./types\";\r\nimport { addPercentageStringToNumber, getPosInLayout } from \"./utils\";\r\nimport { LayoutContext } from \"./LayoutContext\";\r\nimport type { ResizeItem } from \"./FlexibleResizeBar\";\r\n\r\n/**\r\n * Arguments for the DragHandler component.\r\n */\r\nexport interface IFlexibleDragHandlerProps {\r\n /**\r\n * The size of the containing element. Used to calculate the percentage of\r\n * space occupied by the component\r\n */\r\n containerSize: { width: number; height: number };\r\n}\r\n\r\n/**\r\n * This component receives the drop events and updates the layout accordingly\r\n * @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"]}
@@ -15,5 +15,7 @@ export interface IFlexibleDropZoneProps {
15
15
  /**
16
16
  * This component contains the drag and drop zone for the resize bars that
17
17
  * allow redefining width and height of layout elements
18
+ * @param props properties
19
+ * @returns drop zone element
18
20
  */
19
21
  export declare const FlexibleDropZone: FC<IFlexibleDropZoneProps>;
@@ -5,6 +5,8 @@ import { ResizeDirections } from "./types.js";
5
5
  /**
6
6
  * This component contains the drag and drop zone for the resize bars that
7
7
  * allow redefining width and height of layout elements
8
+ * @param props properties
9
+ * @returns drop zone element
8
10
  */
9
11
  export const FlexibleDropZone = (props) => {
10
12
  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 })] }));
@@ -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"]}
@@ -6,5 +6,6 @@ export interface IFlexibleGridContainerProps {
6
6
  }
7
7
  /**
8
8
  * Component responsible for mapping the layout to the actual components
9
+ * @returns GridContainer element
9
10
  */
10
11
  export declare const FlexibleGridContainer: FC<IFlexibleGridContainerProps>;
@@ -7,6 +7,7 @@ import { FlexibleTabsContainer } from "./FlexibleTabsContainer.js";
7
7
  import style from "./FlexibleGridContainer.modules.scss";
8
8
  /**
9
9
  * Component responsible for mapping the layout to the actual components
10
+ * @returns GridContainer element
10
11
  */
11
12
  export const FlexibleGridContainer = () => {
12
13
  const context = useContext(LayoutContext);
@@ -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"]}
@@ -12,5 +12,7 @@ export interface IFlexibleGridLayoutProps {
12
12
  /**
13
13
  * This component represents a grid layout that can be resized and rearranged
14
14
  * by the user.
15
+ * @param props properties
16
+ * @returns layout element
15
17
  */
16
18
  export declare const FlexibleGridLayout: FC<IFlexibleGridLayoutProps>;
@@ -8,6 +8,8 @@ import { FlexibleGridContainer } from "./FlexibleGridContainer.js";
8
8
  /**
9
9
  * This component represents a grid layout that can be resized and rearranged
10
10
  * by the user.
11
+ * @param props properties
12
+ * @returns layout element
11
13
  */
12
14
  export const FlexibleGridLayout = (props) => {
13
15
  const [layout, setLayout] = useState(props.layoutDefinition);
@@ -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"]}
@@ -36,5 +36,7 @@ export type ResizeItem = {
36
36
  };
37
37
  /**
38
38
  * A component that renders a bar that the user can drag to resize.
39
+ * @param props properties
40
+ * @returns resize bar element
39
41
  */
40
42
  export declare const FlexibleResizeBar: FC<IFlexibleRowResizerProps>;
@@ -5,6 +5,8 @@ import { ClassNames } from "../classNames.js";
5
5
  import style from "./FlexibleResizeBar.modules.scss";
6
6
  /**
7
7
  * A component that renders a bar that the user can drag to resize.
8
+ * @param props properties
9
+ * @returns resize bar element
8
10
  */
9
11
  export const FlexibleResizeBar = (props) => {
10
12
  const [_, drag] = useDrag(() => ({
@@ -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"]}
@@ -30,5 +30,7 @@ export interface IFlexibleTabProps {
30
30
  * to activate or drag to reorder. It also listens for
31
31
  * drop events if the user wants to drop another tab
32
32
  * after it.
33
+ * @param props properties
34
+ * @returns FlexibleTab element
33
35
  */
34
36
  export declare const FlexibleTab: FC<IFlexibleTabProps>;
@@ -8,6 +8,8 @@ import style from "./FlexibleTab.modules.scss";
8
8
  * to activate or drag to reorder. It also listens for
9
9
  * drop events if the user wants to drop another tab
10
10
  * after it.
11
+ * @param props properties
12
+ * @returns FlexibleTab element
11
13
  */
12
14
  export const FlexibleTab = (props) => {
13
15
  const [{ isDragging }, drag] = useDrag(() => ({
@@ -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"]}
@@ -24,5 +24,7 @@ export interface IFlexibleTabsContainerProps {
24
24
  /**
25
25
  * This component contains a set of tabs of which only one is visible at a time.
26
26
  * The tabs can also be dragged from and to different containers.
27
+ * @param props properties
28
+ * @returns tabs container element
27
29
  */
28
30
  export declare const FlexibleTabsContainer: FC<IFlexibleTabsContainerProps>;
@@ -10,6 +10,8 @@ import { ElementTypes } from "./types.js";
10
10
  /**
11
11
  * This component contains a set of tabs of which only one is visible at a time.
12
12
  * The tabs can also be dragged from and to different containers.
13
+ * @param props properties
14
+ * @returns tabs container element
13
15
  */
14
16
  export const FlexibleTabsContainer = (props) => {
15
17
  const { layout, setLayout } = useContext(LayoutContext);
@@ -1 +1 @@
1
- {"version":3,"file":"FlexibleTabsContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleTabsContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FC } from \"react\";\r\nimport { useContext } from \"react\";\r\nimport { FlexibleTab } from \"./FlexibleTab\";\r\nimport { LayoutContext } from \"./LayoutContext\";\r\nimport style from \"./FlexibleTabsContainer.modules.scss\";\r\n\r\nimport dragIcon from \"../../imgs/dragDotsIcon_white.svg\";\r\nimport { getPosInLayout, removeLayoutRowAndRedistributePercentages } from \"./utils\";\r\nimport { DraggableIcon } from \"./DraggableIcon\";\r\nimport type { LayoutTab, LayoutTabsRow, TabDrag } from \"./types\";\r\nimport { ElementTypes } from \"./types\";\r\n\r\n/**\r\n * Arguments for the TabsContainer component.\r\n */\r\nexport interface IFlexibleTabsContainerProps {\r\n /**\r\n * The tabs to display\r\n */\r\n tabs: LayoutTab[];\r\n /**\r\n * Row index of component in layout\r\n */\r\n rowIndex: number;\r\n /**\r\n * Column index of component in layout\r\n */\r\n columnIndex: number;\r\n /**\r\n * Which tab is selected in the layout\r\n */\r\n selectedTab?: string;\r\n}\r\n\r\n/**\r\n * This component contains a set of tabs of which only one is visible at a time.\r\n * The tabs can also be dragged from and to different containers.\r\n */\r\nexport const FlexibleTabsContainer: FC<IFlexibleTabsContainerProps> = (props) => {\r\n const { layout, setLayout } = useContext(LayoutContext);\r\n const { tabs, selectedTab } = props;\r\n const selectedTabId = props.selectedTab !== undefined ? props.selectedTab : tabs[0].id;\r\n const selectedTabArray = tabs.filter((tab) => tab.id === selectedTabId);\r\n const selectedTabObject = selectedTabArray.length > 0 ? selectedTabArray[0] : null;\r\n\r\n const selectTab = (tabId: string) => {\r\n const layoutPos = getPosInLayout(layout, props.columnIndex, props.rowIndex) as LayoutTabsRow;\r\n layoutPos.selectedTab = tabId;\r\n setLayout({ ...layout });\r\n };\r\n\r\n const addTabAfter = (droppedTabItem: TabDrag, dropZoneTabId: string) => {\r\n // Get layout element corresponding to dropped tabs\r\n const layoutDropped = getPosInLayout(layout, droppedTabItem.columnNumber, droppedTabItem.rowNumber) as LayoutTabsRow;\r\n // Get layout element corresponding to dropzone\r\n const layoutDropZone = getPosInLayout(layout, props.columnIndex, props.rowIndex) as LayoutTabsRow;\r\n\r\n for (const { id } of droppedTabItem.tabs) {\r\n const droppedTabIndex = layoutDropped.tabs.findIndex((tab: any) => tab.id === id);\r\n const droppedTab = layoutDropped.tabs[droppedTabIndex];\r\n // Add dropped tab after dropZoneTabId\r\n const dropZoneIndex = layoutDropZone.tabs.findIndex((tab: any) => tab.id === dropZoneTabId);\r\n layoutDropZone.tabs.splice(dropZoneIndex + 1, 0, droppedTab);\r\n // Remove dropped tab from its original position\r\n layoutDropped.tabs.splice(droppedTabIndex, 1);\r\n }\r\n\r\n if (layoutDropped.tabs.length === 0) {\r\n // Check if the layout that was dropped from is empty now\r\n removeLayoutRowAndRedistributePercentages(layout, droppedTabItem.columnNumber, droppedTabItem.rowNumber);\r\n } else if (droppedTabItem.tabs.map((tab: any) => tab.id).includes(layoutDropped.selectedTab)) {\r\n //Check if the layout that was dropped from's active tab is still in the layout\r\n layoutDropped.selectedTab = layoutDropped.tabs[0].id;\r\n }\r\n\r\n // Update layout\r\n setLayout({ ...layout });\r\n };\r\n\r\n return (\r\n <div className={style.rootContainer}>\r\n <div draggable={false} className={style.tabsLineContainer}>\r\n <div className={style.tabsContainer}>\r\n {tabs.map((tab) => {\r\n return (\r\n <FlexibleTab\r\n key={tab.id}\r\n title={tab.title}\r\n selected={tab.id === selectedTab}\r\n onClick={() => selectTab(tab.id)}\r\n item={{ rowNumber: props.rowIndex, columnNumber: props.columnIndex, tabs: [{ id: tab.id }] }}\r\n onTabDroppedAction={(item) => addTabAfter(item, tab.id)}\r\n />\r\n );\r\n })}\r\n </div>\r\n <DraggableIcon\r\n src={dragIcon}\r\n item={{ rowNumber: props.rowIndex, columnNumber: props.columnIndex, tabs: tabs.map((t) => ({ id: t.id })) }}\r\n type={ElementTypes.TAB_GROUP}\r\n />\r\n </div>\r\n <div className={style.contentContainer}>{selectedTabObject?.component}</div>\r\n </div>\r\n );\r\n};\r\n"]}
1
+ {"version":3,"file":"FlexibleTabsContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleTabsContainer.tsx"],"names":[],"mappings":";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;;;;;GAKG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAoC,CAAC,KAAK,EAAE,EAAE;IAC5E,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IACxD,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IACpC,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACvF,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,aAAa,CAAC,CAAC;IACxE,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAEnF,MAAM,SAAS,GAAG,CAAC,KAAa,EAAE,EAAE;QAChC,MAAM,SAAS,GAAG,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAkB,CAAC;QAC7F,SAAS,CAAC,WAAW,GAAG,KAAK,CAAC;QAC9B,SAAS,CAAC,EAAE,GAAG,MAAM,EAAE,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,cAAuB,EAAE,aAAqB,EAAE,EAAE;QACnE,mDAAmD;QACnD,MAAM,aAAa,GAAG,cAAc,CAAC,MAAM,EAAE,cAAc,CAAC,YAAY,EAAE,cAAc,CAAC,SAAS,CAAkB,CAAC;QACrH,+CAA+C;QAC/C,MAAM,cAAc,GAAG,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAkB,CAAC;QAElG,KAAK,MAAM,EAAE,EAAE,EAAE,IAAI,cAAc,CAAC,IAAI,EAAE;YACtC,MAAM,eAAe,GAAG,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAQ,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;YAClF,MAAM,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YACvD,sCAAsC;YACtC,MAAM,aAAa,GAAG,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAQ,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,aAAa,CAAC,CAAC;YAC5F,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,GAAG,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC;YAC7D,gDAAgD;YAChD,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC;SACjD;QAED,IAAI,aAAa,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE;YACjC,yDAAyD;YACzD,yCAAyC,CAAC,MAAM,EAAE,cAAc,CAAC,YAAY,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;SAC5G;aAAM,IAAI,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAQ,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE;YAC1F,+EAA+E;YAC/E,aAAa,CAAC,WAAW,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;SACxD;QAED,gBAAgB;QAChB,SAAS,CAAC,EAAE,GAAG,MAAM,EAAE,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,KAAK,CAAC,aAAa,aAC/B,eAAK,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,iBAAiB,aACrD,cAAK,SAAS,EAAE,KAAK,CAAC,aAAa,YAC9B,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;4BACd,OAAO,CACH,KAAC,WAAW,IAER,KAAK,EAAE,GAAG,CAAC,KAAK,EAChB,QAAQ,EAAE,GAAG,CAAC,EAAE,KAAK,WAAW,EAChC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,EAChC,IAAI,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,QAAQ,EAAE,YAAY,EAAE,KAAK,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,CAAC,EAAE,EAAE,CAAC,EAAE,EAC5F,kBAAkB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC,IALlD,GAAG,CAAC,EAAE,CAMb,CACL,CAAC;wBACN,CAAC,CAAC,GACA,EACN,KAAC,aAAa,IACV,GAAG,EAAE,QAAQ,EACb,IAAI,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,QAAQ,EAAE,YAAY,EAAE,KAAK,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAC3G,IAAI,EAAE,YAAY,CAAC,SAAS,GAC9B,IACA,EACN,cAAK,SAAS,EAAE,KAAK,CAAC,gBAAgB,YAAG,iBAAiB,EAAE,SAAS,GAAO,IAC1E,CACT,CAAC;AACN,CAAC,CAAC","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"]}
@@ -16,10 +16,14 @@ export declare const getPosInLayout: (layout: Layout, column: number, row?: numb
16
16
  export declare const removeLayoutRowAndRedistributePercentages: (layout: Layout, column: number, row: number) => void;
17
17
  /**
18
18
  * Add a percentage string to a number
19
+ * @param p1 the percentage string
20
+ * @param p2 the number
21
+ * @returns the sum of the percentage string and the number
19
22
  */
20
23
  export declare const addPercentageStringToNumber: (p1: string, p2: number) => number;
21
24
  /**
22
25
  * Parses a percentage string into a number
23
26
  * @param p the percentage string
27
+ * @returns the parsed number
24
28
  */
25
29
  export declare const parsePercentage: (p: string) => number;
@@ -50,6 +50,9 @@ export const removeLayoutRowAndRedistributePercentages = (layout, column, row) =
50
50
  };
51
51
  /**
52
52
  * Add a percentage string to a number
53
+ * @param p1 the percentage string
54
+ * @param p2 the number
55
+ * @returns the sum of the percentage string and the number
53
56
  */
54
57
  export const addPercentageStringToNumber = (p1, p2) => {
55
58
  // Convert both values to numbers
@@ -61,6 +64,7 @@ export const addPercentageStringToNumber = (p1, p2) => {
61
64
  /**
62
65
  * Parses a percentage string into a number
63
66
  * @param p the percentage string
67
+ * @returns the parsed number
64
68
  */
65
69
  export const parsePercentage = (p) => {
66
70
  return Number.parseFloat(p.replace("%", ""));
@@ -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"]}
@@ -39,5 +39,6 @@ export interface IGraphConnectorHandlerProps {
39
39
  /**
40
40
  * This component is used to initiate a connection between two nodes. Simply
41
41
  * drag the handle in a node and drop it in another node to create a connection.
42
+ * @returns connector element
42
43
  */
43
44
  export declare const GraphConnectorHandler: FC<IGraphConnectorHandlerProps>;
@@ -7,6 +7,7 @@ import { useGraphContext } from "./useGraphContext.js";
7
7
  /**
8
8
  * This component is used to initiate a connection between two nodes. Simply
9
9
  * drag the handle in a node and drop it in another node to create a connection.
10
+ * @returns connector element
10
11
  */
11
12
  export const GraphConnectorHandler = ({ parentId, parentX, parentY, offsetX = 0, offsetY = 0, parentWidth, parentHeight, parentContainerId }) => {
12
13
  const { onNodesConnected } = useGraphContext();
@@ -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"]}
@@ -36,5 +36,7 @@ export declare const MarkerArrowId = "arrow";
36
36
  /**
37
37
  * This component draws a SVG line between two points, with an optional marker
38
38
  * indicating direction
39
+ * @param props properties
40
+ * @returns graph line element
39
41
  */
40
42
  export declare const GraphLine: FC<IGraphLineProps>;
@@ -4,6 +4,8 @@ export const MarkerArrowId = "arrow";
4
4
  /**
5
5
  * This component draws a SVG line between two points, with an optional marker
6
6
  * indicating direction
7
+ * @param props properties
8
+ * @returns graph line element
7
9
  */
8
10
  export const GraphLine = (props) => {
9
11
  const { id, x1, x2, y1, y2, selected, directional = true } = props;
@@ -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"]}
@@ -5,5 +5,7 @@ export interface IGraphContainerProps {
5
5
  }
6
6
  /**
7
7
  * This component contains all the nodes and handles their dragging
8
+ * @param props properties
9
+ * @returns graph node container element
8
10
  */
9
11
  export declare const GraphNodesContainer: FC<IGraphContainerProps>;
@@ -4,6 +4,8 @@ import { useEffect, useRef } from "react";
4
4
  import { useDragLayer } from "react-dnd";
5
5
  /**
6
6
  * This component contains all the nodes and handles their dragging
7
+ * @param props properties
8
+ * @returns graph node container element
7
9
  */
8
10
  export const GraphNodesContainer = (props) => {
9
11
  const lastDragPos = useRef(null);
@@ -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"]}
@@ -25,6 +25,7 @@ interface IFloatLineComponentProps {
25
25
  unit?: React.ReactNode;
26
26
  onDragStart?: (newValue: number) => void;
27
27
  onDragStop?: (newValue: number) => void;
28
+ disabled?: boolean;
28
29
  }
29
30
  export declare class FloatLineComponent extends React.Component<IFloatLineComponentProps, {
30
31
  value: string;
@@ -160,7 +160,7 @@ export class FloatLineComponent extends React.Component {
160
160
  if (this.props.onEnter) {
161
161
  this.props.onEnter(this._store);
162
162
  }
163
- }, placeholder: placeholder, onFocus: () => this.lock(), onChange: (evt) => this.updateValue(evt.target.value) }), this.props.arrows && (_jsx(InputArrowsComponent, { incrementValue: (amount) => this.incrementValue(amount), setDragging: (newDragging) => {
163
+ }, 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) => {
164
164
  const currentDragging = this.state.dragging;
165
165
  // drag stopped
166
166
  if (!currentDragging && newDragging && this.props.onDragStart) {
@@ -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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@babylonjs/shared-ui-components",
3
- "version": "6.39.0",
3
+ "version": "6.41.0",
4
4
  "main": "index.js",
5
5
  "module": "index.js",
6
6
  "types": "index.d.ts",