@threekit-tools/treble 0.0.84 → 0.0.85-next-1

package/dist/Treble/Treble.d.ts

@@ -1,10 +1,10 @@
 import threekitAPI from '../api';
-import { IThreekitPlayer, IThreekitPrivatePlayer, IConfiguration, ISetConfiguration, IThreekitPrivateConfigurator } from '../types';
-import { IWishlist } from './wishlist';
+import type { IThreekitPlayer, IThreekitPrivatePlayer, IConfiguration, ISetConfiguration, IThreekitPrivateConfigurator } from '../types';
+import type { IWishlist } from './wishlist';
 import snapshots from './snapshots';
-import { ISaveConfiguration } from '../api/configurations';
-import { ICreateOrder } from '../api/orders';
-import { ICartItem } from '../http/orders';
+import type { ISaveConfiguration } from '../api/configurations';
+import type { ICreateOrder } from '../api/orders';
+import type { ICartItem } from '../http/orders';
 interface ITreble {
     player: IThreekitPlayer;
     orgId: string;
@@ -18,6 +18,9 @@ interface IEmailShareCredentials {
 interface IOrder extends Omit<ICreateOrder, 'cart'> {
     cart?: Array<ICartItem>;
 }
+interface ISaveConfigurationObject extends Omit<ISaveConfiguration, 'configuraiton'> {
+    saveSceneGraphState: boolean;
+}
 declare class Treble {
     _api: typeof threekitAPI;
     _player: IThreekitPrivatePlayer;
@@ -28,7 +31,7 @@ declare class Treble {
     _debugMode: boolean;
     constructor({ player, orgId, initialConfiguration }: ITreble);
     createOrder: (order?: IOrder) => Promise<import("../http/orders").IOrderResponse>;
-    saveConfiguration: (config?: Partial<Omit<ISaveConfiguration, 'configuration'>>) => Promise<{
+    saveConfiguration: (config?: Partial<ISaveConfigurationObject>) => Promise<{
         resumableUrl: string;
     } & import("../http/configurations").IConfigurationResponse & {
         thumbnail: string;

package/dist/Treble/Treble.js

@@ -46,6 +46,7 @@ var constants_1 = require("../constants");
 var utils_1 = require("../utils");
 var wishlist_1 = __importDefault(require("./wishlist"));
 var snapshots_1 = __importDefault(require("./snapshots"));
+var shortid_1 = __importDefault(require("shortid"));
 var Treble = (function () {
     function Treble(_a) {
         var player = _a.player, orgId = _a.orgId, initialConfiguration = _a.initialConfiguration;
@@ -80,24 +81,32 @@ var Treble = (function () {
             });
         }); };
         this.saveConfiguration = function (config) { return __awaiter(_this, void 0, void 0, function () {
-            var threekitDomain, _a, customerId, metadata, productVersion, attachments, player, response, params, url;
+            var threekitDomain, _a, customerId, metadata, productVersion, attachments, saveSceneGraphState, player, sceneGraphState, sceneGraphResponse, 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, attachments = _a.attachments;
+                        _a = Object.assign({}, config), customerId = _a.customerId, metadata = _a.metadata, productVersion = _a.productVersion, attachments = _a.attachments, saveSceneGraphState = _a.saveSceneGraphState;
                         player = window.threekit.player.enableApi(types_1.PRIVATE_APIS.PLAYER);
-                        return [4, api_1.default.configurations.save({
-                                assetId: window.threekit.player.assetId,
-                                configuration: player.getConfigurator().getFullConfiguration(),
-                                customerId: customerId,
-                                metadata: metadata,
-                                productVersion: productVersion,
-                                attachments: attachments,
-                            })];
+                        if (!(saveSceneGraphState && player.saveSceneGraphState)) return [3, 2];
+                        return [4, api_1.default.files.saveFile(player.saveSceneGraphState())];
                     case 1:
+                        sceneGraphResponse = _d.sent();
+                        sceneGraphState = sceneGraphResponse.files[0].hash;
+                        _d.label = 2;
+                    case 2: return [4, api_1.default.configurations.save({
+                            shortId: shortid_1.default.generate(),
+                            assetId: window.threekit.player.assetId,
+                            configuration: player.getConfigurator().getFullConfiguration(),
+                            customerId: customerId,
+                            metadata: metadata,
+                            productVersion: productVersion,
+                            attachments: attachments,
+                            sceneGraphState: sceneGraphState,
+                        })];
+                    case 3:
                         response = _d.sent();
                         params = Object.assign((0, utils_1.getParams)(), (_b = {},
                             _b[constants_1.TK_SAVED_CONFIG_PARAM_KEY] = response.data.shortId,

package/dist/api/configurations.d.ts

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

package/dist/api/configurations.js

@@ -42,9 +42,9 @@ 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, attachments, error, fd, attachmentsPrepped_1;
+    var assetId, customerId, configuration, metadata, productVersion, attachments, sceneGraphState, error, fd, attachmentsPrepped_1;
     return __generator(this, function (_a) {
-        assetId = saveConfig.assetId, customerId = saveConfig.customerId, configuration = saveConfig.configuration, metadata = saveConfig.metadata, productVersion = saveConfig.productVersion, attachments = saveConfig.attachments;
+        assetId = saveConfig.assetId, customerId = saveConfig.customerId, configuration = saveConfig.configuration, metadata = saveConfig.metadata, productVersion = saveConfig.productVersion, attachments = saveConfig.attachments, sceneGraphState = saveConfig.sceneGraphState;
         if (!assetId)
             error = 'Requires Asset Id';
         if (!configuration)
@@ -59,6 +59,8 @@ var save = function (saveConfig) { return __awaiter(void 0, void 0, void 0, func
             fd.append('metadata', JSON.stringify(metadata));
         if (customerId)
             fd.append('customerId', customerId);
+        if (sceneGraphState)
+            fd.append('sceneGraphState', sceneGraphState);
         if (attachments && Object.keys(attachments).length) {
             attachmentsPrepped_1 = {};
             Object.entries(attachments).forEach(function (_a) {

package/dist/api/files.d.ts

@@ -0,0 +1 @@
+export declare const saveFile: (files: BlobPart | Array<BlobPart>) => Promise<import("../http/files").IFileResponse>;

package/dist/api/files.js

@@ -0,0 +1,63 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.saveFile = void 0;
+var http_1 = __importDefault(require("../http"));
+var connection_1 = __importDefault(require("../connection"));
+var saveFile = function (files) { return __awaiter(void 0, void 0, void 0, function () {
+    var orgId, fd, data;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                orgId = connection_1.default.getConnection().orgId;
+                fd = new FormData();
+                fd.append('orgId', orgId);
+                fd.append("files", new Blob(Array.isArray(files) ? files : [files], {
+                    type: 'application/json',
+                }));
+                return [4, http_1.default.files.postFile(fd)];
+            case 1:
+                data = (_a.sent()).data;
+                return [2, data];
+        }
+    });
+}); };
+exports.saveFile = saveFile;

package/dist/api/index.d.ts

@@ -1,3 +1,4 @@
+import * as files from './files';
 import * as products from './products';
 import * as configurations from './configurations';
 import * as price from './price';
@@ -6,6 +7,7 @@ import * as catalog from './catalog';
 import * as datatables from './datatables';
 import * as server from './server';
 declare const _default: {
+    files: typeof files;
     products: typeof products;
     configurations: typeof configurations;
     price: typeof price;

package/dist/api/index.js

@@ -23,6 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var files = __importStar(require("./files"));
 var products = __importStar(require("./products"));
 var configurations = __importStar(require("./configurations"));
 var price = __importStar(require("./price"));
@@ -31,6 +32,7 @@ var catalog = __importStar(require("./catalog"));
 var datatables = __importStar(require("./datatables"));
 var server = __importStar(require("./server"));
 exports.default = {
+    files: files,
     products: products,
     configurations: configurations,
     price: price,

package/dist/components/Share/index.d.ts

@@ -1,11 +1,14 @@
 /// <reference types="react" />
 import PropTypes from 'prop-types';
 import { BUTTON_SHAPES, BUTTON_TYPES } from '../Button';
+import type { Positions } from './share.styles';
 interface ShareProps {
     shape?: BUTTON_SHAPES;
     type?: BUTTON_TYPES;
     className?: string;
     message?: string;
+    position: Positions;
+    saveSceneGraphState?: boolean;
 }
 export declare const Share: {
     (props: ShareProps): JSX.Element | null;
@@ -20,6 +23,7 @@ export declare const Share: {
         shape: string;
         type: string;
         message: string;
+        saveSceneGraphState: boolean;
     };
 };
 export default Share;

package/dist/components/Share/index.js

@@ -1,27 +1,160 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 });
 exports.Share = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
 var Button_1 = __importDefault(require("../Button"));
+var message_1 = __importDefault(require("../message"));
 var Share_1 = __importDefault(require("../../icons/Share"));
 var useThreekitInitStatus_1 = __importDefault(require("../../hooks/useThreekitInitStatus"));
-var useShare_1 = __importDefault(require("../../hooks/useShare"));
 var utils_1 = require("../../utils");
+var share_styles_1 = require("./share.styles");
 var Share = function (props) {
-    var _a = Object.assign({ type: 'threekit', shape: 'round', message: 'Link copied!' }, props), shape = _a.shape, type = _a.type, className = _a.className, message = _a.message;
+    var _a = Object.assign({
+        type: 'threekit',
+        shape: 'round',
+        message: 'Link copied!',
+        position: 'bottom-right',
+        saveSceneGraphState: false,
+    }, props), shape = _a.shape, type = _a.type, className = _a.className, msg = _a.message, position = _a.position, saveSceneGraphState = _a.saveSceneGraphState;
     var hasLoaded = (0, useThreekitInitStatus_1.default)();
-    var handleShare = (0, useShare_1.default)();
-    if (!hasLoaded || !handleShare)
+    var _b = (0, react_1.useState)(false), show = _b[0], setShow = _b[1];
+    var _c = (0, react_1.useState)(null), resumeUrl = _c[0], setResumeUrl = _c[1];
+    var resumeUrlElRef = (0, react_1.useRef)(null);
+    var shareButtonRef = (0, react_1.useRef)(null);
+    var shareContentRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        var handleClickOutside = function (e) {
+            var _a, _b;
+            if (!e)
+                return;
+            if (!((_a = shareButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) &&
+                !((_b = shareContentRef.current) === null || _b === void 0 ? void 0 : _b.contains(e.target))) {
+                setShow(false);
+                e.stopPropagation();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return function () {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [show, shareButtonRef, shareContentRef]);
+    if (!hasLoaded)
         return null;
     var cls = (0, utils_1.generateWidgetClassName)('share', className);
-    var handleClick = function () {
-        handleShare(message);
-    };
-    return (react_1.default.createElement(Button_1.default, { className: cls, shape: shape, type: type, icon: Share_1.default.iconName, onClick: handleClick }));
+    var handleClick = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var configuration, e_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (show) {
+                        setResumeUrl(null);
+                        setShow(!show);
+                        return [2];
+                    }
+                    return [4, window.threekit.treble.saveConfiguration({
+                            saveSceneGraphState: saveSceneGraphState,
+                        })];
+                case 1:
+                    configuration = _a.sent();
+                    _a.label = 2;
+                case 2:
+                    _a.trys.push([2, 4, , 5]);
+                    return [4, navigator.clipboard.writeText(configuration.resumableUrl)];
+                case 3:
+                    _a.sent();
+                    if (msg === null || msg === void 0 ? void 0 : msg.length)
+                        message_1.default.info(msg);
+                    return [3, 5];
+                case 4:
+                    e_1 = _a.sent();
+                    setResumeUrl(configuration.resumableUrl);
+                    setShow(!show);
+                    return [3, 5];
+                case 5: return [2];
+            }
+        });
+    }); };
+    var handleClickCopy = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a;
+        return __generator(this, function (_b) {
+            if (!((_a = resumeUrlElRef.current) === null || _a === void 0 ? void 0 : _a.value))
+                return [2];
+            navigator.clipboard.writeText(resumeUrlElRef.current.value);
+            if (msg === null || msg === void 0 ? void 0 : msg.length)
+                message_1.default.info(msg);
+            return [2];
+        });
+    }); };
+    return (react_1.default.createElement(share_styles_1.Wrapper, { ref: shareButtonRef },
+        react_1.default.createElement(Button_1.default, { className: cls, shape: shape, type: type, icon: Share_1.default.iconName, onClick: handleClick }),
+        show ? (react_1.default.createElement(share_styles_1.ShareWrapper, { position: position },
+            react_1.default.createElement(share_styles_1.Content, { ref: shareContentRef },
+                react_1.default.createElement("input", { type: "text", ref: resumeUrlElRef, value: resumeUrl || '', onChange: function () { } }),
+                react_1.default.createElement("button", { type: "button", onClick: handleClickCopy }, "copy link")),
+            react_1.default.createElement(share_styles_1.Caret, null))) : null));
 };
 exports.Share = Share;
 exports.Share.propTypes = {
@@ -35,5 +168,6 @@ exports.Share.defaultProps = {
     shape: 'round',
     type: 'threekit',
     message: 'Link copied!',
+    saveSceneGraphState: false,
 };
 exports.default = exports.Share;

package/dist/components/Share/share.styles.d.ts

@@ -0,0 +1,9 @@
+export declare type Positions = 'top-right' | 'bottom-right' | 'bottom-left' | 'top-left';
+interface PositionProps {
+    position: Positions;
+}
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Content: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Caret: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ShareWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, PositionProps, never>;
+export {};

package/dist/components/Share/share.styles.js

@@ -0,0 +1,23 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShareWrapper = exports.Caret = exports.Content = exports.Wrapper = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 40px;\n  width: 40px;\n  position: relative;\n"], ["\n  height: 40px;\n  width: 40px;\n  position: relative;\n"])));
+var ShareWrapperStyles = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+exports.Content = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 24px 18px;\n  border-radius: 4px;\n  background: rgba(0, 0, 0, 0.9);\n  color: white;\n  font-size: 16px;\n  width: 290px;\n\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n\n  input {\n    background: #555555;\n    color: #ffffff;\n    border: none;\n    outline: none;\n    padding: 9px;\n    border-radius: 4px;\n    font-size: 13px;\n    text-overflow: ellipsis;\n    width: 180px;\n  }\n\n  button {\n    color: #2a94f5;\n    font-size: 13px;\n    background: none;\n    outline: none;\n    border: none;\n    cursor: pointer;\n  }\n"], ["\n  padding: 24px 18px;\n  border-radius: 4px;\n  background: rgba(0, 0, 0, 0.9);\n  color: white;\n  font-size: 16px;\n  width: 290px;\n\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n\n  input {\n    background: #555555;\n    color: #ffffff;\n    border: none;\n    outline: none;\n    padding: 9px;\n    border-radius: 4px;\n    font-size: 13px;\n    text-overflow: ellipsis;\n    width: 180px;\n  }\n\n  button {\n    color: #2a94f5;\n    font-size: 13px;\n    background: none;\n    outline: none;\n    border: none;\n    cursor: pointer;\n  }\n"])));
+exports.Caret = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 0;\n  height: 0;\n  border-left: 10px solid transparent;\n  border-right: 10px solid transparent;\n  border-top: 8px solid rgba(0, 0, 0, 0.9);\n\n  position: absolute;\n"], ["\n  width: 0;\n  height: 0;\n  border-left: 10px solid transparent;\n  border-right: 10px solid transparent;\n  border-top: 8px solid rgba(0, 0, 0, 0.9);\n\n  position: absolute;\n"])));
+exports.ShareWrapper = (0, styled_components_1.default)(ShareWrapperStyles)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  top: ", ";\n  left: ", ";\n  transform: ", ";\n\n  ", " {\n    left: ", ";\n    top: ", ";\n\n    transform: ", ";\n  }\n"], ["\n  top: ", ";\n  left: ", ";\n  transform: ", ";\n\n  ", " {\n    left: ", ";\n    top: ", ";\n\n    transform: ", ";\n  }\n"])), function (props) { return (props.position.includes('top') ? '14px' : '-100%'); }, function (props) { return (props.position.includes('right') ? '-250px' : 'auto'); }, function (props) {
+    return props.position.includes('top')
+        ? ''
+        : 'translateY(calc(0px - 14px - 100%))';
+}, exports.Caret, function (props) { return (props.position.includes('right') ? '260px' : '10px'); }, function (props) { return (props.position.includes('top') ? '0' : 'auto'); }, function (props) {
+    return props.position.includes('top') ? 'translateY(-100%) scaleY(-1)' : '';
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/http/configurations.d.ts

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

package/dist/http/files.d.ts

@@ -0,0 +1,21 @@
+declare enum ENCODING_OPTIONS {
+    RAW = "raw",
+    GZIP = "gzip",
+    BROTLI = "brotli"
+}
+interface IFile {
+    id: string;
+    userId: string;
+    hash: string;
+    encodings: Partial<Record<ENCODING_OPTIONS, {
+        size: number;
+    }>>;
+    filename: string;
+    size: number;
+    extension: string;
+}
+export interface IFileResponse {
+    files: Array<IFile>;
+}
+export declare const postFile: (formData: FormData) => Promise<import("axios").AxiosResponse<IFileResponse>>;
+export {};

package/dist/http/files.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.postFile = void 0;
+var request_1 = __importDefault(require("./request"));
+var FILES_API_ROUTE = "/api/files";
+var ENCODING_OPTIONS;
+(function (ENCODING_OPTIONS) {
+    ENCODING_OPTIONS["RAW"] = "raw";
+    ENCODING_OPTIONS["GZIP"] = "gzip";
+    ENCODING_OPTIONS["BROTLI"] = "brotli";
+})(ENCODING_OPTIONS || (ENCODING_OPTIONS = {}));
+var postFile = function (formData) {
+    var error;
+    if (!formData)
+        error = 'Requires Form Data';
+    if (error)
+        throw new Error(error);
+    return request_1.default.post({
+        url: FILES_API_ROUTE,
+        formData: formData,
+    });
+};
+exports.postFile = postFile;

package/dist/http/index.d.ts

@@ -1,3 +1,4 @@
+import * as files from './files';
 import * as orders from './orders';
 import * as products from './products';
 import * as configurations from './configurations';
@@ -6,6 +7,7 @@ import * as catalog from './catalog';
 import * as datatables from './datatables';
 import * as server from './server';
 declare const _default: {
+    files: typeof files;
     orders: typeof orders;
     products: typeof products;
     configurations: typeof configurations;

package/dist/http/index.js

@@ -23,6 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var files = __importStar(require("./files"));
 var orders = __importStar(require("./orders"));
 var products = __importStar(require("./products"));
 var configurations = __importStar(require("./configurations"));
@@ -31,6 +32,7 @@ var catalog = __importStar(require("./catalog"));
 var datatables = __importStar(require("./datatables"));
 var server = __importStar(require("./server"));
 exports.default = {
+    files: files,
     orders: orders,
     products: products,
     configurations: configurations,

package/dist/store/treble.d.ts

@@ -5,6 +5,7 @@ export interface IPlayerInit {
     authToken: string;
     assetId: string;
     stageId?: string;
+    configurationId?: string;
     orgId: string;
     playerConfig: IPlayerConfig;
     initialConfiguration?: IConfiguration;

package/dist/store/treble.js

@@ -147,12 +147,12 @@ var getLoadingProgress = function (state) {
 exports.getLoadingProgress = getLoadingProgress;
 var initPlayer = function (config) {
     return function (dispatch, getState) { return __awaiter(void 0, void 0, void 0, function () {
-        var el, authToken, assetId, stageId, orgId, playerConfig, initialConfiguration, player, configurator;
+        var el, authToken, assetId, stageId, configurationId, orgId, playerConfig, initialConfiguration, player, configurator;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    el = config.el, authToken = config.authToken, assetId = config.assetId, stageId = config.stageId, orgId = config.orgId, playerConfig = config.playerConfig, initialConfiguration = config.initialConfiguration;
-                    return [4, window.threekitPlayer(__assign(__assign({ el: el, authToken: authToken, stageId: stageId, assetId: assetId }, playerConfig), { initialConfiguration: initialConfiguration, onLoadingProgress: function (progress) {
+                    el = config.el, authToken = config.authToken, assetId = config.assetId, stageId = config.stageId, configurationId = config.configurationId, orgId = config.orgId, playerConfig = config.playerConfig, initialConfiguration = config.initialConfiguration;
+                    return [4, window.threekitPlayer(__assign(__assign({ el: el, authToken: authToken, stageId: stageId, assetId: assetId, configurationId: configurationId }, playerConfig), { initialConfiguration: initialConfiguration, onLoadingProgress: function (progress) {
                                 var _a;
                                 dispatch((0, exports.updateLoadingProgress)(progress));
                                 (_a = playerConfig === null || playerConfig === void 0 ? void 0 : playerConfig.onLoadingProgress) === null || _a === void 0 ? void 0 : _a.call(playerConfig, progress);
@@ -324,6 +324,7 @@ var launch = function (launchConfig) {
                             authToken: authToken,
                             stageId: stageId,
                             assetId: updatedAssetId,
+                            configurationId: configId,
                             playerConfig: playerConfig,
                             initialConfiguration: initialConfiguration,
                         }))];

package/dist/types.d.ts

@@ -291,12 +291,14 @@ export interface IThreekitPrivatePlayer {
     };
     calculateLogs: () => Promise<Record<string, any>>;
     getAssetInstance: (query: ISceneQueryNode | string) => Promise<string>;
+    saveSceneGraphState: () => string;
 }
 export interface ThreekitInitConfig {
     authToken: string;
     el: HTMLElement;
     assetId: string;
     stageId?: string;
+    configurationId?: string;
     orgId?: string;
     showConfigurator?: boolean;
     initialConfiguration?: Record<string, any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threekit-tools/treble",
-  "version": "0.0.84",
+  "version": "0.0.85-next-1",
   "author": "Amaan Saeed",
   "license": "MIT",
   "files": [
@@ -42,11 +42,15 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.6.2",
+    "@types/shortid": "^0.0.29",
     "axios": "^0.22.0",
+    "chokidar": "^3.5.3",
+    "live-server": "^1.2.2",
     "react-redux": "^7.2.6",
     "redux": "^4.1.2",
     "redux-logger": "^3.0.6",
     "reselect": "^4.1.2",
+    "shortid": "^2.2.16",
     "styled-components": "^5.3.3"
   },
   "devDependencies": {