@babylonjs/shared-ui-components 7.54.0 → 7.54.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.
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import * as React from "react";
|
|
3
|
-
import copyIcon from "
|
|
4
|
-
import { copyCommandToClipboard } from "
|
|
5
|
-
import { MergeClassNames } from "
|
|
3
|
+
import copyIcon from "../imgs/copy.svg";
|
|
4
|
+
import { copyCommandToClipboard } from "../copyCommandToClipboard.js";
|
|
5
|
+
import { MergeClassNames } from "../styleHelper.js";
|
|
6
6
|
export class TextLineComponent extends React.Component {
|
|
7
7
|
constructor(props) {
|
|
8
8
|
super(props);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/textLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,QAAQ,MAAM,
|
|
1
|
+
{"version":3,"file":"textLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/textLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport copyIcon from \"../imgs/copy.svg\";\r\nimport { copyCommandToClipboard } from \"../copyCommandToClipboard\";\r\nimport { MergeClassNames } from \"../styleHelper\";\r\n\r\ninterface ITextLineComponentProps {\r\n label?: string;\r\n value?: string;\r\n color?: string;\r\n underline?: boolean;\r\n onLink?: () => void;\r\n url?: string;\r\n ignoreValue?: boolean;\r\n additionalClass?: string;\r\n icon?: string;\r\n iconLabel?: string;\r\n tooltip?: string;\r\n onCopy?: true | (() => string);\r\n}\r\n\r\nexport class TextLineComponent extends React.Component<ITextLineComponentProps> {\r\n constructor(props: ITextLineComponentProps) {\r\n super(props);\r\n }\r\n\r\n onLink() {\r\n if (this.props.url) {\r\n window.open(this.props.url, \"_blank\");\r\n return;\r\n }\r\n if (!this.props.onLink) {\r\n return;\r\n }\r\n\r\n this.props.onLink();\r\n }\r\n\r\n renderContent() {\r\n if (this.props.ignoreValue) {\r\n return null;\r\n }\r\n\r\n if (this.props.onLink || this.props.url) {\r\n return (\r\n <div className=\"link-value\" title={this.props.tooltip ?? this.props.label ?? \"\"} onClick={() => this.onLink()}>\r\n {this.props.url ? \"doc\" : this.props.value || \"no name\"}\r\n </div>\r\n );\r\n }\r\n return (\r\n <div className=\"value\" title={this.props.tooltip ?? this.props.label ?? \"\"} style={{ color: this.props.color ? this.props.color : \"\" }}>\r\n {this.props.value || \"no name\"}\r\n </div>\r\n );\r\n }\r\n\r\n override render() {\r\n return (\r\n <div className={MergeClassNames([\"textLine\", [\"underline\", this.props.underline], this.props.additionalClass, [\"icon\", this.props.onCopy]])}>\r\n {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n <div className=\"label\" title={this.props.tooltip ?? this.props.label ?? \"\"}>\r\n {this.props.label ?? \"\"}\r\n </div>\r\n {this.renderContent()}\r\n {this.props.onCopy && (\r\n <div\r\n className=\"copy hoverIcon\"\r\n onClick={() => {\r\n const onCopy = this.props.onCopy;\r\n if (onCopy === true && this.props.value !== undefined) {\r\n copyCommandToClipboard(this.props.value);\r\n } else if (typeof onCopy === \"function\") {\r\n copyCommandToClipboard(onCopy());\r\n }\r\n }}\r\n title=\"Copy to clipboard\"\r\n >\r\n <img src={copyIcon} alt=\"Copy\" />\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { BaseTexture } from "@babylonjs/core/Materials/Textures/baseTexture.js";
|
|
2
|
+
import type { Scene } from "@babylonjs/core/scene.js";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
interface ITextureButtonLineProps {
|
|
5
|
+
label: string;
|
|
6
|
+
scene: Scene;
|
|
7
|
+
onClick: (file: File) => void;
|
|
8
|
+
onLink: (texture: BaseTexture) => void;
|
|
9
|
+
accept: string;
|
|
10
|
+
}
|
|
11
|
+
interface ITextureButtonLineState {
|
|
12
|
+
isOpen: boolean;
|
|
13
|
+
}
|
|
14
|
+
export declare class TextureButtonLine extends React.Component<ITextureButtonLineProps, ITextureButtonLineState> {
|
|
15
|
+
private static _IDGenerator;
|
|
16
|
+
private _id;
|
|
17
|
+
private _uploadInputRef;
|
|
18
|
+
constructor(props: ITextureButtonLineProps);
|
|
19
|
+
onChange(evt: any): void;
|
|
20
|
+
render(): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
}
|
|
22
|
+
export {};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { faLink } from "@fortawesome/free-solid-svg-icons";
|
|
3
|
+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
export class TextureButtonLine extends React.Component {
|
|
6
|
+
constructor(props) {
|
|
7
|
+
super(props);
|
|
8
|
+
this._id = TextureButtonLine._IDGenerator++;
|
|
9
|
+
this._uploadInputRef = React.createRef();
|
|
10
|
+
this.state = {
|
|
11
|
+
isOpen: false,
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
onChange(evt) {
|
|
15
|
+
const files = evt.target.files;
|
|
16
|
+
if (files && files.length) {
|
|
17
|
+
this.props.onClick(files[0]);
|
|
18
|
+
}
|
|
19
|
+
evt.target.value = "";
|
|
20
|
+
}
|
|
21
|
+
render() {
|
|
22
|
+
return (_jsxs("div", { className: "textureButtonLine", onPointerLeave: () => this.setState({ isOpen: false }), children: [_jsx("label", { htmlFor: "file-upload" + this._id, className: "file-upload", children: this.props.label }), _jsx("input", { ref: this._uploadInputRef, id: "file-upload" + this._id, type: "file", accept: this.props.accept, onChange: (evt) => this.onChange(evt) }), _jsx("div", { className: "dropdownButton", onClick: () => this.setState({ isOpen: !this.state.isOpen }), title: "Link to a texture", children: _jsx(FontAwesomeIcon, { icon: faLink }) }), _jsx("div", { className: "dropdown" + (this.state.isOpen ? "" : " hidden"), children: this.props.scene.textures
|
|
23
|
+
.filter((t) => t.name)
|
|
24
|
+
.sort((a, b) => (a.displayName || a.name).localeCompare(b.displayName || b.name))
|
|
25
|
+
.map((texture, index) => {
|
|
26
|
+
return (_jsx("div", { className: "dropdownItem", onClick: () => this.props.onLink(texture), title: texture.name, children: texture.displayName || texture.name }, index));
|
|
27
|
+
}) })] }));
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
TextureButtonLine._IDGenerator = 0;
|
|
31
|
+
//# sourceMappingURL=textureButtonLineComponent.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"textureButtonLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/textureButtonLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAGjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,MAAM,OAAO,iBAAkB,SAAQ,KAAK,CAAC,SAA2D;IAKpG,YAAY,KAA8B;QACtC,KAAK,CAAC,KAAK,CAAC,CAAC;QAJT,QAAG,GAAG,iBAAiB,CAAC,YAAY,EAAE,CAAC;QAK3C,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;QAEzC,IAAI,CAAC,KAAK,GAAG;YACT,MAAM,EAAE,KAAK;SAChB,CAAC;IACN,CAAC;IAED,QAAQ,CAAC,GAAQ;QACb,MAAM,KAAK,GAAW,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC;QACvC,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACjC,CAAC;QAED,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;IAC1B,CAAC;IAEQ,MAAM;QACX,OAAO,CACH,eAAK,SAAS,EAAC,mBAAmB,EAAC,cAAc,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,aACrF,gBAAO,OAAO,EAAE,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,SAAS,EAAC,aAAa,YAC5D,IAAI,CAAC,KAAK,CAAC,KAAK,GACb,EACR,gBAAO,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,EAAE,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAI,EAChJ,cAAK,SAAS,EAAC,gBAAgB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAC,mBAAmB,YACnH,KAAC,eAAe,IAAC,IAAI,EAAE,MAAM,GAAI,GAC/B,EACN,cAAK,SAAS,EAAE,UAAU,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,YAC5D,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ;yBACrB,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;yBACrB,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;yBAChF,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;wBACpB,OAAO,CACH,cAAiB,SAAS,EAAC,cAAc,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,OAAO,CAAC,IAAI,YACnG,OAAO,CAAC,WAAW,IAAI,OAAO,CAAC,IAAI,IAD9B,KAAK,CAET,CACT,CAAC;oBACN,CAAC,CAAC,GACJ,IACJ,CACT,CAAC;IACN,CAAC;;AA9Cc,8BAAY,GAAG,CAAC,AAAJ,CAAK","sourcesContent":["import { faLink } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport type { BaseTexture } from \"core/Materials/Textures/baseTexture\";\r\nimport type { Scene } from \"core/scene\";\r\nimport * as React from \"react\";\r\n\r\ninterface ITextureButtonLineProps {\r\n label: string;\r\n scene: Scene;\r\n onClick: (file: File) => void;\r\n onLink: (texture: BaseTexture) => void;\r\n accept: string;\r\n}\r\n\r\ninterface ITextureButtonLineState {\r\n isOpen: boolean;\r\n}\r\n\r\nexport class TextureButtonLine extends React.Component<ITextureButtonLineProps, ITextureButtonLineState> {\r\n private static _IDGenerator = 0;\r\n private _id = TextureButtonLine._IDGenerator++;\r\n private _uploadInputRef: React.RefObject<HTMLInputElement>;\r\n\r\n constructor(props: ITextureButtonLineProps) {\r\n super(props);\r\n this._uploadInputRef = React.createRef();\r\n\r\n this.state = {\r\n isOpen: false,\r\n };\r\n }\r\n\r\n onChange(evt: any) {\r\n const files: File[] = evt.target.files;\r\n if (files && files.length) {\r\n this.props.onClick(files[0]);\r\n }\r\n\r\n evt.target.value = \"\";\r\n }\r\n\r\n override render() {\r\n return (\r\n <div className=\"textureButtonLine\" onPointerLeave={() => this.setState({ isOpen: false })}>\r\n <label htmlFor={\"file-upload\" + this._id} className=\"file-upload\">\r\n {this.props.label}\r\n </label>\r\n <input ref={this._uploadInputRef} id={\"file-upload\" + this._id} type=\"file\" accept={this.props.accept} onChange={(evt) => this.onChange(evt)} />\r\n <div className=\"dropdownButton\" onClick={() => this.setState({ isOpen: !this.state.isOpen })} title=\"Link to a texture\">\r\n <FontAwesomeIcon icon={faLink} />\r\n </div>\r\n <div className={\"dropdown\" + (this.state.isOpen ? \"\" : \" hidden\")}>\r\n {this.props.scene.textures\r\n .filter((t) => t.name)\r\n .sort((a, b) => (a.displayName || a.name).localeCompare(b.displayName || b.name))\r\n .map((texture, index) => {\r\n return (\r\n <div key={index} className=\"dropdownItem\" onClick={() => this.props.onLink(texture)} title={texture.name}>\r\n {texture.displayName || texture.name}\r\n </div>\r\n );\r\n })}\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
|