@babylonjs/shared-ui-components 7.34.1 → 7.34.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Button.js +1 -1
- package/components/Button.js.map +1 -1
- package/components/Icon.js +1 -1
- package/components/Icon.js.map +1 -1
- package/components/Label.js +1 -1
- package/components/Label.js.map +1 -1
- package/components/MessageDialog.js +1 -1
- package/components/MessageDialog.js.map +1 -1
- package/components/TextInputWithSubmit.js +1 -1
- package/components/TextInputWithSubmit.js.map +1 -1
- package/components/Toggle.js +1 -1
- package/components/Toggle.js.map +1 -1
- package/components/bars/CommandBarComponent.js +1 -1
- package/components/bars/CommandBarComponent.js.map +1 -1
- package/components/bars/CommandButtonComponent.js +1 -1
- package/components/bars/CommandButtonComponent.js.map +1 -1
- package/components/bars/CommandDropdownComponent.js +1 -1
- package/components/bars/CommandDropdownComponent.js.map +1 -1
- package/components/colorPicker/ColorComponentEntry.js +1 -1
- package/components/colorPicker/ColorComponentEntry.js.map +1 -1
- package/components/colorPicker/ColorPicker.js +1 -1
- package/components/colorPicker/ColorPicker.js.map +1 -1
- package/components/colorPicker/HexColor.js +1 -1
- package/components/colorPicker/HexColor.js.map +1 -1
- package/components/layout/FlexibleColumn.js +1 -1
- package/components/layout/FlexibleColumn.js.map +1 -1
- package/components/layout/FlexibleDropZone.js +1 -1
- package/components/layout/FlexibleDropZone.js.map +1 -1
- package/components/layout/FlexibleGridContainer.js +1 -1
- package/components/layout/FlexibleGridContainer.js.map +1 -1
- package/components/layout/FlexibleResizeBar.js +1 -1
- package/components/layout/FlexibleResizeBar.js.map +1 -1
- package/components/layout/FlexibleTab.js +1 -1
- package/components/layout/FlexibleTab.js.map +1 -1
- package/components/layout/FlexibleTabsContainer.js +1 -1
- package/components/layout/FlexibleTabsContainer.js.map +1 -1
- package/components/lines/ColorLineComponent.js +1 -1
- package/components/lines/ColorLineComponent.js.map +1 -1
- package/components/lines/ColorPickerLineComponent.js +1 -1
- package/components/lines/ColorPickerLineComponent.js.map +1 -1
- package/components/lines/FileButtonLineComponent.js +1 -1
- package/components/lines/FileButtonLineComponent.js.map +1 -1
- package/components/lines/NumericInputComponent.js +1 -1
- package/components/lines/NumericInputComponent.js.map +1 -1
- package/components/lines/OptionsLineComponent.js +1 -1
- package/components/lines/OptionsLineComponent.js.map +1 -1
- package/components/reactGraphSystem/GraphConnectorHandle.js +1 -1
- package/components/reactGraphSystem/GraphConnectorHandle.js.map +1 -1
- package/components/reactGraphSystem/GraphContainer.js +1 -1
- package/components/reactGraphSystem/GraphContainer.js.map +1 -1
- package/components/reactGraphSystem/GraphNode.js +1 -1
- package/components/reactGraphSystem/GraphNode.js.map +1 -1
- package/nodeGraphSystem/frameNodePort.js +1 -1
- package/nodeGraphSystem/frameNodePort.js.map +1 -1
- package/nodeGraphSystem/graphCanvas.js +2 -2
- package/nodeGraphSystem/graphCanvas.js.map +1 -1
- package/nodeGraphSystem/graphFrame.js +3 -3
- package/nodeGraphSystem/graphFrame.js.map +1 -1
- package/nodeGraphSystem/graphNode.js +4 -4
- package/nodeGraphSystem/graphNode.js.map +1 -1
- package/nodeGraphSystem/{graphNode.modules.scss → graphNode.module.scss} +1 -1
- package/nodeGraphSystem/nodeLink.js +2 -2
- package/nodeGraphSystem/nodeLink.js.map +1 -1
- package/nodeGraphSystem/nodePort.js +2 -2
- package/nodeGraphSystem/nodePort.js.map +1 -1
- package/package.json +1 -1
- package/popupHelper.d.ts +12 -0
- package/popupHelper.js +57 -0
- package/popupHelper.js.map +1 -0
- package/split/splitContainer.d.ts +58 -0
- package/split/splitContainer.js +232 -0
- package/split/splitContainer.js.map +1 -0
- package/split/splitContainer.module.scss +25 -0
- package/split/splitContext.d.ts +43 -0
- package/split/splitContext.js +14 -0
- package/split/splitContext.js.map +1 -0
- package/split/splitter.d.ts +41 -0
- package/split/splitter.js +69 -0
- package/split/splitter.js.map +1 -0
- package/styleHelper.d.ts +6 -0
- package/styleHelper.js +21 -0
- package/styleHelper.js.map +1 -0
- package/lines/popup.d.ts +0 -4
- package/lines/popup.js +0 -69
- package/lines/popup.js.map +0 -1
- /package/components/{Button.modules.scss → Button.module.scss} +0 -0
- /package/components/{Icon.modules.scss → Icon.module.scss} +0 -0
- /package/components/{Label.modules.scss → Label.module.scss} +0 -0
- /package/components/{MessageDialog.modules.scss → MessageDialog.module.scss} +0 -0
- /package/components/{TextInputWithSubmit.modules.scss → TextInputWithSubmit.module.scss} +0 -0
- /package/components/{Toggle.modules.scss → Toggle.module.scss} +0 -0
- /package/components/bars/{CommandBar.modules.scss → CommandBar.module.scss} +0 -0
- /package/components/bars/{CommandButton.modules.scss → CommandButton.module.scss} +0 -0
- /package/components/bars/{CommandDropdown.modules.scss → CommandDropdown.module.scss} +0 -0
- /package/components/colorPicker/{ColorComponentEntry.modules.scss → ColorComponentEntry.module.scss} +0 -0
- /package/components/colorPicker/{ColorPicker.modules.scss → ColorPicker.module.scss} +0 -0
- /package/components/colorPicker/{HexColor.modules.scss → HexColor.module.scss} +0 -0
- /package/components/layout/{FlexibleColumn.modules.scss → FlexibleColumn.module.scss} +0 -0
- /package/components/layout/{FlexibleDropZone.modules.scss → FlexibleDropZone.module.scss} +0 -0
- /package/components/layout/{FlexibleGridContainer.modules.scss → FlexibleGridContainer.module.scss} +0 -0
- /package/components/layout/{FlexibleResizeBar.modules.scss → FlexibleResizeBar.module.scss} +0 -0
- /package/components/layout/{FlexibleTab.modules.scss → FlexibleTab.module.scss} +0 -0
- /package/components/layout/{FlexibleTabsContainer.modules.scss → FlexibleTabsContainer.module.scss} +0 -0
- /package/components/lines/{ColorLineComponent.modules.scss → ColorLineComponent.module.scss} +0 -0
- /package/components/lines/{ColorPickerLineComponent.modules.scss → ColorPickerLineComponent.module.scss} +0 -0
- /package/components/lines/{FileButtonLineComponent.modules.scss → FileButtonLineComponent.module.scss} +0 -0
- /package/components/lines/{NumericInputComponent.modules.scss → NumericInputComponent.module.scss} +0 -0
- /package/components/lines/{OptionsLineComponent.modules.scss → OptionsLineComponent.module.scss} +0 -0
- /package/components/reactGraphSystem/{GraphConnectorHandle.modules.scss → GraphConnectorHandle.module.scss} +0 -0
- /package/components/reactGraphSystem/{GraphContainer.modules.scss → GraphContainer.module.scss} +0 -0
- /package/components/reactGraphSystem/{GraphNode.modules.scss → GraphNode.module.scss} +0 -0
- /package/nodeGraphSystem/{common.modules.scss → common.module.scss} +0 -0
- /package/nodeGraphSystem/{graphCanvas.modules.scss → graphCanvas.module.scss} +0 -0
- /package/nodeGraphSystem/{graphFrame.modules.scss → graphFrame.module.scss} +0 -0
- /package/nodeGraphSystem/{nodeLink.modules.scss → nodeLink.module.scss} +0 -0
- /package/nodeGraphSystem/{nodePort.modules.scss → nodePort.module.scss} +0 -0
package/components/Button.js
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import styles from "./Button.
|
2
|
+
import styles from "./Button.module.scss";
|
3
3
|
import { ClassNames } from "./classNames.js";
|
4
4
|
export const Button = ({ disabled, active, onClick, children, color, size, title, backgroundColor }) => {
|
5
5
|
return (_jsx("button", { className: ClassNames({ button: true, active, wide: size === "wide", small: size === "small", smaller: size === "smaller", light: color === "light", dark: color === "dark" }, styles), disabled: disabled, onClick: onClick, title: title, style: { backgroundColor }, children: children }));
|
package/components/Button.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,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 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"]}
|
package/components/Icon.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
2
|
import { ClassNames } from "./classNames.js";
|
3
|
-
import styles from "./Icon.
|
3
|
+
import styles from "./Icon.module.scss";
|
4
4
|
export const Icon = ({ color = "dark", icon }) => {
|
5
5
|
return _jsx("img", { src: icon, style: { width: "100%", height: "100%" }, className: ClassNames({ light: color === "light" }, styles) });
|
6
6
|
};
|
package/components/Icon.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/Icon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,MAAM,MAAM,
|
1
|
+
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/Icon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAOxC,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,OAAO,cAAK,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,OAAO,EAAE,EAAE,MAAM,CAAC,GAAI,CAAC;AACrI,CAAC,CAAC","sourcesContent":["import { ClassNames } from \"./classNames\";\r\nimport styles from \"./Icon.module.scss\";\r\n\r\nexport type IconProps = {\r\n color?: \"dark\" | \"light\";\r\n icon: string;\r\n};\r\n\r\nexport const Icon: React.FC<IconProps> = ({ color = \"dark\", icon }) => {\r\n return <img src={icon} style={{ width: \"100%\", height: \"100%\" }} className={ClassNames({ light: color === \"light\" }, styles)} />;\r\n};\r\n"]}
|
package/components/Label.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
2
|
import { ClassNames } from "./classNames.js";
|
3
|
-
import styles from "./Label.
|
3
|
+
import styles from "./Label.module.scss";
|
4
4
|
export const Label = ({ text, children, color }) => {
|
5
5
|
return (_jsxs("label", { className: ClassNames({ label: true, light: color === "light", dark: color === "dark" }, styles), children: [_jsx("span", { children: text }), children] }));
|
6
6
|
};
|
package/components/Label.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/Label.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,MAAM,MAAM,
|
1
|
+
{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/Label.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAQzC,MAAM,CAAC,MAAM,KAAK,GAAyB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IACrE,OAAO,CACH,iBAAO,SAAS,EAAE,UAAU,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,KAAK,OAAO,EAAE,IAAI,EAAE,KAAK,KAAK,MAAM,EAAE,EAAE,MAAM,CAAC,aACnG,yBAAO,IAAI,GAAQ,EAClB,QAAQ,IACL,CACX,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { ReactChild } from \"react\";\r\nimport { ClassNames } from \"./classNames\";\r\nimport styles from \"./Label.module.scss\";\r\n\r\nexport type LabelProps = {\r\n text: string;\r\n children?: ReactChild;\r\n color?: \"dark\" | \"light\";\r\n};\r\n\r\nexport const Label: React.FC<LabelProps> = ({ text, children, color }) => {\r\n return (\r\n <label className={ClassNames({ label: true, light: color === \"light\", dark: color === \"dark\" }, styles)}>\r\n <span>{text}</span>\r\n {children}\r\n </label>\r\n );\r\n};\r\n"]}
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
/* eslint-disable @typescript-eslint/naming-convention */
|
3
3
|
import { useState, useEffect } from "react";
|
4
4
|
import { ClassNames } from "./classNames.js";
|
5
|
-
import styles from "./MessageDialog.
|
5
|
+
import styles from "./MessageDialog.module.scss";
|
6
6
|
export const MessageDialog = (props) => {
|
7
7
|
const [message, setMessage] = useState(props.message);
|
8
8
|
const [isError, setIsError] = useState(props.isError);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"MessageDialog.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/MessageDialog.tsx"],"names":[],"mappings":";AAAA,yDAAyD;AACzD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,MAAM,MAAM,
|
1
|
+
{"version":3,"file":"MessageDialog.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/MessageDialog.tsx"],"names":[],"mappings":";AAAA,yDAAyD;AACzD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,MAAM,MAAM,6BAA6B,CAAC;AAQjD,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,KAAK,EAAE,EAAE;IACjE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACtD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACX,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAC1B,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,OAAO,GAAG,GAAG,EAAE;QACjB,UAAU,CAAC,EAAE,CAAC,CAAC;QACf,IAAI,KAAK,CAAC,OAAO,EAAE;YACf,KAAK,CAAC,OAAO,EAAE,CAAC;SACnB;IACL,CAAC,CAAC;IAEF,IAAI,CAAC,OAAO,EAAE;QACV,OAAO,IAAI,CAAC;KACf;IAED,OAAO,CACH,cAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,YACtC,eAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,aAC5B,cAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,YAAG,OAAO,GAAO,EACzD,cAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,YACpC,cAAK,SAAS,EAAE,UAAU,CAAC,EAAE,kBAAkB,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,OAAO,mBAE5F,GACJ,IACJ,GACJ,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\r\nimport { useState, useEffect } from \"react\";\r\nimport * as React from \"react\";\r\nimport { ClassNames } from \"./classNames\";\r\nimport styles from \"./MessageDialog.module.scss\";\r\n\r\nexport interface MessageDialogProps {\r\n message: string;\r\n isError: boolean;\r\n onClose?: () => void;\r\n}\r\n\r\nexport const MessageDialog: React.FC<MessageDialogProps> = (props) => {\r\n const [message, setMessage] = useState(props.message);\r\n const [isError, setIsError] = useState(props.isError);\r\n\r\n useEffect(() => {\r\n setMessage(props.message);\r\n setIsError(props.isError);\r\n }, [props]);\r\n\r\n const onClick = () => {\r\n setMessage(\"\");\r\n if (props.onClose) {\r\n props.onClose();\r\n }\r\n };\r\n\r\n if (!message) {\r\n return null;\r\n }\r\n\r\n return (\r\n <div className={styles[\"dialog-container\"]}>\r\n <div className={styles[\"dialog\"]}>\r\n <div className={styles[\"dialog-message\"]}>{message}</div>\r\n <div className={styles[\"dialog-buttons\"]}>\r\n <div className={ClassNames({ \"dialog-button-ok\": true, error: isError }, styles)} onClick={onClick}>\r\n OK\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n};\r\n"]}
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useState } from "react";
|
3
3
|
import { Button } from "./Button.js";
|
4
4
|
import { Icon } from "./Icon.js";
|
5
|
-
import style from "./TextInputWithSubmit.
|
5
|
+
import style from "./TextInputWithSubmit.module.scss";
|
6
6
|
import submitIcon from "../imgs/confirmGridElementDark.svg";
|
7
7
|
import cancelIcon from "../imgs/deleteGridElementDark.svg";
|
8
8
|
import { ClassNames } from "./classNames.js";
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"TextInputWithSubmit.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/TextInputWithSubmit.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,KAAK,MAAM,
|
1
|
+
{"version":3,"file":"TextInputWithSubmit.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/TextInputWithSubmit.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,KAAK,MAAM,mCAAmC,CAAC;AAEtD,OAAO,UAAU,MAAM,oCAAoC,CAAC;AAC5D,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAU1C;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAAsB,EAAE,EAAE;IAC1D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAE5F,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,QAAQ,GAAG,CAAC,KAA0C,EAAE,EAAE;QAC5D,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,KAAK,CAAC,YAAY,EAAE,EAAE,CAAC;QACvB,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,KAAK,CAAC,aACpE,KAAK,CAAC,KAAK,IAAI,0BAAQ,KAAK,CAAC,KAAK,GAAS,EAC5C,gBAAO,SAAS,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAC,MAAM,EAAC,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,EAC/G,0BACI,KAAC,MAAM,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,eAAe,EAAC,SAAS,EAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC,KAAK,YACnG,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,GAAQ,GACvC,EACT,KAAC,MAAM,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,SAAS,EAAC,eAAe,EAAC,SAAS,EAAC,OAAO,EAAE,aAAa,YACjF,KAAC,IAAI,IAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAC,MAAM,GAAQ,GACvC,IACP,IACJ,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { useEffect, useState } from \"react\";\r\nimport { Button } from \"./Button\";\r\nimport { Icon } from \"./Icon\";\r\nimport style from \"./TextInputWithSubmit.module.scss\";\r\n\r\nimport submitIcon from \"../imgs/confirmGridElementDark.svg\";\r\nimport cancelIcon from \"../imgs/deleteGridElementDark.svg\";\r\nimport { ClassNames } from \"./classNames\";\r\n\r\nexport interface ITextInputProps {\r\n label?: string;\r\n placeholder?: string;\r\n submitValue: (newValue: string) => void; // Function to call when the value is updated\r\n validateValue?: (value: string) => boolean; // Function to call to validate the value\r\n cancelSubmit?: () => void; // Function to call when the user cancels the submit\r\n}\r\n\r\n/**\r\n * This component represents a text input that can be submitted or cancelled on buttons\r\n * @param props properties\r\n * @returns TextInputWithSubmit element\r\n */\r\nexport const TextInputWithSubmit = (props: ITextInputProps) => {\r\n const [value, setValue] = useState(\"\");\r\n const [valid, setValid] = useState(props.validateValue ? props.validateValue(value) : true);\r\n\r\n useEffect(() => {\r\n setValid(props.validateValue ? props.validateValue(value) : true);\r\n }, [value]);\r\n\r\n const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n setValue(event.target.value);\r\n };\r\n\r\n const onClickSubmit = () => {\r\n props.submitValue(value);\r\n };\r\n\r\n const onClickCancel = () => {\r\n props.cancelSubmit?.();\r\n setValue(\"\");\r\n };\r\n\r\n return (\r\n <div className={ClassNames({ line: true, valid, invalid: !valid }, style)}>\r\n {props.label && <label>{props.label}</label>}\r\n <input className={style.input} type=\"text\" placeholder={props.placeholder} value={value} onChange={onChange} />\r\n <div>\r\n <Button color=\"light\" size=\"smaller\" backgroundColor=\"inherit\" onClick={onClickSubmit} disabled={!valid}>\r\n <Icon icon={submitIcon} color=\"dark\"></Icon>\r\n </Button>\r\n <Button color=\"light\" size=\"smaller\" backgroundColor=\"inherit\" onClick={onClickCancel}>\r\n <Icon icon={cancelIcon} color=\"dark\"></Icon>\r\n </Button>\r\n </div>\r\n </div>\r\n );\r\n};\r\n"]}
|
package/components/Toggle.js
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
import styles from "./Toggle.
|
2
|
+
import styles from "./Toggle.module.scss";
|
3
3
|
import { ClassNames } from "./classNames.js";
|
4
4
|
import toggleOnIcon30px from "../imgs/toggleOnIcon_30px.svg";
|
5
5
|
import toggleMixedIcon30px from "../imgs/toggleMixedIcon_30px.svg";
|
package/components/Toggle.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/Toggle.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,
|
1
|
+
{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/components/Toggle.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,gBAAgB,MAAM,+BAA+B,CAAC;AAC7D,OAAO,mBAAmB,MAAM,kCAAkC,CAAC;AACnE,OAAO,iBAAiB,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,MAAM,KAAK,GAAG;IACV,EAAE,EAAE,gBAAgB;IACpB,KAAK,EAAE,mBAAmB;IAC1B,GAAG,EAAE,iBAAiB;CACzB,CAAC;AASF,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,OAAO,GAAG,KAAK,EAAE,MAAM,GAAG,KAAK,EAAE,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,EAAE,EAAE,EAAE;IACtH,OAAO,CACH,iBAAO,SAAS,EAAE,UAAU,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,MAAM,CAAC,aAC1D,gBAAO,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,GAAI,EAC5G,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK,GAAI,IACxC,CACX,CAAC;AACN,CAAC,CAAC","sourcesContent":["import styles from \"./Toggle.module.scss\";\r\nimport { ClassNames } from \"./classNames\";\r\n\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\nimport { Icon } from \"./Icon\";\r\n\r\nconst Icons = {\r\n on: toggleOnIcon30px,\r\n mixed: toggleMixedIcon30px,\r\n off: toggleOffIcon30px,\r\n};\r\n\r\nexport type ToggleProps = {\r\n toggled: \"on\" | \"mixed\" | \"off\";\r\n onToggle?: () => void;\r\n padded?: boolean;\r\n color?: \"dark\" | \"light\";\r\n};\r\n\r\nexport const Toggle: React.FC<ToggleProps> = ({ color = \"dark\", toggled = \"off\", padded = false, onToggle = () => {} }) => {\r\n return (\r\n <label className={ClassNames({ toggle: true, padded }, styles)}>\r\n <input type=\"checkbox\" style={{ display: \"none\" }} checked={toggled === \"on\"} onChange={() => onToggle()} />\r\n <Icon icon={Icons[toggled]} color={color} />\r\n </label>\r\n );\r\n};\r\n"]}
|
@@ -9,7 +9,7 @@ import zoomIcon from "../../imgs/zoomIcon.svg";
|
|
9
9
|
import logoIcon from "../../imgs/babylonLogo.svg";
|
10
10
|
import canvasFitIcon from "../../imgs/canvasFitIcon.svg";
|
11
11
|
import betaFlag from "../../imgs/betaFlag.svg";
|
12
|
-
import style from "./CommandBar.
|
12
|
+
import style from "./CommandBar.module.scss";
|
13
13
|
import { Color3 } from "@babylonjs/core/Maths/math.color.js";
|
14
14
|
import { ColorPickerLineComponent } from "../lines/ColorPickerLineComponent.js";
|
15
15
|
export const CommandBarComponent = (props) => {
|
@@ -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 style from \"./CommandBar.modules.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 } 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 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,6 +1,6 @@
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
2
|
import { ClassNames } from "../classNames.js";
|
3
|
-
import style from "./CommandButton.
|
3
|
+
import style from "./CommandButton.module.scss";
|
4
4
|
export const CommandButtonComponent = (props) => {
|
5
5
|
return (_jsx("div", { className: ClassNames({ commandButton: true, active: props.isActive, disabled: props.disabled }, style), onClick: props.onClick, title: `${props.tooltip} ${props.shortcut ? " (" + props.shortcut + ")" : ""}`, children: _jsx("div", { className: ClassNames({ commandButtonIcon: true }, style), children: _jsx("img", { src: props.icon, title: props.iconLabel, alt: props.iconLabel, draggable: false }) }) }));
|
6
6
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"CommandButtonComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/bars/CommandButtonComponent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,KAAK,MAAM,
|
1
|
+
{"version":3,"file":"CommandButtonComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/bars/CommandButtonComponent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,KAAK,MAAM,6BAA6B,CAAC;AAYhD,MAAM,CAAC,MAAM,sBAAsB,GAA2C,CAAC,KAAK,EAAE,EAAE;IACpF,OAAO,CACH,cACI,SAAS,EAAE,UAAU,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,KAAK,CAAC,EACvG,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,KAAK,EAAE,GAAG,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,GAAG,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,YAE9E,cAAK,SAAS,EAAE,UAAU,CAAC,EAAE,iBAAiB,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC,YAC1D,cAAK,GAAG,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,EAAE,KAAK,GAAI,GACtF,GACJ,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\r\nimport { ClassNames } from \"../classNames\";\r\n\r\nimport style from \"./CommandButton.module.scss\";\r\n\r\nexport interface ICommandButtonComponentProps {\r\n tooltip: string;\r\n shortcut?: string;\r\n icon: string;\r\n iconLabel?: string;\r\n isActive: boolean;\r\n onClick: () => void;\r\n disabled?: boolean;\r\n}\r\n\r\nexport const CommandButtonComponent: React.FC<ICommandButtonComponentProps> = (props) => {\r\n return (\r\n <div\r\n className={ClassNames({ commandButton: true, active: props.isActive, disabled: props.disabled }, style)}\r\n onClick={props.onClick}\r\n title={`${props.tooltip} ${props.shortcut ? \" (\" + props.shortcut + \")\" : \"\"}`}\r\n >\r\n <div className={ClassNames({ commandButtonIcon: true }, style)}>\r\n <img src={props.icon} title={props.iconLabel} alt={props.iconLabel} draggable={false} />\r\n </div>\r\n </div>\r\n );\r\n};\r\n"]}
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
|
|
2
2
|
import * as React from "react";
|
3
3
|
import { FileButtonLineComponent } from "../lines/FileButtonLineComponent.js";
|
4
4
|
import { JoinClassNames } from "../classNames.js";
|
5
|
-
import style from "./CommandDropdown.
|
5
|
+
import style from "./CommandDropdown.module.scss";
|
6
6
|
export class CommandDropdownComponent extends React.Component {
|
7
7
|
constructor(props) {
|
8
8
|
super(props);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"CommandDropdownComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/bars/CommandDropdownComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport { FileButtonLineComponent } from \"../lines/FileButtonLineComponent\";\r\nimport { JoinClassNames } from \"../classNames\";\r\n\r\nimport style from \"./CommandDropdown.modules.scss\";\r\n\r\ninterface ICommandDropdownComponentProps {\r\n icon?: string;\r\n tooltip: string;\r\n defaultValue?: string;\r\n items: {\r\n label: string;\r\n icon?: string;\r\n fileButton?: boolean;\r\n onClick?: () => void;\r\n onCheck?: (value: boolean) => void;\r\n storeKey?: string;\r\n isActive?: boolean;\r\n defaultValue?: boolean | string;\r\n subItems?: string[];\r\n }[];\r\n toRight?: boolean;\r\n}\r\n\r\nexport class CommandDropdownComponent extends React.Component<ICommandDropdownComponentProps, { isExpanded: boolean; activeState: string }> {\r\n public constructor(props: ICommandDropdownComponentProps) {\r\n super(props);\r\n\r\n this.state = { isExpanded: false, activeState: \"\" };\r\n }\r\n\r\n public override render() {\r\n return (\r\n <>\r\n {this.state.isExpanded && (\r\n <div\r\n className={style.commandDropdownBlocker}\r\n onClick={() => {\r\n this.setState({ isExpanded: false });\r\n }}\r\n ></div>\r\n )}\r\n <div className={style.commandDropdownRoot}>\r\n <div\r\n className={JoinClassNames(style, \"commandDropdown\", this.state.isExpanded ? \"activated\" : \"\")}\r\n title={this.props.tooltip}\r\n onClick={() => {\r\n this.setState({ isExpanded: false });\r\n const newState = !this.state.isExpanded;\r\n const pgHost = document.getElementById(\"embed-host\");\r\n\r\n if (pgHost) {\r\n pgHost.style.zIndex = newState ? \"0\" : \"10\";\r\n }\r\n\r\n this.setState({ isExpanded: newState });\r\n }}\r\n >\r\n {this.props.icon && (\r\n <div className={style.commandDropdownIcon}>\r\n <img src={this.props.icon} />\r\n </div>\r\n )}\r\n {!this.props.icon && <div className={style.commandDropdownActive}></div>}\r\n </div>\r\n {this.state.isExpanded && (\r\n <div className={JoinClassNames(style, \"commandDropdownContent\", this.props.toRight ? \"toRight\" : \"\")}>\r\n {this.props.items.map((m) => {\r\n if (!m.fileButton) {\r\n return (\r\n <div\r\n className={JoinClassNames(style, \"commandDropdownLabel\", m.isActive ? \"active\" : \"\")}\r\n key={m.label}\r\n onClick={() => {\r\n if (!m.onClick) {\r\n this.forceUpdate();\r\n return;\r\n }\r\n if (!m.subItems) {\r\n m.onClick();\r\n\r\n this.setState({ isExpanded: false, activeState: m.label });\r\n }\r\n }}\r\n title={m.label}\r\n >\r\n {!m.icon && <div className={style.commandDropdownLabelText}>{(m.isActive ? \"> \" : \"\") + m.label}</div>}\r\n {m.icon && (\r\n <div className={style.commandDropdownIcon}>\r\n <img src={m.icon} />\r\n </div>\r\n )}\r\n {m.onCheck && (\r\n <input\r\n type=\"checkBox\"\r\n className={style.commandDropdownLabelCheck}\r\n onChange={(evt) => {\r\n this.forceUpdate();\r\n m.onCheck!(evt.target.checked);\r\n }}\r\n checked={false}\r\n />\r\n )}\r\n {m.subItems && <div className={style.commandDropdownArrow}>{\">\"}</div>}\r\n {m.subItems && (\r\n <div className={style.subItems}>\r\n {m.subItems.map((s) => {\r\n return (\r\n <div\r\n key={s}\r\n className={style.subItem}\r\n onClick={() => {\r\n m.onClick!();\r\n this.setState({ isExpanded: false });\r\n }}\r\n >\r\n <div>{s}</div>\r\n </div>\r\n );\r\n })}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n } else {\r\n // eslint-disable-next-line no-console\r\n return <FileButtonLineComponent key={m.label} label=\"Load\" onClick={(file) => console.log(\"file btn clicked\")} accept=\".json\" />;\r\n }\r\n })}\r\n </div>\r\n )}\r\n </div>\r\n </>\r\n );\r\n }\r\n}\r\n"]}
|
1
|
+
{"version":3,"file":"CommandDropdownComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/bars/CommandDropdownComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport { FileButtonLineComponent } from \"../lines/FileButtonLineComponent\";\r\nimport { JoinClassNames } from \"../classNames\";\r\n\r\nimport style from \"./CommandDropdown.module.scss\";\r\n\r\ninterface ICommandDropdownComponentProps {\r\n icon?: string;\r\n tooltip: string;\r\n defaultValue?: string;\r\n items: {\r\n label: string;\r\n icon?: string;\r\n fileButton?: boolean;\r\n onClick?: () => void;\r\n onCheck?: (value: boolean) => void;\r\n storeKey?: string;\r\n isActive?: boolean;\r\n defaultValue?: boolean | string;\r\n subItems?: string[];\r\n }[];\r\n toRight?: boolean;\r\n}\r\n\r\nexport class CommandDropdownComponent extends React.Component<ICommandDropdownComponentProps, { isExpanded: boolean; activeState: string }> {\r\n public constructor(props: ICommandDropdownComponentProps) {\r\n super(props);\r\n\r\n this.state = { isExpanded: false, activeState: \"\" };\r\n }\r\n\r\n public override render() {\r\n return (\r\n <>\r\n {this.state.isExpanded && (\r\n <div\r\n className={style.commandDropdownBlocker}\r\n onClick={() => {\r\n this.setState({ isExpanded: false });\r\n }}\r\n ></div>\r\n )}\r\n <div className={style.commandDropdownRoot}>\r\n <div\r\n className={JoinClassNames(style, \"commandDropdown\", this.state.isExpanded ? \"activated\" : \"\")}\r\n title={this.props.tooltip}\r\n onClick={() => {\r\n this.setState({ isExpanded: false });\r\n const newState = !this.state.isExpanded;\r\n const pgHost = document.getElementById(\"embed-host\");\r\n\r\n if (pgHost) {\r\n pgHost.style.zIndex = newState ? \"0\" : \"10\";\r\n }\r\n\r\n this.setState({ isExpanded: newState });\r\n }}\r\n >\r\n {this.props.icon && (\r\n <div className={style.commandDropdownIcon}>\r\n <img src={this.props.icon} />\r\n </div>\r\n )}\r\n {!this.props.icon && <div className={style.commandDropdownActive}></div>}\r\n </div>\r\n {this.state.isExpanded && (\r\n <div className={JoinClassNames(style, \"commandDropdownContent\", this.props.toRight ? \"toRight\" : \"\")}>\r\n {this.props.items.map((m) => {\r\n if (!m.fileButton) {\r\n return (\r\n <div\r\n className={JoinClassNames(style, \"commandDropdownLabel\", m.isActive ? \"active\" : \"\")}\r\n key={m.label}\r\n onClick={() => {\r\n if (!m.onClick) {\r\n this.forceUpdate();\r\n return;\r\n }\r\n if (!m.subItems) {\r\n m.onClick();\r\n\r\n this.setState({ isExpanded: false, activeState: m.label });\r\n }\r\n }}\r\n title={m.label}\r\n >\r\n {!m.icon && <div className={style.commandDropdownLabelText}>{(m.isActive ? \"> \" : \"\") + m.label}</div>}\r\n {m.icon && (\r\n <div className={style.commandDropdownIcon}>\r\n <img src={m.icon} />\r\n </div>\r\n )}\r\n {m.onCheck && (\r\n <input\r\n type=\"checkBox\"\r\n className={style.commandDropdownLabelCheck}\r\n onChange={(evt) => {\r\n this.forceUpdate();\r\n m.onCheck!(evt.target.checked);\r\n }}\r\n checked={false}\r\n />\r\n )}\r\n {m.subItems && <div className={style.commandDropdownArrow}>{\">\"}</div>}\r\n {m.subItems && (\r\n <div className={style.subItems}>\r\n {m.subItems.map((s) => {\r\n return (\r\n <div\r\n key={s}\r\n className={style.subItem}\r\n onClick={() => {\r\n m.onClick!();\r\n this.setState({ isExpanded: false });\r\n }}\r\n >\r\n <div>{s}</div>\r\n </div>\r\n );\r\n })}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n } else {\r\n // eslint-disable-next-line no-console\r\n return <FileButtonLineComponent key={m.label} label=\"Load\" onClick={(file) => console.log(\"file btn clicked\")} accept=\".json\" />;\r\n }\r\n })}\r\n </div>\r\n )}\r\n </div>\r\n </>\r\n );\r\n }\r\n}\r\n"]}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
2
|
import * as React from "react";
|
3
|
-
import style from "./ColorComponentEntry.
|
3
|
+
import style from "./ColorComponentEntry.module.scss";
|
4
4
|
export class ColorComponentComponentEntry extends React.Component {
|
5
5
|
constructor(props) {
|
6
6
|
super(props);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ColorComponentEntry.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/colorPicker/ColorComponentEntry.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,
|
1
|
+
{"version":3,"file":"ColorComponentEntry.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/colorPicker/ColorComponentEntry.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,mCAAmC,CAAC;AAYtD,MAAM,OAAO,4BAA6B,SAAQ,KAAK,CAAC,SAAoC;IACxF,YAAY,KAAgC;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED,WAAW,CAAC,WAAmB;QAC3B,IAAI,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YAC/B,OAAO;SACV;QAED,IAAI,aAAa,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;QAE1C,IAAI,KAAK,CAAC,aAAa,CAAC,EAAE;YACtB,OAAO;SACV;QACD,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,SAAS,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE;YAC/D,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;SAClC;QACD,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,SAAS,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE;YAC/D,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;SAClC;QAED,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;IACvC,CAAC;IAED,IAAI;QACA,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;YACvB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC;SACrC;IACL,CAAC;IAED,MAAM;QACF,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;YACvB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;SACtC;IACL,CAAC;IAEe,MAAM;QAClB,OAAO,CACH,eAAK,SAAS,EAAE,KAAK,CAAC,oBAAoB,aACtC,cAAK,SAAS,EAAE,KAAK,CAAC,yBAAyB,YAC3C,gBACI,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,CAAC,EACP,SAAS,EAAC,eAAe,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAC1B,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,EACrD,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAC/B,GACA,EACN,cAAK,SAAS,EAAE,KAAK,CAAC,yBAAyB,YAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAO,IACvE,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport type { LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\nimport style from \"./ColorComponentEntry.module.scss\";\r\n\r\nexport interface IColorComponentEntryProps {\r\n value: number;\r\n label: string;\r\n max?: number;\r\n min?: number;\r\n onChange: (value: number) => void;\r\n disabled?: boolean;\r\n lockObject: LockObject;\r\n}\r\n\r\nexport class ColorComponentComponentEntry extends React.Component<IColorComponentEntryProps> {\r\n constructor(props: IColorComponentEntryProps) {\r\n super(props);\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 = parseInt(valueString);\r\n\r\n if (isNaN(valueAsNumber)) {\r\n return;\r\n }\r\n if (this.props.max != undefined && valueAsNumber > this.props.max) {\r\n valueAsNumber = this.props.max;\r\n }\r\n if (this.props.min != undefined && valueAsNumber < this.props.min) {\r\n valueAsNumber = this.props.min;\r\n }\r\n\r\n this.props.onChange(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 public override render() {\r\n return (\r\n <div className={style.colorPickerComponent}>\r\n <div className={style.colorPickerComponentValue}>\r\n <input\r\n type=\"number\"\r\n step={1}\r\n className=\"numeric-input\"\r\n value={this.props.value}\r\n onBlur={() => this.unlock()}\r\n onFocus={() => this.lock()}\r\n onChange={(evt) => this.updateValue(evt.target.value)}\r\n disabled={this.props.disabled}\r\n />\r\n </div>\r\n <div className={style.colorPickerComponentLabel}>{this.props.label}</div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
|
@@ -3,7 +3,7 @@ import * as React from "react";
|
|
3
3
|
import { Color3, Color4 } from "@babylonjs/core/Maths/math.color.js";
|
4
4
|
import { ColorComponentComponentEntry } from "./ColorComponentEntry.js";
|
5
5
|
import { HexColorComponent } from "./HexColor.js";
|
6
|
-
import style from "./ColorPicker.
|
6
|
+
import style from "./ColorPicker.module.scss";
|
7
7
|
import { ClassNames } from "../classNames.js";
|
8
8
|
import { Logger } from "@babylonjs/core/Misc/logger.js";
|
9
9
|
/**
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/colorPicker/ColorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\nimport { ColorComponentComponentEntry } from \"./ColorComponentEntry\";\r\nimport { HexColorComponent } from \"./HexColor\";\r\nimport type { LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\n\r\nimport style from \"./ColorPicker.modules.scss\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport { Logger } from \"core/Misc/logger\";\r\n\r\n/**\r\n * Interface used to specify creation options for color picker\r\n */\r\nexport interface IColorPickerComponentProps {\r\n color: Color3 | Color4;\r\n linearhint?: boolean;\r\n debugMode?: boolean;\r\n onColorChanged?: (color: Color3 | Color4) => void;\r\n lockObject: LockObject;\r\n backgroundColor?: string;\r\n}\r\n\r\n/**\r\n * Interface used to specify creation options for color picker\r\n */\r\nexport interface IColorPickerState {\r\n color: Color3;\r\n alpha: number;\r\n}\r\n\r\n/**\r\n * Class used to create a color picker\r\n */\r\nexport class ColorPickerComponent extends React.Component<IColorPickerComponentProps, IColorPickerState> {\r\n private _saturationRef: React.RefObject<HTMLDivElement>;\r\n private _hueRef: React.RefObject<HTMLDivElement>;\r\n private _isSaturationPointerDown: boolean;\r\n private _isHuePointerDown: boolean;\r\n\r\n constructor(props: IColorPickerComponentProps) {\r\n super(props);\r\n if (this.props.color instanceof Color4) {\r\n this.state = { color: new Color3(this.props.color.r, this.props.color.g, this.props.color.b), alpha: this.props.color.a };\r\n } else {\r\n this.state = { color: this.props.color.clone(), alpha: 1 };\r\n }\r\n this._saturationRef = React.createRef();\r\n this._hueRef = React.createRef();\r\n }\r\n\r\n override shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerState) {\r\n return nextProps.color.toHexString() !== this.props.color.toHexString() || nextState.color.toHexString() !== this.props.color.toHexString();\r\n }\r\n\r\n onSaturationPointerDown(evt: React.PointerEvent<HTMLDivElement>) {\r\n this._evaluateSaturation(evt);\r\n this._isSaturationPointerDown = true;\r\n\r\n evt.currentTarget.setPointerCapture(evt.pointerId);\r\n }\r\n\r\n onSaturationPointerUp(evt: React.PointerEvent<HTMLDivElement>) {\r\n this._isSaturationPointerDown = false;\r\n evt.currentTarget.releasePointerCapture(evt.pointerId);\r\n }\r\n\r\n onSaturationPointerMove(evt: React.PointerEvent<HTMLDivElement>) {\r\n if (!this._isSaturationPointerDown) {\r\n return;\r\n }\r\n this._evaluateSaturation(evt);\r\n }\r\n\r\n onHuePointerDown(evt: React.PointerEvent<HTMLDivElement>) {\r\n this._evaluateHue(evt);\r\n this._isHuePointerDown = true;\r\n\r\n evt.currentTarget.setPointerCapture(evt.pointerId);\r\n }\r\n\r\n onHuePointerUp(evt: React.PointerEvent<HTMLDivElement>) {\r\n this._isHuePointerDown = false;\r\n evt.currentTarget.releasePointerCapture(evt.pointerId);\r\n }\r\n\r\n onHuePointerMove(evt: React.PointerEvent<HTMLDivElement>) {\r\n if (!this._isHuePointerDown) {\r\n return;\r\n }\r\n this._evaluateHue(evt);\r\n }\r\n\r\n private _evaluateSaturation(evt: React.PointerEvent<HTMLDivElement>) {\r\n const left = evt.nativeEvent.offsetX;\r\n const top = evt.nativeEvent.offsetY;\r\n\r\n const saturation = Math.min(1, Math.max(0.0001, left / this._saturationRef.current!.clientWidth));\r\n const value = Math.min(1, Math.max(0.0001, 1 - top / this._saturationRef.current!.clientHeight));\r\n\r\n if (this.props.debugMode) {\r\n Logger.Log(\"Saturation: \" + saturation);\r\n Logger.Log(\"Value: \" + value);\r\n }\r\n\r\n const hsv = this.state.color.toHSV();\r\n Color3.HSVtoRGBToRef(hsv.r, saturation, value, this.state.color);\r\n if (this.state.alpha === 0) {\r\n this.setState({ alpha: 1 });\r\n }\r\n this.setState({ color: this.state.color });\r\n }\r\n\r\n private _evaluateHue(evt: React.PointerEvent<HTMLDivElement>) {\r\n const left = evt.nativeEvent.offsetX;\r\n\r\n const hue = 360 * Math.min(0.9999, Math.max(0.0001, left / this._hueRef.current!.clientWidth));\r\n\r\n if (this.props.debugMode) {\r\n Logger.Log(\"Hue: \" + hue);\r\n }\r\n\r\n const hsv = this.state.color.toHSV();\r\n Color3.HSVtoRGBToRef(hue, Math.max(hsv.g, 0.01), Math.max(hsv.b, 0.01), this.state.color);\r\n this.setState({ color: this.state.color });\r\n }\r\n\r\n override componentDidUpdate() {\r\n this.raiseOnColorChanged();\r\n }\r\n\r\n raiseOnColorChanged() {\r\n if (!this.props.onColorChanged) {\r\n return;\r\n }\r\n\r\n if (this.props.color instanceof Color4) {\r\n const newColor4 = Color4.FromColor3(this.state.color, this.state.alpha);\r\n\r\n this.props.onColorChanged(newColor4);\r\n\r\n return;\r\n }\r\n\r\n this.props.onColorChanged(this.state.color.clone());\r\n }\r\n\r\n public override render() {\r\n const color4 = Color4.FromColor3(this.state.color);\r\n color4.a = this.state.alpha;\r\n const colorHex = color4.toHexString();\r\n const hsv = this.state.color.toHSV();\r\n const colorRef = new Color3();\r\n Color3.HSVtoRGBToRef(hsv.r, 1, 1, colorRef);\r\n const colorHexRef = colorRef.toHexString();\r\n const hasAlpha = this.props.color instanceof Color4;\r\n\r\n return (\r\n <div\r\n className={ClassNames({ colorPickerContainer: true, withHints: this.props.linearhint }, style)}\r\n style={{ backgroundColor: this.props.backgroundColor || \"inherit\" }}\r\n >\r\n <div\r\n className={style.colorPickerSaturation}\r\n onPointerMove={(e) => this.onSaturationPointerMove(e)}\r\n onPointerDown={(e) => this.onSaturationPointerDown(e)}\r\n onPointerUp={(e) => this.onSaturationPointerUp(e)}\r\n ref={this._saturationRef}\r\n style={{\r\n background: colorHexRef,\r\n }}\r\n >\r\n <div className={style.colorPickerSaturationWhite}></div>\r\n <div className={style.colorPickerSaturationBlack}></div>\r\n <div\r\n className={style.colorPickerSaturationCursor}\r\n style={{\r\n top: `${-(hsv.b * 100) + 100}%`,\r\n left: `${hsv.g * 100}%`,\r\n }}\r\n ></div>\r\n </div>\r\n <div className={style.colorPickerHue}>\r\n <div\r\n className={style.colorPickerHueColor}\r\n style={{\r\n background: colorHex,\r\n }}\r\n ></div>\r\n <div\r\n className={style.colorPickerHueSlider}\r\n ref={this._hueRef}\r\n onPointerMove={(e) => this.onHuePointerMove(e)}\r\n onPointerDown={(e) => this.onHuePointerDown(e)}\r\n onPointerUp={(e) => this.onHuePointerUp(e)}\r\n >\r\n <div\r\n className={style.colorPickerHueCursor}\r\n style={{\r\n left: `${(hsv.r / 360.0) * 100}%`,\r\n border: `1px solid ` + colorHexRef,\r\n }}\r\n ></div>\r\n </div>\r\n </div>\r\n {/* <div className=\"color-picker-alpha\"></div> */}\r\n <div className={style.colorPickerRgb}>\r\n <div className={style.red}>\r\n <ColorComponentComponentEntry\r\n lockObject={this.props.lockObject}\r\n label=\"R\"\r\n min={0}\r\n max={255}\r\n value={Math.round(this.state.color.r * 255)}\r\n onChange={(value) => {\r\n this.state.color.r = value / 255.0;\r\n this.forceUpdate();\r\n }}\r\n />\r\n </div>\r\n <div className={style.green}>\r\n <ColorComponentComponentEntry\r\n lockObject={this.props.lockObject}\r\n label=\"G\"\r\n min={0}\r\n max={255}\r\n value={Math.round(this.state.color.g * 255)}\r\n onChange={(value) => {\r\n this.state.color.g = value / 255.0;\r\n this.forceUpdate();\r\n }}\r\n />\r\n </div>\r\n <div className={style.blue}>\r\n <ColorComponentComponentEntry\r\n lockObject={this.props.lockObject}\r\n label=\"B\"\r\n min={0}\r\n max={255}\r\n value={Math.round(this.state.color.b * 255)}\r\n onChange={(value) => {\r\n this.state.color.b = value / 255.0;\r\n this.forceUpdate();\r\n }}\r\n />\r\n </div>\r\n <div className={ClassNames({ alpha: true, grayed: hasAlpha }, style)}>\r\n <ColorComponentComponentEntry\r\n lockObject={this.props.lockObject}\r\n label=\"A\"\r\n min={0}\r\n max={255}\r\n value={Math.round(this.state.alpha * 255)}\r\n onChange={(value) => {\r\n this.setState({ alpha: value / 255.0 });\r\n this.forceUpdate();\r\n }}\r\n />\r\n </div>\r\n </div>\r\n <HexColorComponent\r\n lockObject={this.props.lockObject}\r\n expectedLength={hasAlpha ? 8 : 6}\r\n value={colorHex}\r\n onChange={(value) => {\r\n if (hasAlpha) {\r\n const color4 = Color4.FromHexString(value);\r\n this.setState({ color: new Color3(color4.r, color4.g, color4.b), alpha: color4.a });\r\n } else {\r\n this.setState({ color: Color3.FromHexString(value) });\r\n }\r\n }}\r\n />\r\n {this.props.linearhint && (\r\n <div className={style.colorPickerWarning}>\r\n (Note: color is stored in linear mode and was converted to gamma to be displayed here (toGammaSpace() / toLinearSpace()))\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
|
1
|
+
{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/colorPicker/ColorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\nimport { ColorComponentComponentEntry } from \"./ColorComponentEntry\";\r\nimport { HexColorComponent } from \"./HexColor\";\r\nimport type { LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\n\r\nimport style from \"./ColorPicker.module.scss\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport { Logger } from \"core/Misc/logger\";\r\n\r\n/**\r\n * Interface used to specify creation options for color picker\r\n */\r\nexport interface IColorPickerComponentProps {\r\n color: Color3 | Color4;\r\n linearhint?: boolean;\r\n debugMode?: boolean;\r\n onColorChanged?: (color: Color3 | Color4) => void;\r\n lockObject: LockObject;\r\n backgroundColor?: string;\r\n}\r\n\r\n/**\r\n * Interface used to specify creation options for color picker\r\n */\r\nexport interface IColorPickerState {\r\n color: Color3;\r\n alpha: number;\r\n}\r\n\r\n/**\r\n * Class used to create a color picker\r\n */\r\nexport class ColorPickerComponent extends React.Component<IColorPickerComponentProps, IColorPickerState> {\r\n private _saturationRef: React.RefObject<HTMLDivElement>;\r\n private _hueRef: React.RefObject<HTMLDivElement>;\r\n private _isSaturationPointerDown: boolean;\r\n private _isHuePointerDown: boolean;\r\n\r\n constructor(props: IColorPickerComponentProps) {\r\n super(props);\r\n if (this.props.color instanceof Color4) {\r\n this.state = { color: new Color3(this.props.color.r, this.props.color.g, this.props.color.b), alpha: this.props.color.a };\r\n } else {\r\n this.state = { color: this.props.color.clone(), alpha: 1 };\r\n }\r\n this._saturationRef = React.createRef();\r\n this._hueRef = React.createRef();\r\n }\r\n\r\n override shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerState) {\r\n return nextProps.color.toHexString() !== this.props.color.toHexString() || nextState.color.toHexString() !== this.props.color.toHexString();\r\n }\r\n\r\n onSaturationPointerDown(evt: React.PointerEvent<HTMLDivElement>) {\r\n this._evaluateSaturation(evt);\r\n this._isSaturationPointerDown = true;\r\n\r\n evt.currentTarget.setPointerCapture(evt.pointerId);\r\n }\r\n\r\n onSaturationPointerUp(evt: React.PointerEvent<HTMLDivElement>) {\r\n this._isSaturationPointerDown = false;\r\n evt.currentTarget.releasePointerCapture(evt.pointerId);\r\n }\r\n\r\n onSaturationPointerMove(evt: React.PointerEvent<HTMLDivElement>) {\r\n if (!this._isSaturationPointerDown) {\r\n return;\r\n }\r\n this._evaluateSaturation(evt);\r\n }\r\n\r\n onHuePointerDown(evt: React.PointerEvent<HTMLDivElement>) {\r\n this._evaluateHue(evt);\r\n this._isHuePointerDown = true;\r\n\r\n evt.currentTarget.setPointerCapture(evt.pointerId);\r\n }\r\n\r\n onHuePointerUp(evt: React.PointerEvent<HTMLDivElement>) {\r\n this._isHuePointerDown = false;\r\n evt.currentTarget.releasePointerCapture(evt.pointerId);\r\n }\r\n\r\n onHuePointerMove(evt: React.PointerEvent<HTMLDivElement>) {\r\n if (!this._isHuePointerDown) {\r\n return;\r\n }\r\n this._evaluateHue(evt);\r\n }\r\n\r\n private _evaluateSaturation(evt: React.PointerEvent<HTMLDivElement>) {\r\n const left = evt.nativeEvent.offsetX;\r\n const top = evt.nativeEvent.offsetY;\r\n\r\n const saturation = Math.min(1, Math.max(0.0001, left / this._saturationRef.current!.clientWidth));\r\n const value = Math.min(1, Math.max(0.0001, 1 - top / this._saturationRef.current!.clientHeight));\r\n\r\n if (this.props.debugMode) {\r\n Logger.Log(\"Saturation: \" + saturation);\r\n Logger.Log(\"Value: \" + value);\r\n }\r\n\r\n const hsv = this.state.color.toHSV();\r\n Color3.HSVtoRGBToRef(hsv.r, saturation, value, this.state.color);\r\n if (this.state.alpha === 0) {\r\n this.setState({ alpha: 1 });\r\n }\r\n this.setState({ color: this.state.color });\r\n }\r\n\r\n private _evaluateHue(evt: React.PointerEvent<HTMLDivElement>) {\r\n const left = evt.nativeEvent.offsetX;\r\n\r\n const hue = 360 * Math.min(0.9999, Math.max(0.0001, left / this._hueRef.current!.clientWidth));\r\n\r\n if (this.props.debugMode) {\r\n Logger.Log(\"Hue: \" + hue);\r\n }\r\n\r\n const hsv = this.state.color.toHSV();\r\n Color3.HSVtoRGBToRef(hue, Math.max(hsv.g, 0.01), Math.max(hsv.b, 0.01), this.state.color);\r\n this.setState({ color: this.state.color });\r\n }\r\n\r\n override componentDidUpdate() {\r\n this.raiseOnColorChanged();\r\n }\r\n\r\n raiseOnColorChanged() {\r\n if (!this.props.onColorChanged) {\r\n return;\r\n }\r\n\r\n if (this.props.color instanceof Color4) {\r\n const newColor4 = Color4.FromColor3(this.state.color, this.state.alpha);\r\n\r\n this.props.onColorChanged(newColor4);\r\n\r\n return;\r\n }\r\n\r\n this.props.onColorChanged(this.state.color.clone());\r\n }\r\n\r\n public override render() {\r\n const color4 = Color4.FromColor3(this.state.color);\r\n color4.a = this.state.alpha;\r\n const colorHex = color4.toHexString();\r\n const hsv = this.state.color.toHSV();\r\n const colorRef = new Color3();\r\n Color3.HSVtoRGBToRef(hsv.r, 1, 1, colorRef);\r\n const colorHexRef = colorRef.toHexString();\r\n const hasAlpha = this.props.color instanceof Color4;\r\n\r\n return (\r\n <div\r\n className={ClassNames({ colorPickerContainer: true, withHints: this.props.linearhint }, style)}\r\n style={{ backgroundColor: this.props.backgroundColor || \"inherit\" }}\r\n >\r\n <div\r\n className={style.colorPickerSaturation}\r\n onPointerMove={(e) => this.onSaturationPointerMove(e)}\r\n onPointerDown={(e) => this.onSaturationPointerDown(e)}\r\n onPointerUp={(e) => this.onSaturationPointerUp(e)}\r\n ref={this._saturationRef}\r\n style={{\r\n background: colorHexRef,\r\n }}\r\n >\r\n <div className={style.colorPickerSaturationWhite}></div>\r\n <div className={style.colorPickerSaturationBlack}></div>\r\n <div\r\n className={style.colorPickerSaturationCursor}\r\n style={{\r\n top: `${-(hsv.b * 100) + 100}%`,\r\n left: `${hsv.g * 100}%`,\r\n }}\r\n ></div>\r\n </div>\r\n <div className={style.colorPickerHue}>\r\n <div\r\n className={style.colorPickerHueColor}\r\n style={{\r\n background: colorHex,\r\n }}\r\n ></div>\r\n <div\r\n className={style.colorPickerHueSlider}\r\n ref={this._hueRef}\r\n onPointerMove={(e) => this.onHuePointerMove(e)}\r\n onPointerDown={(e) => this.onHuePointerDown(e)}\r\n onPointerUp={(e) => this.onHuePointerUp(e)}\r\n >\r\n <div\r\n className={style.colorPickerHueCursor}\r\n style={{\r\n left: `${(hsv.r / 360.0) * 100}%`,\r\n border: `1px solid ` + colorHexRef,\r\n }}\r\n ></div>\r\n </div>\r\n </div>\r\n {/* <div className=\"color-picker-alpha\"></div> */}\r\n <div className={style.colorPickerRgb}>\r\n <div className={style.red}>\r\n <ColorComponentComponentEntry\r\n lockObject={this.props.lockObject}\r\n label=\"R\"\r\n min={0}\r\n max={255}\r\n value={Math.round(this.state.color.r * 255)}\r\n onChange={(value) => {\r\n this.state.color.r = value / 255.0;\r\n this.forceUpdate();\r\n }}\r\n />\r\n </div>\r\n <div className={style.green}>\r\n <ColorComponentComponentEntry\r\n lockObject={this.props.lockObject}\r\n label=\"G\"\r\n min={0}\r\n max={255}\r\n value={Math.round(this.state.color.g * 255)}\r\n onChange={(value) => {\r\n this.state.color.g = value / 255.0;\r\n this.forceUpdate();\r\n }}\r\n />\r\n </div>\r\n <div className={style.blue}>\r\n <ColorComponentComponentEntry\r\n lockObject={this.props.lockObject}\r\n label=\"B\"\r\n min={0}\r\n max={255}\r\n value={Math.round(this.state.color.b * 255)}\r\n onChange={(value) => {\r\n this.state.color.b = value / 255.0;\r\n this.forceUpdate();\r\n }}\r\n />\r\n </div>\r\n <div className={ClassNames({ alpha: true, grayed: hasAlpha }, style)}>\r\n <ColorComponentComponentEntry\r\n lockObject={this.props.lockObject}\r\n label=\"A\"\r\n min={0}\r\n max={255}\r\n value={Math.round(this.state.alpha * 255)}\r\n onChange={(value) => {\r\n this.setState({ alpha: value / 255.0 });\r\n this.forceUpdate();\r\n }}\r\n />\r\n </div>\r\n </div>\r\n <HexColorComponent\r\n lockObject={this.props.lockObject}\r\n expectedLength={hasAlpha ? 8 : 6}\r\n value={colorHex}\r\n onChange={(value) => {\r\n if (hasAlpha) {\r\n const color4 = Color4.FromHexString(value);\r\n this.setState({ color: new Color3(color4.r, color4.g, color4.b), alpha: color4.a });\r\n } else {\r\n this.setState({ color: Color3.FromHexString(value) });\r\n }\r\n }}\r\n />\r\n {this.props.linearhint && (\r\n <div className={style.colorPickerWarning}>\r\n (Note: color is stored in linear mode and was converted to gamma to be displayed here (toGammaSpace() / toLinearSpace()))\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
2
|
import * as React from "react";
|
3
|
-
import style from "./HexColor.
|
3
|
+
import style from "./HexColor.module.scss";
|
4
4
|
export class HexColorComponent extends React.Component {
|
5
5
|
constructor(props) {
|
6
6
|
super(props);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"HexColor.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/colorPicker/HexColor.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,
|
1
|
+
{"version":3,"file":"HexColor.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/colorPicker/HexColor.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,wBAAwB,CAAC;AAS3C,MAAM,OAAO,iBAAkB,SAAQ,KAAK,CAAC,SAA0C;IACnF,YAAY,KAAqB;QAC7B,KAAK,CAAC,KAAK,CAAC,CAAC;QAEb,IAAI,CAAC,KAAK,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC;IAC5D,CAAC;IAEQ,qBAAqB,CAAC,SAAyB,EAAE,SAA0B;QAChF,IAAI,SAAS,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;YACtC,SAAS,CAAC,GAAG,GAAG,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;SACpD;QAED,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,IAAI;QACA,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;YACvB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC;SACrC;IACL,CAAC;IAED,MAAM;QACF,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;YACvB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;SACtC;IACL,CAAC;IAED,cAAc,CAAC,WAAmB;QAC9B,IAAI,WAAW,IAAI,EAAE,IAAI,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,KAAK,EAAE;YACnE,OAAO;SACV;QAED,IAAI,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC,CAAC;QAEpC,IAAI,WAAW,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE;YAClD,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,KAAK,CAAC,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC7D,WAAW,GAAG,WAAW,GAAG,IAAI,CAAC;aACpC;iBAAM;gBACH,OAAO;aACV;SACJ;QAED,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,GAAG,WAAW,CAAC,CAAC;IAC3C,CAAC;IAEe,MAAM;QAClB,OAAO,CACH,eAAK,SAAS,EAAE,KAAK,CAAC,cAAc,aAChC,cAAK,SAAS,EAAE,KAAK,CAAC,mBAAmB,oBAAW,EACpD,cAAK,SAAS,EAAE,KAAK,CAAC,mBAAmB,YACrC,gBACI,IAAI,EAAC,QAAQ;wBACb,wBAAwB;wBACxB,SAAS,EAAE,KAAK,CAAC,cAAc,EAC/B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EACrB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAC1B,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,GAC1D,GACA,IACJ,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport type { LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\nimport style from \"./HexColor.module.scss\";\r\n\r\nexport interface IHexColorProps {\r\n value: string;\r\n expectedLength: number;\r\n onChange: (value: string) => void;\r\n lockObject: LockObject;\r\n}\r\n\r\nexport class HexColorComponent extends React.Component<IHexColorProps, { hex: string }> {\r\n constructor(props: IHexColorProps) {\r\n super(props);\r\n\r\n this.state = { hex: this.props.value.replace(\"#\", \"\") };\r\n }\r\n\r\n override shouldComponentUpdate(nextProps: IHexColorProps, nextState: { hex: string }) {\r\n if (nextProps.value !== this.props.value) {\r\n nextState.hex = nextProps.value.replace(\"#\", \"\");\r\n }\r\n\r\n return true;\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 updateHexValue(valueString: string) {\r\n if (valueString != \"\" && /^[0-9A-Fa-f]+$/g.test(valueString) == false) {\r\n return;\r\n }\r\n\r\n this.setState({ hex: valueString });\r\n\r\n if (valueString.length !== this.props.expectedLength) {\r\n if (this.props.expectedLength === 8 && valueString.length === 6) {\r\n valueString = valueString + \"FF\";\r\n } else {\r\n return;\r\n }\r\n }\r\n\r\n this.props.onChange(\"#\" + valueString);\r\n }\r\n\r\n public override render() {\r\n return (\r\n <div className={style.colorPickerHex}>\r\n <div className={style.colorPickerHexLabel}>Hex</div>\r\n <div className={style.colorPickerHexValue}>\r\n <input\r\n type=\"string\"\r\n // className=\"hex-input\"\r\n className={style.colorPickerHex}\r\n value={this.state.hex}\r\n onBlur={() => this.unlock()}\r\n onFocus={() => this.lock()}\r\n onChange={(evt) => this.updateHexValue(evt.target.value)}\r\n />\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import style from "./FlexibleColumn.
|
2
|
+
import style from "./FlexibleColumn.module.scss";
|
3
3
|
/**
|
4
4
|
* This component represents a single column in the layout. It receives a width
|
5
5
|
* that it occupies and the content to display
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"FlexibleColumn.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleColumn.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM
|
1
|
+
{"version":3,"file":"FlexibleColumn.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleColumn.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,8BAA8B,CAAC;AAYjD;;;;;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 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,5 +1,5 @@
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
import style from "./FlexibleDropZone.
|
2
|
+
import style from "./FlexibleDropZone.module.scss";
|
3
3
|
import { FlexibleResizeBar } from "./FlexibleResizeBar.js";
|
4
4
|
import { ResizeDirections } from "./types.js";
|
5
5
|
/**
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"FlexibleDropZone.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleDropZone.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,
|
1
|
+
{"version":3,"file":"FlexibleDropZone.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleDropZone.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,gCAAgC,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAgB3C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAA+B,CAAC,KAAK,EAAE,EAAE;IAClE,OAAO,CACH,eAAK,SAAS,EAAE,KAAK,CAAC,yBAAyB,aAC1C,KAAK,CAAC,QAAQ,EACf,KAAC,iBAAiB,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,YAAY,EAAE,KAAK,CAAC,YAAY,EAAE,SAAS,EAAE,gBAAgB,CAAC,MAAM,GAAI,EACvH,KAAC,iBAAiB,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,YAAY,EAAE,KAAK,CAAC,YAAY,EAAE,SAAS,EAAE,gBAAgB,CAAC,GAAG,GAAI,IAClH,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport style from \"./FlexibleDropZone.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"]}
|
@@ -4,7 +4,7 @@ import { LayoutContext } from "./LayoutContext.js";
|
|
4
4
|
import { FlexibleColumn } from "./FlexibleColumn.js";
|
5
5
|
import { FlexibleDropZone } from "./FlexibleDropZone.js";
|
6
6
|
import { FlexibleTabsContainer } from "./FlexibleTabsContainer.js";
|
7
|
-
import style from "./FlexibleGridContainer.
|
7
|
+
import style from "./FlexibleGridContainer.module.scss";
|
8
8
|
/**
|
9
9
|
* Component responsible for mapping the layout to the actual components
|
10
10
|
* @returns GridContainer element
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"FlexibleGridContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleGridContainer.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,KAAK,MAAM,
|
1
|
+
{"version":3,"file":"FlexibleGridContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleGridContainer.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,KAAK,MAAM,qCAAqC,CAAC;AAOxD;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAoC,GAAG,EAAE;IACvE,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC;IAC3B,MAAM,OAAO,GACT,MAAM,IAAI,MAAM,CAAC,OAAO;QACpB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAW,EAAE,SAAiB,EAAE,EAAE;YAClD,OAAO,CACH,KAAC,cAAc,IAAiB,KAAK,EAAE,MAAM,CAAC,KAAK,YAC9C,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAQ,EAAE,MAAc,EAAE,EAAE;oBAC1C,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,YAC9B,KAAC,gBAAgB,IAAC,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,YACxD,KAAC,qBAAqB,IAAC,IAAI,EAAE,GAAG,CAAC,IAAI,EAAE,WAAW,EAAE,GAAG,CAAC,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,GAAI,GAClG,IAHkB,GAAG,CAAC,EAAE,CAIzC,CACT,CAAC;gBACN,CAAC,CAAC,IATe,MAAM,CAAC,EAAE,CAUb,CACpB,CAAC;QACN,CAAC,CAAC;QACJ,CAAC,CAAC,EAAE,CAAC;IACb,OAAO,cAAK,SAAS,EAAE,KAAK,CAAC,YAAY,YAAG,OAAO,GAAO,CAAC;AAC/D,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport { useContext } from \"react\";\r\nimport { LayoutContext } from \"./LayoutContext\";\r\nimport { FlexibleColumn } from \"./FlexibleColumn\";\r\nimport { FlexibleDropZone } from \"./FlexibleDropZone\";\r\nimport { FlexibleTabsContainer } from \"./FlexibleTabsContainer\";\r\nimport style from \"./FlexibleGridContainer.module.scss\";\r\n\r\n/**\r\n * Arguments for the GridContainer component.\r\n */\r\nexport interface IFlexibleGridContainerProps {}\r\n\r\n/**\r\n * Component responsible for mapping the layout to the actual components\r\n * @returns GridContainer element\r\n */\r\nexport const FlexibleGridContainer: FC<IFlexibleGridContainerProps> = () => {\r\n const context = useContext(LayoutContext);\r\n const { layout } = context;\r\n const columns =\r\n layout && layout.columns\r\n ? layout.columns.map((column: any, columnIdx: number) => {\r\n return (\r\n <FlexibleColumn key={column.id} width={column.width}>\r\n {column.rows.map((row: any, rowIdx: number) => {\r\n return (\r\n <div style={{ height: row.height }} key={row.id}>\r\n <FlexibleDropZone rowNumber={rowIdx} columnNumber={columnIdx}>\r\n <FlexibleTabsContainer tabs={row.tabs} selectedTab={row.selectedTab} rowIndex={rowIdx} columnIndex={columnIdx} />\r\n </FlexibleDropZone>\r\n </div>\r\n );\r\n })}\r\n </FlexibleColumn>\r\n );\r\n })\r\n : [];\r\n return <div className={style.flexibleGrid}>{columns}</div>;\r\n};\r\n"]}
|
@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useDrag } from "react-dnd";
|
3
3
|
import { ResizeDirections, ElementTypes } from "./types.js";
|
4
4
|
import { ClassNames } from "../classNames.js";
|
5
|
-
import style from "./FlexibleResizeBar.
|
5
|
+
import style from "./FlexibleResizeBar.module.scss";
|
6
6
|
/**
|
7
7
|
* A component that renders a bar that the user can drag to resize.
|
8
8
|
* @param props properties
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"FlexibleResizeBar.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleResizeBar.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,MAAM,
|
1
|
+
{"version":3,"file":"FlexibleResizeBar.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/FlexibleResizeBar.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,MAAM,iCAAiC,CAAC;AAsCpD;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAiC,CAAC,KAAK,EAAE,EAAE;IACrE,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC7B,IAAI,EAAE,YAAY,CAAC,UAAU;QAC7B,IAAI,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,YAAY,EAAE,KAAK,CAAC,YAAY,EAAE;QAClG,OAAO,CAAC,OAAO;YACX,OAAO;gBACH,UAAU,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE;aACrC,CAAC;QACN,CAAC;KACJ,CAAC,CAAC,CAAC;IACJ,OAAO,CACH,cACI,SAAS,EAAE,UAAU,CAAC,EAAE,cAAc,EAAE,KAAK,CAAC,SAAS,KAAK,gBAAgB,CAAC,GAAG,EAAE,iBAAiB,EAAE,KAAK,CAAC,SAAS,KAAK,gBAAgB,CAAC,MAAM,EAAE,EAAE,KAAK,CAAC,EAC1J,GAAG,EAAE,IAAI,GACX,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport { useDrag } from \"react-dnd\";\r\nimport { ResizeDirections, ElementTypes } from \"./types\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport style from \"./FlexibleResizeBar.module.scss\";\r\n\r\n/**\r\n * Arguments for the ResizeBar component.\r\n */\r\nexport interface IFlexibleRowResizerProps {\r\n /**\r\n * Row number of the component that is being resized\r\n */\r\n rowNumber: number;\r\n /**\r\n * Column number of the component being resized\r\n */\r\n columnNumber: number;\r\n /**\r\n * If the resizing happens in row or column direction\r\n */\r\n direction: ResizeDirections;\r\n}\r\n\r\n/**\r\n * The item that will be sent to the drag event\r\n */\r\nexport type ResizeItem = {\r\n /**\r\n * If the resizing happens in row or column direction\r\n */\r\n direction: ResizeDirections;\r\n /**\r\n * The row number of the component that is being resized\r\n */\r\n rowNumber: number;\r\n /**\r\n * the column number of the component being resized\r\n */\r\n columnNumber: number;\r\n};\r\n\r\n/**\r\n * A component that renders a bar that the user can drag to resize.\r\n * @param props properties\r\n * @returns resize bar element\r\n */\r\nexport const FlexibleResizeBar: FC<IFlexibleRowResizerProps> = (props) => {\r\n const [_, drag] = useDrag(() => ({\r\n type: ElementTypes.RESIZE_BAR,\r\n item: { direction: props.direction, rowNumber: props.rowNumber, columnNumber: props.columnNumber },\r\n collect(monitor) {\r\n return {\r\n isDragging: !!monitor.isDragging(),\r\n };\r\n },\r\n }));\r\n return (\r\n <div\r\n className={ClassNames({ rowDragHandler: props.direction === ResizeDirections.ROW, columnDragHandler: props.direction === ResizeDirections.COLUMN }, style)}\r\n ref={drag}\r\n />\r\n );\r\n};\r\n"]}
|