@threekit-tools/treble 0.0.57 → 0.0.60
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/Treble/Snapshots.js +32 -63
- package/dist/Treble/Treble.d.ts +8 -6
- package/dist/Treble/Treble.js +19 -4
- package/dist/Treble/Wishlist.d.ts +3 -3
- package/dist/Treble/Wishlist.js +1 -0
- package/dist/api/configurations.d.ts +2 -3
- package/dist/api/configurations.js +28 -22
- package/dist/api/index.d.ts +2 -0
- package/dist/api/index.js +2 -0
- package/dist/api/server.d.ts +2 -0
- package/dist/api/server.js +11 -0
- package/dist/components/Cards/index.js +3 -4
- package/dist/components/Dropdown/index.js +6 -10
- package/dist/components/Strips/index.js +3 -4
- package/dist/components/Swatch/index.js +3 -4
- package/dist/components/TextInput/index.d.ts +1 -0
- package/dist/components/TextInput/index.js +2 -2
- package/dist/components/TextInput/textInput.styles.js +1 -1
- package/dist/components/Tiles/index.js +3 -4
- package/dist/components/TilesGroup/index.js +3 -4
- package/dist/components/containers/formInputContainer.d.ts +8 -4
- package/dist/components/containers/formInputContainer.js +10 -15
- package/dist/connection.d.ts +4 -1
- package/dist/connection.js +4 -0
- package/dist/hooks/useAttribute/index.d.ts +2 -2
- package/dist/hooks/useAttribute/index.js +2 -4
- package/dist/hooks/useConfigurator/index.d.ts +2 -2
- package/dist/hooks/useConfigurator/index.js +1 -1
- package/dist/hooks/useProductCache/index.d.ts +14 -0
- package/dist/hooks/useProductCache/index.js +35 -0
- package/dist/hooks/useSingleAnimation/index.d.ts +17 -0
- package/dist/hooks/useSingleAnimation/index.js +264 -0
- package/dist/hooks/useWishlist/index.d.ts +3 -2
- package/dist/hooks/useWishlist/index.js +1 -3
- package/dist/http/configurations.d.ts +1 -0
- package/dist/http/index.d.ts +2 -0
- package/dist/http/index.js +2 -0
- package/dist/http/server.d.ts +14 -0
- package/dist/http/server.js +17 -0
- package/dist/index.js +2 -0
- package/dist/store/attributes.d.ts +15 -2
- package/dist/store/attributes.js +20 -12
- package/dist/store/price.js +2 -2
- package/dist/store/product.d.ts +38 -2
- package/dist/store/product.js +221 -10
- package/dist/store/translations.d.ts +1 -0
- package/dist/store/translations.js +3 -1
- package/dist/store/treble.d.ts +32 -2
- package/dist/store/treble.js +157 -34
- package/dist/store/wishlist.d.ts +3 -2
- package/dist/threekit.d.ts +20 -2
- package/dist/utils.d.ts +2 -10
- package/dist/utils.js +62 -58
- package/package.json +17 -2
- package/dist/hooks/useArrayAttribute/index.d.ts +0 -2
- package/dist/hooks/useArrayAttribute/index.js +0 -184
package/dist/store/treble.js
CHANGED
|
@@ -50,7 +50,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
50
50
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
51
51
|
};
|
|
52
52
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
53
|
-
exports.launch = exports.getPlayerElementId = exports.isPlayerLoading = exports.isThreekitInitialized = exports.setPlayerElement = exports.setPlayerLoading = exports.setThreekitInitialized = void 0;
|
|
53
|
+
exports.reloadPlayer = exports.unloadPlayer = exports.launch = exports.initPlayer = exports.getPlayerElementId = exports.isPlayerLoading = exports.isThreekitInitialized = exports.reloadTreble = exports.setPlayerElement = exports.setPlayerLoading = exports.setThreekitInitialized = void 0;
|
|
54
54
|
var connection_1 = __importDefault(require("../connection"));
|
|
55
55
|
var toolkit_1 = require("@reduxjs/toolkit");
|
|
56
56
|
var api_1 = __importDefault(require("../api"));
|
|
@@ -62,6 +62,7 @@ var price_1 = require("./price");
|
|
|
62
62
|
var wishlist_1 = require("./wishlist");
|
|
63
63
|
var translations_1 = require("./translations");
|
|
64
64
|
var product_1 = require("./product");
|
|
65
|
+
var message_1 = __importDefault(require("../components/message"));
|
|
65
66
|
/*****************************************************
|
|
66
67
|
* Helper Functions
|
|
67
68
|
****************************************************/
|
|
@@ -100,6 +101,7 @@ var initialState = {
|
|
|
100
101
|
isThreekitInitialized: false,
|
|
101
102
|
isPlayerLoading: false,
|
|
102
103
|
playerElId: undefined,
|
|
104
|
+
notifications: true,
|
|
103
105
|
};
|
|
104
106
|
/*****************************************************
|
|
105
107
|
* Actions
|
|
@@ -107,6 +109,7 @@ var initialState = {
|
|
|
107
109
|
exports.setThreekitInitialized = (0, toolkit_1.createAction)('treble/set-threekit-initialized');
|
|
108
110
|
exports.setPlayerLoading = (0, toolkit_1.createAction)('treble/set-player-loading');
|
|
109
111
|
exports.setPlayerElement = (0, toolkit_1.createAction)('treble/set-player-element');
|
|
112
|
+
exports.reloadTreble = (0, toolkit_1.createAction)('treble/reload');
|
|
110
113
|
/*****************************************************
|
|
111
114
|
* Slice
|
|
112
115
|
****************************************************/
|
|
@@ -115,14 +118,20 @@ var reducer = (0, toolkit_1.createSlice)({
|
|
|
115
118
|
initialState: initialState,
|
|
116
119
|
reducers: {},
|
|
117
120
|
extraReducers: function (builder) {
|
|
118
|
-
builder.addCase(exports.setThreekitInitialized, function (state,
|
|
119
|
-
state.isThreekitInitialized =
|
|
121
|
+
builder.addCase(exports.setThreekitInitialized, function (state, action) {
|
|
122
|
+
state.isThreekitInitialized = action.payload;
|
|
123
|
+
return state;
|
|
120
124
|
});
|
|
121
125
|
builder.addCase(exports.setPlayerLoading, function (state, action) {
|
|
122
126
|
state.isPlayerLoading = action.payload;
|
|
127
|
+
return state;
|
|
123
128
|
});
|
|
124
129
|
builder.addCase(exports.setPlayerElement, function (state, action) {
|
|
125
130
|
state.playerElId = action.payload;
|
|
131
|
+
return state;
|
|
132
|
+
});
|
|
133
|
+
builder.addCase(exports.reloadTreble, function (state, action) {
|
|
134
|
+
return __assign(__assign({}, state), action.payload);
|
|
126
135
|
});
|
|
127
136
|
},
|
|
128
137
|
}).reducer;
|
|
@@ -146,12 +155,52 @@ exports.getPlayerElementId = getPlayerElementId;
|
|
|
146
155
|
/*****************************************************
|
|
147
156
|
* Complex Actions
|
|
148
157
|
****************************************************/
|
|
158
|
+
var initPlayer = function (config) { return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {
|
|
159
|
+
var el, authToken, assetId, stageId, orgId, playerConfig, initialConfiguration, player, configurator;
|
|
160
|
+
return __generator(this, function (_a) {
|
|
161
|
+
switch (_a.label) {
|
|
162
|
+
case 0:
|
|
163
|
+
el = config.el, authToken = config.authToken, assetId = config.assetId, stageId = config.stageId, orgId = config.orgId, playerConfig = config.playerConfig, initialConfiguration = config.initialConfiguration;
|
|
164
|
+
return [4 /*yield*/, window.threekitPlayer(__assign(__assign({ el: el,
|
|
165
|
+
// Variables to sort out
|
|
166
|
+
authToken: authToken, stageId: stageId, assetId: assetId }, playerConfig), { initialConfiguration: initialConfiguration }))];
|
|
167
|
+
case 1:
|
|
168
|
+
player = _a.sent();
|
|
169
|
+
return [4 /*yield*/, player.getConfigurator()];
|
|
170
|
+
case 2:
|
|
171
|
+
configurator = _a.sent();
|
|
172
|
+
if (window.threekit) {
|
|
173
|
+
window.threekit = Object.assign(window.threekit, {
|
|
174
|
+
player: player,
|
|
175
|
+
configurator: configurator,
|
|
176
|
+
});
|
|
177
|
+
}
|
|
178
|
+
else
|
|
179
|
+
window.threekit = {
|
|
180
|
+
player: player,
|
|
181
|
+
configurator: configurator,
|
|
182
|
+
treble: new Treble_1.default({
|
|
183
|
+
player: player,
|
|
184
|
+
orgId: orgId,
|
|
185
|
+
initialConfiguration: configurator.getConfiguration(),
|
|
186
|
+
}),
|
|
187
|
+
};
|
|
188
|
+
dispatch((0, exports.setThreekitInitialized)(true));
|
|
189
|
+
dispatch((0, exports.setPlayerLoading)(false));
|
|
190
|
+
window.threekit.player.on('setConfiguration', function () {
|
|
191
|
+
dispatch((0, attributes_1.setAttributes)(window.threekit.configurator.getDisplayAttributes()));
|
|
192
|
+
});
|
|
193
|
+
return [2 /*return*/];
|
|
194
|
+
}
|
|
195
|
+
});
|
|
196
|
+
}); }; };
|
|
197
|
+
exports.initPlayer = initPlayer;
|
|
149
198
|
var launch = function (launchConfig) {
|
|
150
199
|
return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {
|
|
151
|
-
var config, credentials, products, threekitEnv, playerConfig, envCredentials, product, threekitDomainRaw, orgId, authToken, initialConfigurationRaw, assetId, stageId, configurationId, el, threekitDomain, initialConfiguration, updatedAssetId, params, configId, configuration
|
|
152
|
-
var _a, _b, _c, _d, _e;
|
|
153
|
-
return __generator(this, function (
|
|
154
|
-
switch (
|
|
200
|
+
var config, credentials, products, threekitEnv, serverUrl, playerConfig, envCredentials, product, threekitDomainRaw, orgId, authToken, initialConfigurationRaw, assetId, stageId, configurationId, el, threekitDomain, initialConfiguration, updatedAssetId, params, configId, configuration;
|
|
201
|
+
var _a, _b, _c, _d, _e, _f;
|
|
202
|
+
return __generator(this, function (_g) {
|
|
203
|
+
switch (_g.label) {
|
|
155
204
|
case 0:
|
|
156
205
|
if (window.threekit)
|
|
157
206
|
return [2 /*return*/];
|
|
@@ -161,6 +210,8 @@ var launch = function (launchConfig) {
|
|
|
161
210
|
if (!Object.keys(credentials).length || !Object.keys(products).length)
|
|
162
211
|
return [2 /*return*/, console.error('Missing credentials')];
|
|
163
212
|
threekitEnv = (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.threekitEnv) || process.env.THREEKIT_ENV || 'preview';
|
|
213
|
+
serverUrl = (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.serverUrl) || ((_e = config === null || config === void 0 ? void 0 : config.project) === null || _e === void 0 ? void 0 : _e.serverUrl);
|
|
214
|
+
(launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.threekitEnv) || process.env.THREEKIT_ENV || 'preview';
|
|
164
215
|
playerConfig = Object.assign({}, constants_1.DEFAULT_PLAYER_CONFIG, config.player, launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.playerConfig);
|
|
165
216
|
envCredentials = credentials[threekitEnv];
|
|
166
217
|
product = products[threekitEnv];
|
|
@@ -196,59 +247,58 @@ var launch = function (launchConfig) {
|
|
|
196
247
|
orgId: orgId,
|
|
197
248
|
assetId: assetId,
|
|
198
249
|
threekitDomain: threekitDomainRaw,
|
|
250
|
+
serverUrl: serverUrl,
|
|
199
251
|
});
|
|
200
252
|
threekitDomain = connection_1.default.getConnection().threekitDomain;
|
|
201
253
|
initialConfiguration = __assign({}, initialConfigurationRaw);
|
|
202
254
|
updatedAssetId = assetId;
|
|
203
255
|
params = (0, utils_1.getParams)();
|
|
204
|
-
configId = ((
|
|
256
|
+
configId = ((_f = params[constants_1.TK_SAVED_CONFIG_PARAM_KEY]) === null || _f === void 0 ? void 0 : _f.length)
|
|
205
257
|
? params[constants_1.TK_SAVED_CONFIG_PARAM_KEY]
|
|
206
258
|
: configurationId;
|
|
207
259
|
if (!configId) return [3 /*break*/, 2];
|
|
208
260
|
return [4 /*yield*/, api_1.default.configurations.fetch(configId)];
|
|
209
261
|
case 1:
|
|
210
|
-
configuration =
|
|
262
|
+
configuration = _g.sent();
|
|
211
263
|
if (configuration) {
|
|
212
264
|
initialConfiguration = Object.assign({}, initialConfigurationRaw, configuration.data.variant);
|
|
213
265
|
connection_1.default.connect({ assetId: configuration.data.productId });
|
|
214
266
|
updatedAssetId = configuration.data.productId;
|
|
215
267
|
}
|
|
216
|
-
|
|
268
|
+
_g.label = 2;
|
|
217
269
|
case 2:
|
|
218
270
|
if (!updatedAssetId)
|
|
219
271
|
return [2 /*return*/, console.error('missing assetId')];
|
|
220
272
|
// We create the threekit script
|
|
221
|
-
return [4 /*yield*/, (
|
|
273
|
+
return [4 /*yield*/, new Promise(function (resolve) {
|
|
274
|
+
var script = document.createElement('script');
|
|
275
|
+
script.src = "".concat(threekitDomain, "/app/js/threekit-player-bundle.js");
|
|
276
|
+
script.id = 'threekit-player-bundle';
|
|
277
|
+
script.onload = function () { return resolve(); };
|
|
278
|
+
document.head.appendChild(script);
|
|
279
|
+
})];
|
|
222
280
|
case 3:
|
|
223
281
|
// We create the threekit script
|
|
224
|
-
|
|
225
|
-
return [4 /*yield*/,
|
|
226
|
-
|
|
227
|
-
authToken: authToken, stageId: stageId, assetId: updatedAssetId }, playerConfig), { initialConfiguration: initialConfiguration }))];
|
|
228
|
-
case 4:
|
|
229
|
-
player = _f.sent();
|
|
230
|
-
return [4 /*yield*/, player.getConfigurator()];
|
|
231
|
-
case 5:
|
|
232
|
-
configurator = _f.sent();
|
|
233
|
-
window.threekit = {
|
|
234
|
-
player: player,
|
|
235
|
-
configurator: configurator,
|
|
236
|
-
treble: new Treble_1.default({
|
|
237
|
-
player: player,
|
|
282
|
+
_g.sent();
|
|
283
|
+
return [4 /*yield*/, dispatch((0, exports.initPlayer)({
|
|
284
|
+
el: el,
|
|
238
285
|
orgId: orgId,
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
286
|
+
authToken: authToken,
|
|
287
|
+
stageId: stageId,
|
|
288
|
+
assetId: updatedAssetId,
|
|
289
|
+
playerConfig: playerConfig,
|
|
290
|
+
initialConfiguration: initialConfiguration,
|
|
291
|
+
}))];
|
|
292
|
+
case 4:
|
|
293
|
+
_g.sent();
|
|
294
|
+
document.addEventListener('treble:notification', function (e) {
|
|
295
|
+
message_1.default.info(e.detail.message);
|
|
247
296
|
});
|
|
248
297
|
EVENTS = Object.assign(EVENTS, launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.eventHandlers);
|
|
249
298
|
dispatch((0, translations_1.initTranslations)(launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.locale));
|
|
250
299
|
dispatch((0, price_1.initPrice)());
|
|
251
|
-
dispatch((0,
|
|
300
|
+
dispatch((0, price_1.updatePrice)());
|
|
301
|
+
dispatch((0, product_1.initProduct)(products));
|
|
252
302
|
dispatch((0, wishlist_1.refreshWishlist)());
|
|
253
303
|
return [2 /*return*/];
|
|
254
304
|
}
|
|
@@ -256,4 +306,77 @@ var launch = function (launchConfig) {
|
|
|
256
306
|
}); };
|
|
257
307
|
};
|
|
258
308
|
exports.launch = launch;
|
|
309
|
+
var unloadPlayer = function () { return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {
|
|
310
|
+
return __generator(this, function (_a) {
|
|
311
|
+
switch (_a.label) {
|
|
312
|
+
case 0:
|
|
313
|
+
dispatch((0, exports.setThreekitInitialized)(true));
|
|
314
|
+
dispatch((0, exports.setPlayerLoading)(false));
|
|
315
|
+
dispatch((0, attributes_1.setAttributes)([]));
|
|
316
|
+
dispatch((0, product_1.setName)(''));
|
|
317
|
+
dispatch((0, product_1.setMetadata)({}));
|
|
318
|
+
return [4 /*yield*/, window.threekit.player.unload()];
|
|
319
|
+
case 1:
|
|
320
|
+
_a.sent();
|
|
321
|
+
return [2 /*return*/];
|
|
322
|
+
}
|
|
323
|
+
});
|
|
324
|
+
}); }; };
|
|
325
|
+
exports.unloadPlayer = unloadPlayer;
|
|
326
|
+
var reloadPlayer = function (config) {
|
|
327
|
+
return function (dispatch, getState) { return __awaiter(void 0, void 0, void 0, function () {
|
|
328
|
+
var connectionObj, assetId, stageId, initialConfiguration, configuration, state, trebleConfig, playerConfig, el;
|
|
329
|
+
return __generator(this, function (_a) {
|
|
330
|
+
switch (_a.label) {
|
|
331
|
+
case 0:
|
|
332
|
+
connectionObj = connection_1.default.getConnection();
|
|
333
|
+
if (!(config === undefined)) return [3 /*break*/, 1];
|
|
334
|
+
assetId = connectionObj.assetId;
|
|
335
|
+
return [3 /*break*/, 4];
|
|
336
|
+
case 1:
|
|
337
|
+
if (!(typeof config === 'string')) return [3 /*break*/, 2];
|
|
338
|
+
assetId = config;
|
|
339
|
+
return [3 /*break*/, 4];
|
|
340
|
+
case 2:
|
|
341
|
+
assetId = (config === null || config === void 0 ? void 0 : config.assetId) || connectionObj.assetId;
|
|
342
|
+
stageId = config === null || config === void 0 ? void 0 : config.stageId;
|
|
343
|
+
initialConfiguration = (config === null || config === void 0 ? void 0 : config.configuration) || {};
|
|
344
|
+
if (!(config === null || config === void 0 ? void 0 : config.configurationId)) return [3 /*break*/, 4];
|
|
345
|
+
return [4 /*yield*/, api_1.default.configurations.fetch(config === null || config === void 0 ? void 0 : config.configurationId)];
|
|
346
|
+
case 3:
|
|
347
|
+
configuration = _a.sent();
|
|
348
|
+
if (configuration) {
|
|
349
|
+
initialConfiguration = Object.assign({}, initialConfiguration, configuration.data.variant);
|
|
350
|
+
assetId = configuration.data.productId;
|
|
351
|
+
}
|
|
352
|
+
_a.label = 4;
|
|
353
|
+
case 4:
|
|
354
|
+
// Update connection
|
|
355
|
+
if (assetId !== connectionObj.assetId)
|
|
356
|
+
connection_1.default.connect({ assetId: assetId });
|
|
357
|
+
state = getState();
|
|
358
|
+
trebleConfig = (0, utils_1.loadTrebleConfig)();
|
|
359
|
+
playerConfig = Object.assign({}, constants_1.DEFAULT_PLAYER_CONFIG, trebleConfig.player);
|
|
360
|
+
el = document.getElementById(state.treble.playerElId);
|
|
361
|
+
if (state.treble.isThreekitInitialized)
|
|
362
|
+
dispatch((0, exports.unloadPlayer)());
|
|
363
|
+
return [4 /*yield*/, dispatch((0, exports.initPlayer)({
|
|
364
|
+
el: el,
|
|
365
|
+
orgId: connectionObj.orgId,
|
|
366
|
+
authToken: connectionObj.authToken,
|
|
367
|
+
stageId: stageId,
|
|
368
|
+
assetId: assetId,
|
|
369
|
+
playerConfig: playerConfig,
|
|
370
|
+
initialConfiguration: initialConfiguration,
|
|
371
|
+
}))];
|
|
372
|
+
case 5:
|
|
373
|
+
_a.sent();
|
|
374
|
+
dispatch((0, price_1.updatePrice)());
|
|
375
|
+
dispatch((0, product_1.initProduct)());
|
|
376
|
+
return [2 /*return*/];
|
|
377
|
+
}
|
|
378
|
+
});
|
|
379
|
+
}); };
|
|
380
|
+
};
|
|
381
|
+
exports.reloadPlayer = reloadPlayer;
|
|
259
382
|
exports.default = reducer;
|
package/dist/store/wishlist.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { RootState, ThreekitDispatch } from './index';
|
|
2
|
-
import {
|
|
2
|
+
import { WishlistArray } from '../Treble';
|
|
3
|
+
import { ISaveConfiguration } from '../api/configurations';
|
|
3
4
|
/*****************************************************
|
|
4
5
|
* Types and Interfaces
|
|
5
6
|
****************************************************/
|
|
@@ -8,7 +9,7 @@ export declare type WishlistState = WishlistArray;
|
|
|
8
9
|
* Standard Selectors
|
|
9
10
|
****************************************************/
|
|
10
11
|
export declare const refreshWishlist: import("@reduxjs/toolkit").AsyncThunk<import("../http/configurations").IConfigurationResponse[], void, {}>;
|
|
11
|
-
export declare const addToWishlist: import("@reduxjs/toolkit").AsyncThunk<import("../http/configurations").IConfigurationResponse[],
|
|
12
|
+
export declare const addToWishlist: import("@reduxjs/toolkit").AsyncThunk<import("../http/configurations").IConfigurationResponse[], Omit<ISaveConfiguration, "configurator">, {}>;
|
|
12
13
|
export declare const clearWishlist: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[], import("../http/configurations").IConfigurationResponse[], "treble/wishlist/clear", never, never>;
|
|
13
14
|
export declare const removeFromWishlist: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[idx: number], import("../http/configurations").IConfigurationResponse[], "treble/wishlist/remove-item", never, never>;
|
|
14
15
|
/*****************************************************
|
package/dist/threekit.d.ts
CHANGED
|
@@ -20,7 +20,7 @@ export interface ISceneQuery {
|
|
|
20
20
|
child?: string;
|
|
21
21
|
parent?: boolean;
|
|
22
22
|
includeParent?: boolean;
|
|
23
|
-
from?: ISceneQuery;
|
|
23
|
+
from?: string | ISceneQuery;
|
|
24
24
|
hasPlug?: string;
|
|
25
25
|
operator?: any;
|
|
26
26
|
operatorIndex?: number;
|
|
@@ -36,6 +36,7 @@ export interface ISceneQuery {
|
|
|
36
36
|
hierarchial?: boolean;
|
|
37
37
|
}
|
|
38
38
|
export interface ISceneResult {
|
|
39
|
+
id: string;
|
|
39
40
|
name: string;
|
|
40
41
|
configurator: IThreekitPrivateConfigurator;
|
|
41
42
|
}
|
|
@@ -83,6 +84,11 @@ export interface IDisplayAttributeAssetValue extends IConfigurationAssetValue {
|
|
|
83
84
|
tags: Array<string>;
|
|
84
85
|
label: string;
|
|
85
86
|
}
|
|
87
|
+
export interface IHydratedAttributeAssetValue extends IDisplayAttributeAssetValue {
|
|
88
|
+
label: string;
|
|
89
|
+
handleSelect: () => Promise<void>;
|
|
90
|
+
selected: boolean;
|
|
91
|
+
}
|
|
86
92
|
export interface IAttributeAssetBase<V> extends IAttributeBase<'Asset', IConfigurationAsset> {
|
|
87
93
|
assetType: AssetType;
|
|
88
94
|
blacklist: [];
|
|
@@ -92,12 +98,17 @@ export interface IAttributeAssetBase<V> extends IAttributeBase<'Asset', IConfigu
|
|
|
92
98
|
values: Array<V>;
|
|
93
99
|
}
|
|
94
100
|
export declare type IDisplayAttributeAsset = IAttributeAssetBase<IDisplayAttributeAssetValue>;
|
|
101
|
+
export declare type IHydratedAttributeAsset = IAttributeAssetBase<IHydratedAttributeAssetValue>;
|
|
95
102
|
export declare type IAttributeAsset = IAttributeAssetBase<IConfigurationAssetValue>;
|
|
96
103
|
/****** String TYPE ATTRIBUTE *******/
|
|
97
104
|
export interface IDisplayAttributeStringValue {
|
|
98
105
|
label: string;
|
|
99
106
|
value: string;
|
|
100
107
|
}
|
|
108
|
+
export interface IHydratedAttributeStringValue extends IDisplayAttributeStringValue {
|
|
109
|
+
handleSelect: () => Promise<void>;
|
|
110
|
+
selected: boolean;
|
|
111
|
+
}
|
|
101
112
|
export interface IAttributeStringBase<V> extends IAttributeBase<'String', string> {
|
|
102
113
|
blacklist: [];
|
|
103
114
|
defaultValue: string;
|
|
@@ -106,6 +117,7 @@ export interface IAttributeStringBase<V> extends IAttributeBase<'String', string
|
|
|
106
117
|
values: Array<V>;
|
|
107
118
|
}
|
|
108
119
|
export declare type IDisplayAttributeString = IAttributeStringBase<IDisplayAttributeStringValue>;
|
|
120
|
+
export declare type IHydratedAttributeString = IAttributeStringBase<IHydratedAttributeStringValue>;
|
|
109
121
|
export declare type IAttributeString = IAttributeStringBase<string>;
|
|
110
122
|
/****** STRING TYPE ATTRIBUTE *******/
|
|
111
123
|
export interface IAttributeColor extends IAttributeBase<'Color', IConfigurationColor> {
|
|
@@ -122,7 +134,9 @@ export interface IAttributeNumber extends IAttributeBase<'Number', number> {
|
|
|
122
134
|
/****** getAttributes() *******/
|
|
123
135
|
export declare type IThreekitAttribute = IAttributeAsset | IAttributeColor | IAttributeString | IAttributeNumber;
|
|
124
136
|
/****** getDisplayAttributes() *******/
|
|
125
|
-
export declare type IThreekitDisplayAttribute = IDisplayAttributeAsset |
|
|
137
|
+
export declare type IThreekitDisplayAttribute = IDisplayAttributeAsset | IDisplayAttributeString | IAttributeColor | IAttributeNumber;
|
|
138
|
+
/****** Treble Hydrated Values *******/
|
|
139
|
+
export declare type IHydratedAttribute = IHydratedAttributeAsset | IHydratedAttributeString | IAttributeColor | IAttributeNumber;
|
|
126
140
|
/***************************************************
|
|
127
141
|
* Camera
|
|
128
142
|
**************************************************/
|
|
@@ -160,6 +174,8 @@ export interface IThreekitScene {
|
|
|
160
174
|
RENDERED: 'rendered';
|
|
161
175
|
};
|
|
162
176
|
get: (query: ISceneQuery | string) => ISceneResult;
|
|
177
|
+
find: (query: ISceneQuery | string) => ISceneResult;
|
|
178
|
+
set: (query: ISceneQuery | string, transform: ICoordinates) => void;
|
|
163
179
|
}
|
|
164
180
|
export interface IThreekitTools {
|
|
165
181
|
addTool: (tool: string) => void;
|
|
@@ -192,6 +208,7 @@ export interface IThreekitPlayer {
|
|
|
192
208
|
getConfigurator: () => Promise<IThreekitConfigurator>;
|
|
193
209
|
enableApi: (api: PRIVATE_APIS) => any;
|
|
194
210
|
snapshotAsync: (snapshotConfig: ISnapshotConfig) => Promise<string>;
|
|
211
|
+
unload: () => Promise<string>;
|
|
195
212
|
}
|
|
196
213
|
export interface IThreekitPrivateConfigurator extends IThreekitConfigurator {
|
|
197
214
|
getAppliedConfiguration: (attributeName: string) => string;
|
|
@@ -259,6 +276,7 @@ export interface IProducts extends Record<string, string | Partial<IProduct>> {
|
|
|
259
276
|
export interface IProject {
|
|
260
277
|
credentials: ICredentials;
|
|
261
278
|
products: IProducts;
|
|
279
|
+
serverUrl?: string;
|
|
262
280
|
}
|
|
263
281
|
export interface ITrebleConfig {
|
|
264
282
|
project: IProject;
|
package/dist/utils.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { ITranslationMap } from './api/products';
|
|
2
1
|
import { IThreekitCamera, IConfigurationColor, ICoordinates, IQuaternion, IThreekitDisplayAttribute } from './threekit';
|
|
3
2
|
import { ITrebleConfig, IAttributeTypes } from './threekit';
|
|
4
3
|
import { RawAttributeValue } from './hooks/useAttribute';
|
|
@@ -22,7 +21,7 @@ export declare const generateLayoutClassName: (component: string, customClassNam
|
|
|
22
21
|
export declare const generateToolClassName: (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
|
|
23
22
|
export declare const generateDisplayClassName: (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
|
|
24
23
|
export declare const generateFormClassName: (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
|
|
25
|
-
export declare const
|
|
24
|
+
export declare const isJsonString: (str: string) => boolean;
|
|
26
25
|
export declare const objectToQueryStr: (obj: Record<string, any>) => string;
|
|
27
26
|
export declare const getParams: () => Record<string, string | {
|
|
28
27
|
[key: string]: any;
|
|
@@ -43,17 +42,10 @@ export declare const getCameraPosition: (cameraApi: IThreekitCamera) => {
|
|
|
43
42
|
export declare const setCameraPosition: (cameraApi: IThreekitCamera, cameraPosition: ICameraPosition) => void;
|
|
44
43
|
export declare const dataURItoBlob: (dataURI: string) => Blob;
|
|
45
44
|
export declare const dataURItoFile: (dataURI: string, filename: string) => File;
|
|
45
|
+
export declare const downloadSnapshot: (snapshot: string, filename: string) => Promise<void>;
|
|
46
46
|
export declare const copyToClipboard: (data: string | Record<string, string | number | boolean>) => void;
|
|
47
47
|
export declare const easeInOutCubic: (val: number) => number;
|
|
48
48
|
export declare const metadataValueToObject: (data: string) => Record<string, string | number>;
|
|
49
|
-
/**
|
|
50
|
-
* A function to load the Threekit JS Player API script
|
|
51
|
-
*
|
|
52
|
-
* @param threekitDomain The threekit environement to use. i.e. preview.threekit.com
|
|
53
|
-
* @returns
|
|
54
|
-
*/
|
|
55
|
-
export declare const createThreekitScriptEl: (threekitDomain: string) => Promise<void>;
|
|
56
|
-
export declare const translateAttribute: (attributes: Array<IThreekitDisplayAttribute>, translations?: ITranslationMap | undefined, language?: string | undefined) => IThreekitDisplayAttribute;
|
|
57
49
|
export declare const selectionToConfiguration: (value: RawAttributeValue, attributeType: IAttributeTypes) => string | number | boolean | File | IConfigurationColor | {
|
|
58
50
|
assetId: RawAttributeValue;
|
|
59
51
|
} | undefined;
|
package/dist/utils.js
CHANGED
|
@@ -1,4 +1,40 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
5
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
6
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
7
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
8
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
12
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
13
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
14
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
15
|
+
function step(op) {
|
|
16
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
17
|
+
while (_) try {
|
|
18
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
19
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
20
|
+
switch (op[0]) {
|
|
21
|
+
case 0: case 1: t = op; break;
|
|
22
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
23
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
24
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
25
|
+
default:
|
|
26
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
27
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
28
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
29
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
30
|
+
if (t[2]) _.ops.pop();
|
|
31
|
+
_.trys.pop(); continue;
|
|
32
|
+
}
|
|
33
|
+
op = body.call(thisArg, _);
|
|
34
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
35
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
36
|
+
}
|
|
37
|
+
};
|
|
2
38
|
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
3
39
|
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
4
40
|
if (ar || !(i in from)) {
|
|
@@ -9,7 +45,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
9
45
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
10
46
|
};
|
|
11
47
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
-
exports.loadTrebleConfig = exports.isUuid = exports.filterFormAttributes = exports.selectionToConfiguration = exports.
|
|
48
|
+
exports.loadTrebleConfig = exports.isUuid = exports.filterFormAttributes = exports.selectionToConfiguration = exports.metadataValueToObject = exports.easeInOutCubic = exports.copyToClipboard = exports.downloadSnapshot = 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
49
|
var constants_1 = require("./constants");
|
|
14
50
|
var generateClassName = function (baseClass) {
|
|
15
51
|
return function (component, customClassName, title) {
|
|
@@ -29,7 +65,7 @@ exports.generateLayoutClassName = (0, exports.generateClassName)(constants_1.LAY
|
|
|
29
65
|
exports.generateToolClassName = (0, exports.generateClassName)(constants_1.TOOL_CLASS_NAME);
|
|
30
66
|
exports.generateDisplayClassName = (0, exports.generateClassName)(constants_1.DISPLAY_CLASS_NAME);
|
|
31
67
|
exports.generateFormClassName = (0, exports.generateClassName)(constants_1.FORM_CLASS_NAME);
|
|
32
|
-
var
|
|
68
|
+
var isJsonString = function (str) {
|
|
33
69
|
try {
|
|
34
70
|
JSON.parse(str);
|
|
35
71
|
}
|
|
@@ -38,7 +74,7 @@ var IsJsonString = function (str) {
|
|
|
38
74
|
}
|
|
39
75
|
return true;
|
|
40
76
|
};
|
|
41
|
-
exports.
|
|
77
|
+
exports.isJsonString = isJsonString;
|
|
42
78
|
var isObject = function (object) {
|
|
43
79
|
return object != null && typeof object === 'object';
|
|
44
80
|
};
|
|
@@ -50,7 +86,7 @@ var objectToQueryStr = function (obj) {
|
|
|
50
86
|
if (i)
|
|
51
87
|
output += '&';
|
|
52
88
|
if (val !== undefined)
|
|
53
|
-
output += "".concat(key, "=").concat((0, exports.
|
|
89
|
+
output += "".concat(key, "=").concat((0, exports.isJsonString)(val) ? JSON.stringify(val) : val);
|
|
54
90
|
return output;
|
|
55
91
|
}, '?');
|
|
56
92
|
};
|
|
@@ -62,7 +98,7 @@ var getParams = function () {
|
|
|
62
98
|
if (!(key === null || key === void 0 ? void 0 : key.length))
|
|
63
99
|
return output;
|
|
64
100
|
var preppedValue = decodeURIComponent(value);
|
|
65
|
-
output[decodeURIComponent(key)] = (0, exports.
|
|
101
|
+
output[decodeURIComponent(key)] = (0, exports.isJsonString)(preppedValue)
|
|
66
102
|
? JSON.parse(preppedValue)
|
|
67
103
|
: preppedValue;
|
|
68
104
|
return output;
|
|
@@ -225,6 +261,27 @@ var dataURItoFile = function (dataURI, filename) {
|
|
|
225
261
|
return new File([u8arr], filename, { type: mime });
|
|
226
262
|
};
|
|
227
263
|
exports.dataURItoFile = dataURItoFile;
|
|
264
|
+
var downloadSnapshot = function (snapshot, filename) { return __awaiter(void 0, void 0, void 0, function () {
|
|
265
|
+
var blob, blobUrl, link, clickHandler;
|
|
266
|
+
return __generator(this, function (_a) {
|
|
267
|
+
blob = (0, exports.dataURItoBlob)(snapshot);
|
|
268
|
+
blobUrl = URL.createObjectURL(blob);
|
|
269
|
+
link = document.createElement('a');
|
|
270
|
+
link.href = blobUrl;
|
|
271
|
+
link.download = filename;
|
|
272
|
+
clickHandler = function () {
|
|
273
|
+
setTimeout(function () {
|
|
274
|
+
URL.revokeObjectURL(blobUrl);
|
|
275
|
+
link.removeEventListener('click', clickHandler);
|
|
276
|
+
}, 150);
|
|
277
|
+
};
|
|
278
|
+
link.addEventListener('click', clickHandler);
|
|
279
|
+
document.body.appendChild(link);
|
|
280
|
+
link.click();
|
|
281
|
+
return [2 /*return*/];
|
|
282
|
+
});
|
|
283
|
+
}); };
|
|
284
|
+
exports.downloadSnapshot = downloadSnapshot;
|
|
228
285
|
var copyToClipboard = function (data) {
|
|
229
286
|
if (!data)
|
|
230
287
|
return;
|
|
@@ -252,59 +309,6 @@ var metadataValueToObject = function (data) {
|
|
|
252
309
|
}, {});
|
|
253
310
|
};
|
|
254
311
|
exports.metadataValueToObject = metadataValueToObject;
|
|
255
|
-
/**
|
|
256
|
-
* A function to load the Threekit JS Player API script
|
|
257
|
-
*
|
|
258
|
-
* @param threekitDomain The threekit environement to use. i.e. preview.threekit.com
|
|
259
|
-
* @returns
|
|
260
|
-
*/
|
|
261
|
-
var createThreekitScriptEl = function (threekitDomain) {
|
|
262
|
-
return new Promise(function (resolve) {
|
|
263
|
-
var script = document.createElement('script');
|
|
264
|
-
script.src = "".concat(threekitDomain, "/app/js/threekit-player-bundle.js");
|
|
265
|
-
script.id = 'threekit-player-bundle';
|
|
266
|
-
script.onload = function () { return resolve(); };
|
|
267
|
-
document.head.appendChild(script);
|
|
268
|
-
});
|
|
269
|
-
};
|
|
270
|
-
exports.createThreekitScriptEl = createThreekitScriptEl;
|
|
271
|
-
var translateAttribute = function (attributes, translations, language) {
|
|
272
|
-
var hasTranslation = !!language && !!translations;
|
|
273
|
-
return attributes.reduce(function (output, attribute) {
|
|
274
|
-
var _a;
|
|
275
|
-
var _b;
|
|
276
|
-
return Object.assign(output, (_a = {},
|
|
277
|
-
_a[attribute.name] = Object.assign({}, attribute, {
|
|
278
|
-
label: hasTranslation
|
|
279
|
-
? ((_b = translations === null || translations === void 0 ? void 0 : translations[attribute.name]) === null || _b === void 0 ? void 0 : _b[language]) || attribute.name
|
|
280
|
-
: attribute.name,
|
|
281
|
-
}, attribute.type === 'String'
|
|
282
|
-
? {
|
|
283
|
-
values: attribute.values.map(function (el) {
|
|
284
|
-
var _a;
|
|
285
|
-
return Object.assign({}, el, {
|
|
286
|
-
label: hasTranslation
|
|
287
|
-
? ((_a = translations === null || translations === void 0 ? void 0 : translations[el.label]) === null || _a === void 0 ? void 0 : _a[language]) || el.label
|
|
288
|
-
: attribute.name,
|
|
289
|
-
});
|
|
290
|
-
}),
|
|
291
|
-
}
|
|
292
|
-
: attribute.type === 'Asset'
|
|
293
|
-
? {
|
|
294
|
-
values: attribute.values.map(function (el) {
|
|
295
|
-
var _a;
|
|
296
|
-
return Object.assign({}, el, {
|
|
297
|
-
label: hasTranslation
|
|
298
|
-
? ((_a = translations === null || translations === void 0 ? void 0 : translations[el.name]) === null || _a === void 0 ? void 0 : _a[language]) || el.name
|
|
299
|
-
: attribute.name,
|
|
300
|
-
});
|
|
301
|
-
}),
|
|
302
|
-
}
|
|
303
|
-
: undefined),
|
|
304
|
-
_a));
|
|
305
|
-
});
|
|
306
|
-
};
|
|
307
|
-
exports.translateAttribute = translateAttribute;
|
|
308
312
|
var selectionToConfiguration = function (value, attributeType) {
|
|
309
313
|
switch (attributeType) {
|
|
310
314
|
case constants_1.ATTRIBUTE_TYPES.number:
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@threekit-tools/treble",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.60",
|
|
4
4
|
"author": "Amaan Saeed",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"files": [
|
|
@@ -13,6 +13,14 @@
|
|
|
13
13
|
"publishConfig": {
|
|
14
14
|
"directory": "dist"
|
|
15
15
|
},
|
|
16
|
+
"jest": {
|
|
17
|
+
"verbose": true,
|
|
18
|
+
"globals": {
|
|
19
|
+
"ts-jest": {
|
|
20
|
+
"tsConfig": "tsconfig.json"
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
},
|
|
16
24
|
"scripts": {
|
|
17
25
|
"start": "tsc --watch",
|
|
18
26
|
"build": "tsc",
|
|
@@ -21,7 +29,8 @@
|
|
|
21
29
|
"build-storybook": "build-storybook -o build",
|
|
22
30
|
"lint": "eslint ./src",
|
|
23
31
|
"check-format": "prettier -c ./src",
|
|
24
|
-
"format": "prettier --write ./src"
|
|
32
|
+
"format": "prettier --write ./src",
|
|
33
|
+
"test": "jest"
|
|
25
34
|
},
|
|
26
35
|
"dependencies": {
|
|
27
36
|
"@reduxjs/toolkit": "^1.6.2",
|
|
@@ -40,18 +49,24 @@
|
|
|
40
49
|
"@storybook/addon-links": "^6.3.12",
|
|
41
50
|
"@storybook/addon-storysource": "^6.3.12",
|
|
42
51
|
"@storybook/react": "^6.3.12",
|
|
52
|
+
"@testing-library/jest-dom": "^5.16.2",
|
|
53
|
+
"@testing-library/react": "^12.1.3",
|
|
54
|
+
"@types/jest": "^27.4.1",
|
|
43
55
|
"@types/node": "^16.10.3",
|
|
44
56
|
"@types/react": ">=17.0.27",
|
|
45
57
|
"@types/react-dom": ">=17.0.9",
|
|
46
58
|
"@types/redux-logger": "^3.0.9",
|
|
47
59
|
"@types/styled-components": "^5.1.15",
|
|
48
60
|
"@types/webpack-env": "^1.16.3",
|
|
61
|
+
"babel-jest": "^27.5.1",
|
|
49
62
|
"babel-loader": "^8.2.2",
|
|
63
|
+
"jest": "^27.5.1",
|
|
50
64
|
"react": ">=17.0.2",
|
|
51
65
|
"react-dom": ">=17.0.2",
|
|
52
66
|
"rimraf": "^3.0.2",
|
|
53
67
|
"serve": "^12.0.1",
|
|
54
68
|
"storybook-addon-styled-component-theme": "^2.0.0",
|
|
69
|
+
"ts-jest": "^27.1.3",
|
|
55
70
|
"typescript": ">=4.4.4"
|
|
56
71
|
},
|
|
57
72
|
"gitHead": "2e16bcf98f81e16bb1768072fdb3968122e7966f"
|