@babylonjs/shared-ui-components 6.38.1 → 6.40.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/components/MessageDialog.js +1 -0
  2. package/components/MessageDialog.js.map +1 -1
  3. package/components/TextInputWithSubmit.d.ts +2 -0
  4. package/components/TextInputWithSubmit.js +2 -0
  5. package/components/TextInputWithSubmit.js.map +1 -1
  6. package/components/Toggle.js +6 -6
  7. package/components/Toggle.js.map +1 -1
  8. package/components/layout/DraggableIcon.d.ts +2 -0
  9. package/components/layout/DraggableIcon.js +2 -0
  10. package/components/layout/DraggableIcon.js.map +1 -1
  11. package/components/layout/FlexibleDragHandler.d.ts +2 -0
  12. package/components/layout/FlexibleDragHandler.js +2 -0
  13. package/components/layout/FlexibleDragHandler.js.map +1 -1
  14. package/components/layout/FlexibleDropZone.d.ts +2 -0
  15. package/components/layout/FlexibleDropZone.js +2 -0
  16. package/components/layout/FlexibleDropZone.js.map +1 -1
  17. package/components/layout/FlexibleGridContainer.d.ts +1 -0
  18. package/components/layout/FlexibleGridContainer.js +1 -0
  19. package/components/layout/FlexibleGridContainer.js.map +1 -1
  20. package/components/layout/FlexibleGridLayout.d.ts +2 -0
  21. package/components/layout/FlexibleGridLayout.js +2 -0
  22. package/components/layout/FlexibleGridLayout.js.map +1 -1
  23. package/components/layout/FlexibleResizeBar.d.ts +2 -0
  24. package/components/layout/FlexibleResizeBar.js +2 -0
  25. package/components/layout/FlexibleResizeBar.js.map +1 -1
  26. package/components/layout/FlexibleTab.d.ts +2 -0
  27. package/components/layout/FlexibleTab.js +2 -0
  28. package/components/layout/FlexibleTab.js.map +1 -1
  29. package/components/layout/FlexibleTabsContainer.d.ts +2 -0
  30. package/components/layout/FlexibleTabsContainer.js +2 -0
  31. package/components/layout/FlexibleTabsContainer.js.map +1 -1
  32. package/components/layout/utils.d.ts +4 -0
  33. package/components/layout/utils.js +4 -0
  34. package/components/layout/utils.js.map +1 -1
  35. package/components/reactGraphSystem/GraphConnectorHandle.d.ts +1 -0
  36. package/components/reactGraphSystem/GraphConnectorHandle.js +1 -0
  37. package/components/reactGraphSystem/GraphConnectorHandle.js.map +1 -1
  38. package/components/reactGraphSystem/GraphLine.d.ts +2 -0
  39. package/components/reactGraphSystem/GraphLine.js +2 -0
  40. package/components/reactGraphSystem/GraphLine.js.map +1 -1
  41. package/components/reactGraphSystem/GraphNodesContainer.d.ts +2 -0
  42. package/components/reactGraphSystem/GraphNodesContainer.js +2 -0
  43. package/components/reactGraphSystem/GraphNodesContainer.js.map +1 -1
  44. package/components/reactGraphSystem/NodeRenderer.js +1 -0
  45. package/components/reactGraphSystem/NodeRenderer.js.map +1 -1
  46. package/lines/checkBoxLineComponent.js +10 -10
  47. package/lines/checkBoxLineComponent.js.map +1 -1
  48. package/lines/floatLineComponent.d.ts +1 -0
  49. package/lines/floatLineComponent.js +1 -1
  50. package/lines/floatLineComponent.js.map +1 -1
  51. package/nodeGraphSystem/graphFrame.js.map +1 -1
  52. package/package.json +1 -1
@@ -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"]}
@@ -59,6 +59,7 @@ export const NodeRenderer = (props) => {
59
59
  const graphContext = useMemo(() => ({ updatePos, onNodesConnected, onLineSelected, onNodeSelected }), []);
60
60
  return (_jsx("div", { style: fullscreenStyle, children: _jsx(GraphContextManager.Provider, { value: graphContext, children: _jsxs(GraphContainer, { children: [_jsx(GraphNodesContainer, { id: props.id, onNodeMoved: updatePos, children: nodes.map(({ id, label, customData }) => {
61
61
  const posInRecord = pos[id] || { x: 0, y: 0 };
62
+ // eslint-disable-next-line @typescript-eslint/naming-convention
62
63
  const CustomComponent = customData && customData.type && props.customComponents && props.customComponents[customData.type];
63
64
  return (_jsx(GraphNode, { parentContainerId: props.id, id: id, name: label, x: posInRecord.x, y: posInRecord.y, selected: id === selectedNode, highlighted: id === highlightedNode, children: CustomComponent && _jsx(CustomComponent, { ...customData.value }) }, id));
64
65
  }) }), _jsx(GraphLinesContainer, { id: props.id, children: connections.map(({ id, sourceId, targetId }) => {
@@ -1 +1 @@
1
- {"version":3,"file":"NodeRenderer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/NodeRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ComponentType } from \"react\";\r\nimport { useState, useEffect, useMemo } from \"react\";\r\nimport { GraphContainer } from \"./GraphContainer\";\r\nimport { GraphLine } from \"./GraphLine\";\r\nimport { GraphNode } from \"./GraphNode\";\r\nimport { GraphNodesContainer } from \"./GraphNodesContainer\";\r\nimport { GraphLinesContainer } from \"./GraphLinesContainer\";\r\nimport { GraphContextManager } from \"./GraphContextManager\";\r\nimport type { Nullable } from \"core/types\";\r\n\r\nconst fullscreenStyle = { width: \"100%\", height: \"100%\" };\r\n\r\nexport type IVisualRecordsType = Record<string, { x: number; y: number }>;\r\nexport type IConnectionType = { id: string; sourceId: string; targetId: string };\r\nexport type ICustomDataType = { type: string; value: any };\r\nexport type INodeType = { id: string; label: string; customData?: ICustomDataType };\r\n\r\n/**\r\n * props for the node renderer\r\n */\r\nexport interface INodeRendererProps {\r\n /**\r\n * array of connections between nodes\r\n */\r\n connections: IConnectionType[];\r\n /**\r\n * function called when a new connection is created\r\n */\r\n updateConnections: (sourceId: string, targetId: string) => void;\r\n /**\r\n * function called when a connection is deleted\r\n */\r\n deleteLine: (lineId: string) => void;\r\n /**\r\n * function called when a node is deleted\r\n */\r\n deleteNode: (nodeId: string) => void;\r\n /**\r\n * array of all nodes\r\n */\r\n nodes: INodeType[];\r\n /**\r\n * id of the node to highlight\r\n */\r\n highlightedNode?: Nullable<string>;\r\n /**\r\n * function to be called if a node is selected\r\n */\r\n selectNode?: (nodeId: Nullable<string>) => void;\r\n /**\r\n * id of this renderer\r\n */\r\n id: string;\r\n /**\r\n * optional list of custom components to be rendered inside nodes of\r\n * a certain type\r\n */\r\n customComponents?: Record<string, ComponentType<any>>;\r\n}\r\n\r\n/**\r\n * This component is a bridge between the app logic related to the graph, and the actual rendering\r\n * of it. It manages the nodes' positions and selection states.\r\n * @param props\r\n * @returns\r\n */\r\nexport const NodeRenderer = (props: INodeRendererProps) => {\r\n const { nodes, connections, updateConnections, highlightedNode } = props;\r\n // Store the nodes positions\r\n const [pos, setPos] = useState<IVisualRecordsType>({});\r\n const [selectedLine, setSelectedLine] = useState<string | null>(null);\r\n const [selectedNode, setSelectedNode] = useState<string | null>(null);\r\n\r\n const updatePos = (id: string, x: number, y: number) => {\r\n setPos((currentPos) => {\r\n const currPos = currentPos[id] || { x: 0, y: 0 };\r\n currentPos[id] = { x: currPos.x + x, y: currPos.y + y };\r\n return { ...currentPos };\r\n });\r\n };\r\n\r\n const onNodesConnected = (sourceId: string, targetId: string) => {\r\n updateConnections(sourceId, targetId);\r\n };\r\n\r\n const onLineSelected = (lineId: string) => {\r\n setSelectedLine(lineId);\r\n setSelectedNode(null);\r\n };\r\n\r\n const onNodeSelected = (nodeId: string) => {\r\n setSelectedNode(nodeId);\r\n setSelectedLine(null);\r\n };\r\n\r\n useEffect(() => {\r\n props.selectNode && props.selectNode(selectedNode);\r\n }, [selectedNode]);\r\n\r\n const onKeyDown = (evt: KeyboardEvent) => {\r\n if (evt.key === \"Delete\") {\r\n if (selectedLine) {\r\n props.deleteLine(selectedLine);\r\n } else if (selectedNode) {\r\n props.deleteNode(selectedNode);\r\n }\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n document.addEventListener(\"keydown\", onKeyDown);\r\n return () => {\r\n document.removeEventListener(\"keydown\", onKeyDown);\r\n };\r\n }, [selectedLine, selectedNode]);\r\n\r\n const graphContext = useMemo(() => ({ updatePos, onNodesConnected, onLineSelected, onNodeSelected }), []);\r\n return (\r\n <div style={fullscreenStyle}>\r\n <GraphContextManager.Provider value={graphContext}>\r\n <GraphContainer>\r\n <GraphNodesContainer id={props.id} onNodeMoved={updatePos}>\r\n {nodes.map(({ id, label, customData }) => {\r\n const posInRecord = pos[id] || { x: 0, y: 0 };\r\n const CustomComponent = customData && customData.type && props.customComponents && props.customComponents[customData.type];\r\n return (\r\n <GraphNode\r\n parentContainerId={props.id}\r\n key={id}\r\n id={id}\r\n name={label}\r\n x={posInRecord.x}\r\n y={posInRecord.y}\r\n selected={id === selectedNode}\r\n highlighted={id === highlightedNode}\r\n >\r\n {CustomComponent && <CustomComponent {...customData.value} />}\r\n </GraphNode>\r\n );\r\n })}\r\n </GraphNodesContainer>\r\n <GraphLinesContainer id={props.id}>\r\n {connections.map(({ id, sourceId, targetId }) => {\r\n const sourcePos = pos[sourceId] || { x: 0, y: 0 };\r\n const targetPos = pos[targetId] || { x: 0, y: 0 };\r\n return <GraphLine key={id} id={id} x1={sourcePos.x} y1={sourcePos.y} x2={targetPos.x} y2={targetPos.y} selected={id === selectedLine} />;\r\n })}\r\n </GraphLinesContainer>\r\n </GraphContainer>\r\n </GraphContextManager.Provider>\r\n </div>\r\n );\r\n};\r\n"]}
1
+ {"version":3,"file":"NodeRenderer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/NodeRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ComponentType } from \"react\";\r\nimport { useState, useEffect, useMemo } from \"react\";\r\nimport { GraphContainer } from \"./GraphContainer\";\r\nimport { GraphLine } from \"./GraphLine\";\r\nimport { GraphNode } from \"./GraphNode\";\r\nimport { GraphNodesContainer } from \"./GraphNodesContainer\";\r\nimport { GraphLinesContainer } from \"./GraphLinesContainer\";\r\nimport { GraphContextManager } from \"./GraphContextManager\";\r\nimport type { Nullable } from \"core/types\";\r\n\r\nconst fullscreenStyle = { width: \"100%\", height: \"100%\" };\r\n\r\nexport type IVisualRecordsType = Record<string, { x: number; y: number }>;\r\nexport type IConnectionType = { id: string; sourceId: string; targetId: string };\r\nexport type ICustomDataType = { type: string; value: any };\r\nexport type INodeType = { id: string; label: string; customData?: ICustomDataType };\r\n\r\n/**\r\n * props for the node renderer\r\n */\r\nexport interface INodeRendererProps {\r\n /**\r\n * array of connections between nodes\r\n */\r\n connections: IConnectionType[];\r\n /**\r\n * function called when a new connection is created\r\n */\r\n updateConnections: (sourceId: string, targetId: string) => void;\r\n /**\r\n * function called when a connection is deleted\r\n */\r\n deleteLine: (lineId: string) => void;\r\n /**\r\n * function called when a node is deleted\r\n */\r\n deleteNode: (nodeId: string) => void;\r\n /**\r\n * array of all nodes\r\n */\r\n nodes: INodeType[];\r\n /**\r\n * id of the node to highlight\r\n */\r\n highlightedNode?: Nullable<string>;\r\n /**\r\n * function to be called if a node is selected\r\n */\r\n selectNode?: (nodeId: Nullable<string>) => void;\r\n /**\r\n * id of this renderer\r\n */\r\n id: string;\r\n /**\r\n * optional list of custom components to be rendered inside nodes of\r\n * a certain type\r\n */\r\n customComponents?: Record<string, ComponentType<any>>;\r\n}\r\n\r\n/**\r\n * This component is a bridge between the app logic related to the graph, and the actual rendering\r\n * of it. It manages the nodes' positions and selection states.\r\n * @param props\r\n * @returns\r\n */\r\nexport const NodeRenderer = (props: INodeRendererProps) => {\r\n const { nodes, connections, updateConnections, highlightedNode } = props;\r\n // Store the nodes positions\r\n const [pos, setPos] = useState<IVisualRecordsType>({});\r\n const [selectedLine, setSelectedLine] = useState<string | null>(null);\r\n const [selectedNode, setSelectedNode] = useState<string | null>(null);\r\n\r\n const updatePos = (id: string, x: number, y: number) => {\r\n setPos((currentPos) => {\r\n const currPos = currentPos[id] || { x: 0, y: 0 };\r\n currentPos[id] = { x: currPos.x + x, y: currPos.y + y };\r\n return { ...currentPos };\r\n });\r\n };\r\n\r\n const onNodesConnected = (sourceId: string, targetId: string) => {\r\n updateConnections(sourceId, targetId);\r\n };\r\n\r\n const onLineSelected = (lineId: string) => {\r\n setSelectedLine(lineId);\r\n setSelectedNode(null);\r\n };\r\n\r\n const onNodeSelected = (nodeId: string) => {\r\n setSelectedNode(nodeId);\r\n setSelectedLine(null);\r\n };\r\n\r\n useEffect(() => {\r\n props.selectNode && props.selectNode(selectedNode);\r\n }, [selectedNode]);\r\n\r\n const onKeyDown = (evt: KeyboardEvent) => {\r\n if (evt.key === \"Delete\") {\r\n if (selectedLine) {\r\n props.deleteLine(selectedLine);\r\n } else if (selectedNode) {\r\n props.deleteNode(selectedNode);\r\n }\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n document.addEventListener(\"keydown\", onKeyDown);\r\n return () => {\r\n document.removeEventListener(\"keydown\", onKeyDown);\r\n };\r\n }, [selectedLine, selectedNode]);\r\n\r\n const graphContext = useMemo(() => ({ updatePos, onNodesConnected, onLineSelected, onNodeSelected }), []);\r\n return (\r\n <div style={fullscreenStyle}>\r\n <GraphContextManager.Provider value={graphContext}>\r\n <GraphContainer>\r\n <GraphNodesContainer id={props.id} onNodeMoved={updatePos}>\r\n {nodes.map(({ id, label, customData }) => {\r\n const posInRecord = pos[id] || { x: 0, y: 0 };\r\n // eslint-disable-next-line @typescript-eslint/naming-convention\r\n const CustomComponent = customData && customData.type && props.customComponents && props.customComponents[customData.type];\r\n return (\r\n <GraphNode\r\n parentContainerId={props.id}\r\n key={id}\r\n id={id}\r\n name={label}\r\n x={posInRecord.x}\r\n y={posInRecord.y}\r\n selected={id === selectedNode}\r\n highlighted={id === highlightedNode}\r\n >\r\n {CustomComponent && <CustomComponent {...customData.value} />}\r\n </GraphNode>\r\n );\r\n })}\r\n </GraphNodesContainer>\r\n <GraphLinesContainer id={props.id}>\r\n {connections.map(({ id, sourceId, targetId }) => {\r\n const sourcePos = pos[sourceId] || { x: 0, y: 0 };\r\n const targetPos = pos[targetId] || { x: 0, y: 0 };\r\n return <GraphLine key={id} id={id} x1={sourcePos.x} y1={sourcePos.y} x2={targetPos.x} y2={targetPos.y} selected={id === selectedLine} />;\r\n })}\r\n </GraphLinesContainer>\r\n </GraphContainer>\r\n </GraphContextManager.Provider>\r\n </div>\r\n );\r\n};\r\n"]}
@@ -2,21 +2,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import * as React from "react";
3
3
  import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
4
4
  import { conflictingValuesPlaceholder } from "./targetsProxy.js";
5
- import toggleOnIcon_40px from "../imgs/toggleOnIcon_40px.svg";
6
- import toggleOffIcon_40px from "../imgs/toggleOffIcon_40px.svg";
7
- import toggleOnIcon_30px from "../imgs/toggleOnIcon_30px.svg";
8
- import toggleMixedIcon_30px from "../imgs/toggleMixedIcon_30px.svg";
9
- import toggleOffIcon_30px from "../imgs/toggleOffIcon_30px.svg";
5
+ import toggleOnIcon40px from "../imgs/toggleOnIcon_40px.svg";
6
+ import toggleOffIcon40px from "../imgs/toggleOffIcon_40px.svg";
7
+ import toggleOnIcon30px from "../imgs/toggleOnIcon_30px.svg";
8
+ import toggleMixedIcon30px from "../imgs/toggleMixedIcon_30px.svg";
9
+ import toggleOffIcon30px from "../imgs/toggleOffIcon_30px.svg";
10
10
  const Icons = {
11
11
  size30: {
12
- on: toggleOnIcon_30px,
13
- mixed: toggleMixedIcon_30px,
14
- off: toggleOffIcon_30px,
12
+ on: toggleOnIcon30px,
13
+ mixed: toggleMixedIcon30px,
14
+ off: toggleOffIcon30px,
15
15
  },
16
16
  size40: {
17
- on: toggleOnIcon_40px,
17
+ on: toggleOnIcon40px,
18
18
  mixed: "",
19
- off: toggleOffIcon_40px,
19
+ off: toggleOffIcon40px,
20
20
  },
21
21
  };
22
22
  export class CheckBoxLineComponent extends React.Component {
@@ -1 +1 @@
1
- {"version":3,"file":"checkBoxLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/checkBoxLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"./../propertyChangedEvent\";\r\nimport type { IconDefinition } from \"@fortawesome/fontawesome-common-types\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { conflictingValuesPlaceholder } from \"./targetsProxy\";\r\n\r\nexport interface ICheckBoxLineComponentProps {\r\n label?: string;\r\n target?: any;\r\n propertyName?: string;\r\n isSelected?: () => boolean;\r\n onSelect?: (value: boolean) => void;\r\n onValueChanged?: () => void;\r\n onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n disabled?: boolean;\r\n icon?: string;\r\n iconLabel?: string;\r\n faIcons?: { enabled: IconDefinition; disabled: IconDefinition };\r\n large?: boolean;\r\n}\r\n\r\nimport toggleOnIcon_40px from \"../imgs/toggleOnIcon_40px.svg\";\r\nimport toggleOffIcon_40px from \"../imgs/toggleOffIcon_40px.svg\";\r\nimport toggleOnIcon_30px from \"../imgs/toggleOnIcon_30px.svg\";\r\nimport toggleMixedIcon_30px from \"../imgs/toggleMixedIcon_30px.svg\";\r\nimport toggleOffIcon_30px from \"../imgs/toggleOffIcon_30px.svg\";\r\n\r\nconst Icons = {\r\n size30: {\r\n on: toggleOnIcon_30px,\r\n mixed: toggleMixedIcon_30px,\r\n off: toggleOffIcon_30px,\r\n },\r\n size40: {\r\n on: toggleOnIcon_40px,\r\n mixed: \"\", // unneeded\r\n off: toggleOffIcon_40px,\r\n },\r\n};\r\n\r\nexport class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, { isSelected: boolean; isDisabled?: boolean; isConflict: boolean }> {\r\n private _localChange = false;\r\n constructor(props: ICheckBoxLineComponentProps) {\r\n super(props);\r\n\r\n if (this.props.isSelected) {\r\n this.state = { isSelected: this.props.isSelected(), isConflict: false };\r\n } else {\r\n this.state = {\r\n isSelected: this.props.target[this.props.propertyName!] === true,\r\n isConflict: this.props.target[this.props.propertyName!] === conflictingValuesPlaceholder,\r\n };\r\n }\r\n\r\n if (this.props.disabled) {\r\n this.state = { ...this.state, isDisabled: this.props.disabled };\r\n }\r\n }\r\n\r\n shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: { isSelected: boolean; isDisabled: boolean; isConflict: boolean }) {\r\n let selected: boolean;\r\n\r\n if (nextProps.isSelected) {\r\n selected = nextProps.isSelected!();\r\n } else {\r\n selected = nextProps.target[nextProps.propertyName!] === true;\r\n if (nextProps.target[nextProps.propertyName!] === conflictingValuesPlaceholder) {\r\n nextState.isConflict = true;\r\n }\r\n }\r\n\r\n if (selected !== nextState.isSelected || this._localChange) {\r\n nextState.isSelected = selected;\r\n this._localChange = false;\r\n return true;\r\n }\r\n\r\n if (nextProps.disabled !== nextState.isDisabled) {\r\n return true;\r\n }\r\n\r\n return nextProps.label !== this.props.label || nextProps.target !== this.props.target || nextState.isConflict !== this.state.isConflict;\r\n }\r\n\r\n onChange() {\r\n this._localChange = true;\r\n if (this.props.onSelect) {\r\n this.props.onSelect(!this.state.isSelected);\r\n } else {\r\n if (this.props.onPropertyChangedObservable) {\r\n this.props.onPropertyChangedObservable.notifyObservers({\r\n object: this.props.target,\r\n property: this.props.propertyName!,\r\n value: !this.state.isSelected,\r\n initialValue: this.state.isSelected,\r\n });\r\n }\r\n\r\n if (this.props.target && this.props.propertyName) {\r\n this.props.target[this.props.propertyName!] = !this.state.isSelected;\r\n }\r\n }\r\n\r\n if (this.props.onValueChanged) {\r\n this.props.onValueChanged();\r\n }\r\n\r\n this.setState({ isSelected: !this.state.isSelected, isConflict: false });\r\n }\r\n\r\n render() {\r\n const icons = this.props.large ? Icons.size40 : Icons.size30;\r\n const icon = this.state.isConflict ? icons.mixed : this.state.isSelected ? icons.on : icons.off;\r\n return (\r\n <div className=\"checkBoxLine\">\r\n {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n {this.props.label && (\r\n <div className=\"label\" title={this.props.iconLabel}>\r\n {this.props.label}\r\n </div>\r\n )}\r\n {this.props.faIcons && (\r\n <FontAwesomeIcon\r\n className={`cbx ${this.props.disabled ? \"disabled\" : \"\"}`}\r\n icon={this.state.isSelected ? this.props.faIcons.enabled : this.props.faIcons.disabled}\r\n onClick={() => !this.props.disabled && this.onChange()}\r\n />\r\n )}\r\n {!this.props.faIcons && (\r\n <div className=\"checkBox\">\r\n <label className={`container lbl${this.props.disabled ? \" disabled\" : \"\"} ${this.state.isSelected ? \"checked\" : \"\"}`}>\r\n <input\r\n type=\"checkbox\"\r\n className={`cbx hidden ${this.state.isConflict ? \"conflict\" : \"\"}`}\r\n checked={this.state.isSelected}\r\n onChange={() => this.onChange()}\r\n disabled={!!this.props.disabled}\r\n />\r\n <img className=\"icon\" src={icon} alt={this.props.label} />\r\n </label>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1
+ {"version":3,"file":"checkBoxLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/checkBoxLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"./../propertyChangedEvent\";\r\nimport type { IconDefinition } from \"@fortawesome/fontawesome-common-types\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { conflictingValuesPlaceholder } from \"./targetsProxy\";\r\n\r\nexport interface ICheckBoxLineComponentProps {\r\n label?: string;\r\n target?: any;\r\n propertyName?: string;\r\n isSelected?: () => boolean;\r\n onSelect?: (value: boolean) => void;\r\n onValueChanged?: () => void;\r\n onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n disabled?: boolean;\r\n icon?: string;\r\n iconLabel?: string;\r\n faIcons?: { enabled: IconDefinition; disabled: IconDefinition };\r\n large?: boolean;\r\n}\r\n\r\nimport toggleOnIcon40px from \"../imgs/toggleOnIcon_40px.svg\";\r\nimport toggleOffIcon40px from \"../imgs/toggleOffIcon_40px.svg\";\r\nimport toggleOnIcon30px from \"../imgs/toggleOnIcon_30px.svg\";\r\nimport toggleMixedIcon30px from \"../imgs/toggleMixedIcon_30px.svg\";\r\nimport toggleOffIcon30px from \"../imgs/toggleOffIcon_30px.svg\";\r\n\r\nconst Icons = {\r\n size30: {\r\n on: toggleOnIcon30px,\r\n mixed: toggleMixedIcon30px,\r\n off: toggleOffIcon30px,\r\n },\r\n size40: {\r\n on: toggleOnIcon40px,\r\n mixed: \"\", // unneeded\r\n off: toggleOffIcon40px,\r\n },\r\n};\r\n\r\nexport class CheckBoxLineComponent extends React.Component<ICheckBoxLineComponentProps, { isSelected: boolean; isDisabled?: boolean; isConflict: boolean }> {\r\n private _localChange = false;\r\n constructor(props: ICheckBoxLineComponentProps) {\r\n super(props);\r\n\r\n if (this.props.isSelected) {\r\n this.state = { isSelected: this.props.isSelected(), isConflict: false };\r\n } else {\r\n this.state = {\r\n isSelected: this.props.target[this.props.propertyName!] === true,\r\n isConflict: this.props.target[this.props.propertyName!] === conflictingValuesPlaceholder,\r\n };\r\n }\r\n\r\n if (this.props.disabled) {\r\n this.state = { ...this.state, isDisabled: this.props.disabled };\r\n }\r\n }\r\n\r\n shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: { isSelected: boolean; isDisabled: boolean; isConflict: boolean }) {\r\n let selected: boolean;\r\n\r\n if (nextProps.isSelected) {\r\n selected = nextProps.isSelected!();\r\n } else {\r\n selected = nextProps.target[nextProps.propertyName!] === true;\r\n if (nextProps.target[nextProps.propertyName!] === conflictingValuesPlaceholder) {\r\n nextState.isConflict = true;\r\n }\r\n }\r\n\r\n if (selected !== nextState.isSelected || this._localChange) {\r\n nextState.isSelected = selected;\r\n this._localChange = false;\r\n return true;\r\n }\r\n\r\n if (nextProps.disabled !== nextState.isDisabled) {\r\n return true;\r\n }\r\n\r\n return nextProps.label !== this.props.label || nextProps.target !== this.props.target || nextState.isConflict !== this.state.isConflict;\r\n }\r\n\r\n onChange() {\r\n this._localChange = true;\r\n if (this.props.onSelect) {\r\n this.props.onSelect(!this.state.isSelected);\r\n } else {\r\n if (this.props.onPropertyChangedObservable) {\r\n this.props.onPropertyChangedObservable.notifyObservers({\r\n object: this.props.target,\r\n property: this.props.propertyName!,\r\n value: !this.state.isSelected,\r\n initialValue: this.state.isSelected,\r\n });\r\n }\r\n\r\n if (this.props.target && this.props.propertyName) {\r\n this.props.target[this.props.propertyName!] = !this.state.isSelected;\r\n }\r\n }\r\n\r\n if (this.props.onValueChanged) {\r\n this.props.onValueChanged();\r\n }\r\n\r\n this.setState({ isSelected: !this.state.isSelected, isConflict: false });\r\n }\r\n\r\n render() {\r\n const icons = this.props.large ? Icons.size40 : Icons.size30;\r\n const icon = this.state.isConflict ? icons.mixed : this.state.isSelected ? icons.on : icons.off;\r\n return (\r\n <div className=\"checkBoxLine\">\r\n {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n {this.props.label && (\r\n <div className=\"label\" title={this.props.iconLabel}>\r\n {this.props.label}\r\n </div>\r\n )}\r\n {this.props.faIcons && (\r\n <FontAwesomeIcon\r\n className={`cbx ${this.props.disabled ? \"disabled\" : \"\"}`}\r\n icon={this.state.isSelected ? this.props.faIcons.enabled : this.props.faIcons.disabled}\r\n onClick={() => !this.props.disabled && this.onChange()}\r\n />\r\n )}\r\n {!this.props.faIcons && (\r\n <div className=\"checkBox\">\r\n <label className={`container lbl${this.props.disabled ? \" disabled\" : \"\"} ${this.state.isSelected ? \"checked\" : \"\"}`}>\r\n <input\r\n type=\"checkbox\"\r\n className={`cbx hidden ${this.state.isConflict ? \"conflict\" : \"\"}`}\r\n checked={this.state.isSelected}\r\n onChange={() => this.onChange()}\r\n disabled={!!this.props.disabled}\r\n />\r\n <img className=\"icon\" src={icon} alt={this.props.label} />\r\n </label>\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\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"]}