@threekit-tools/treble 0.0.57 → 0.0.58

package/dist/Treble/Snapshots.js

@@ -129,53 +129,12 @@ var Snapshots = /** @class */ (function () {
             }, Promise.resolve(snapshots));
         };
         this.takeSnapshots = function (camerasList, snapshotsConfig) { return __awaiter(_this, void 0, void 0, function () {
-            function saveSnapshotToPlatform(snapshot, filename) {
-                return __awaiter(this, void 0, void 0, function () {
-                    var files, response;
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0:
-                                files = (0, utils_1.dataURItoFile)(snapshot, filename);
-                                return [4 /*yield*/, api_1.default.configurations.save({
-                                        assetId: window.threekit.player.assetId,
-                                        configuration: window.threekit.configurator.getConfiguration(),
-                                        files: files,
-                                    })];
-                            case 1:
-                                response = _a.sent();
-                                return [2 /*return*/, "".concat(threekitDomain, "/api/files/hash/").concat(response.data.thumbnail)];
-                        }
-                    });
-                });
-            }
-            function downloadSnapshot(snapshot, filename) {
-                return __awaiter(this, void 0, void 0, function () {
-                    var blob, blobUrl, link, clickHandler;
-                    return __generator(this, function (_a) {
-                        blob = (0, utils_1.dataURItoBlob)(snapshot);
-                        blobUrl = URL.createObjectURL(blob);
-                        link = document.createElement('a');
-                        link.href = blobUrl;
-                        link.download = filename;
-                        clickHandler = function () {
-                            setTimeout(function () {
-                                URL.revokeObjectURL(blobUrl);
-                                link.removeEventListener('click', clickHandler);
-                            }, 150);
-                        };
-                        link.addEventListener('click', clickHandler);
-                        document.body.appendChild(link);
-                        link.click();
-                        return [2 /*return*/];
-                    });
-                });
-            }
-            var threekitDomain, filename, size, format, attributeName, output, cameras, snapshotsRaw, snapshotData, camerasMap_1, currentCamera, cameraPosition, _a, savedSnapshots, snapshotBlobs, snapshotFiles;
-            var _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
+            var _a, threekitDomain, orgId, filename, size, format, attributeName, output, cameras, snapshotsRaw, snapshotData, camerasMap_1, currentCamera, cameraPosition, _b, attachments, response_1, urlsArray, snapshotBlobs, snapshotFiles;
+            var _c;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
                     case 0:
-                        threekitDomain = connection_1.default.getConnection().threekitDomain;
+                        _a = connection_1.default.getConnection(), threekitDomain = _a.threekitDomain, orgId = _a.orgId;
                         filename = (snapshotsConfig === null || snapshotsConfig === void 0 ? void 0 : snapshotsConfig.filename) || DEFAULT_CAMERA_CONFIG.filename;
                         size = (snapshotsConfig === null || snapshotsConfig === void 0 ? void 0 : snapshotsConfig.size) || DEFAULT_CAMERA_CONFIG.size;
                         format = (snapshotsConfig === null || snapshotsConfig === void 0 ? void 0 : snapshotsConfig.format) || DEFAULT_CAMERA_CONFIG.format;
@@ -185,7 +144,7 @@ var Snapshots = /** @class */ (function () {
                         if (!(cameras.length === 1 && cameras[0] === undefined)) return [3 /*break*/, 2];
                         return [4 /*yield*/, this.getSnapshot({ size: size, format: format })];
                     case 1:
-                        snapshotData = _c.sent();
+                        snapshotData = _d.sent();
                         snapshotsRaw = [snapshotData];
                         return [3 /*break*/, 5];
                     case 2:
@@ -197,17 +156,17 @@ var Snapshots = /** @class */ (function () {
                         cameraPosition = (0, utils_1.getCameraPosition)(window.threekit.player.camera);
                         return [4 /*yield*/, this.getSnapshots(cameras, camerasMap_1)];
                     case 3:
-                        snapshotsRaw = _c.sent();
-                        return [4 /*yield*/, window.threekit.configurator.setConfiguration((_b = {},
-                                _b[attributeName] = currentCamera,
-                                _b))];
+                        snapshotsRaw = _d.sent();
+                        return [4 /*yield*/, window.threekit.configurator.setConfiguration((_c = {},
+                                _c[attributeName] = currentCamera,
+                                _c))];
                     case 4:
-                        _c.sent();
+                        _d.sent();
                         (0, utils_1.setCameraPosition)(window.threekit.player.camera, cameraPosition);
-                        _c.label = 5;
+                        _d.label = 5;
                     case 5:
-                        _a = output;
-                        switch (_a) {
+                        _b = output;
+                        switch (_b) {
                             case constants_1.SNAPSHOT_OUTPUTS.url: return [3 /*break*/, 6];
                             case constants_1.SNAPSHOT_OUTPUTS.download: return [3 /*break*/, 8];
                             case constants_1.SNAPSHOT_OUTPUTS.blob: return [3 /*break*/, 9];
@@ -215,21 +174,32 @@ var Snapshots = /** @class */ (function () {
                             case constants_1.SNAPSHOT_OUTPUTS.dataUrl: return [3 /*break*/, 11];
                         }
                         return [3 /*break*/, 11];
-                    case 6: return [4 /*yield*/, Promise.all(snapshotsRaw.map(function (snapshotBlob, idx) {
+                    case 6:
+                        attachments = snapshotsRaw.reduce(function (output, el, idx) {
+                            var _a;
                             var cameraName = (camerasList === null || camerasList === void 0 ? void 0 : camerasList[idx])
-                                ? "-".concat((0, utils_1.regularToKebabCase)(camerasList[idx] || 'default'))
+                                ? (0, utils_1.regularToKebabCase)(camerasList[idx] || 'default')
                                 : '';
-                            return saveSnapshotToPlatform(snapshotBlob, "".concat(filename).concat(cameraName, ".").concat(format));
-                        }))];
+                            var file = (0, utils_1.dataURItoFile)(el, "".concat(filename, "-").concat(cameraName, ".").concat(format));
+                            return Object.assign(output, (_a = {}, _a[cameraName] = file, _a));
+                        }, {});
+                        return [4 /*yield*/, api_1.default.configurations.save({
+                                assetId: window.threekit.player.assetId,
+                                configuration: window.threekit.configurator.getConfiguration(),
+                                attachments: attachments,
+                            })];
                     case 7:
-                        savedSnapshots = _c.sent();
-                        return [2 /*return*/, Promise.resolve(savedSnapshots)];
+                        response_1 = _d.sent();
+                        urlsArray = Object.keys(response_1.data.attachments).map(function (key) {
+                            return "".concat(threekitDomain, "/api/configurations/").concat(response_1.data.shortId, "/files/").concat(key, "?orgId=").concat(orgId);
+                        });
+                        return [2 /*return*/, Promise.resolve(urlsArray)];
                     case 8:
                         snapshotsRaw.forEach(function (snapshotBlob, idx) {
                             var cameraName = (camerasList === null || camerasList === void 0 ? void 0 : camerasList[idx])
                                 ? "-".concat((0, utils_1.regularToKebabCase)(camerasList[idx] || 'default'))
                                 : '';
-                            downloadSnapshot(snapshotBlob, "".concat(filename).concat(cameraName, ".").concat(format));
+                            (0, utils_1.downloadSnapshot)(snapshotBlob, "".concat(filename).concat(cameraName, ".").concat(format));
                         });
                         return [2 /*return*/, Promise.resolve()];
                     case 9:
@@ -244,7 +214,6 @@ var Snapshots = /** @class */ (function () {
                         });
                         return [2 /*return*/, Promise.resolve(snapshotFiles)];
                     case 11: return [2 /*return*/, Promise.resolve(snapshotsRaw)];
-                    case 12: return [2 /*return*/];
                 }
             });
         }); };

package/dist/Treble/Treble.d.ts

@@ -1,17 +1,13 @@
 import threekitAPI from '../api';
-import { IThreekitPlayer, IMetadata, IConfiguration, ISetConfiguration } from '../threekit';
+import { IThreekitPlayer, IConfiguration, ISetConfiguration } from '../threekit';
 import { IWishlist } from './Wishlist';
 import Snapshots from './Snapshots';
+import { ISaveConfiguration } from '../api/configurations';
 interface ITreble {
     player: IThreekitPlayer;
     orgId: string;
     initialConfiguration: IConfiguration;
 }
-export interface ISaveConfigurationConfig {
-    customerId?: string;
-    metadata?: IMetadata;
-    productVersion?: string;
-}
 declare class Treble {
     _api: typeof threekitAPI;
     _player: IThreekitPlayer;
@@ -20,7 +16,7 @@ declare class Treble {
     private _snapshots;
     takeSnapshots: Snapshots['takeSnapshots'];
     constructor({ player, orgId, initialConfiguration }: ITreble);
-    saveConfiguration: (config?: ISaveConfigurationConfig | undefined) => Promise<{
+    saveConfiguration: (config?: Omit<ISaveConfiguration, "configuration"> | undefined) => Promise<{
         resumableUrl: string;
     } & import("../http/configurations").IConfigurationResponse & {
         thumbnail: string;

package/dist/Treble/Treble.js

@@ -50,22 +50,21 @@ var Treble = /** @class */ (function () {
         var _this = this;
         var player = _a.player, orgId = _a.orgId, initialConfiguration = _a.initialConfiguration;
         this.saveConfiguration = function (config) { return __awaiter(_this, void 0, void 0, function () {
-            var threekitDomain, _a, customerId, metadata, productVersion, files, response, params, url;
+            var threekitDomain, _a, customerId, metadata, productVersion, attachments, response, params, url;
             var _b;
             var _c;
             return __generator(this, function (_d) {
                 switch (_d.label) {
                     case 0:
                         threekitDomain = connection_1.default.getConnection().threekitDomain;
-                        _a = Object.assign({}, config), customerId = _a.customerId, metadata = _a.metadata, productVersion = _a.productVersion;
-                        files = undefined;
+                        _a = Object.assign({}, config), customerId = _a.customerId, metadata = _a.metadata, productVersion = _a.productVersion, attachments = _a.attachments;
                         return [4 /*yield*/, api_1.default.configurations.save({
                                 assetId: window.threekit.player.assetId,
                                 configuration: window.threekit.configurator.getConfiguration(),
                                 customerId: customerId,
                                 metadata: metadata,
                                 productVersion: productVersion,
-                                files: files,
+                                attachments: attachments,
                             })];
                     case 1:
                         response = _d.sent();

package/dist/Treble/Wishlist.d.ts

@@ -1,9 +1,9 @@
 import { IConfigurationResponse } from '../http/configurations';
-import { ISaveConfigurationConfig } from './Treble';
+import { ISaveConfiguration } from '../api/configurations';
 export declare type WishlistArray = Array<IConfigurationResponse>;
 export interface IWishlist {
     getWishlist(): Promise<Array<IConfigurationResponse>>;
-    addItem(config?: ISaveConfigurationConfig): Promise<Array<IConfigurationResponse>>;
+    addItem(config?: Omit<ISaveConfiguration, 'configurator'>): Promise<Array<IConfigurationResponse>>;
     removeItemByIdx(idx: number): Array<IConfigurationResponse>;
     clearWishlist(): Array<IConfigurationResponse>;
 }
@@ -11,7 +11,7 @@ declare class Wishlist implements IWishlist {
     _wishlistKey: string;
     constructor(orgId: string);
     getWishlist: () => Promise<WishlistArray>;
-    addItem: (config?: ISaveConfigurationConfig | undefined) => Promise<WishlistArray>;
+    addItem: (config?: Omit<ISaveConfiguration, "configurator"> | undefined) => Promise<WishlistArray>;
     removeItemByIdx: (idx: number) => WishlistArray;
     clearWishlist: () => WishlistArray;
 }

package/dist/Treble/Wishlist.js

@@ -128,6 +128,7 @@ var Wishlist = /** @class */ (function () {
         };
         this._wishlistKey = "".concat(constants_1.WISHLIST_LOCALSTORAGE_KEY, "_").concat(orgId);
         this.getWishlist();
+        return this;
     }
     return Wishlist;
 }());

package/dist/api/configurations.d.ts

@@ -1,14 +1,13 @@
 import { IConfigurationResponse } from '../http/configurations';
 import { IConfiguration, IMetadata } from '../threekit';
-interface ISaveConfiguration {
+export interface ISaveConfiguration {
     assetId: string;
     customerId?: string;
     configuration: IConfiguration;
     metadata?: IMetadata;
     productVersion?: string;
-    files?: File;
+    attachments?: Record<string, File>;
 }
 export declare const save: (saveConfig: ISaveConfiguration) => Promise<import("axios").AxiosResponse<IConfigurationResponse>>;
 export declare const fetch: (configurationId: string) => Promise<import("axios").AxiosResponse<IConfigurationResponse>>;
 export declare const fetchAll: () => Promise<IConfigurationResponse[]>;
-export {};

package/dist/api/configurations.js

@@ -42,30 +42,36 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.fetchAll = exports.fetch = exports.save = void 0;
 var http_1 = __importDefault(require("../http"));
 var save = function (saveConfig) { return __awaiter(void 0, void 0, void 0, function () {
-    var assetId, customerId, configuration, metadata, productVersion, files, error, fd;
+    var assetId, customerId, configuration, metadata, productVersion, attachments, error, fd, attachmentsPrepped_1;
     return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                assetId = saveConfig.assetId, customerId = saveConfig.customerId, configuration = saveConfig.configuration, metadata = saveConfig.metadata, productVersion = saveConfig.productVersion, files = saveConfig.files;
-                if (!assetId)
-                    error = 'Requires Asset Id';
-                if (!configuration)
-                    error = 'Requires a configuration';
-                if (error)
-                    throw new Error(error);
-                fd = new FormData();
-                fd.append('productId', assetId);
-                fd.append('variant', JSON.stringify(configuration));
-                fd.append('productVersion', productVersion || 'v1');
-                if (metadata && Object.keys(metadata))
-                    fd.append('metadata', JSON.stringify(metadata));
-                if (customerId)
-                    fd.append('customerId', customerId);
-                if (files)
-                    fd.append('files', files);
-                return [4 /*yield*/, http_1.default.configurations.postConfiguration(fd)];
-            case 1: return [2 /*return*/, _a.sent()];
+        assetId = saveConfig.assetId, customerId = saveConfig.customerId, configuration = saveConfig.configuration, metadata = saveConfig.metadata, productVersion = saveConfig.productVersion, attachments = saveConfig.attachments;
+        if (!assetId)
+            error = 'Requires Asset Id';
+        if (!configuration)
+            error = 'Requires a configuration';
+        if (error)
+            throw new Error(error);
+        fd = new FormData();
+        fd.append('productId', assetId);
+        fd.append('variant', JSON.stringify(configuration));
+        fd.append('productVersion', productVersion || 'v1');
+        if (metadata && Object.keys(metadata))
+            fd.append('metadata', JSON.stringify(metadata));
+        if (customerId)
+            fd.append('customerId', customerId);
+        if (attachments && Object.keys(attachments).length) {
+            attachmentsPrepped_1 = {};
+            Object.entries(attachments).forEach(function (_a) {
+                var _b;
+                var key = _a[0], file = _a[1];
+                fd.append('files', file);
+                attachmentsPrepped_1 = Object.assign({}, attachmentsPrepped_1, (_b = {},
+                    _b[key] = file.name,
+                    _b));
+            });
+            fd.append('attachments', JSON.stringify(attachmentsPrepped_1));
         }
+        return [2 /*return*/, http_1.default.configurations.postConfiguration(fd)];
     });
 }); };
 exports.save = save;

package/dist/hooks/useSingleAnimation/index.d.ts

@@ -0,0 +1,17 @@
+import { ICoordinates } from '../../threekit';
+interface NodeConfig {
+    nodeId: string;
+    paddingStart: number;
+    paddingEnd: number;
+    delay: number;
+    duration: number;
+    translation: ICoordinates;
+    rotation: ICoordinates;
+    scale: ICoordinates;
+}
+interface AnimationConfig {
+    duration: number;
+    nodes: Array<NodeConfig>;
+}
+declare const useAnimation: (animationConfig: AnimationConfig) => undefined[] | (boolean | (() => Promise<void>))[];
+export default useAnimation;

package/dist/hooks/useSingleAnimation/index.js

@@ -0,0 +1,264 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            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;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var useThreekitInitStatus_1 = __importDefault(require("../useThreekitInitStatus"));
+var utils_1 = require("../../utils");
+var prepAnimateConfig = function (config) {
+    return new Promise(function (resolve) { return __awaiter(void 0, void 0, void 0, function () {
+        var totalDuration, player, assetId, nodesRaw, nodes;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    totalDuration = config.duration * 1000 || 0;
+                    player = window.threekit.player.enableApi('player');
+                    return [4 /*yield*/, player.getAssetInstance(window.threekit.player.scene.find({
+                            id: window.threekit.player.instanceId,
+                            plug: 'Proxy',
+                            property: 'asset',
+                        }))];
+                case 1:
+                    assetId = _a.sent();
+                    nodesRaw = Object.entries(config.nodes).reduce(function (output, _a) {
+                        var _b;
+                        var name = _a[0], nodeData = _a[1];
+                        var nodeId = window.threekit.player.scene.get({
+                            from: assetId,
+                            name: name,
+                        }).id;
+                        var node = Object.assign({ nodeId: nodeId }, { duration: (nodeData.duration || config.duration || 0) * 1000 }, { paddingStart: (nodeData.delay || 0) * 1000 }, 'translation' in nodeData
+                            ? {
+                                translation: [
+                                    window.threekit.player.scene.get({
+                                        from: assetId,
+                                        id: nodeId,
+                                        plug: 'Transform',
+                                        property: 'translation',
+                                    }),
+                                    Object.assign({ x: 0, y: 0, z: 0 }, nodeData.translation),
+                                ],
+                            }
+                            : {}, 'rotation' in nodeData
+                            ? {
+                                rotation: [
+                                    window.threekit.player.scene.get({
+                                        from: assetId,
+                                        id: nodeId,
+                                        plug: 'Transform',
+                                        property: 'rotation',
+                                    }),
+                                    Object.assign({ x: 0, y: 0, z: 0 }, nodeData.rotation),
+                                ],
+                            }
+                            : {}, 'scale' in nodeData
+                            ? {
+                                scale: [
+                                    window.threekit.player.scene.get({
+                                        from: assetId,
+                                        id: nodeId,
+                                        plug: 'Transform',
+                                        property: 'scale',
+                                    }),
+                                    Object.assign({ x: 0, y: 0, z: 0 }, nodeData.scale),
+                                ],
+                            }
+                            : {});
+                        var duration = node.duration + node.paddingStart;
+                        if (duration > totalDuration)
+                            totalDuration = duration;
+                        return Object.assign(output, (_b = {}, _b[name] = node, _b));
+                    }, {});
+                    nodes = Object.entries(nodesRaw).reduce(function (output, _a) {
+                        var _b;
+                        var nodeName = _a[0], nodeData = _a[1];
+                        var paddingEnd = 0;
+                        if (totalDuration !== nodeData.duration + nodeData.paddingStart)
+                            paddingEnd =
+                                totalDuration - (nodeData.duration + nodeData.paddingStart);
+                        return Object.assign(output, (_b = {},
+                            _b[nodeName] = __assign(__assign({}, nodeData), { paddingEnd: paddingEnd }),
+                            _b));
+                    }, {});
+                    resolve([assetId, totalDuration, nodes]);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+};
+var useAnimation = function (animationConfig) {
+    var _a = (0, react_1.useState)(false), animationInProgress = _a[0], setAnimationInProgress = _a[1];
+    var ref = (0, react_1.useRef)({
+        assetId: undefined,
+        startTime: 0,
+        totalDuration: 0,
+        nodes: {},
+        isTransformed: false,
+    });
+    var isLoaded = (0, useThreekitInitStatus_1.default)();
+    if (!isLoaded)
+        return [undefined, undefined];
+    var animateFrame = function (timestamp) {
+        // if (startTime.current === undefined) startTime.current = timestamp;
+        // const elapsed = timestamp - startTime.current;
+        if (ref.current.startTime === undefined)
+            ref.current.startTime = timestamp;
+        var elapsed = timestamp - ref.current.startTime;
+        Object.values(ref.current.nodes).forEach(function (nodeConfig) {
+            if (!ref.current.isTransformed) {
+                //    If its too early we don't animate
+                if (elapsed < nodeConfig.paddingStart)
+                    return;
+                //    If its too early we don't animate
+                if (elapsed > nodeConfig.duration + nodeConfig.paddingStart)
+                    return;
+            }
+            else if (ref.current.isTransformed) {
+                //    If its too early we don't animate
+                if (elapsed < nodeConfig.paddingEnd)
+                    return;
+                //    If its too early we don't animate
+                if (elapsed > nodeConfig.duration + nodeConfig.paddingEnd)
+                    return;
+            }
+            var progressTime = !ref.current.isTransformed
+                ? elapsed - nodeConfig.paddingStart
+                : elapsed - nodeConfig.paddingEnd;
+            var animationPercent = (0, utils_1.easeInOutCubic)(progressTime / nodeConfig.duration);
+            var translation;
+            var rotation;
+            var scale;
+            if ('translation' in nodeConfig) {
+                translation = Object.keys(nodeConfig.translation[1]).reduce(function (output, axis) {
+                    var _a;
+                    var value = !ref.current.isTransformed
+                        ? nodeConfig.translation[0][axis] +
+                            nodeConfig.translation[1][axis] * animationPercent
+                        : nodeConfig.translation[1][axis] +
+                            nodeConfig.translation[0][axis] -
+                            nodeConfig.translation[1][axis] * animationPercent;
+                    return Object.assign(output, (_a = {}, _a[axis] = value, _a));
+                }, {});
+                window.threekit.player.scene.set({
+                    from: ref.current.assetId,
+                    id: nodeConfig.nodeId,
+                    plug: 'Transform',
+                    property: 'translation',
+                }, translation);
+            }
+            if ('rotation' in nodeConfig) {
+                rotation = Object.keys(nodeConfig.rotation[1]).reduce(function (output, axis) {
+                    var _a;
+                    var value = !ref.current.isTransformed
+                        ? nodeConfig.rotation[0][axis] +
+                            nodeConfig.rotation[1][axis] * animationPercent
+                        : nodeConfig.rotation[1][axis] +
+                            nodeConfig.rotation[0][axis] -
+                            nodeConfig.rotation[1][axis] * animationPercent;
+                    return Object.assign(output, (_a = {}, _a[axis] = value, _a));
+                }, {});
+                window.threekit.player.scene.set({
+                    from: ref.current.assetId,
+                    id: nodeConfig.nodeId,
+                    plug: 'Transform',
+                    property: 'rotation',
+                }, rotation);
+            }
+            if ('scale' in nodeConfig) {
+                scale = Object.keys(nodeConfig.scale[1]).reduce(function (output, axis) {
+                    var _a;
+                    var value = !ref.current.isTransformed
+                        ? nodeConfig.scale[0][axis] +
+                            nodeConfig.scale[1][axis] * animationPercent
+                        : nodeConfig.scale[1][axis] +
+                            nodeConfig.scale[0][axis] -
+                            nodeConfig.scale[1][axis] * animationPercent;
+                    return Object.assign(output, (_a = {}, _a[axis] = value, _a));
+                }, {});
+                window.threekit.player.scene.set({
+                    from: ref.current.assetId,
+                    id: nodeConfig.nodeId,
+                    plug: 'Transform',
+                    property: 'scale',
+                }, scale);
+            }
+        });
+        if (elapsed < ref.current.totalDuration) {
+            window.requestAnimationFrame(animateFrame);
+        }
+        else {
+            setAnimationInProgress(false);
+            ref.current.startTime = undefined;
+            ref.current.isTransformed = !ref.current.isTransformed;
+        }
+    };
+    var handleClickAnimate = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    ref.current.startTime = undefined;
+                    if (!!ref.current.nodes) return [3 /*break*/, 2];
+                    return [4 /*yield*/, prepAnimateConfig(animationConfig)];
+                case 1:
+                    _a = _b.sent(), ref.current.assetId = _a[0], ref.current.totalDuration = _a[1], ref.current.nodes = _a[2];
+                    ref.current.isTransformed = false;
+                    _b.label = 2;
+                case 2:
+                    setAnimationInProgress(true);
+                    window.requestAnimationFrame(animateFrame);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return [animationInProgress, handleClickAnimate];
+};
+exports.default = useAnimation;

package/dist/hooks/useWishlist/index.d.ts

@@ -1,7 +1,8 @@
-import { ISaveConfigurationConfig, WishlistArray } from '../../Treble';
+import { WishlistArray } from '../../Treble';
+import { ISaveConfiguration } from '../../api/configurations';
 declare type UseWishlistHook = [
     WishlistArray,
-    (config?: ISaveConfigurationConfig) => void,
+    (config?: Omit<ISaveConfiguration, 'configurator'>) => void,
     (idx: number) => void,
     (idx: number) => void,
     (idx: number) => void,

package/dist/hooks/useWishlist/index.js

@@ -14,9 +14,7 @@ var useWishlist = function () {
     var wishlist = (0, store_1.useThreekitSelector)(wishlist_1.getWishlist);
     if (!isLoaded)
         return [undefined, undefined, undefined, undefined, undefined, undefined];
-    var handleAddToWishlist = function (config) {
-        return dispatch((0, wishlist_1.addToWishlist)(config));
-    };
+    var handleAddToWishlist = function (config) { return dispatch((0, wishlist_1.addToWishlist)(config)); };
     var handleRemoveFromWishlist = function (idx) {
         dispatch((0, wishlist_1.removeFromWishlist)(idx));
         message_1.default.info('Item removed from wishlist');

package/dist/http/configurations.d.ts

@@ -13,6 +13,7 @@ export interface IConfigurationResponse {
     shortId: string;
     thumbnail: null | string;
     variant: IConfiguration;
+    attachments: Record<string, string>;
 }
 interface IConfigurationsResponse extends IMultiPageResponse {
     configurations: Array<IConfigurationResponse>;

package/dist/index.js

@@ -39,6 +39,7 @@ var useShare_1 = __importDefault(require("./hooks/useShare"));
 exports.useShare = useShare_1.default;
 var usePlayerPortal_1 = __importDefault(require("./hooks/usePlayerPortal"));
 exports.usePlayerPortal = usePlayerPortal_1.default;
+// import useSingleAnimation from './hooks/useSingleAnimation';
 //  Components
 var ThreekitProvider_1 = __importDefault(require("./components/ThreekitProvider"));
 exports.ThreekitProvider = ThreekitProvider_1.default;

package/dist/store/price.js

@@ -55,9 +55,9 @@ var initPrice = function () { return function (dispatch) { return __awaiter(void
             case 0: return [4 /*yield*/, api_1.default.price.getPricebooksList()];
             case 1:
                 pricebook = _a.sent();
-                id = pricebook[0].id;
-                currency = pricebook[0].currencies[0];
                 if (pricebook.length) {
+                    id = pricebook[0].id;
+                    currency = pricebook[0].currencies[0];
                     dispatch((0, exports.setPriceConfig)({ id: id, currency: currency }));
                     price = window.threekit.configurator.getPrice(id, currency);
                     dispatch((0, exports.setPrice)(price));

package/dist/store/wishlist.d.ts

@@ -1,5 +1,6 @@
 import { RootState, ThreekitDispatch } from './index';
-import { ISaveConfigurationConfig, WishlistArray } from '../Treble';
+import { WishlistArray } from '../Treble';
+import { ISaveConfiguration } from '../api/configurations';
 /*****************************************************
  * Types and Interfaces
  ****************************************************/
@@ -8,7 +9,7 @@ export declare type WishlistState = WishlistArray;
  * Standard Selectors
  ****************************************************/
 export declare const refreshWishlist: import("@reduxjs/toolkit").AsyncThunk<import("../http/configurations").IConfigurationResponse[], void, {}>;
-export declare const addToWishlist: import("@reduxjs/toolkit").AsyncThunk<import("../http/configurations").IConfigurationResponse[], ISaveConfigurationConfig, {}>;
+export declare const addToWishlist: import("@reduxjs/toolkit").AsyncThunk<import("../http/configurations").IConfigurationResponse[], Omit<ISaveConfiguration, "configurator">, {}>;
 export declare const clearWishlist: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[], import("../http/configurations").IConfigurationResponse[], "treble/wishlist/clear", never, never>;
 export declare const removeFromWishlist: import("@reduxjs/toolkit").ActionCreatorWithPreparedPayload<[idx: number], import("../http/configurations").IConfigurationResponse[], "treble/wishlist/remove-item", never, never>;
 /*****************************************************

package/dist/threekit.d.ts

@@ -20,7 +20,7 @@ export interface ISceneQuery {
     child?: string;
     parent?: boolean;
     includeParent?: boolean;
-    from?: ISceneQuery;
+    from?: string | ISceneQuery;
     hasPlug?: string;
     operator?: any;
     operatorIndex?: number;
@@ -36,6 +36,7 @@ export interface ISceneQuery {
     hierarchial?: boolean;
 }
 export interface ISceneResult {
+    id: string;
     name: string;
     configurator: IThreekitPrivateConfigurator;
 }
@@ -160,6 +161,8 @@ export interface IThreekitScene {
         RENDERED: 'rendered';
     };
     get: (query: ISceneQuery | string) => ISceneResult;
+    find: (query: ISceneQuery | string) => ISceneResult;
+    set: (query: ISceneQuery | string, transform: ICoordinates) => void;
 }
 export interface IThreekitTools {
     addTool: (tool: string) => void;

package/dist/utils.d.ts

@@ -22,7 +22,7 @@ export declare const generateLayoutClassName: (component: string, customClassNam
 export declare const generateToolClassName: (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
 export declare const generateDisplayClassName: (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
 export declare const generateFormClassName: (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
-export declare const IsJsonString: (str: string) => boolean;
+export declare const isJsonString: (str: string) => boolean;
 export declare const objectToQueryStr: (obj: Record<string, any>) => string;
 export declare const getParams: () => Record<string, string | {
     [key: string]: any;
@@ -43,6 +43,7 @@ export declare const getCameraPosition: (cameraApi: IThreekitCamera) => {
 export declare const setCameraPosition: (cameraApi: IThreekitCamera, cameraPosition: ICameraPosition) => void;
 export declare const dataURItoBlob: (dataURI: string) => Blob;
 export declare const dataURItoFile: (dataURI: string, filename: string) => File;
+export declare const downloadSnapshot: (snapshot: string, filename: string) => Promise<void>;
 export declare const copyToClipboard: (data: string | Record<string, string | number | boolean>) => void;
 export declare const easeInOutCubic: (val: number) => number;
 export declare const metadataValueToObject: (data: string) => Record<string, string | number>;

package/dist/utils.js

@@ -1,4 +1,40 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            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;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -9,7 +45,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+exports.loadTrebleConfig = exports.isUuid = exports.filterFormAttributes = exports.selectionToConfiguration = exports.translateAttribute = exports.createThreekitScriptEl = 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;
 var constants_1 = require("./constants");
 var generateClassName = function (baseClass) {
     return function (component, customClassName, title) {
@@ -29,7 +65,7 @@ exports.generateLayoutClassName = (0, exports.generateClassName)(constants_1.LAY
 exports.generateToolClassName = (0, exports.generateClassName)(constants_1.TOOL_CLASS_NAME);
 exports.generateDisplayClassName = (0, exports.generateClassName)(constants_1.DISPLAY_CLASS_NAME);
 exports.generateFormClassName = (0, exports.generateClassName)(constants_1.FORM_CLASS_NAME);
-var IsJsonString = function (str) {
+var isJsonString = function (str) {
     try {
         JSON.parse(str);
     }
@@ -38,7 +74,7 @@ var IsJsonString = function (str) {
     }
     return true;
 };
-exports.IsJsonString = IsJsonString;
+exports.isJsonString = isJsonString;
 var isObject = function (object) {
     return object != null && typeof object === 'object';
 };
@@ -50,7 +86,7 @@ var objectToQueryStr = function (obj) {
         if (i)
             output += '&';
         if (val !== undefined)
-            output += "".concat(key, "=").concat((0, exports.IsJsonString)(val) ? JSON.stringify(val) : val);
+            output += "".concat(key, "=").concat((0, exports.isJsonString)(val) ? JSON.stringify(val) : val);
         return output;
     }, '?');
 };
@@ -62,7 +98,7 @@ var getParams = function () {
         if (!(key === null || key === void 0 ? void 0 : key.length))
             return output;
         var preppedValue = decodeURIComponent(value);
-        output[decodeURIComponent(key)] = (0, exports.IsJsonString)(preppedValue)
+        output[decodeURIComponent(key)] = (0, exports.isJsonString)(preppedValue)
             ? JSON.parse(preppedValue)
             : preppedValue;
         return output;
@@ -225,6 +261,27 @@ var dataURItoFile = function (dataURI, filename) {
     return new File([u8arr], filename, { type: mime });
 };
 exports.dataURItoFile = dataURItoFile;
+var downloadSnapshot = function (snapshot, filename) { return __awaiter(void 0, void 0, void 0, function () {
+    var blob, blobUrl, link, clickHandler;
+    return __generator(this, function (_a) {
+        blob = (0, exports.dataURItoBlob)(snapshot);
+        blobUrl = URL.createObjectURL(blob);
+        link = document.createElement('a');
+        link.href = blobUrl;
+        link.download = filename;
+        clickHandler = function () {
+            setTimeout(function () {
+                URL.revokeObjectURL(blobUrl);
+                link.removeEventListener('click', clickHandler);
+            }, 150);
+        };
+        link.addEventListener('click', clickHandler);
+        document.body.appendChild(link);
+        link.click();
+        return [2 /*return*/];
+    });
+}); };
+exports.downloadSnapshot = downloadSnapshot;
 var copyToClipboard = function (data) {
     if (!data)
         return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threekit-tools/treble",
-  "version": "0.0.57",
+  "version": "0.0.58",
   "author": "Amaan Saeed",
   "license": "MIT",
   "files": [
@@ -13,6 +13,14 @@
   "publishConfig": {
     "directory": "dist"
   },
+  "jest": {
+    "verbose": true,
+    "globals": {
+      "ts-jest": {
+        "tsConfig": "tsconfig.json"
+      }
+    }
+  },
   "scripts": {
     "start": "tsc --watch",
     "build": "tsc",
@@ -21,7 +29,8 @@
     "build-storybook": "build-storybook -o build",
     "lint": "eslint ./src",
     "check-format": "prettier -c ./src",
-    "format": "prettier --write ./src"
+    "format": "prettier --write ./src",
+    "test": "jest"
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.6.2",
@@ -40,18 +49,24 @@
     "@storybook/addon-links": "^6.3.12",
     "@storybook/addon-storysource": "^6.3.12",
     "@storybook/react": "^6.3.12",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.3",
+    "@types/jest": "^27.4.1",
     "@types/node": "^16.10.3",
     "@types/react": ">=17.0.27",
     "@types/react-dom": ">=17.0.9",
     "@types/redux-logger": "^3.0.9",
     "@types/styled-components": "^5.1.15",
     "@types/webpack-env": "^1.16.3",
+    "babel-jest": "^27.5.1",
     "babel-loader": "^8.2.2",
+    "jest": "^27.5.1",
     "react": ">=17.0.2",
     "react-dom": ">=17.0.2",
     "rimraf": "^3.0.2",
     "serve": "^12.0.1",
     "storybook-addon-styled-component-theme": "^2.0.0",
+    "ts-jest": "^27.1.3",
     "typescript": ">=4.4.4"
   },
   "gitHead": "2e16bcf98f81e16bb1768072fdb3968122e7966f"