@babylonjs/shared-ui-components 6.39.0 → 6.40.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/TextInputWithSubmit.d.ts +2 -0
- package/components/TextInputWithSubmit.js +2 -0
- package/components/TextInputWithSubmit.js.map +1 -1
- package/components/layout/DraggableIcon.d.ts +2 -0
- package/components/layout/DraggableIcon.js +2 -0
- package/components/layout/DraggableIcon.js.map +1 -1
- package/components/layout/FlexibleDragHandler.d.ts +2 -0
- package/components/layout/FlexibleDragHandler.js +2 -0
- package/components/layout/FlexibleDragHandler.js.map +1 -1
- package/components/layout/FlexibleDropZone.d.ts +2 -0
- package/components/layout/FlexibleDropZone.js +2 -0
- package/components/layout/FlexibleDropZone.js.map +1 -1
- package/components/layout/FlexibleGridContainer.d.ts +1 -0
- package/components/layout/FlexibleGridContainer.js +1 -0
- package/components/layout/FlexibleGridContainer.js.map +1 -1
- package/components/layout/FlexibleGridLayout.d.ts +2 -0
- package/components/layout/FlexibleGridLayout.js +2 -0
- package/components/layout/FlexibleGridLayout.js.map +1 -1
- package/components/layout/FlexibleResizeBar.d.ts +2 -0
- package/components/layout/FlexibleResizeBar.js +2 -0
- package/components/layout/FlexibleResizeBar.js.map +1 -1
- package/components/layout/FlexibleTab.d.ts +2 -0
- package/components/layout/FlexibleTab.js +2 -0
- package/components/layout/FlexibleTab.js.map +1 -1
- package/components/layout/FlexibleTabsContainer.d.ts +2 -0
- package/components/layout/FlexibleTabsContainer.js +2 -0
- package/components/layout/FlexibleTabsContainer.js.map +1 -1
- package/components/layout/utils.d.ts +4 -0
- package/components/layout/utils.js +4 -0
- package/components/layout/utils.js.map +1 -1
- package/components/reactGraphSystem/GraphConnectorHandle.d.ts +1 -0
- package/components/reactGraphSystem/GraphConnectorHandle.js +1 -0
- package/components/reactGraphSystem/GraphConnectorHandle.js.map +1 -1
- package/components/reactGraphSystem/GraphLine.d.ts +2 -0
- package/components/reactGraphSystem/GraphLine.js +2 -0
- package/components/reactGraphSystem/GraphLine.js.map +1 -1
- package/components/reactGraphSystem/GraphNodesContainer.d.ts +2 -0
- package/components/reactGraphSystem/GraphNodesContainer.js +2 -0
- package/components/reactGraphSystem/GraphNodesContainer.js.map +1 -1
- package/lines/floatLineComponent.d.ts +1 -0
- package/lines/floatLineComponent.js +1 -1
- package/lines/floatLineComponent.js.map +1 -1
- 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
|
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"]}
|
@@ -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
|
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
|
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
|
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"]}
|
@@ -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
|
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
|
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"]}
|
@@ -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
|
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
|
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":";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
|
1
|
+
{"version":3,"file":"FlexibleTabsContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleTabsContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FC } from \"react\";\r\nimport { useContext } from \"react\";\r\nimport { FlexibleTab } from \"./FlexibleTab\";\r\nimport { LayoutContext } from \"./LayoutContext\";\r\nimport style from \"./FlexibleTabsContainer.modules.scss\";\r\n\r\nimport dragIcon from \"../../imgs/dragDotsIcon_white.svg\";\r\nimport { getPosInLayout, removeLayoutRowAndRedistributePercentages } from \"./utils\";\r\nimport { DraggableIcon } from \"./DraggableIcon\";\r\nimport type { LayoutTab, LayoutTabsRow, TabDrag } from \"./types\";\r\nimport { ElementTypes } from \"./types\";\r\n\r\n/**\r\n * Arguments for the TabsContainer component.\r\n */\r\nexport interface IFlexibleTabsContainerProps {\r\n /**\r\n * The tabs to display\r\n */\r\n tabs: LayoutTab[];\r\n /**\r\n * Row index of component in layout\r\n */\r\n rowIndex: number;\r\n /**\r\n * Column index of component in layout\r\n */\r\n columnIndex: number;\r\n /**\r\n * Which tab is selected in the layout\r\n */\r\n selectedTab?: string;\r\n}\r\n\r\n/**\r\n * This component contains a set of tabs of which only one is visible at a time.\r\n * The tabs can also be dragged from and to different containers.\r\n * @param props properties\r\n * @returns tabs container element\r\n */\r\nexport const FlexibleTabsContainer: FC<IFlexibleTabsContainerProps> = (props) => {\r\n const { layout, setLayout } = useContext(LayoutContext);\r\n const { tabs, selectedTab } = props;\r\n const selectedTabId = props.selectedTab !== undefined ? props.selectedTab : tabs[0].id;\r\n const selectedTabArray = tabs.filter((tab) => tab.id === selectedTabId);\r\n const selectedTabObject = selectedTabArray.length > 0 ? selectedTabArray[0] : null;\r\n\r\n const selectTab = (tabId: string) => {\r\n const layoutPos = getPosInLayout(layout, props.columnIndex, props.rowIndex) as LayoutTabsRow;\r\n layoutPos.selectedTab = tabId;\r\n setLayout({ ...layout });\r\n };\r\n\r\n const addTabAfter = (droppedTabItem: TabDrag, dropZoneTabId: string) => {\r\n // Get layout element corresponding to dropped tabs\r\n const layoutDropped = getPosInLayout(layout, droppedTabItem.columnNumber, droppedTabItem.rowNumber) as LayoutTabsRow;\r\n // Get layout element corresponding to dropzone\r\n const layoutDropZone = getPosInLayout(layout, props.columnIndex, props.rowIndex) as LayoutTabsRow;\r\n\r\n for (const { id } of droppedTabItem.tabs) {\r\n const droppedTabIndex = layoutDropped.tabs.findIndex((tab: any) => tab.id === id);\r\n const droppedTab = layoutDropped.tabs[droppedTabIndex];\r\n // Add dropped tab after dropZoneTabId\r\n const dropZoneIndex = layoutDropZone.tabs.findIndex((tab: any) => tab.id === dropZoneTabId);\r\n layoutDropZone.tabs.splice(dropZoneIndex + 1, 0, droppedTab);\r\n // Remove dropped tab from its original position\r\n layoutDropped.tabs.splice(droppedTabIndex, 1);\r\n }\r\n\r\n if (layoutDropped.tabs.length === 0) {\r\n // Check if the layout that was dropped from is empty now\r\n removeLayoutRowAndRedistributePercentages(layout, droppedTabItem.columnNumber, droppedTabItem.rowNumber);\r\n } else if (droppedTabItem.tabs.map((tab: any) => tab.id).includes(layoutDropped.selectedTab)) {\r\n //Check if the layout that was dropped from's active tab is still in the layout\r\n layoutDropped.selectedTab = layoutDropped.tabs[0].id;\r\n }\r\n\r\n // Update layout\r\n setLayout({ ...layout });\r\n };\r\n\r\n return (\r\n <div className={style.rootContainer}>\r\n <div draggable={false} className={style.tabsLineContainer}>\r\n <div className={style.tabsContainer}>\r\n {tabs.map((tab) => {\r\n return (\r\n <FlexibleTab\r\n key={tab.id}\r\n title={tab.title}\r\n selected={tab.id === selectedTab}\r\n onClick={() => selectTab(tab.id)}\r\n item={{ rowNumber: props.rowIndex, columnNumber: props.columnIndex, tabs: [{ id: tab.id }] }}\r\n onTabDroppedAction={(item) => addTabAfter(item, tab.id)}\r\n />\r\n );\r\n })}\r\n </div>\r\n <DraggableIcon\r\n src={dragIcon}\r\n item={{ rowNumber: props.rowIndex, columnNumber: props.columnIndex, tabs: tabs.map((t) => ({ id: t.id })) }}\r\n type={ElementTypes.TAB_GROUP}\r\n />\r\n </div>\r\n <div className={style.contentContainer}>{selectedTabObject?.component}</div>\r\n </div>\r\n );\r\n};\r\n"]}
|
@@ -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
|
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
|
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
|
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"]}
|
@@ -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
|
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"]}
|