@threekit-tools/treble 0.0.22 → 0.0.26
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/dist/components/Player/index.js +12 -32
- package/dist/components/Player/player.styles.js +10 -9
- package/dist/components/ProductLayout/index.d.ts +3 -2
- package/dist/components/ThreekitProvider/index.d.ts +2 -9
- package/dist/components/ThreekitProvider/index.js +4 -5
- package/dist/components/TrebleApp/index.d.ts +7 -0
- package/dist/components/{ProductLoader → TrebleApp}/index.js +30 -31
- package/dist/constants.d.ts +4 -0
- package/dist/constants.js +5 -1
- package/dist/hooks/usePlayerPortal/index.d.ts +2 -0
- package/dist/hooks/usePlayerPortal/index.js +22 -0
- package/dist/index.d.ts +3 -2
- package/dist/index.js +5 -3
- package/dist/store/threekit.d.ts +7 -17
- package/dist/store/threekit.js +120 -117
- package/dist/threekit.d.ts +32 -1
- package/dist/utils.d.ts +5 -2
- package/dist/utils.js +37 -1
- package/package.json +1 -1
- package/tailwind-presets.js +55 -0
- package/dist/components/ProductLoader/index.d.ts +0 -12
|
@@ -18,51 +18,31 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
18
18
|
__setModuleDefault(result, mod);
|
|
19
19
|
return result;
|
|
20
20
|
};
|
|
21
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
22
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
23
|
+
};
|
|
21
24
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
25
|
exports.PLAYER_DIV_ID = void 0;
|
|
23
26
|
var react_1 = __importStar(require("react"));
|
|
24
|
-
var react_redux_1 = require("react-redux");
|
|
25
27
|
var player_styles_1 = require("./player.styles");
|
|
26
|
-
var threekit_1 = require("../../store/threekit");
|
|
27
28
|
var constants_1 = require("../../constants");
|
|
29
|
+
var usePlayerPortal_1 = __importDefault(require("../../hooks/usePlayerPortal"));
|
|
28
30
|
exports.PLAYER_DIV_ID = 'tk-player-component';
|
|
29
31
|
var className = "".concat(constants_1.DEFAULT_CLASS_NAME, " ").concat(constants_1.CLASS_NAME_PREFIX, "-player");
|
|
30
32
|
var Player = function (props) {
|
|
31
33
|
var _a = Object.assign({
|
|
32
|
-
height: '
|
|
34
|
+
height: '100%',
|
|
33
35
|
minHeight: '600px',
|
|
34
36
|
width: '100%',
|
|
35
37
|
}, props), height = _a.height, width = _a.width, minHeight = _a.minHeight, children = _a.children;
|
|
36
|
-
var
|
|
38
|
+
var hasMoved = (0, react_1.useRef)(false);
|
|
39
|
+
var portalPlayerTo = (0, usePlayerPortal_1.default)();
|
|
37
40
|
(0, react_1.useEffect)(function () {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
var playerEl;
|
|
44
|
-
var playerWrapperEl;
|
|
45
|
-
if (playerElementId) {
|
|
46
|
-
playerEl = document.getElementById(playerElementId);
|
|
47
|
-
playerWrapperEl = document.getElementById(moveToElementId);
|
|
48
|
-
}
|
|
49
|
-
if (!playerEl || !playerWrapperEl) {
|
|
50
|
-
setTimeout(function () {
|
|
51
|
-
addPlayer(tryCount + 1);
|
|
52
|
-
}, 0.05 * 1000);
|
|
53
|
-
return;
|
|
54
|
-
}
|
|
55
|
-
if (!playerEl)
|
|
56
|
-
throw new Error('Initial Player element not found');
|
|
57
|
-
if (!playerWrapperEl)
|
|
58
|
-
throw new Error('Move To element not found');
|
|
59
|
-
playerWrapperEl.appendChild(playerEl);
|
|
60
|
-
};
|
|
61
|
-
addPlayer();
|
|
62
|
-
};
|
|
63
|
-
attachPlayerToComponent(exports.PLAYER_DIV_ID);
|
|
64
|
-
return;
|
|
65
|
-
}, [playerElementId]);
|
|
41
|
+
if (portalPlayerTo && !hasMoved.current) {
|
|
42
|
+
portalPlayerTo(exports.PLAYER_DIV_ID);
|
|
43
|
+
hasMoved.current = true;
|
|
44
|
+
}
|
|
45
|
+
});
|
|
66
46
|
return (react_1.default.createElement(player_styles_1.Wrapper, { height: height, width: width, minHeight: minHeight, className: className },
|
|
67
47
|
react_1.default.createElement("div", { id: exports.PLAYER_DIV_ID }),
|
|
68
48
|
children));
|
|
@@ -10,12 +10,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.BottomRightWidgetsWrapper = exports.BottomCenterWidgetsWrapper = exports.BottomLeftWidgetsWrapper = exports.MiddleRightWidgetsWrapper = exports.MiddleLeftWidgetsWrapper = exports.TopRightWidgetsWrapper = exports.TopCenterWidgetsWrapper = exports.TopLeftWidgetsWrapper = exports.Wrapper = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
exports.Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: ", ";\n min-height: ", ";\n width: ", ";\n position: relative;\n\n user-select: none;\n\n & > div:nth-child(1) {\n height: ", ";\n min-height: ", ";\n width: ", ";\n position: absolute;\n top: 0;\n left: 0;\n }\n"], ["\n height: ", ";\n min-height: ", ";\n width: ", ";\n position: relative;\n\n user-select: none;\n\n & > div:nth-child(1) {\n height: ", ";\n min-height: ", ";\n width: ", ";\n position: absolute;\n top: 0;\n left: 0;\n }\n"])), function (props) { return props.height; }, function (props) { return props.minHeight; }, function (props) { return props.width; }, function (props) { return props.height; }, function (props) { return props.minHeight; }, function (props) { return props.width; });
|
|
13
|
-
|
|
14
|
-
exports.
|
|
15
|
-
exports.
|
|
16
|
-
exports.
|
|
17
|
-
exports.
|
|
18
|
-
exports.
|
|
19
|
-
exports.
|
|
20
|
-
exports.
|
|
21
|
-
|
|
13
|
+
var WidgetWrapperBase = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n position: absolute;\n\n & > div {\n margin-right: 8px;\n }\n\n & > div:last-child {\n margin-right: 0px;\n }\n"], ["\n display: flex;\n flex-direction: row;\n position: absolute;\n\n & > div {\n margin-right: 8px;\n }\n\n & > div:last-child {\n margin-right: 0px;\n }\n"])));
|
|
14
|
+
exports.TopLeftWidgetsWrapper = (0, styled_components_1.default)(WidgetWrapperBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n top: 20px;\n left: 20px;\n"], ["\n top: 20px;\n left: 20px;\n"])));
|
|
15
|
+
exports.TopCenterWidgetsWrapper = (0, styled_components_1.default)(WidgetWrapperBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n top: 20px;\n left: 50%;\n transform: translateX(-50%);\n"], ["\n top: 20px;\n left: 50%;\n transform: translateX(-50%);\n"])));
|
|
16
|
+
exports.TopRightWidgetsWrapper = (0, styled_components_1.default)(WidgetWrapperBase)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n top: 20px;\n right: 20px;\n"], ["\n top: 20px;\n right: 20px;\n"])));
|
|
17
|
+
exports.MiddleLeftWidgetsWrapper = (0, styled_components_1.default)(WidgetWrapperBase)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n top: 50%;\n left: 20px;\n transform: translateY(-50%);\n"], ["\n top: 50%;\n left: 20px;\n transform: translateY(-50%);\n"])));
|
|
18
|
+
exports.MiddleRightWidgetsWrapper = (0, styled_components_1.default)(WidgetWrapperBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n top: 50%;\n right: 20px;\n transform: translateY(-50%);\n"], ["\n top: 50%;\n right: 20px;\n transform: translateY(-50%);\n"])));
|
|
19
|
+
exports.BottomLeftWidgetsWrapper = (0, styled_components_1.default)(WidgetWrapperBase)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n bottom: 20px;\n left: 20px;\n"], ["\n bottom: 20px;\n left: 20px;\n"])));
|
|
20
|
+
exports.BottomCenterWidgetsWrapper = (0, styled_components_1.default)(WidgetWrapperBase)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n"], ["\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n"])));
|
|
21
|
+
exports.BottomRightWidgetsWrapper = (0, styled_components_1.default)(WidgetWrapperBase)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n bottom: 20px;\n right: 20px;\n"], ["\n bottom: 20px;\n right: 20px;\n"])));
|
|
22
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
import { IProducts } from '../../threekit';
|
|
3
|
+
export interface ProductLayoutProps {
|
|
4
|
+
products: Record<string, IProducts>;
|
|
4
5
|
}
|
|
5
6
|
declare const ProductLayout: React.FC<ProductLayoutProps>;
|
|
6
7
|
export default ProductLayout;
|
|
@@ -1,17 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { ILaunchConfig
|
|
3
|
-
interface ICredentials {
|
|
4
|
-
preview: IThreekitCredentials;
|
|
5
|
-
'admin-fts': IThreekitCredentials;
|
|
6
|
-
}
|
|
2
|
+
import { ILaunchConfig } from '../../store/threekit';
|
|
7
3
|
interface Theme {
|
|
8
4
|
[key: string]: string | number;
|
|
9
5
|
}
|
|
10
|
-
export interface ThreekitProviderProps {
|
|
11
|
-
credentials: ICredentials;
|
|
12
|
-
playerConfig?: ILaunchConfig;
|
|
6
|
+
export interface ThreekitProviderProps extends Partial<ILaunchConfig> {
|
|
13
7
|
theme?: Theme;
|
|
14
|
-
threekitEnv?: string;
|
|
15
8
|
children: React.ReactNode;
|
|
16
9
|
}
|
|
17
10
|
declare const ThreekitProvider: (props: ThreekitProviderProps) => JSX.Element;
|
|
@@ -33,19 +33,18 @@ var App = function (props) {
|
|
|
33
33
|
var dispatch = (0, store_1.useThreekitDispatch)();
|
|
34
34
|
(0, react_1.useEffect)(function () {
|
|
35
35
|
var init = function () {
|
|
36
|
-
var
|
|
37
|
-
|
|
38
|
-
dispatch((0, threekit_1.launch)(threekitConfig));
|
|
36
|
+
var playerConfig = props.playerConfig, project = props.project, locale = props.locale, threekitEnv = props.threekitEnv;
|
|
37
|
+
dispatch((0, threekit_1.launch)({ playerConfig: playerConfig, project: project, locale: locale, threekitEnv: threekitEnv }));
|
|
39
38
|
};
|
|
40
39
|
init();
|
|
41
40
|
return;
|
|
42
|
-
}, [props.
|
|
41
|
+
}, [props.project, props.threekitEnv, , props.playerConfig]);
|
|
43
42
|
return react_1.default.createElement(react_1.default.Fragment, null, props.children);
|
|
44
43
|
};
|
|
45
44
|
var ThreekitProvider = function (props) {
|
|
46
45
|
return (react_1.default.createElement(react_redux_1.Provider, { store: store_1.default },
|
|
47
46
|
react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme_1.default },
|
|
48
47
|
react_1.default.createElement(GlobalStyles_styles_1.default, null),
|
|
49
|
-
react_1.default.createElement(App, {
|
|
48
|
+
react_1.default.createElement(App, { locale: props.locale, project: props.project, playerConfig: props.playerConfig, threekitEnv: props.threekitEnv }, props.children))));
|
|
50
49
|
};
|
|
51
50
|
exports.default = ThreekitProvider;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ThreekitProviderProps } from '../ThreekitProvider';
|
|
3
|
+
interface TrebleAppProps extends Omit<ThreekitProviderProps, 'children'> {
|
|
4
|
+
productId?: string;
|
|
5
|
+
}
|
|
6
|
+
export default function TrebleApp(props: TrebleAppProps): JSX.Element | null;
|
|
7
|
+
export {};
|
|
@@ -24,59 +24,58 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
24
24
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
25
|
var react_1 = __importStar(require("react"));
|
|
26
26
|
var ThreekitProvider_1 = __importDefault(require("../ThreekitProvider"));
|
|
27
|
-
var
|
|
27
|
+
var utils_1 = require("../../utils");
|
|
28
|
+
var constants_1 = require("../../constants");
|
|
29
|
+
var productsMap = {};
|
|
28
30
|
var productComponents = [];
|
|
29
31
|
var productToComponentMap = {};
|
|
30
|
-
function
|
|
31
|
-
var
|
|
32
|
-
|
|
32
|
+
function TrebleApp(props) {
|
|
33
|
+
var _a;
|
|
34
|
+
var project = props.project, productId = props.productId, playerConfig = props.playerConfig, threekitEnv = props.threekitEnv, locale = props.locale, theme = props.theme;
|
|
35
|
+
var config = (0, utils_1.loadTrebleConfig)();
|
|
36
|
+
if (!((_a = config.treble) === null || _a === void 0 ? void 0 : _a.productsCtx))
|
|
33
37
|
return null;
|
|
34
38
|
if (!productComponents.length) {
|
|
35
|
-
|
|
39
|
+
config.treble.productsCtx.keys().forEach(function (fileName) {
|
|
40
|
+
var _a;
|
|
36
41
|
if (!fileName.includes('product.js'))
|
|
37
42
|
return;
|
|
38
43
|
if (fileName.includes('].product.js'))
|
|
39
44
|
return;
|
|
40
|
-
productComponents.push(
|
|
45
|
+
productComponents.push((_a = config.treble) === null || _a === void 0 ? void 0 : _a.productsCtx(fileName).default);
|
|
41
46
|
});
|
|
42
47
|
react_1.Children.forEach(Object.values(productComponents).map(function (el) { return el({}); }), function (jsx, i) {
|
|
43
|
-
var _a;
|
|
44
48
|
if (!jsx)
|
|
45
49
|
return;
|
|
46
50
|
if (jsx.type.name !== 'ProductLayout')
|
|
47
51
|
return;
|
|
48
52
|
if (!jsx.props.products)
|
|
49
53
|
return;
|
|
50
|
-
var products;
|
|
51
|
-
if (Array.isArray(jsx.props.products))
|
|
52
|
-
products = jsx.props.products.reduce(function (output, id) {
|
|
53
|
-
var _a;
|
|
54
|
-
return Object.assign(output, (_a = {}, _a[id] = id, _a));
|
|
55
|
-
}, {});
|
|
56
|
-
else if (typeof jsx.props.products === 'string') {
|
|
57
|
-
var prdStr = jsx.props.products;
|
|
58
|
-
products = (_a = {}, _a[prdStr] = prdStr, _a);
|
|
59
|
-
}
|
|
60
|
-
else {
|
|
61
|
-
products = jsx.props.products;
|
|
62
|
-
}
|
|
54
|
+
var products = jsx.props.products;
|
|
63
55
|
Object.entries(products).forEach(function (_a) {
|
|
64
|
-
var
|
|
65
|
-
|
|
66
|
-
productToComponentMap[
|
|
56
|
+
var prodKey = _a[0], prodObj = _a[1];
|
|
57
|
+
productsMap[prodKey] = prodObj;
|
|
58
|
+
productToComponentMap[prodKey] = i;
|
|
67
59
|
});
|
|
68
60
|
});
|
|
69
61
|
}
|
|
70
|
-
var
|
|
62
|
+
var params = (0, utils_1.getParams)();
|
|
63
|
+
var id = productId;
|
|
64
|
+
if (!id) {
|
|
65
|
+
if (params[constants_1.TK_PRODUCT_ID_PARAM_KEY])
|
|
66
|
+
id = Object.keys(productToComponentMap).find(function (el) { return params[constants_1.TK_PRODUCT_ID_PARAM_KEY] === el; });
|
|
67
|
+
else
|
|
68
|
+
id = Object.keys(productToComponentMap)[0];
|
|
69
|
+
}
|
|
70
|
+
if (!id)
|
|
71
|
+
return null;
|
|
72
|
+
var Product = productComponents[productToComponentMap[id]];
|
|
71
73
|
if (!Product)
|
|
72
74
|
return null;
|
|
73
|
-
var
|
|
74
|
-
|
|
75
|
-
var preppedCredentials = Object.assign({}, credentials);
|
|
76
|
-
preppedCredentials[env] = Object.assign(preppedCredentials[env], {
|
|
77
|
-
assetId: assetId,
|
|
75
|
+
var preppedProject = Object.assign({}, project, {
|
|
76
|
+
products: productsMap[id],
|
|
78
77
|
});
|
|
79
|
-
return (react_1.default.createElement(ThreekitProvider_1.default, {
|
|
78
|
+
return (react_1.default.createElement(ThreekitProvider_1.default, { project: preppedProject, locale: locale, playerConfig: playerConfig, theme: theme, threekitEnv: threekitEnv },
|
|
80
79
|
react_1.default.createElement(Product, null)));
|
|
81
80
|
}
|
|
82
|
-
exports.default =
|
|
81
|
+
exports.default = TrebleApp;
|
package/dist/constants.d.ts
CHANGED
|
@@ -9,6 +9,10 @@ export declare const LAYOUT_CLASS_NAME: string;
|
|
|
9
9
|
export declare const TOOL_CLASS_NAME: string;
|
|
10
10
|
export declare const DISPLAY_CLASS_NAME: string;
|
|
11
11
|
export declare const FORM_CLASS_NAME: string;
|
|
12
|
+
/*****************************************************
|
|
13
|
+
* Treble Products Workflow
|
|
14
|
+
****************************************************/
|
|
15
|
+
export declare const TK_PRODUCT_ID_PARAM_KEY = "tkProduct";
|
|
12
16
|
/*****************************************************
|
|
13
17
|
* Saved Configuration Workflow
|
|
14
18
|
****************************************************/
|
package/dist/constants.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Dev-Kit Config
|
|
4
4
|
****************************************************/
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.WISHLIST_LOCALSTORAGE_KEY = exports.SNAPSHOT_OUTPUTS = exports.SNAPSHOT_FORMATS = exports.METADATA_RESERVED = exports.ATTRIBUTES_RESERVED = exports.SORT_OPTIONS = exports.ATTRIBUTE_TYPES = exports.DEFAULT_PLAYER_CONFIG = exports.TK_PLAYER_ROOT_DIV = exports.TK_SAVED_CONFIG_PARAM_KEY = exports.FORM_CLASS_NAME = exports.DISPLAY_CLASS_NAME = exports.TOOL_CLASS_NAME = exports.LAYOUT_CLASS_NAME = exports.WIDGET_CLASS_NAME = exports.INPUT_COMPONENT_CLASS_NAME = exports.CLASS_NAME_PREFIX = exports.DEFAULT_CLASS_NAME = void 0;
|
|
6
|
+
exports.WISHLIST_LOCALSTORAGE_KEY = exports.SNAPSHOT_OUTPUTS = exports.SNAPSHOT_FORMATS = exports.METADATA_RESERVED = exports.ATTRIBUTES_RESERVED = exports.SORT_OPTIONS = exports.ATTRIBUTE_TYPES = exports.DEFAULT_PLAYER_CONFIG = exports.TK_PLAYER_ROOT_DIV = exports.TK_SAVED_CONFIG_PARAM_KEY = exports.TK_PRODUCT_ID_PARAM_KEY = exports.FORM_CLASS_NAME = exports.DISPLAY_CLASS_NAME = exports.TOOL_CLASS_NAME = exports.LAYOUT_CLASS_NAME = exports.WIDGET_CLASS_NAME = exports.INPUT_COMPONENT_CLASS_NAME = exports.CLASS_NAME_PREFIX = exports.DEFAULT_CLASS_NAME = void 0;
|
|
7
7
|
exports.DEFAULT_CLASS_NAME = 'threekit-react';
|
|
8
8
|
exports.CLASS_NAME_PREFIX = 'tk';
|
|
9
9
|
exports.INPUT_COMPONENT_CLASS_NAME = "".concat(exports.DEFAULT_CLASS_NAME, " ").concat(exports.CLASS_NAME_PREFIX, "-input");
|
|
@@ -12,6 +12,10 @@ exports.LAYOUT_CLASS_NAME = "".concat(exports.DEFAULT_CLASS_NAME, " ").concat(ex
|
|
|
12
12
|
exports.TOOL_CLASS_NAME = "".concat(exports.DEFAULT_CLASS_NAME, " ").concat(exports.CLASS_NAME_PREFIX, "-tool");
|
|
13
13
|
exports.DISPLAY_CLASS_NAME = "".concat(exports.DEFAULT_CLASS_NAME, " ").concat(exports.CLASS_NAME_PREFIX, "-display");
|
|
14
14
|
exports.FORM_CLASS_NAME = "".concat(exports.DEFAULT_CLASS_NAME, " ").concat(exports.CLASS_NAME_PREFIX, "-form");
|
|
15
|
+
/*****************************************************
|
|
16
|
+
* Treble Products Workflow
|
|
17
|
+
****************************************************/
|
|
18
|
+
exports.TK_PRODUCT_ID_PARAM_KEY = 'tkProduct';
|
|
15
19
|
/*****************************************************
|
|
16
20
|
* Saved Configuration Workflow
|
|
17
21
|
****************************************************/
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
var react_redux_1 = require("react-redux");
|
|
4
|
+
var threekit_1 = require("../../store/threekit");
|
|
5
|
+
var usePlayerPortal = function () {
|
|
6
|
+
var playerElementId = (0, react_redux_1.useSelector)(threekit_1.getPlayerElementId);
|
|
7
|
+
if (!playerElementId)
|
|
8
|
+
return undefined;
|
|
9
|
+
var portalPlayerTo = function (toEl) {
|
|
10
|
+
if (!toEl)
|
|
11
|
+
return;
|
|
12
|
+
var playerEl = document.getElementById(playerElementId);
|
|
13
|
+
var playerWrapperEl = document.getElementById(toEl);
|
|
14
|
+
if (!playerEl)
|
|
15
|
+
throw new Error('Move from element not found');
|
|
16
|
+
if (!playerWrapperEl)
|
|
17
|
+
throw new Error('Move To element not found');
|
|
18
|
+
playerWrapperEl.appendChild(playerEl);
|
|
19
|
+
};
|
|
20
|
+
return portalPlayerTo;
|
|
21
|
+
};
|
|
22
|
+
exports.default = usePlayerPortal;
|
package/dist/index.d.ts
CHANGED
|
@@ -9,6 +9,7 @@ import useZoom from './hooks/useZoom';
|
|
|
9
9
|
import useSnapshot from './hooks/useSnapshot';
|
|
10
10
|
import useWishlist from './hooks/useWishlist';
|
|
11
11
|
import useShare from './hooks/useShare';
|
|
12
|
+
import usePlayerPortal from './hooks/usePlayerPortal';
|
|
12
13
|
import ThreekitProvider from './components/ThreekitProvider';
|
|
13
14
|
import Player from './components/Player';
|
|
14
15
|
import Button from './components/Button';
|
|
@@ -37,6 +38,6 @@ import Wishlist from './components/Wishlist';
|
|
|
37
38
|
import Share from './components/Share';
|
|
38
39
|
import icons from './icons';
|
|
39
40
|
export * from './icons';
|
|
40
|
-
import
|
|
41
|
+
import TrebleApp from './components/TrebleApp';
|
|
41
42
|
import ProductLayout from './components/ProductLayout';
|
|
42
|
-
export { useAttribute, useConfigurator, useMetadata, useName, usePlayerLoadingStatus, usePrice, useThreekitInitStatus, useZoom, useSnapshot, useWishlist, useShare, ThreekitProvider, Player, Button, Cards, Dropdown, Strips, Swatch, Tiles, TilesGroup, ProductName, ProductDescription, AttributeTitle, AttributeValue, TotalPrice, message, Modal, Drawer, Accordion, Tabs, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, icons,
|
|
43
|
+
export { useAttribute, useConfigurator, useMetadata, useName, usePlayerLoadingStatus, usePrice, useThreekitInitStatus, useZoom, useSnapshot, useWishlist, useShare, usePlayerPortal, ThreekitProvider, Player, Button, Cards, Dropdown, Strips, Swatch, Tiles, TilesGroup, ProductName, ProductDescription, AttributeTitle, AttributeValue, TotalPrice, message, Modal, Drawer, Accordion, Tabs, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, icons, TrebleApp, ProductLayout, };
|
package/dist/index.js
CHANGED
|
@@ -13,7 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
13
13
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
14
14
|
};
|
|
15
15
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
16
|
-
exports.ProductLayout = exports.
|
|
16
|
+
exports.ProductLayout = exports.TrebleApp = exports.icons = exports.Share = exports.Wishlist = exports.Snapshots = exports.Zoom = exports.FlatForm = exports.AwaitThreekitLoad = exports.PortalToElement = exports.Tabs = exports.Accordion = exports.Drawer = exports.Modal = exports.message = exports.TotalPrice = exports.AttributeValue = exports.AttributeTitle = exports.ProductDescription = exports.ProductName = exports.TilesGroup = exports.Tiles = exports.Swatch = exports.Strips = exports.Dropdown = exports.Cards = exports.Button = exports.Player = exports.ThreekitProvider = exports.usePlayerPortal = exports.useShare = exports.useWishlist = exports.useSnapshot = exports.useZoom = exports.useThreekitInitStatus = exports.usePrice = exports.usePlayerLoadingStatus = exports.useName = exports.useMetadata = exports.useConfigurator = exports.useAttribute = void 0;
|
|
17
17
|
// Hooks
|
|
18
18
|
var useAttribute_1 = __importDefault(require("./hooks/useAttribute"));
|
|
19
19
|
exports.useAttribute = useAttribute_1.default;
|
|
@@ -37,6 +37,8 @@ var useWishlist_1 = __importDefault(require("./hooks/useWishlist"));
|
|
|
37
37
|
exports.useWishlist = useWishlist_1.default;
|
|
38
38
|
var useShare_1 = __importDefault(require("./hooks/useShare"));
|
|
39
39
|
exports.useShare = useShare_1.default;
|
|
40
|
+
var usePlayerPortal_1 = __importDefault(require("./hooks/usePlayerPortal"));
|
|
41
|
+
exports.usePlayerPortal = usePlayerPortal_1.default;
|
|
40
42
|
// Components
|
|
41
43
|
var ThreekitProvider_1 = __importDefault(require("./components/ThreekitProvider"));
|
|
42
44
|
exports.ThreekitProvider = ThreekitProvider_1.default;
|
|
@@ -102,7 +104,7 @@ var icons_1 = __importDefault(require("./icons"));
|
|
|
102
104
|
exports.icons = icons_1.default;
|
|
103
105
|
__exportStar(require("./icons"), exports);
|
|
104
106
|
// Products - Multi-configurtors
|
|
105
|
-
var
|
|
106
|
-
exports.
|
|
107
|
+
var TrebleApp_1 = __importDefault(require("./components/TrebleApp"));
|
|
108
|
+
exports.TrebleApp = TrebleApp_1.default;
|
|
107
109
|
var ProductLayout_1 = __importDefault(require("./components/ProductLayout"));
|
|
108
110
|
exports.ProductLayout = ProductLayout_1.default;
|
package/dist/store/threekit.d.ts
CHANGED
|
@@ -1,25 +1,15 @@
|
|
|
1
1
|
import { RootState, ThreekitDispatch } from './index';
|
|
2
|
-
import { ISetConfiguration, IThreekitDisplayAttribute, IMetadata,
|
|
2
|
+
import { ISetConfiguration, IThreekitDisplayAttribute, IMetadata, IProject, IPlayerConfig } from '../threekit';
|
|
3
3
|
import { ITranslationMap } from '../api/products';
|
|
4
4
|
import { ISaveConfigurationConfig, WishlistArray } from '../Treble';
|
|
5
5
|
/*****************************************************
|
|
6
6
|
* Types and Interfaces
|
|
7
7
|
****************************************************/
|
|
8
|
-
export interface
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
stageId?: string;
|
|
14
|
-
publishStage?: string;
|
|
15
|
-
threekitDomain?: string;
|
|
16
|
-
}
|
|
17
|
-
export interface ILaunchConfig extends Omit<ThreekitInitConfig, 'el' | 'authToken' | 'orgId' | 'assetId' | 'stageId'> {
|
|
18
|
-
threekitEnv?: string;
|
|
19
|
-
preview: IThreekitCredentials;
|
|
20
|
-
'admin-fts': IThreekitCredentials;
|
|
21
|
-
elementId?: string;
|
|
22
|
-
language?: string | undefined;
|
|
8
|
+
export interface ILaunchConfig {
|
|
9
|
+
threekitEnv: string;
|
|
10
|
+
locale: string;
|
|
11
|
+
project: IProject;
|
|
12
|
+
playerConfig: IPlayerConfig;
|
|
23
13
|
}
|
|
24
14
|
interface IPriceConfig {
|
|
25
15
|
id: string;
|
|
@@ -65,7 +55,7 @@ export declare const getWishlist: (state: RootState) => WishlistArray;
|
|
|
65
55
|
/*****************************************************
|
|
66
56
|
* Complex Actions
|
|
67
57
|
****************************************************/
|
|
68
|
-
export declare const launch: (launchConfig
|
|
58
|
+
export declare const launch: (launchConfig?: Partial<ILaunchConfig> | undefined) => (dispatch: ThreekitDispatch) => Promise<void>;
|
|
69
59
|
export declare const setConfiguration: (config: ISetConfiguration) => (dispatch: ThreekitDispatch) => Promise<void>;
|
|
70
60
|
export declare const addToWishlist: (config: ISaveConfigurationConfig) => (dispatch: ThreekitDispatch) => Promise<void>;
|
|
71
61
|
export declare const removeFromWishlist: (idx: number) => (dispatch: ThreekitDispatch) => void;
|
package/dist/store/threekit.js
CHANGED
|
@@ -260,124 +260,127 @@ exports.getWishlist = getWishlist;
|
|
|
260
260
|
/*****************************************************
|
|
261
261
|
* Complex Actions
|
|
262
262
|
****************************************************/
|
|
263
|
-
var launch = function (launchConfig) {
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
case 5:
|
|
351
|
-
_c.threekit = (_d.configurator = _f.sent(),
|
|
352
|
-
_d.treble = new Treble_1.default({ player: player }),
|
|
353
|
-
_d);
|
|
354
|
-
if (launchConfig.language) {
|
|
355
|
-
dispatch(setLanguage(launchConfig.language));
|
|
356
|
-
dispatch(setTranslations(translations));
|
|
357
|
-
}
|
|
358
|
-
if (pricebook.length) {
|
|
359
|
-
priceConfig = {
|
|
360
|
-
id: pricebook[0].id,
|
|
361
|
-
currency: pricebook[0].currencies[0],
|
|
263
|
+
var launch = function (launchConfig) {
|
|
264
|
+
return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {
|
|
265
|
+
var config, credentials, products, threekitEnv, playerConfig, envCredentials, product, threekitDomainRaw, orgId, authToken, initialConfigurationRaw, assetId, stageId, configurationId, el, threekitDomain, initialConfiguration, updatedAssetId, params, configId, configuration, _a, player, translations, pricebook, _b, priceConfig, productName, wishlistData;
|
|
266
|
+
var _c;
|
|
267
|
+
var _d, _e, _f, _g, _h;
|
|
268
|
+
return __generator(this, function (_j) {
|
|
269
|
+
switch (_j.label) {
|
|
270
|
+
case 0:
|
|
271
|
+
if (window.threekit)
|
|
272
|
+
return [2 /*return*/];
|
|
273
|
+
config = (0, utils_1.loadTrebleConfig)();
|
|
274
|
+
credentials = Object.assign({}, ((_d = config.project) === null || _d === void 0 ? void 0 : _d.credentials) || {}, ((_e = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.project) === null || _e === void 0 ? void 0 : _e.credentials) || {});
|
|
275
|
+
products = Object.assign({}, ((_f = config.project) === null || _f === void 0 ? void 0 : _f.products) || {}, ((_g = launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.project) === null || _g === void 0 ? void 0 : _g.products) || {});
|
|
276
|
+
if (!Object.keys(credentials).length || !Object.keys(products).length)
|
|
277
|
+
return [2 /*return*/, console.error('Missing credentials')];
|
|
278
|
+
threekitEnv = (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.threekitEnv) || process.env.THREEKIT_ENV || 'preview';
|
|
279
|
+
playerConfig = Object.assign({}, constants_1.DEFAULT_PLAYER_CONFIG, config.player, launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.playerConfig);
|
|
280
|
+
envCredentials = credentials[threekitEnv];
|
|
281
|
+
product = products[threekitEnv];
|
|
282
|
+
threekitDomainRaw = envCredentials.threekitDomain || "".concat(threekitEnv, ".threekit.com");
|
|
283
|
+
orgId = envCredentials.orgId, authToken = envCredentials.publicToken;
|
|
284
|
+
if (typeof product === 'string') {
|
|
285
|
+
if ((0, utils_1.isUuid)(product))
|
|
286
|
+
assetId = product;
|
|
287
|
+
else
|
|
288
|
+
configurationId = product;
|
|
289
|
+
}
|
|
290
|
+
else {
|
|
291
|
+
if ((0, utils_1.isUuid)(product.assetId))
|
|
292
|
+
assetId = product.assetId;
|
|
293
|
+
else
|
|
294
|
+
configurationId = product.assetId;
|
|
295
|
+
stageId = product.stageId;
|
|
296
|
+
}
|
|
297
|
+
if (playerConfig.elementId) {
|
|
298
|
+
el = document.getElementById(playerConfig.elementId);
|
|
299
|
+
if (el)
|
|
300
|
+
dispatch(setPlayerElement(playerConfig.elementId));
|
|
301
|
+
}
|
|
302
|
+
else {
|
|
303
|
+
el = createPlayerLoaderEl(constants_1.TK_PLAYER_ROOT_DIV);
|
|
304
|
+
dispatch(setPlayerElement(constants_1.TK_PLAYER_ROOT_DIV));
|
|
305
|
+
}
|
|
306
|
+
// Connection
|
|
307
|
+
connection_1.default.connect({
|
|
308
|
+
authToken: authToken,
|
|
309
|
+
orgId: orgId,
|
|
310
|
+
assetId: assetId,
|
|
311
|
+
threekitDomain: threekitDomainRaw,
|
|
312
|
+
});
|
|
313
|
+
threekitDomain = connection_1.default.getConnection().threekitDomain;
|
|
314
|
+
initialConfiguration = __assign({}, initialConfigurationRaw);
|
|
315
|
+
updatedAssetId = assetId;
|
|
316
|
+
params = (0, utils_1.getParams)();
|
|
317
|
+
configId = ((_h = params[constants_1.TK_SAVED_CONFIG_PARAM_KEY]) === null || _h === void 0 ? void 0 : _h.length)
|
|
318
|
+
? params[constants_1.TK_SAVED_CONFIG_PARAM_KEY]
|
|
319
|
+
: configurationId;
|
|
320
|
+
if (!configId) return [3 /*break*/, 2];
|
|
321
|
+
return [4 /*yield*/, api_1.default.configurations.fetch(configId)];
|
|
322
|
+
case 1:
|
|
323
|
+
configuration = _j.sent();
|
|
324
|
+
if (configuration) {
|
|
325
|
+
initialConfiguration = Object.assign({}, initialConfigurationRaw, configuration.data.variant);
|
|
326
|
+
connection_1.default.connect({ assetId: configuration.data.productId });
|
|
327
|
+
updatedAssetId = configuration.data.productId;
|
|
328
|
+
}
|
|
329
|
+
_j.label = 2;
|
|
330
|
+
case 2:
|
|
331
|
+
if (!updatedAssetId)
|
|
332
|
+
return [2 /*return*/, console.error('missing assetId')];
|
|
333
|
+
// We create the threekit script
|
|
334
|
+
return [4 /*yield*/, (0, utils_1.createThreekitScriptEl)(threekitDomain)];
|
|
335
|
+
case 3:
|
|
336
|
+
// We create the threekit script
|
|
337
|
+
_j.sent();
|
|
338
|
+
return [4 /*yield*/, Promise.all([
|
|
339
|
+
window.threekitPlayer(__assign({ el: el,
|
|
340
|
+
// Variables to sort out
|
|
341
|
+
authToken: authToken, stageId: stageId, assetId: updatedAssetId, initialConfiguration: initialConfiguration }, playerConfig)),
|
|
342
|
+
api_1.default.products.fetchTranslations(),
|
|
343
|
+
api_1.default.price.getPricebooksList(),
|
|
344
|
+
])];
|
|
345
|
+
case 4:
|
|
346
|
+
_a = _j.sent(), player = _a[0], translations = _a[1], pricebook = _a[2];
|
|
347
|
+
_b = window;
|
|
348
|
+
_c = {
|
|
349
|
+
player: player
|
|
362
350
|
};
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
351
|
+
return [4 /*yield*/, player.getConfigurator()];
|
|
352
|
+
case 5:
|
|
353
|
+
_b.threekit = (_c.configurator = _j.sent(),
|
|
354
|
+
_c.treble = new Treble_1.default({ player: player }),
|
|
355
|
+
_c);
|
|
356
|
+
if (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.locale) {
|
|
357
|
+
dispatch(setLanguage(launchConfig.locale));
|
|
358
|
+
dispatch(setTranslations(translations));
|
|
359
|
+
}
|
|
360
|
+
if (pricebook.length) {
|
|
361
|
+
priceConfig = {
|
|
362
|
+
id: pricebook[0].id,
|
|
363
|
+
currency: pricebook[0].currencies[0],
|
|
364
|
+
};
|
|
365
|
+
dispatch(setPriceConfig(priceConfig));
|
|
366
|
+
}
|
|
367
|
+
productName = window.threekit.player.scene.get({
|
|
368
|
+
id: window.threekit.player.assetId,
|
|
369
|
+
}).name;
|
|
370
|
+
dispatch(setName(productName));
|
|
371
|
+
dispatch(setMetadata(window.threekit.configurator.getMetadata()));
|
|
372
|
+
dispatch(setAttributes(window.threekit.configurator.getDisplayAttributes()));
|
|
373
|
+
dispatch((0, exports.setThreekitLoaded)(true));
|
|
374
|
+
dispatch(setPlayerLoading(false));
|
|
375
|
+
return [4 /*yield*/, window.threekit.treble.wishlist.getWishlist()];
|
|
376
|
+
case 6:
|
|
377
|
+
wishlistData = _j.sent();
|
|
378
|
+
dispatch(setWishlist(wishlistData));
|
|
379
|
+
return [2 /*return*/];
|
|
380
|
+
}
|
|
381
|
+
});
|
|
382
|
+
}); };
|
|
383
|
+
};
|
|
381
384
|
exports.launch = launch;
|
|
382
385
|
// Configurator
|
|
383
386
|
var setConfiguration = function (config) { return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {
|
package/dist/threekit.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="webpack-env" />
|
|
1
2
|
import Treble from './Treble';
|
|
2
3
|
declare type SCENE_PHASES = 'LOADED' | 'PRELOADED' | 'RENDERED';
|
|
3
4
|
declare type PRIVATE_APIS = 'scene' | 'player';
|
|
@@ -207,7 +208,7 @@ export interface ThreekitInitConfig {
|
|
|
207
208
|
stageId?: string;
|
|
208
209
|
orgId?: string;
|
|
209
210
|
showConfigurator?: boolean;
|
|
210
|
-
initialConfiguration?:
|
|
211
|
+
initialConfiguration?: Record<string, any>;
|
|
211
212
|
showAR?: boolean;
|
|
212
213
|
showShare?: boolean;
|
|
213
214
|
showLoadingThumbnail?: boolean;
|
|
@@ -218,6 +219,36 @@ export interface ThreekitInitConfig {
|
|
|
218
219
|
publishStage?: string;
|
|
219
220
|
display?: DISPLAY_OPTIONS;
|
|
220
221
|
}
|
|
222
|
+
/***************************************************
|
|
223
|
+
* Treble Declarations
|
|
224
|
+
**************************************************/
|
|
225
|
+
export interface IFrameworkConfig {
|
|
226
|
+
productsCtx: __WebpackModuleApi.RequireContext;
|
|
227
|
+
}
|
|
228
|
+
export interface ICredential {
|
|
229
|
+
orgId: string;
|
|
230
|
+
publicToken: string;
|
|
231
|
+
publishStage?: string;
|
|
232
|
+
threekitDomain?: string;
|
|
233
|
+
}
|
|
234
|
+
export interface ICredentials extends Record<string, ICredential> {
|
|
235
|
+
}
|
|
236
|
+
export interface IPlayerConfig extends Omit<ThreekitInitConfig, 'el' | 'authToken' | 'orgId' | 'assetId' | 'stageId' | 'locale'> {
|
|
237
|
+
elementId?: string;
|
|
238
|
+
}
|
|
239
|
+
export interface IProduct extends Pick<ThreekitInitConfig, 'assetId' | 'stageId' | 'initialConfiguration'> {
|
|
240
|
+
}
|
|
241
|
+
export interface IProducts extends Record<string, string | Partial<IProduct>> {
|
|
242
|
+
}
|
|
243
|
+
export interface IProject {
|
|
244
|
+
credentials: ICredentials;
|
|
245
|
+
products: IProducts;
|
|
246
|
+
}
|
|
247
|
+
export interface ITrebleConfig {
|
|
248
|
+
project: IProject;
|
|
249
|
+
treble: IFrameworkConfig;
|
|
250
|
+
player: IPlayerConfig;
|
|
251
|
+
}
|
|
221
252
|
/***************************************************
|
|
222
253
|
* Global Declaration
|
|
223
254
|
**************************************************/
|
package/dist/utils.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { ITranslationMap } from './api/products';
|
|
2
2
|
import { IThreekitCamera, IConfigurationColor, ICoordinates, IQuaternion, IThreekitDisplayAttribute } from './threekit';
|
|
3
|
-
|
|
3
|
+
import { ITrebleConfig } from './threekit';
|
|
4
|
+
interface ICameraPosition {
|
|
4
5
|
position: ICoordinates;
|
|
5
6
|
quaternion: IQuaternion;
|
|
6
7
|
}
|
|
@@ -38,7 +39,7 @@ export declare const getCameraPosition: (cameraApi: IThreekitCamera) => {
|
|
|
38
39
|
position: ICoordinates;
|
|
39
40
|
quaternion: IQuaternion;
|
|
40
41
|
};
|
|
41
|
-
export declare const setCameraPosition: (cameraApi: IThreekitCamera, cameraPosition:
|
|
42
|
+
export declare const setCameraPosition: (cameraApi: IThreekitCamera, cameraPosition: ICameraPosition) => void;
|
|
42
43
|
export declare const dataURItoBlob: (dataURI: string) => Blob;
|
|
43
44
|
export declare const dataURItoFile: (dataURI: string, filename: string) => File;
|
|
44
45
|
export declare const copyToClipboard: (data: string | Record<string, string | number | boolean>) => void;
|
|
@@ -56,4 +57,6 @@ export declare const selectionToConfiguration: (value: string | number | IConfig
|
|
|
56
57
|
assetId: string | number | IConfigurationColor;
|
|
57
58
|
} | undefined;
|
|
58
59
|
export declare const filterFormAttributes: (attributes: Record<string, IThreekitDisplayAttribute>, attributeComponentProps: IAttributesComponentProps, includeReservedAttributes: boolean) => IThreekitDisplayAttribute[];
|
|
60
|
+
export declare const isUuid: (str?: string | undefined) => boolean;
|
|
61
|
+
export declare const loadTrebleConfig: () => Partial<ITrebleConfig>;
|
|
59
62
|
export {};
|
package/dist/utils.js
CHANGED
|
@@ -9,7 +9,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
9
9
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
10
10
|
};
|
|
11
11
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
-
exports.filterFormAttributes = exports.selectionToConfiguration = exports.translateAttribute = exports.createThreekitScriptEl = exports.metadataValueToObject = exports.easeInOutCubic = exports.copyToClipboard = exports.dataURItoFile = exports.dataURItoBlob = exports.setCameraPosition = exports.getCameraPosition = exports.findHitNode = exports.deflateRgb = exports.inflateRgb = exports.rgbToHex = exports.hexToRgb = exports.regularToKebabCase = exports.deepCompare = exports.shallowCompare = exports.getResumableUrl = exports.getParams = exports.objectToQueryStr = exports.IsJsonString = exports.generateFormClassName = exports.generateDisplayClassName = exports.generateToolClassName = exports.generateLayoutClassName = exports.generateWidgetClassName = exports.generateInputClassName = exports.generateClassName = void 0;
|
|
12
|
+
exports.loadTrebleConfig = exports.isUuid = exports.filterFormAttributes = exports.selectionToConfiguration = exports.translateAttribute = exports.createThreekitScriptEl = exports.metadataValueToObject = exports.easeInOutCubic = exports.copyToClipboard = exports.dataURItoFile = exports.dataURItoBlob = exports.setCameraPosition = exports.getCameraPosition = exports.findHitNode = exports.deflateRgb = exports.inflateRgb = exports.rgbToHex = exports.hexToRgb = exports.regularToKebabCase = exports.deepCompare = exports.shallowCompare = exports.getResumableUrl = exports.getParams = exports.objectToQueryStr = exports.IsJsonString = exports.generateFormClassName = exports.generateDisplayClassName = exports.generateToolClassName = exports.generateLayoutClassName = exports.generateWidgetClassName = exports.generateInputClassName = exports.generateClassName = void 0;
|
|
13
13
|
var constants_1 = require("./constants");
|
|
14
14
|
var generateClassName = function (baseClass) {
|
|
15
15
|
return function (component, customClassName, title) {
|
|
@@ -342,3 +342,39 @@ var filterFormAttributes = function (attributes, attributeComponentProps, includ
|
|
|
342
342
|
});
|
|
343
343
|
};
|
|
344
344
|
exports.filterFormAttributes = filterFormAttributes;
|
|
345
|
+
var isUuid = function (str) {
|
|
346
|
+
if (!str || typeof str !== 'string')
|
|
347
|
+
return false;
|
|
348
|
+
var check = new RegExp(/^[0-9A-F]{8}-[0-9A-F]{4}-4[0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i);
|
|
349
|
+
return check.test(str);
|
|
350
|
+
};
|
|
351
|
+
exports.isUuid = isUuid;
|
|
352
|
+
var loadTrebleConfig = function () {
|
|
353
|
+
var config = {};
|
|
354
|
+
try {
|
|
355
|
+
var project = require('@app-root/threekit.config.js').default;
|
|
356
|
+
if (project)
|
|
357
|
+
config.project = project;
|
|
358
|
+
}
|
|
359
|
+
catch (e) {
|
|
360
|
+
console.log(e);
|
|
361
|
+
}
|
|
362
|
+
try {
|
|
363
|
+
var player = require('@app-root/.treble/player.config.js').default;
|
|
364
|
+
if (player)
|
|
365
|
+
config.player = player;
|
|
366
|
+
}
|
|
367
|
+
catch (e) {
|
|
368
|
+
console.log(e);
|
|
369
|
+
}
|
|
370
|
+
try {
|
|
371
|
+
var treble = require('@app-root/.treble/treble.config.js').default;
|
|
372
|
+
if (treble)
|
|
373
|
+
config.treble = treble;
|
|
374
|
+
}
|
|
375
|
+
catch (e) {
|
|
376
|
+
console.log(e);
|
|
377
|
+
}
|
|
378
|
+
return config;
|
|
379
|
+
};
|
|
380
|
+
exports.loadTrebleConfig = loadTrebleConfig;
|
package/package.json
CHANGED
package/tailwind-presets.js
CHANGED
|
@@ -78,5 +78,60 @@ module.exports = {
|
|
|
78
78
|
|
|
79
79
|
addComponents(widgetBtn);
|
|
80
80
|
}),
|
|
81
|
+
plugin(function ({ addComponents }) {
|
|
82
|
+
const playerWidgets = {
|
|
83
|
+
'.player-wgts': {
|
|
84
|
+
position: 'absolute',
|
|
85
|
+
display: 'flex',
|
|
86
|
+
flexDirection: 'row',
|
|
87
|
+
},
|
|
88
|
+
|
|
89
|
+
'.wgt-top-left': {
|
|
90
|
+
top: '20px',
|
|
91
|
+
left: '20px',
|
|
92
|
+
},
|
|
93
|
+
|
|
94
|
+
'.wgt-top-center': {
|
|
95
|
+
top: '20px',
|
|
96
|
+
left: '50%',
|
|
97
|
+
transform: 'translateX(-50%)',
|
|
98
|
+
},
|
|
99
|
+
|
|
100
|
+
'.wgt-top-right': {
|
|
101
|
+
top: '20px',
|
|
102
|
+
right: '20px',
|
|
103
|
+
},
|
|
104
|
+
|
|
105
|
+
'.wgt-middle-left': {
|
|
106
|
+
top: '50%',
|
|
107
|
+
left: '20px',
|
|
108
|
+
transform: 'translateX(-50%, -50%)',
|
|
109
|
+
},
|
|
110
|
+
|
|
111
|
+
'.wgt-middle-right': {
|
|
112
|
+
top: '50%',
|
|
113
|
+
right: '20px',
|
|
114
|
+
transform: 'translateX(-50%, -50%)',
|
|
115
|
+
},
|
|
116
|
+
|
|
117
|
+
'.wgt-bottom-left': {
|
|
118
|
+
bottom: '20px',
|
|
119
|
+
left: '20px',
|
|
120
|
+
},
|
|
121
|
+
|
|
122
|
+
'.wgt-bottom-center': {
|
|
123
|
+
bottom: '20px',
|
|
124
|
+
left: '50%',
|
|
125
|
+
transform: 'translateX(-50%)',
|
|
126
|
+
},
|
|
127
|
+
|
|
128
|
+
'.wgt-bottom-right': {
|
|
129
|
+
bottom: '20px',
|
|
130
|
+
right: '20px',
|
|
131
|
+
},
|
|
132
|
+
};
|
|
133
|
+
|
|
134
|
+
addComponents(playerWidgets);
|
|
135
|
+
}),
|
|
81
136
|
],
|
|
82
137
|
};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
/// <reference types="webpack-env" />
|
|
3
|
-
import { ThreekitProviderProps } from '../ThreekitProvider';
|
|
4
|
-
interface IProducts {
|
|
5
|
-
ctx: __WebpackModuleApi.RequireContext;
|
|
6
|
-
}
|
|
7
|
-
interface ProductLoaderProps extends Omit<ThreekitProviderProps, 'children'> {
|
|
8
|
-
productId: string;
|
|
9
|
-
products: IProducts;
|
|
10
|
-
}
|
|
11
|
-
export default function ProductLoader(props: ProductLoaderProps): JSX.Element | null;
|
|
12
|
-
export {};
|