npm - @babylonjs/shared-ui-components - Versions diffs - 8.1.1 → 8.2.1 - Mend

@babylonjs/shared-ui-components 8.1.1 → 8.2.1

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

Files changed (96) hide show

package/colorPicker/colorComponentEntry.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { LockObject } from "../tabs/propertyGrids/lockObject";
+import type { LockObject } from "../tabs/propertyGrids/lockObject.js";
 export interface IColorComponentEntryProps {
     value: number;
     label: string;

package/colorPicker/colorPicker.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Color3, Color4 } from "@babylonjs/core/Maths/math.color.js";
-import type { LockObject } from "../tabs/propertyGrids/lockObject";
+import type { LockObject } from "../tabs/propertyGrids/lockObject.js";
 import "./colorPicker.scss";
 /**
  * Interface used to specify creation options for color picker

package/colorPicker/hexColor.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { LockObject } from "../tabs/propertyGrids/lockObject";
+import type { LockObject } from "../tabs/propertyGrids/lockObject.js";
 export interface IHexColorProps {
     value: string;
     expectedLength: number;

package/components/Button.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import type { PropsWithChildren } from "react";
 export type ButtonProps = {
     disabled?: boolean;
     active?: boolean;
@@ -7,4 +8,4 @@ export type ButtonProps = {
     title?: string;
     backgroundColor?: string;
 };
-export declare const Button: React.FC<ButtonProps>;
+export declare const Button: React.FC<PropsWithChildren<ButtonProps>>;

package/components/Button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/Button.tsx"],"names":[],"mappings":";~~AAAA~~,OAAO,KAAK,MAAM,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAY1C,MAAM,CAAC,MAAM,MAAM,~~GAA0B~~,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE,EAAE;~~IAC1H~~,OAAO,CACH,iBACI,SAAS,EAAE,UAAU,CACjB,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,KAAK,MAAM,EAAE,KAAK,EAAE,IAAI,KAAK,OAAO,EAAE,OAAO,EAAE,IAAI,KAAK,SAAS,EAAE,KAAK,EAAE,KAAK,KAAK,OAAO,EAAE,IAAI,EAAE,KAAK,KAAK,MAAM,EAAE,EACvJ,MAAM,CACT,EACD,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,EAAE,eAAe,EAAE,YAEzB,QAAQ,GACJ,CACZ,CAAC;AACN,CAAC,CAAC","sourcesContent":["import * as styles from \"./Button.module.scss\";\r\nimport { ClassNames } from \"./classNames\";\r\n\r\nexport type ButtonProps = {\r\n disabled?: boolean;\r\n active?: boolean;\r\n onClick?: () => void;\r\n color: \"light\" \| \"dark\";\r\n size: \"default\" \| \"small\" \| \"wide\" \| \"smaller\";\r\n title?: string;\r\n backgroundColor?: string;\r\n};\r\n\r\nexport const Button: React.FC<ButtonProps> = ({ disabled, active, onClick, children, color, size, title, backgroundColor }) => {\r\n return (\r\n <button\r\n className={ClassNames(\r\n { button: true, active, wide: size === \"wide\", small: size === \"small\", smaller: size === \"smaller\", light: color === \"light\", dark: color === \"dark\" },\r\n styles\r\n )}\r\n disabled={disabled}\r\n onClick={onClick}\r\n title={title}\r\n style={{ backgroundColor }}\r\n >\r\n {children}\r\n </button>\r\n );\r\n};\r\n"]}
1	+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/Button.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAY1C,MAAM,CAAC,MAAM,MAAM,GAA6C,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE,EAAE;IAC7I,OAAO,CACH,iBACI,SAAS,EAAE,UAAU,CACjB,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,KAAK,MAAM,EAAE,KAAK,EAAE,IAAI,KAAK,OAAO,EAAE,OAAO,EAAE,IAAI,KAAK,SAAS,EAAE,KAAK,EAAE,KAAK,KAAK,OAAO,EAAE,IAAI,EAAE,KAAK,KAAK,MAAM,EAAE,EACvJ,MAAM,CACT,EACD,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,EAAE,eAAe,EAAE,YAEzB,QAAQ,GACJ,CACZ,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { PropsWithChildren } from \"react\";\r\nimport * as styles from \"./Button.module.scss\";\r\nimport { ClassNames } from \"./classNames\";\r\n\r\nexport type ButtonProps = {\r\n disabled?: boolean;\r\n active?: boolean;\r\n onClick?: () => void;\r\n color: \"light\" \| \"dark\";\r\n size: \"default\" \| \"small\" \| \"wide\" \| \"smaller\";\r\n title?: string;\r\n backgroundColor?: string;\r\n};\r\n\r\nexport const Button: React.FC<PropsWithChildren<ButtonProps>> = ({ disabled, active, onClick, children, color, size, title, backgroundColor }) => {\r\n return (\r\n <button\r\n className={ClassNames(\r\n { button: true, active, wide: size === \"wide\", small: size === \"small\", smaller: size === \"smaller\", light: color === \"light\", dark: color === \"dark\" },\r\n styles\r\n )}\r\n disabled={disabled}\r\n onClick={onClick}\r\n title={title}\r\n style={{ backgroundColor }}\r\n >\r\n {children}\r\n </button>\r\n );\r\n};\r\n"]}

package/components/bars/CommandBarComponent.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import type { FC, PropsWithChildren } from "react";
 export interface ICommandBarComponentProps {
     onSaveButtonClicked?: () => void;
     onSaveToSnippetButtonClicked?: () => void;
@@ -13,4 +13,4 @@ export interface ICommandBarComponentProps {
     artboardColor?: string;
     artboardColorPickerColor?: string;
 }
-export declare const CommandBarComponent: FC<ICommandBarComponentProps>;
+export declare const CommandBarComponent: FC<PropsWithChildren<ICommandBarComponentProps>>;

package/components/bars/CommandBarComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CommandBarComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/bars/CommandBarComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FC } from \"react\";\r\nimport { JoinClassNames } from \"../classNames\";\r\nimport { CommandButtonComponent } from \"./CommandButtonComponent\";\r\nimport { CommandDropdownComponent } from \"./CommandDropdownComponent\";\r\n\r\nimport hamburgerIcon from \"../../imgs/hamburgerIcon.svg\";\r\nimport pointerIcon from \"../../imgs/pointerIcon.svg\";\r\nimport handIcon from \"../../imgs/handIcon.svg\";\r\nimport zoomIcon from \"../../imgs/zoomIcon.svg\";\r\nimport logoIcon from \"../../imgs/babylonLogo.svg\";\r\nimport canvasFitIcon from \"../../imgs/canvasFitIcon.svg\";\r\nimport betaFlag from \"../../imgs/betaFlag.svg\";\r\n\r\nimport * as style from \"./CommandBar.module.scss\";\r\nimport { Color3 } from \"core/Maths/math.color\";\r\nimport { ColorPickerLineComponent } from \"../lines/ColorPickerLineComponent\";\r\n\r\nexport interface ICommandBarComponentProps {\r\n onSaveButtonClicked?: () => void;\r\n onSaveToSnippetButtonClicked?: () => void;\r\n onLoadFromSnippetButtonClicked?: () => void;\r\n onHelpButtonClicked?: () => void;\r\n onGiveFeedbackButtonClicked?: () => void;\r\n onSelectButtonClicked?: () => void;\r\n onPanButtonClicked?: () => void;\r\n onZoomButtonClicked?: () => void;\r\n onFitButtonClicked?: () => void;\r\n onArtboardColorChanged?: (newColor: string) => void;\r\n artboardColor?: string;\r\n artboardColorPickerColor?: string;\r\n}\r\n\r\nexport const CommandBarComponent: FC<ICommandBarComponentProps> = (props) => {\r\n return (\r\n <div className={style.commandBar}>\r\n <div className={style.commandsLeft}>\r\n <div className={style.divider}>\r\n <img src={logoIcon} color=\"white\" className={\"active\"} draggable={false} />\r\n <CommandDropdownComponent\r\n //globalState={this.props.globalState}\r\n toRight={true}\r\n icon={hamburgerIcon}\r\n tooltip=\"Options\"\r\n items={[\r\n {\r\n label: \"Save\",\r\n onClick: () => {\r\n props.onSaveButtonClicked && props.onSaveButtonClicked();\r\n },\r\n },\r\n {\r\n label: \"Load\",\r\n fileButton: true,\r\n },\r\n {\r\n label: \"Save to snippet\",\r\n onClick: () => {\r\n props.onSaveToSnippetButtonClicked && props.onSaveToSnippetButtonClicked();\r\n },\r\n },\r\n {\r\n label: \"Load from snippet\",\r\n onClick: () => {\r\n props.onLoadFromSnippetButtonClicked && props.onLoadFromSnippetButtonClicked();\r\n },\r\n },\r\n {\r\n label: \"Help\",\r\n onClick: () => {\r\n props.onHelpButtonClicked && props.onHelpButtonClicked();\r\n },\r\n },\r\n {\r\n label: \"Give feedback\",\r\n onClick: () => {\r\n props.onGiveFeedbackButtonClicked && props.onGiveFeedbackButtonClicked();\r\n },\r\n },\r\n ]}\r\n />\r\n <CommandButtonComponent\r\n tooltip=\"Select\"\r\n icon={pointerIcon}\r\n shortcut=\"S\"\r\n isActive={false}\r\n onClick={() => {\r\n props.onSelectButtonClicked && props.onSelectButtonClicked();\r\n }}\r\n />\r\n <CommandButtonComponent\r\n tooltip=\"Pan\"\r\n icon={handIcon}\r\n shortcut=\"P\"\r\n isActive={false}\r\n onClick={() => {\r\n props.onPanButtonClicked && props.onPanButtonClicked();\r\n }}\r\n />\r\n <CommandButtonComponent\r\n tooltip=\"Zoom\"\r\n shortcut=\"Z\"\r\n icon={zoomIcon}\r\n isActive={false}\r\n onClick={() => {\r\n props.onZoomButtonClicked && props.onZoomButtonClicked();\r\n }}\r\n />\r\n </div>\r\n <div className={style.divider}>\r\n <CommandButtonComponent\r\n tooltip=\"Fit to Window\"\r\n shortcut=\"F\"\r\n icon={canvasFitIcon}\r\n isActive={false}\r\n onClick={() => {\r\n props.onFitButtonClicked && props.onFitButtonClicked();\r\n }}\r\n />\r\n </div>\r\n <div className={JoinClassNames(style, \"divider\", \"padded\")}>\r\n <div style={{ paddingRight: \"5px\" }}>Artboard:</div>\r\n {props.onArtboardColorChanged && (\r\n <ColorPickerLineComponent\r\n backgroundColor={props.artboardColorPickerColor \|\| \"#888888\"}\r\n value={props.artboardColor ? Color3.FromHexString(props.artboardColor) : new Color3(0, 0, 0)}\r\n onColorChanged={(newColor: string) => {\r\n if (props.onArtboardColorChanged) {\r\n props.onArtboardColorChanged(newColor);\r\n }\r\n }}\r\n />\r\n )}\r\n </div>\r\n <div className={style.divider}>{props.children}</div>\r\n </div>\r\n <div className={style.commandsRight}>\r\n <img src={betaFlag} className={style.betaFlag} draggable={false} />\r\n </div>\r\n </div>\r\n );\r\n};\r\n"]}
1	+ {"version":3,"file":"CommandBarComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/bars/CommandBarComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\r\nimport { JoinClassNames } from \"../classNames\";\r\nimport { CommandButtonComponent } from \"./CommandButtonComponent\";\r\nimport { CommandDropdownComponent } from \"./CommandDropdownComponent\";\r\n\r\nimport hamburgerIcon from \"../../imgs/hamburgerIcon.svg\";\r\nimport pointerIcon from \"../../imgs/pointerIcon.svg\";\r\nimport handIcon from \"../../imgs/handIcon.svg\";\r\nimport zoomIcon from \"../../imgs/zoomIcon.svg\";\r\nimport logoIcon from \"../../imgs/babylonLogo.svg\";\r\nimport canvasFitIcon from \"../../imgs/canvasFitIcon.svg\";\r\nimport betaFlag from \"../../imgs/betaFlag.svg\";\r\n\r\nimport * as style from \"./CommandBar.module.scss\";\r\nimport { Color3 } from \"core/Maths/math.color\";\r\nimport { ColorPickerLineComponent } from \"../lines/ColorPickerLineComponent\";\r\n\r\nexport interface ICommandBarComponentProps {\r\n onSaveButtonClicked?: () => void;\r\n onSaveToSnippetButtonClicked?: () => void;\r\n onLoadFromSnippetButtonClicked?: () => void;\r\n onHelpButtonClicked?: () => void;\r\n onGiveFeedbackButtonClicked?: () => void;\r\n onSelectButtonClicked?: () => void;\r\n onPanButtonClicked?: () => void;\r\n onZoomButtonClicked?: () => void;\r\n onFitButtonClicked?: () => void;\r\n onArtboardColorChanged?: (newColor: string) => void;\r\n artboardColor?: string;\r\n artboardColorPickerColor?: string;\r\n}\r\n\r\nexport const CommandBarComponent: FC<PropsWithChildren<ICommandBarComponentProps>> = (props) => {\r\n return (\r\n <div className={style.commandBar}>\r\n <div className={style.commandsLeft}>\r\n <div className={style.divider}>\r\n <img src={logoIcon} color=\"white\" className={\"active\"} draggable={false} />\r\n <CommandDropdownComponent\r\n //globalState={this.props.globalState}\r\n toRight={true}\r\n icon={hamburgerIcon}\r\n tooltip=\"Options\"\r\n items={[\r\n {\r\n label: \"Save\",\r\n onClick: () => {\r\n props.onSaveButtonClicked && props.onSaveButtonClicked();\r\n },\r\n },\r\n {\r\n label: \"Load\",\r\n fileButton: true,\r\n },\r\n {\r\n label: \"Save to snippet\",\r\n onClick: () => {\r\n props.onSaveToSnippetButtonClicked && props.onSaveToSnippetButtonClicked();\r\n },\r\n },\r\n {\r\n label: \"Load from snippet\",\r\n onClick: () => {\r\n props.onLoadFromSnippetButtonClicked && props.onLoadFromSnippetButtonClicked();\r\n },\r\n },\r\n {\r\n label: \"Help\",\r\n onClick: () => {\r\n props.onHelpButtonClicked && props.onHelpButtonClicked();\r\n },\r\n },\r\n {\r\n label: \"Give feedback\",\r\n onClick: () => {\r\n props.onGiveFeedbackButtonClicked && props.onGiveFeedbackButtonClicked();\r\n },\r\n },\r\n ]}\r\n />\r\n <CommandButtonComponent\r\n tooltip=\"Select\"\r\n icon={pointerIcon}\r\n shortcut=\"S\"\r\n isActive={false}\r\n onClick={() => {\r\n props.onSelectButtonClicked && props.onSelectButtonClicked();\r\n }}\r\n />\r\n <CommandButtonComponent\r\n tooltip=\"Pan\"\r\n icon={handIcon}\r\n shortcut=\"P\"\r\n isActive={false}\r\n onClick={() => {\r\n props.onPanButtonClicked && props.onPanButtonClicked();\r\n }}\r\n />\r\n <CommandButtonComponent\r\n tooltip=\"Zoom\"\r\n shortcut=\"Z\"\r\n icon={zoomIcon}\r\n isActive={false}\r\n onClick={() => {\r\n props.onZoomButtonClicked && props.onZoomButtonClicked();\r\n }}\r\n />\r\n </div>\r\n <div className={style.divider}>\r\n <CommandButtonComponent\r\n tooltip=\"Fit to Window\"\r\n shortcut=\"F\"\r\n icon={canvasFitIcon}\r\n isActive={false}\r\n onClick={() => {\r\n props.onFitButtonClicked && props.onFitButtonClicked();\r\n }}\r\n />\r\n </div>\r\n <div className={JoinClassNames(style, \"divider\", \"padded\")}>\r\n <div style={{ paddingRight: \"5px\" }}>Artboard:</div>\r\n {props.onArtboardColorChanged && (\r\n <ColorPickerLineComponent\r\n backgroundColor={props.artboardColorPickerColor \|\| \"#888888\"}\r\n value={props.artboardColor ? Color3.FromHexString(props.artboardColor) : new Color3(0, 0, 0)}\r\n onColorChanged={(newColor: string) => {\r\n if (props.onArtboardColorChanged) {\r\n props.onArtboardColorChanged(newColor);\r\n }\r\n }}\r\n />\r\n )}\r\n </div>\r\n <div className={style.divider}>{props.children}</div>\r\n </div>\r\n <div className={style.commandsRight}>\r\n <img src={betaFlag} className={style.betaFlag} draggable={false} />\r\n </div>\r\n </div>\r\n );\r\n};\r\n"]}

package/components/colorPicker/ColorComponentEntry.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { LockObject } from "../../tabs/propertyGrids/lockObject";
+import type { LockObject } from "../../tabs/propertyGrids/lockObject.js";
 export interface IColorComponentEntryProps {
     value: number;
     label: string;

package/components/colorPicker/ColorPicker.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Color3, Color4 } from "@babylonjs/core/Maths/math.color.js";
-import type { LockObject } from "../../tabs/propertyGrids/lockObject";
+import type { LockObject } from "../../tabs/propertyGrids/lockObject.js";
 /**
  * Interface used to specify creation options for color picker
  */

package/components/colorPicker/HexColor.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { LockObject } from "../../tabs/propertyGrids/lockObject";
+import type { LockObject } from "../../tabs/propertyGrids/lockObject.js";
 export interface IHexColorProps {
     value: string;
     expectedLength: number;

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

@@ -1,5 +1,5 @@
 import type { FC } from "react";
-import type { ElementTypes, TabDrag } from "./types";
+import type { ElementTypes, TabDrag } from "./types.js";
 /**
  * Arguments for the DraggableIcon component.
  */

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

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import type { FC, PropsWithChildren } from "react";
 /**
  * Arguments for the Column component.
  */
@@ -14,4 +14,4 @@ export interface IFlexibleColumnProps {
  * @param props
  * @returns
  */
-export declare const FlexibleColumn: FC<IFlexibleColumnProps>;
+export declare const FlexibleColumn: FC<PropsWithChildren<IFlexibleColumnProps>>;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FlexibleColumn.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleColumn.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,KAAK,MAAM,8BAA8B,CAAC;AAYtD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,~~GAA6B~~,CAAC,KAAK,EAAE,EAAE;~~IAC9D~~,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,cAAc,YAC9D,KAAK,CAAC,QAAQ,GACb,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport * as style from \"./FlexibleColumn.module.scss\";\r\n\r\n/*\r\n Arguments for the Column component.\r\n /\r\nexport interface IFlexibleColumnProps {\r\n /\r\n Width of column\r\n /\r\n width: string;\r\n}\r\n\r\n/\r\n This component represents a single column in the layout. It receives a width\r\n * that it occupies and the content to display\r\n * @param props\r\n * @returns\r\n */\r\nexport const FlexibleColumn: FC<IFlexibleColumnProps> = (props) => {\r\n return (\r\n <div style={{ width: props.width }} className={style.flexibleColumn}>\r\n {props.children}\r\n </div>\r\n );\r\n};\r\n"]}
1	+ {"version":3,"file":"FlexibleColumn.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleColumn.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,KAAK,MAAM,8BAA8B,CAAC;AAYtD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAgD,CAAC,KAAK,EAAE,EAAE;IACjF,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,cAAc,YAC9D,KAAK,CAAC,QAAQ,GACb,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\r\nimport * as style from \"./FlexibleColumn.module.scss\";\r\n\r\n/*\r\n Arguments for the Column component.\r\n /\r\nexport interface IFlexibleColumnProps {\r\n /\r\n Width of column\r\n /\r\n width: string;\r\n}\r\n\r\n/\r\n This component represents a single column in the layout. It receives a width\r\n * that it occupies and the content to display\r\n * @param props\r\n * @returns\r\n */\r\nexport const FlexibleColumn: FC<PropsWithChildren<IFlexibleColumnProps>> = (props) => {\r\n return (\r\n <div style={{ width: props.width }} className={style.flexibleColumn}>\r\n {props.children}\r\n </div>\r\n );\r\n};\r\n"]}

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

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import type { FC, PropsWithChildren } from "react";
 /**
  * Arguments for the DragHandler component.
  */
@@ -17,4 +17,4 @@ export interface IFlexibleDragHandlerProps {
  * @param props properties
  * @returns DragHandler element
  */
-export declare const FlexibleDragHandler: FC<IFlexibleDragHandlerProps>;
+export declare const FlexibleDragHandler: FC<PropsWithChildren<IFlexibleDragHandlerProps>>;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FlexibleDragHandler.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleDragHandler.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,sCAAwB;AAE1C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,OAAO,EAAE,2BAA2B,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAchD;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,~~GAAkC~~,CAAC,KAAK,EAAE,EAAE;~~IACxE~~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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"]}
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, PropsWithChildren } 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<PropsWithChildren<IFlexibleDragHandlerProps>> = (props) => {\r\n const { layout, setLayout } = useContext(LayoutContext);\r\n // CLICK/DRAG INFORMATION\r\n const pointerPos = useRef<Nullable<Vector2>>(null);\r\n const [_, drop] = useDrop(() => ({\r\n accept: [ElementTypes.RESIZE_BAR],\r\n hover(item, monitor) {\r\n const anyitem = item as ResizeItem;\r\n\r\n const xy = monitor.getClientOffset();\r\n const pos = new Vector2(xy!.x, xy!.y);\r\n if (pointerPos.current) {\r\n if (monitor.getItemType() === ElementTypes.RESIZE_BAR) {\r\n onResize(anyitem.rowNumber, anyitem.columnNumber, pos, pointerPos.current, anyitem.direction);\r\n }\r\n }\r\n pointerPos.current = pos;\r\n },\r\n drop(item, monitor) {\r\n pointerPos.current = null;\r\n },\r\n }));\r\n\r\n const getLayoutProperty = (layout: LayoutColumn \| LayoutTabsRow, property: \"width\" \| \"height\") => {\r\n if (property === \"width\") {\r\n return (layout as LayoutColumn)[property];\r\n } else {\r\n return (layout as LayoutTabsRow)[property];\r\n }\r\n };\r\n\r\n const setLayoutProperty = (layout: LayoutColumn \| LayoutTabsRow, property: \"width\" \| \"height\", value: string) => {\r\n if (property === \"width\") {\r\n (layout as LayoutColumn)[property] = value;\r\n } else {\r\n (layout as LayoutTabsRow)[property] = value;\r\n }\r\n };\r\n\r\n const processResize = (\r\n pos: Vector2,\r\n prevPos: Vector2,\r\n row0: number \| undefined,\r\n column0: number,\r\n row1: number \| undefined,\r\n column1: number,\r\n axis: \"x\" \| \"y\",\r\n maxAxisValue: number,\r\n property: \"width\" \| \"height\",\r\n minFinalValue: number\r\n ) => {\r\n // Check axis difference\r\n const axisDiff = pos[axis] - prevPos[axis];\r\n\r\n try {\r\n // Get layout rows\r\n const layoutElement0 = getPosInLayout(layout, column0, row0);\r\n const layoutElement1 = getPosInLayout(layout, column1, row1);\r\n\r\n if (layoutElement0 && layoutElement1) {\r\n const percDiff = (axisDiff / maxAxisValue) 100;\r\n\r\n const newValue0 = addPercentageStringToNumber(getLayoutProperty(layoutElement0, property), percDiff);\r\n const newValue1 = addPercentageStringToNumber(getLayoutProperty(layoutElement1, property), -percDiff);\r\n\r\n if (newValue0 >= minFinalValue && newValue1 >= minFinalValue) {\r\n setLayoutProperty(layoutElement0, property, newValue0.toFixed(2) + \"%\");\r\n setLayoutProperty(layoutElement1, property, newValue1.toFixed(2) + \"%\");\r\n }\r\n\r\n setLayout({ ...layout });\r\n }\r\n } catch (e) {\r\n // If an error occurred, we're trying to resize something invalid, so don't do anything\r\n return;\r\n }\r\n };\r\n\r\n const processResizeRow = (pos: Vector2, prevPos: Vector2, args: { row: number; column: number }) => {\r\n processResize(pos, prevPos, args.row, args.column, args.row + 1, args.column, \"y\", props.containerSize.height, \"height\", 5);\r\n };\r\n\r\n const processResizeColumn = (pos: Vector2, prevPos: Vector2, args: { row: number; column: number }) => {\r\n processResize(pos, prevPos, undefined, args.column, undefined, args.column + 1, \"x\", props.containerSize.width, \"width\", 5);\r\n };\r\n\r\n const onResize = (row: number, column: number, pos: Vector2, prevPos: Vector2, type: \"row\" \| \"column\") => {\r\n if (type === \"row\") {\r\n processResizeRow(pos, prevPos, { row, column });\r\n } else {\r\n processResizeColumn(pos, prevPos, { row, column });\r\n }\r\n pointerPos.current = pos;\r\n };\r\n\r\n return (\r\n <div ref={drop} style={{ width: \"100%\", height: \"100%\" }}>\r\n {props.children}\r\n </div>\r\n );\r\n};\r\n"]}

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

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import type { FC, PropsWithChildren } from "react";
 /**
  * Arguments for the FlexibleDropZone component.
  */
@@ -18,4 +18,4 @@ export interface IFlexibleDropZoneProps {
  * @param props properties
  * @returns drop zone element
  */
-export declare const FlexibleDropZone: FC<IFlexibleDropZoneProps>;
+export declare const FlexibleDropZone: FC<PropsWithChildren<IFlexibleDropZoneProps>>;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FlexibleDropZone.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleDropZone.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,KAAK,MAAM,gCAAgC,CAAC;AACxD,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 * as style from \"./FlexibleDropZone.module.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"]}
1	+ {"version":3,"file":"FlexibleDropZone.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleDropZone.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,KAAK,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAgB3C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAkD,CAAC,KAAK,EAAE,EAAE;IACrF,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, PropsWithChildren } from \"react\";\r\nimport * as style from \"./FlexibleDropZone.module.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<PropsWithChildren<IFlexibleDropZoneProps>> = (props) => {\r\n return (\r\n <div className={style.flexibleDropZoneContainer}>\r\n {props.children}\r\n <FlexibleResizeBar rowNumber={props.rowNumber} columnNumber={props.columnNumber} direction={ResizeDirections.COLUMN} />\r\n <FlexibleResizeBar rowNumber={props.rowNumber} columnNumber={props.columnNumber} direction={ResizeDirections.ROW} />\r\n </div>\r\n );\r\n};\r\n"]}

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

@@ -1,5 +1,5 @@
 import type { FC } from "react";
-import type { Layout } from "./types";
+import type { Layout } from "./types.js";
 /**
  * Arguments for the Layout component.
  */

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

@@ -1,5 +1,5 @@
 import type { FC } from "react";
-import { ResizeDirections } from "./types";
+import { ResizeDirections } from "./types.js";
 /**
  * Arguments for the ResizeBar component.
  */

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

@@ -1,5 +1,5 @@
 import type { FC } from "react";
-import type { TabDrag } from "./types";
+import type { TabDrag } from "./types.js";
 /**
  * Arguments for the FlexibleTab component.
  */

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

@@ -1,5 +1,5 @@
 import type { FC } from "react";
-import type { LayoutTab } from "./types";
+import type { LayoutTab } from "./types.js";
 /**
  * Arguments for the TabsContainer component.
  */

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

@@ -1,4 +1,4 @@
-import type { Layout } from "./types";
+import type { Layout } from "./types.js";
 export declare const LayoutContext: import("react").Context<{
     /**
      * The layout object

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

@@ -1,4 +1,4 @@
-import type { Layout, LayoutColumn, LayoutTabsRow } from "./types";
+import type { Layout, LayoutColumn, LayoutTabsRow } from "./types.js";
 /**
  * Given a column and row number in the layout, return the corresponding column/row
  * @param layout

package/components/lines/ColorLineComponent.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
 import * as React from "react";
 import type { Observable } from "@babylonjs/core/Misc/observable.js";
 import { Color4 } from "@babylonjs/core/Maths/math.color.js";
-import type { PropertyChangedEvent } from "../../propertyChangedEvent";
-import type { LockObject } from "../../tabs/propertyGrids/lockObject";
+import type { PropertyChangedEvent } from "../../propertyChangedEvent.js";
+import type { LockObject } from "../../tabs/propertyGrids/lockObject.js";
 export interface IColorLineComponentProps {
     label: string;
     target: any;
@@ -22,9 +22,7 @@ interface IColorLineComponentState {
 export declare class ColorLineComponent extends React.Component<IColorLineComponentProps, IColorLineComponentState> {
     constructor(props: IColorLineComponentProps);
     shouldComponentUpdate(nextProps: IColorLineComponentProps, nextState: IColorLineComponentState): boolean;
-    getValue(props?: Readonly<IColorLineComponentProps> & Readonly<{
-        children?: React.ReactNode | undefined;
-    }>): Color4;
+    getValue(props?: Readonly<IColorLineComponentProps>): Color4;
     setColorFromString(colorString: string): void;
     setColor(newColor: Color4): void;
     switchExpandState(): void;

package/components/lines/ColorPickerLineComponent.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as React from "react";
 import type { Color4, Color3 } from "@babylonjs/core/Maths/math.color.js";
-import type { LockObject } from "../../tabs/propertyGrids/lockObject";
+import type { LockObject } from "../../tabs/propertyGrids/lockObject.js";
 export interface IColorPickerLineComponentProps {
     value: Color4 | Color3;
     linearHint?: boolean;
@@ -23,9 +23,7 @@ export declare class ColorPickerLineComponent extends React.Component<IColorPick
     constructor(props: IColorPickerLineComponentProps);
     syncPositions(): void;
     shouldComponentUpdate(nextProps: IColorPickerLineComponentProps, nextState: IColorPickerComponentState): boolean;
-    getHexString(props?: Readonly<IColorPickerLineComponentProps> & Readonly<{
-        children?: React.ReactNode | undefined;
-    }>): string;
+    getHexString(props?: Readonly<IColorPickerLineComponentProps>): string;
     componentDidUpdate(): void;
     componentDidMount(): void;
     render(): import("react/jsx-runtime").JSX.Element;

package/components/lines/NumericInputComponent.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { LockObject } from "../../tabs/propertyGrids/lockObject";
+import type { LockObject } from "../../tabs/propertyGrids/lockObject.js";
 interface INumericInputComponentProps {
     label: string;
     labelTooltip?: string;

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

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import type { FC, PropsWithChildren } from "react";
 /**
  * Props for the connector
  */
@@ -41,4 +41,4 @@ export interface IGraphConnectorHandlerProps {
  * drag the handle in a node and drop it in another node to create a connection.
  * @returns connector element
  */
-export declare const GraphConnectorHandler: FC<IGraphConnectorHandlerProps>;
+export declare const GraphConnectorHandler: FC<PropsWithChildren<IGraphConnectorHandlerProps>>;

package/components/reactGraphSystem/GraphConnectorHandle.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { useGraphContext } from "./useGraphContext.js";
  * drag the handle in a node and drop it in another node to create a connection.
  * @returns connector element
  */
-export const GraphConnectorHandler = ({ parentId, parentX, parentY, offsetX = 0, offsetY = 0, parentWidth, parentHeight, parentContainerId }) => {
+export const GraphConnectorHandler = ({ parentId, parentX, parentY, offsetX = 0, offsetY = 0, parentWidth, parentHeight, parentContainerId, }) => {
     const { onNodesConnected } = useGraphContext();
     const centerX = offsetX + parentWidth / 2;
     const centerY = offsetY + parentHeight / 2;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"GraphConnectorHandle.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphConnectorHandle.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,KAAK,MAAM,oCAAoC,CAAC;AAC5D,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 * as style from \"./GraphConnectorHandle.module.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"]}
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,KAAK,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAwCpD;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAuD,CAAC,EACtF,QAAQ,EACR,OAAO,EACP,OAAO,EACP,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,CAAC,EACX,WAAW,EACX,YAAY,EACZ,iBAAiB,GACpB,EAAE,EAAE;IACD,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,GAAuB,EAAE,EAAE;QACxB,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, PropsWithChildren } from \"react\";\r\nimport { useCallback } from \"react\";\r\nimport type { ConnectableElement, DropTargetMonitor } from \"react-dnd\";\r\nimport { useDrag, useDrop } from \"react-dnd\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport * as style from \"./GraphConnectorHandle.module.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<PropsWithChildren<IGraphConnectorHandlerProps>> = ({\r\n parentId,\r\n parentX,\r\n parentY,\r\n offsetX = 0,\r\n offsetY = 0,\r\n parentWidth,\r\n parentHeight,\r\n parentContainerId,\r\n}) => {\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: ConnectableElement) => {\r\n dragRef(ref);\r\n dropRef(ref);\r\n },\r\n [dragRef, dropRef]\r\n );\r\n return <div ref={attachRef} className={ClassNames({ handle: true, hovered: isOver }, style)} style={{ top: centerY + \"px\", left: centerX + \"px\" }} />;\r\n};\r\n"]}

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

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import type { FC, PropsWithChildren } from "react";
 export interface IGraphContainerProps {
 }
 /**
@@ -7,4 +7,4 @@ export interface IGraphContainerProps {
  * @param props
  * @returns
  */
-export declare const GraphContainer: FC<IGraphContainerProps>;
+export declare const GraphContainer: FC<PropsWithChildren<IGraphContainerProps>>;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"GraphContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphContainer.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,KAAK,MAAM,8BAA8B,CAAC;AAItD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,~~GAA6B~~,CAAC,KAAK,EAAE,EAAE;~~IAC9D~~,OAAO,cAAK,SAAS,EAAE,KAAK,CAAC,SAAS,YAAG,KAAK,CAAC,QAAQ,GAAO,CAAC;AACnE,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport * as style from \"./GraphContainer.module.scss\";\r\n\r\nexport interface IGraphContainerProps {}\r\n\r\n/*\r\n This component is just a simple container to keep the nodes and lines containers\r\n * together\r\n * @param props\r\n * @returns\r\n */\r\nexport const GraphContainer: FC<IGraphContainerProps> = (props) => {\r\n return <div className={style.container}>{props.children}</div>;\r\n};\r\n"]}
1	+ {"version":3,"file":"GraphContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphContainer.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,KAAK,MAAM,8BAA8B,CAAC;AAItD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAgD,CAAC,KAAK,EAAE,EAAE;IACjF,OAAO,cAAK,SAAS,EAAE,KAAK,CAAC,SAAS,YAAG,KAAK,CAAC,QAAQ,GAAO,CAAC;AACnE,CAAC,CAAC","sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\r\nimport * as style from \"./GraphContainer.module.scss\";\r\n\r\nexport interface IGraphContainerProps {}\r\n\r\n/*\r\n This component is just a simple container to keep the nodes and lines containers\r\n * together\r\n * @param props\r\n * @returns\r\n */\r\nexport const GraphContainer: FC<PropsWithChildren<IGraphContainerProps>> = (props) => {\r\n return <div className={style.container}>{props.children}</div>;\r\n};\r\n"]}

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

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import type { FC, PropsWithChildren } from "react";
 /**
  * props for the GraphLineContainer
  */
@@ -13,4 +13,4 @@ export interface IGraphLinesContainerProps {
  * @param props
  * @returns
  */
-export declare const GraphLinesContainer: FC<IGraphLinesContainerProps>;
+export declare const GraphLinesContainer: FC<PropsWithChildren<IGraphLinesContainerProps>>;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"GraphLinesContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphLinesContainer.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAYvD;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,~~GAAkC~~,CAAC,KAAK,EAAE,EAAE;~~IACxE~~,MAAM,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC/C,MAAM,EAAE,WAAW;QACnB,OAAO,EAAE,CAAC,IAAS,EAAE,EAAE;YACnB,OAAO,IAAI,CAAC,iBAAiB,KAAK,KAAK,CAAC,EAAE,CAAC;QAC/C,CAAC;QACD,OAAO,EAAE,CAAC,OAA0B,EAAE,EAAE,CAAC,CAAC;YACtC,KAAK,EAAE,OAAO,CAAC,OAAO,EAAS;YAC/B,KAAK,EAAE,OAAO,CAAC,8BAA8B,EAAS;SACzD,CAAC;KACL,CAAC,CAAC,CAAC;IACJ,OAAO,CACH,eAAK,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,GAAG,EAAE,OAAO,aACxC,yBACI,iBAAQ,EAAE,EAAE,aAAa,EAAE,WAAW,EAAC,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,GAAG,EAAC,MAAM,EAAC,MAAM,YACzF,eAAM,CAAC,EAAC,uBAAuB,EAAC,MAAM,EAAC,OAAO,GAAG,GAC5C,GACN,EACN,KAAK,CAAC,QAAQ,EACd,KAAK,IAAI,KAAK,CAAC,iBAAiB,KAAK,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC,CAAC,KAAK,SAAS,IAAI,KAAK,CAAC,CAAC,KAAK,SAAS,IAAI,KAAK,IAAI,CACzG,KAAC,SAAS,IAAC,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAI,CACzG,IACC,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport type { DropTargetMonitor } from \"react-dnd\";\r\nimport { useDrop } from \"react-dnd\";\r\nimport { GraphLine, MarkerArrowId } from \"./GraphLine\";\r\n\r\n/*\r\n props for the GraphLineContainer\r\n /\r\nexport interface IGraphLinesContainerProps {\r\n /\r\n id of the container\r\n /\r\n id: string;\r\n}\r\n\r\n/\r\n this component handles the dragging of new connections\r\n * @param props\r\n * @returns\r\n */\r\nexport const GraphLinesContainer: FC<IGraphLinesContainerProps> = (props) => {\r\n const [{ start, delta }, dropRef] = useDrop(() => ({\r\n accept: \"connector\",\r\n canDrop: (item: any) => {\r\n return item.parentContainerId === props.id;\r\n },\r\n collect: (monitor: DropTargetMonitor) => ({\r\n start: monitor.getItem() as any,\r\n delta: monitor.getDifferenceFromInitialOffset() as any,\r\n }),\r\n }));\r\n return (\r\n <svg width=\"100%\" height=\"100%\" ref={dropRef}>\r\n <defs>\r\n <marker id={MarkerArrowId} markerWidth=\"15\" markerHeight=\"15\" refX=\"5\" refY=\"5\" orient=\"auto\">\r\n <path d=\"M 0 0 L 10 5 L 0 10 z\" stroke=\"black\" />\r\n </marker>\r\n </defs>\r\n {props.children}\r\n {start && start.parentContainerId === props.id && start.x !== undefined && start.y !== undefined && delta && (\r\n <GraphLine x1={start.x} y1={start.y} x2={start.x + delta.x} y2={start.y + delta.y} selected={false} />\r\n )}\r\n </svg>\r\n );\r\n};\r\n"]}
1	+ {"version":3,"file":"GraphLinesContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphLinesContainer.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAYvD;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAqD,CAAC,KAAK,EAAE,EAAE;IAC3F,MAAM,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC/C,MAAM,EAAE,WAAW;QACnB,OAAO,EAAE,CAAC,IAAS,EAAE,EAAE;YACnB,OAAO,IAAI,CAAC,iBAAiB,KAAK,KAAK,CAAC,EAAE,CAAC;QAC/C,CAAC;QACD,OAAO,EAAE,CAAC,OAA0B,EAAE,EAAE,CAAC,CAAC;YACtC,KAAK,EAAE,OAAO,CAAC,OAAO,EAAS;YAC/B,KAAK,EAAE,OAAO,CAAC,8BAA8B,EAAS;SACzD,CAAC;KACL,CAAC,CAAC,CAAC;IACJ,OAAO,CACH,eAAK,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,GAAG,EAAE,OAAO,aACxC,yBACI,iBAAQ,EAAE,EAAE,aAAa,EAAE,WAAW,EAAC,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,GAAG,EAAC,MAAM,EAAC,MAAM,YACzF,eAAM,CAAC,EAAC,uBAAuB,EAAC,MAAM,EAAC,OAAO,GAAG,GAC5C,GACN,EACN,KAAK,CAAC,QAAQ,EACd,KAAK,IAAI,KAAK,CAAC,iBAAiB,KAAK,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC,CAAC,KAAK,SAAS,IAAI,KAAK,CAAC,CAAC,KAAK,SAAS,IAAI,KAAK,IAAI,CACzG,KAAC,SAAS,IAAC,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAI,CACzG,IACC,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\r\nimport type { DropTargetMonitor } from \"react-dnd\";\r\nimport { useDrop } from \"react-dnd\";\r\nimport { GraphLine, MarkerArrowId } from \"./GraphLine\";\r\n\r\n/*\r\n props for the GraphLineContainer\r\n /\r\nexport interface IGraphLinesContainerProps {\r\n /\r\n id of the container\r\n /\r\n id: string;\r\n}\r\n\r\n/\r\n this component handles the dragging of new connections\r\n * @param props\r\n * @returns\r\n */\r\nexport const GraphLinesContainer: FC<PropsWithChildren<IGraphLinesContainerProps>> = (props) => {\r\n const [{ start, delta }, dropRef] = useDrop(() => ({\r\n accept: \"connector\",\r\n canDrop: (item: any) => {\r\n return item.parentContainerId === props.id;\r\n },\r\n collect: (monitor: DropTargetMonitor) => ({\r\n start: monitor.getItem() as any,\r\n delta: monitor.getDifferenceFromInitialOffset() as any,\r\n }),\r\n }));\r\n return (\r\n <svg width=\"100%\" height=\"100%\" ref={dropRef}>\r\n <defs>\r\n <marker id={MarkerArrowId} markerWidth=\"15\" markerHeight=\"15\" refX=\"5\" refY=\"5\" orient=\"auto\">\r\n <path d=\"M 0 0 L 10 5 L 0 10 z\" stroke=\"black\" />\r\n </marker>\r\n </defs>\r\n {props.children}\r\n {start && start.parentContainerId === props.id && start.x !== undefined && start.y !== undefined && delta && (\r\n <GraphLine x1={start.x} y1={start.y} x2={start.x + delta.x} y2={start.y + delta.y} selected={false} />\r\n )}\r\n </svg>\r\n );\r\n};\r\n"]}

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

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import type { FC, PropsWithChildren } from "react";
 export interface IGraphNodeProps {
     id: string;
     name: string;
@@ -10,4 +10,4 @@ export interface IGraphNodeProps {
     highlighted?: boolean;
     parentContainerId: string;
 }
-export declare const SingleGraphNode: FC<IGraphNodeProps>;
+export declare const SingleGraphNode: FC<PropsWithChildren<IGraphNodeProps>>;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"GraphNode.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphNode.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,KAAK,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAcpD,MAAM,CAAC,MAAM,eAAe,~~GAAwB~~,CAAC,KAAK,EAAE,EAAE;~~IAC1D~~,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,GAAG,EAAE,MAAM,GAAG,EAAE,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,KAAK,CAAC;IACrG,MAAM,EAAE,cAAc,EAAE,GAAG,eAAe,EAAE,CAAC;IAE7C,MAAM,CAAC,EAAE,OAAO,CAAC,GAAG,OAAO,CACvB,GAAG,EAAE,CAAC,CAAC;QACH,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,EAAE,EAAE,EAAE,iBAAiB,EAAE;QAC/B,OAAO,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;YACnB,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE;SACjC,CAAC;KACL,CAAC,EACF,EAAE,CACL,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACjB,cAAc,IAAI,cAAc,CAAC,EAAE,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,OAAO,CACH,cACI,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,KAAK,CAAC,EACnE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,IAAI,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,EAC5E,OAAO,EAAE,OAAO,YAEhB,eAAK,SAAS,EAAE,KAAK,CAAC,SAAS,aAC3B,uBAAK,IAAI,GAAM,EACf,KAAC,qBAAqB,IAClB,iBAAiB,EAAE,iBAAiB,EACpC,QAAQ,EAAE,EAAE,EACZ,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,MAAM,GAAG,CAAC,EACpB,WAAW,EAAE,KAAK,EAClB,YAAY,EAAE,MAAM,GACtB,EACD,KAAK,CAAC,QAAQ,IACb,GACJ,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport { useDrag } from \"react-dnd\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport { GraphConnectorHandler } from \"./GraphConnectorHandle\";\r\nimport * as style from \"./GraphNode.module.scss\";\r\nimport { useGraphContext } from \"./useGraphContext\";\r\n\r\nexport interface IGraphNodeProps {\r\n id: string;\r\n name: string;\r\n x: number;\r\n y: number;\r\n selected?: boolean;\r\n width?: number;\r\n height?: number;\r\n highlighted?: boolean;\r\n parentContainerId: string;\r\n}\r\n\r\nexport const SingleGraphNode: FC<IGraphNodeProps> = (props) => {\r\n const { id, name, x, y, selected, width = 100, height = 40, highlighted, parentContainerId } = props;\r\n const { onNodeSelected } = useGraphContext();\r\n\r\n const [, dragRef] = useDrag(\r\n () => ({\r\n type: \"node\",\r\n item: { id, parentContainerId },\r\n collect: (monitor) => ({\r\n isDrag: !!monitor.isDragging(),\r\n }),\r\n }),\r\n []\r\n );\r\n\r\n const onClick = () => {\r\n onNodeSelected && onNodeSelected(id);\r\n };\r\n\r\n return (\r\n <div\r\n ref={dragRef}\r\n className={ClassNames({ node: true, selected, highlighted }, style)}\r\n style={{ left: x, top: y, minWidth: width + \"px\", minHeight: height + \"px\" }}\r\n onClick={onClick}\r\n >\r\n <div className={style.container}>\r\n <h2>{name}</h2>\r\n <GraphConnectorHandler\r\n parentContainerId={parentContainerId}\r\n parentId={id}\r\n parentX={x}\r\n parentY={y}\r\n offsetY={-height / 2}\r\n parentWidth={width}\r\n parentHeight={height}\r\n />\r\n {props.children}\r\n </div>\r\n </div>\r\n );\r\n};\r\n"]}
1	+ {"version":3,"file":"GraphNode.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphNode.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,KAAK,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAcpD,MAAM,CAAC,MAAM,eAAe,GAA2C,CAAC,KAAK,EAAE,EAAE;IAC7E,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,GAAG,EAAE,MAAM,GAAG,EAAE,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,KAAK,CAAC;IACrG,MAAM,EAAE,cAAc,EAAE,GAAG,eAAe,EAAE,CAAC;IAE7C,MAAM,CAAC,EAAE,OAAO,CAAC,GAAG,OAAO,CACvB,GAAG,EAAE,CAAC,CAAC;QACH,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,EAAE,EAAE,EAAE,iBAAiB,EAAE;QAC/B,OAAO,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;YACnB,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE;SACjC,CAAC;KACL,CAAC,EACF,EAAE,CACL,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACjB,cAAc,IAAI,cAAc,CAAC,EAAE,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,OAAO,CACH,cACI,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,KAAK,CAAC,EACnE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,IAAI,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,EAC5E,OAAO,EAAE,OAAO,YAEhB,eAAK,SAAS,EAAE,KAAK,CAAC,SAAS,aAC3B,uBAAK,IAAI,GAAM,EACf,KAAC,qBAAqB,IAClB,iBAAiB,EAAE,iBAAiB,EACpC,QAAQ,EAAE,EAAE,EACZ,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,MAAM,GAAG,CAAC,EACpB,WAAW,EAAE,KAAK,EAClB,YAAY,EAAE,MAAM,GACtB,EACD,KAAK,CAAC,QAAQ,IACb,GACJ,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\r\nimport { useDrag } from \"react-dnd\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport { GraphConnectorHandler } from \"./GraphConnectorHandle\";\r\nimport * as style from \"./GraphNode.module.scss\";\r\nimport { useGraphContext } from \"./useGraphContext\";\r\n\r\nexport interface IGraphNodeProps {\r\n id: string;\r\n name: string;\r\n x: number;\r\n y: number;\r\n selected?: boolean;\r\n width?: number;\r\n height?: number;\r\n highlighted?: boolean;\r\n parentContainerId: string;\r\n}\r\n\r\nexport const SingleGraphNode: FC<PropsWithChildren<IGraphNodeProps>> = (props) => {\r\n const { id, name, x, y, selected, width = 100, height = 40, highlighted, parentContainerId } = props;\r\n const { onNodeSelected } = useGraphContext();\r\n\r\n const [, dragRef] = useDrag(\r\n () => ({\r\n type: \"node\",\r\n item: { id, parentContainerId },\r\n collect: (monitor) => ({\r\n isDrag: !!monitor.isDragging(),\r\n }),\r\n }),\r\n []\r\n );\r\n\r\n const onClick = () => {\r\n onNodeSelected && onNodeSelected(id);\r\n };\r\n\r\n return (\r\n <div\r\n ref={dragRef}\r\n className={ClassNames({ node: true, selected, highlighted }, style)}\r\n style={{ left: x, top: y, minWidth: width + \"px\", minHeight: height + \"px\" }}\r\n onClick={onClick}\r\n >\r\n <div className={style.container}>\r\n <h2>{name}</h2>\r\n <GraphConnectorHandler\r\n parentContainerId={parentContainerId}\r\n parentId={id}\r\n parentX={x}\r\n parentY={y}\r\n offsetY={-height / 2}\r\n parentWidth={width}\r\n parentHeight={height}\r\n />\r\n {props.children}\r\n </div>\r\n </div>\r\n );\r\n};\r\n"]}

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

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import type { FC, PropsWithChildren } from "react";
 export interface IGraphContainerProps {
     onNodeMoved: (id: string, x: number, y: number) => void;
     id: string;
@@ -8,4 +8,4 @@ export interface IGraphContainerProps {
  * @param props properties
  * @returns graph node container element
  */
-export declare const GraphNodesContainer: FC<IGraphContainerProps>;
+export declare const GraphNodesContainer: FC<PropsWithChildren<IGraphContainerProps>>;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"GraphNodesContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphNodesContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,sCAAwB;AAG1C,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAMzC;;;;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,CAAC;YACxB,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;gBACtB,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;YACnD,CAAC;YACD,WAAW,CAAC,OAAO,GAAG,IAAI,OAAO,CAAC,aAAa,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;QACxE,CAAC;IACL,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;IAC1B,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,UAAU,EAAE,CAAC;YACd,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;QAC/B,CAAC;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"]}
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,GAAgD,CAAC,KAAK,EAAE,EAAE;IACtF,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,CAAC;YACxB,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;gBACtB,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;YACnD,CAAC;YACD,WAAW,CAAC,OAAO,GAAG,IAAI,OAAO,CAAC,aAAa,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;QACxE,CAAC;IACL,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;IAC1B,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,UAAU,EAAE,CAAC;YACd,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;QAC/B,CAAC;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, PropsWithChildren } 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<PropsWithChildren<IGraphContainerProps>> = (props) => {\r\n const lastDragPos = useRef<Nullable<Vector2>>(null);\r\n\r\n const { currentOffset, item, isDragging } = useDragLayer((monitor) => ({\r\n currentOffset: monitor.getSourceClientOffset(),\r\n item: monitor.getItem(),\r\n isDragging: monitor.isDragging(),\r\n }));\r\n\r\n useEffect(() => {\r\n if (currentOffset && item) {\r\n if (lastDragPos.current) {\r\n const delta = new Vector2(currentOffset.x, currentOffset.y).subtract(lastDragPos.current);\r\n props.onNodeMoved?.(item.id, delta.x, delta.y);\r\n }\r\n lastDragPos.current = new Vector2(currentOffset.x, currentOffset.y);\r\n }\r\n }, [currentOffset, item]);\r\n useEffect(() => {\r\n if (!isDragging) {\r\n lastDragPos.current = null;\r\n }\r\n }, [isDragging]);\r\n return <div>{props.children}</div>;\r\n};\r\n"]}

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

@@ -1,4 +1,4 @@
-import type { ComponentType } from "react";
+import type { ComponentType, PropsWithChildren } from "react";
 import type { Nullable } from "@babylonjs/core/types.js";
 export type IVisualRecordsType = Record<string, {
     x: number;
@@ -66,4 +66,4 @@ export interface INodeRendererProps {
  * @param props
  * @returns
  */
-export declare const NodeRenderer: (props: INodeRendererProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NodeRenderer: (props: PropsWithChildren<INodeRendererProps>) => import("react/jsx-runtime").JSX.Element;

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

	@@ -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 { SingleGraphNode } 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 <SingleGraphNode\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 </SingleGraphNode>\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, PropsWithChildren } from \"react\";\r\nimport { useState, useEffect, useMemo } from \"react\";\r\nimport { GraphContainer } from \"./GraphContainer\";\r\nimport { GraphLine } from \"./GraphLine\";\r\nimport { SingleGraphNode } 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: PropsWithChildren<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 <SingleGraphNode\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 </SingleGraphNode>\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"]}