@threekit-tools/treble 0.0.78 → 0.0.81

package/dist/Treble/Snapshots.d.ts

@@ -17,11 +17,11 @@ interface IGetSnapshot {
 }
 interface ISnapshots {
     getSnapshot(snapshotConfig: IGetSnapshot): Promise<string>;
-    takeSnapshots(cameras: ISnapshotsCameras, config: ITakeSnapshotsConfig): Promise<void | string[] | Blob[] | null>;
+    takeSnapshots(cameras: ISnapshotsCameras, config: ITakeSnapshotsConfig): Promise<void | string[] | Blob[] | File[] | null>;
 }
 declare class Snapshots implements ISnapshots {
     constructor();
     getSnapshot: ({ size, format }: IGetSnapshot) => Promise<string>;
-    takeSnapshots: (camerasList: ISnapshotsCameras, snapshotsConfig: ITakeSnapshotsConfig) => Promise<void | string[] | Blob[] | null>;
+    takeSnapshots: (camerasList: ISnapshotsCameras, snapshotsConfig: ITakeSnapshotsConfig) => Promise<void | string[] | Blob[] | File[] | null>;
 }
 export default Snapshots;

package/dist/Treble/Treble.d.ts

@@ -1,3 +1,4 @@
+import threekitAPI from '../api';
 import { IThreekitPlayer, IThreekitPrivatePlayer, IConfiguration, ISetConfiguration, IThreekitPrivateConfigurator } from '../types';
 import { IWishlist } from './Wishlist';
 import Snapshots from './Snapshots';
@@ -13,6 +14,7 @@ interface IEmailShareCredentials {
     templateId: string;
 }
 declare class Treble {
+    _api: typeof threekitAPI;
     _player: IThreekitPrivatePlayer;
     wishlist: IWishlist;
     private _initialConfiguration;
@@ -20,7 +22,7 @@ declare class Treble {
     takeSnapshots: Snapshots['takeSnapshots'];
     _debugMode: boolean;
     constructor({ player, orgId, initialConfiguration }: ITreble);
-    saveConfiguration: (config?: Omit<ISaveConfiguration, "configuration"> | undefined) => Promise<{
+    saveConfiguration: (config?: Partial<Omit<ISaveConfiguration, "configuration">> | undefined) => Promise<{
         resumableUrl: string;
     } & import("../http/configurations").IConfigurationResponse & {
         thumbnail: string;

package/dist/Treble/Treble.js

@@ -121,6 +121,7 @@ var Treble = /** @class */ (function () {
             return api_1.default.server.sendEmail(data);
         };
         //  Threekit API
+        this._api = api_1.default;
         this.wishlist = (0, Wishlist_1.default)(orgId);
         this._snapshots = new Snapshots_1.default();
         this.takeSnapshots = this._snapshots.takeSnapshots;

package/dist/Treble/Wishlist.d.ts

@@ -3,7 +3,7 @@ import { ISaveConfiguration } from '../api/configurations';
 export declare type WishlistArray = Array<IConfigurationResponse>;
 export interface IWishlist {
     getWishlist(): Promise<Array<IConfigurationResponse>>;
-    addItem(config?: Omit<ISaveConfiguration, 'configurator'>): Promise<Array<IConfigurationResponse>>;
+    addItem(config?: Omit<ISaveConfiguration, 'configuration'>): 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?: Omit<ISaveConfiguration, "configurator"> | undefined) => Promise<WishlistArray>;
+    addItem: () => Promise<WishlistArray>;
     removeItemByIdx: (idx: number) => WishlistArray;
     clearWishlist: () => WishlistArray;
 }

package/dist/Treble/Wishlist.js

@@ -49,39 +49,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var api_1 = __importDefault(require("../api"));
-var connection_1 = __importDefault(require("../connection"));
 var constants_1 = require("../constants");
 var wishlistData;
 var Wishlist = /** @class */ (function () {
     function Wishlist(orgId) {
         var _this = this;
         this.getWishlist = function () { return __awaiter(_this, void 0, void 0, function () {
-            var threekitDomain, wishlistListStr, wishlistList, wishlistDataRaw;
+            var wishlistListStr, wishlistList, wishlistDataRaw;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         if (wishlistData)
                             return [2 /*return*/, wishlistData];
-                        threekitDomain = connection_1.default.getConnection().threekitDomain;
                         wishlistListStr = localStorage.getItem(this._wishlistKey);
                         wishlistList = JSON.parse(wishlistListStr || '[]');
                         return [4 /*yield*/, Promise.all(wishlistList.map(function (el) { return api_1.default.configurations.fetch(el); }))];
                     case 1:
                         wishlistDataRaw = _a.sent();
-                        wishlistData = wishlistDataRaw.map(function (el) {
-                            var _a;
-                            return Object.assign({}, el.data, ((_a = el.data.thumbnail) === null || _a === void 0 ? void 0 : _a.length)
-                                ? {
-                                    thumbnail: "".concat(threekitDomain, "/api/files/hash/").concat(el.data.thumbnail),
-                                }
-                                : undefined);
-                        });
+                        wishlistData = wishlistDataRaw.map(function (el) { return el.data; });
                         return [2 /*return*/, wishlistData];
                 }
             });
         }); };
-        this.addItem = function (config) { return __awaiter(_this, void 0, void 0, function () {
-            var configPrepped, savedConfiguration, wishlistListStr, wishlistList;
+        this.addItem = function () { return __awaiter(_this, void 0, void 0, function () {
+            var thumbnails, savedConfiguration, wishlistListStr, wishlistList;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -89,9 +80,16 @@ var Wishlist = /** @class */ (function () {
                             wishlistData = [];
                             localStorage.setItem(this._wishlistKey, JSON.stringify([]));
                         }
-                        configPrepped = Object.assign({ snapshot: true }, config);
-                        return [4 /*yield*/, window.threekit.treble.saveConfiguration(configPrepped)];
+                        return [4 /*yield*/, window.threekit.treble.takeSnapshots(undefined, {
+                                output: 'file',
+                                filename: 'thumbnail',
+                            })];
                     case 1:
+                        thumbnails = (_a.sent());
+                        return [4 /*yield*/, window.threekit.treble.saveConfiguration({
+                                attachments: { thumbnail: thumbnails[0] },
+                            })];
+                    case 2:
                         savedConfiguration = _a.sent();
                         if (!savedConfiguration)
                             return [2 /*return*/, wishlistData];

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

@@ -7,7 +7,6 @@ export interface PlayerProps extends IProps {
     width?: string;
     minHeight?: string;
 }
-export declare const PLAYER_DIV_ID = "tk-player-component";
 declare const Player: {
     (props: PlayerProps): JSX.Element;
     TopLeftWidgets(props: IProps): JSX.Element;

package/dist/components/Player/index.js

@@ -1,33 +1,12 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PLAYER_DIV_ID = void 0;
-var react_1 = __importStar(require("react"));
+var react_1 = __importDefault(require("react"));
 var player_styles_1 = require("./player.styles");
 var constants_1 = require("../../constants");
-var usePlayerPortal_1 = __importDefault(require("../../hooks/usePlayerPortal"));
-exports.PLAYER_DIV_ID = 'tk-player-component';
+var usePlayer_1 = __importDefault(require("../../hooks/usePlayer"));
 var className = "".concat(constants_1.DEFAULT_CLASS_NAME, " ").concat(constants_1.CLASS_NAME_PREFIX, "-player");
 var Player = function (props) {
     var _a = Object.assign({
@@ -35,22 +14,9 @@ var Player = function (props) {
         minHeight: '600px',
         width: '100%',
     }, props), height = _a.height, width = _a.width, minHeight = _a.minHeight, children = _a.children;
-    var _b = (0, usePlayerPortal_1.default)(), portalPlayerTo = _b[0], portalBack = _b[1];
-    var hasMoved = (0, react_1.useRef)(false);
-    (0, react_1.useEffect)(function () {
-        if (portalPlayerTo && !hasMoved.current) {
-            portalPlayerTo(exports.PLAYER_DIV_ID);
-            hasMoved.current = true;
-        }
-        return function () {
-            if (portalBack) {
-                portalBack();
-                hasMoved.current = false;
-            }
-        };
-    }, [portalPlayerTo]);
+    var playerRef = (0, usePlayer_1.default)()[0];
     return (react_1.default.createElement(player_styles_1.Wrapper, { height: height, width: width, minHeight: minHeight, className: className },
-        react_1.default.createElement("div", { id: exports.PLAYER_DIV_ID }),
+        react_1.default.createElement("div", { ref: playerRef }),
         children));
 };
 Player.TopLeftWidgets = function (props) {

package/dist/components/ThreekitProvider/index.js

@@ -25,6 +25,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var store_1 = __importStar(require("../../store"));
 var treble_1 = require("../../store/treble");
+var constants_1 = require("../../constants");
 var react_redux_1 = require("react-redux");
 var styled_components_1 = require("styled-components");
 var theme_1 = __importDefault(require("../../theme"));
@@ -32,12 +33,13 @@ var GlobalStyles_styles_1 = __importDefault(require("./GlobalStyles.styles"));
 var DevTools_1 = __importDefault(require("../DevTools"));
 var App = function (props) {
     var dispatch = (0, store_1.useThreekitDispatch)();
-    var playerConfig = props.playerConfig, productId = props.productId, project = props.project, locale = props.locale, threekitEnv = props.threekitEnv, eventHandlers = props.eventHandlers;
+    var playerConfig = props.playerConfig, assetId = props.assetId, productId = props.productId, project = props.project, locale = props.locale, threekitEnv = props.threekitEnv, eventHandlers = props.eventHandlers;
     (0, react_1.useEffect)(function () {
         var init = function () {
             dispatch((0, treble_1.launch)({
                 playerConfig: playerConfig,
                 productId: productId,
+                assetId: assetId,
                 project: project,
                 locale: locale,
                 threekitEnv: threekitEnv,
@@ -53,7 +55,7 @@ var ThreekitProvider = function (props) {
     return (react_1.default.createElement(react_redux_1.Provider, { store: (0, store_1.default)(props.reducer) },
         react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme_1.default },
             react_1.default.createElement(GlobalStyles_styles_1.default, null),
-            react_1.default.createElement(App, { locale: props.locale, productId: props.productId, project: props.project, playerConfig: props.playerConfig, threekitEnv: props.threekitEnv, eventHandlers: props.eventHandlers }, props.children),
-            react_1.default.createElement(DevTools_1.default, null))));
+            react_1.default.createElement(App, { locale: props.locale, assetId: props.assetId, productId: props.productId, project: props.project, playerConfig: props.playerConfig, threekitEnv: props.threekitEnv, eventHandlers: props.eventHandlers }, props.children),
+            constants_1.TREBLE_DEBUG ? null : react_1.default.createElement(DevTools_1.default, null))));
 };
 exports.default = ThreekitProvider;

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+interface UseImageEditorConfig {
+    canvasHeight?: number;
+    canvasWidth?: number;
+    cornerCircleSize?: number;
+    cropRatio?: number;
+}
+declare function useImageEditor(image: string, config: UseImageEditorConfig): null[] | (import("react").MutableRefObject<HTMLCanvasElement | null> | {
+    handleCrop: () => void;
+} | {
+    handleInvert: () => void;
+    handleGrayscale: () => void;
+})[];
+export default useImageEditor;

package/dist/hooks/useImageEditor/index.js

@@ -0,0 +1,320 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var CANVAS_HEIGHT = 600;
+var CANVAS_WIDTH = 900;
+var INVERT_COLOR = false;
+var APPLY_GRAYSCALE = false;
+var CORNER_BOX_SIZE = 4;
+var CROP_RATIO = 'custom';
+function useImageEditor(image, config) {
+    var _a = Object.assign({}, {
+        canvasHeight: CANVAS_HEIGHT,
+        canvasWidth: CANVAS_WIDTH,
+        cornerCircleSize: CORNER_BOX_SIZE,
+        cropRatio: CROP_RATIO,
+    }, config), canvasHeight = _a.canvasHeight, canvasWidth = _a.canvasWidth, cornerCircleSize = _a.cornerCircleSize;
+    var _b = (0, react_1.useState)(INVERT_COLOR), invertColor = _b[0], setInvertColor = _b[1];
+    var _c = (0, react_1.useState)(APPLY_GRAYSCALE), applyGrayscale = _c[0], setApplyGrayscale = _c[1];
+    var imageRef = (0, react_1.useRef)(null);
+    var canvasRef = (0, react_1.useRef)(null);
+    var cropStartRef = (0, react_1.useRef)(null);
+    var cropBoxRef = (0, react_1.useRef)(null);
+    var moveCropBoxOffsetRef = (0, react_1.useRef)(null);
+    var resizeCropBoxOffsetRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        if (!image || !canvasRef.current)
+            return;
+        var ctx = canvasRef.current.getContext('2d');
+        if (!ctx)
+            return;
+        canvasRef.current.height = canvasHeight;
+        canvasRef.current.width = canvasWidth;
+        var background = new Image();
+        background.src = image;
+        background.onload = function () {
+            imageRef.current = background;
+            drawImage(ctx, background);
+        };
+    }, [image, canvasHeight, canvasWidth]);
+    (0, react_1.useEffect)(function () {
+        if (!image)
+            return function () { };
+        if (canvasRef && canvasRef.current) {
+            canvasRef.current.addEventListener('mousedown', handleMouseDown);
+            canvasRef.current.addEventListener('mousemove', handleMouseMove);
+            canvasRef.current.addEventListener('mouseup', handleMouseUp);
+            return function () {
+                var _a, _b, _c;
+                (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mousedown', handleMouseDown);
+                (_b = canvasRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mousemove', handleMouseMove);
+                (_c = canvasRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseup', handleMouseUp);
+            };
+        }
+        return function () { };
+        function handleMouseDown(e) {
+            if (cropBoxRef === null || cropBoxRef === void 0 ? void 0 : cropBoxRef.current) {
+                if (e.offsetX >= cropBoxRef.current.startX &&
+                    e.offsetX <= cropBoxRef.current.startX + cropBoxRef.current.deltaX &&
+                    e.offsetY >= cropBoxRef.current.startY &&
+                    e.offsetY <= cropBoxRef.current.startY + cropBoxRef.current.deltaY) {
+                    moveCropBoxOffsetRef.current = { x: e.offsetX, y: e.offsetY };
+                    return;
+                }
+                if (e.offsetX >=
+                    cropBoxRef.current.startX +
+                        cropBoxRef.current.deltaX -
+                        cornerCircleSize / 2 &&
+                    e.offsetX <=
+                        cropBoxRef.current.startX +
+                            cropBoxRef.current.deltaX +
+                            cornerCircleSize / 2 &&
+                    e.offsetY >=
+                        cropBoxRef.current.startY +
+                            cropBoxRef.current.deltaY -
+                            cornerCircleSize / 2 &&
+                    e.offsetY <=
+                        cropBoxRef.current.startY +
+                            cropBoxRef.current.deltaY +
+                            cornerCircleSize / 2) {
+                    resizeCropBoxOffsetRef.current = { x: e.offsetX, y: e.offsetY };
+                    return;
+                }
+            }
+            cropStartRef.current = { x: e.offsetX, y: e.offsetY };
+            cropBoxRef.current = null;
+        }
+        function handleMouseMove(e) {
+            var _a, _b, _c, _d;
+            var ctx = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getContext('2d');
+            if (!ctx || !cropBoxRef.current)
+                return;
+            if ((_b = moveCropBoxOffsetRef.current) === null || _b === void 0 ? void 0 : _b.x) {
+                var deltaX = e.offsetX - moveCropBoxOffsetRef.current.x;
+                var deltaY = e.offsetY - moveCropBoxOffsetRef.current.y;
+                var rect_1 = Object.assign({}, cropBoxRef.current, {
+                    startX: cropBoxRef.current.startX + deltaX,
+                    startY: cropBoxRef.current.startY + deltaY,
+                });
+                draw(ctx, rect_1, { invertColor: invertColor, applyGrayscale: applyGrayscale });
+                return;
+            }
+            if ((_c = resizeCropBoxOffsetRef === null || resizeCropBoxOffsetRef === void 0 ? void 0 : resizeCropBoxOffsetRef.current) === null || _c === void 0 ? void 0 : _c.x) {
+                var deltaX = e.offsetX - resizeCropBoxOffsetRef.current.x;
+                var deltaY = e.offsetY - resizeCropBoxOffsetRef.current.y;
+                var rect_2 = Object.assign({}, cropBoxRef.current, {
+                    deltaX: cropBoxRef.current.deltaX + deltaX,
+                    deltaY: cropBoxRef.current.deltaY + deltaY,
+                });
+                draw(ctx, rect_2, { invertColor: invertColor, applyGrayscale: applyGrayscale });
+                return;
+            }
+            if (!((_d = cropStartRef === null || cropStartRef === void 0 ? void 0 : cropStartRef.current) === null || _d === void 0 ? void 0 : _d.x))
+                return;
+            var rect = {
+                startX: cropStartRef.current.x,
+                startY: cropStartRef.current.y,
+                deltaX: e.offsetX - cropStartRef.current.x,
+                deltaY: e.offsetY - cropStartRef.current.y,
+            };
+            draw(ctx, rect, { invertColor: invertColor, applyGrayscale: applyGrayscale });
+        }
+        function handleMouseUp(e) {
+            var _a, _b;
+            var ctx = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getContext('2d');
+            if (!ctx || !cropBoxRef.current || !cropStartRef.current)
+                return;
+            if (moveCropBoxOffsetRef.current) {
+                var deltaX_1 = moveCropBoxOffsetRef.current.x - e.offsetX;
+                var deltaY_1 = moveCropBoxOffsetRef.current.y - e.offsetY;
+                var rect_3 = Object.assign(cropBoxRef.current, {
+                    startX: cropBoxRef.current.startX - deltaX_1,
+                    startY: cropBoxRef.current.startY - deltaY_1,
+                });
+                draw(ctx, rect_3, { drawCornerBoxes: true, invertColor: invertColor, applyGrayscale: applyGrayscale });
+                cropBoxRef.current = rect_3;
+                moveCropBoxOffsetRef.current = null;
+                return;
+            }
+            if ((_b = resizeCropBoxOffsetRef === null || resizeCropBoxOffsetRef === void 0 ? void 0 : resizeCropBoxOffsetRef.current) === null || _b === void 0 ? void 0 : _b.x) {
+                var deltaX_2 = e.offsetX - resizeCropBoxOffsetRef.current.x;
+                var deltaY_2 = e.offsetY - resizeCropBoxOffsetRef.current.y;
+                var rect_4 = Object.assign({}, cropBoxRef.current, {
+                    deltaX: cropBoxRef.current.deltaX + deltaX_2,
+                    deltaY: cropBoxRef.current.deltaY + deltaY_2,
+                });
+                draw(ctx, rect_4, { drawCornerBoxes: true, invertColor: invertColor, applyGrayscale: applyGrayscale });
+                cropBoxRef.current = rect_4;
+                resizeCropBoxOffsetRef.current = null;
+                return;
+            }
+            var deltaX = e.offsetX - cropStartRef.current.x;
+            var deltaY = e.offsetY - cropStartRef.current.y;
+            var rect = {
+                startX: deltaX > 0 ? cropStartRef.current.x : cropStartRef.current.x + deltaX,
+                startY: deltaY > 0 ? cropStartRef.current.y : cropStartRef.current.y + deltaY,
+                deltaX: Math.abs(deltaX),
+                deltaY: Math.abs(deltaY),
+            };
+            cropBoxRef.current = rect;
+            draw(ctx, rect, { drawCornerBoxes: true });
+            cropStartRef.current = null;
+        }
+    }, [image, canvasHeight, canvasWidth]);
+    // useEffect(() => {
+    //   if (!image) return;
+    //   if (canvasRef && canvasRef.current) {
+    //     canvasRef.current.addEventListener("mousemove", handleMouseMove);
+    //     return () => {
+    //       canvasRef.current.removeEventListener("mousemove", handleMouseMove);
+    //     };
+    //   }
+    //   function handleMouseMove(e) {
+    //     if (cropBoxRef?.current) {
+    //       if (
+    //         e.offsetX >= cropBoxRef.current.startX &&
+    //         e.offsetX <= cropBoxRef.current.startX + cropBoxRef.current.deltaX &&
+    //         e.offsetY >= cropBoxRef.current.startY &&
+    //         e.offsetY <= cropBoxRef.current.startY + cropBoxRef.current.deltaY
+    //       ) {
+    //         canvasRef.current.style.cursor = "move";
+    //         return;
+    //       }
+    //       if (
+    //         e.offsetX >=
+    //           cropBoxRef.current.startX +
+    //             cropBoxRef.current.deltaX -
+    //             cornerCircleSize / 2 &&
+    //         e.offsetX <=
+    //           cropBoxRef.current.startX +
+    //             cropBoxRef.current.deltaX +
+    //             cornerCircleSize / 2 &&
+    //         e.offsetY >=
+    //           cropBoxRef.current.startY +
+    //             cropBoxRef.current.deltaY -
+    //             cornerCircleSize / 2 &&
+    //         e.offsetY <=
+    //           cropBoxRef.current.startY +
+    //             cropBoxRef.current.deltaY +
+    //             cornerCircleSize / 2
+    //       ) {
+    //         canvasRef.current.style.cursor = "pointer";
+    //         return;
+    //       }
+    //     }
+    //     canvasRef.current.style.cursor = "default";
+    //   }
+    // }, [image, canvasHeight, canvasWidth]);
+    function drawImage(ctx, image, config) {
+        var _a = config || {}, invertColor = _a.invertColor, applyGrayscale = _a.applyGrayscale;
+        if (invertColor)
+            ctx.filter = 'invert(1)';
+        else if (applyGrayscale)
+            ctx.filter = 'grayscale(1)';
+        else
+            ctx.filter = 'invert(0)';
+        // else ctx.filter = "grayscale(0)";
+        var wRatio = ctx.canvas.width / image.width;
+        var hRatio = ctx.canvas.height / image.height;
+        var ratio = Math.min(wRatio, hRatio);
+        var centerOffsetX = (ctx.canvas.width - image.width * ratio) / 2;
+        var centerOffsetY = (ctx.canvas.height - image.height * ratio) / 2;
+        ctx.drawImage(image, 0, 0, image.width, image.height, centerOffsetX, centerOffsetY, image.width * ratio, image.height * ratio);
+    }
+    function draw(ctx, rect, config) {
+        var _a = config || {}, drawCornerBoxes = _a.drawCornerBoxes, invertColor = _a.invertColor;
+        // clear the canvas
+        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+        // redraw the image
+        if (!imageRef.current)
+            return;
+        drawImage(ctx, imageRef.current, { invertColor: invertColor });
+        if (!rect)
+            return;
+        // redraw one or more things based on their javascript objects
+        ctx.beginPath();
+        ctx.setLineDash([]);
+        ctx.rect(rect.startX, rect.startY, rect.deltaX, rect.deltaY);
+        ctx.rect(canvasWidth, 0, 0 - canvasWidth, canvasHeight);
+        ctx.closePath();
+        ctx.strokeStyle = '#fff';
+        ctx.stroke();
+        ctx.fillStyle = '#00000055';
+        ctx.fill();
+        if (!drawCornerBoxes)
+            return;
+        ctx.beginPath();
+        ctx.arc(rect.startX, rect.startY, cornerCircleSize, 0, 2 * Math.PI);
+        ctx.fillStyle = '#fff';
+        ctx.fill();
+        ctx.closePath();
+        ctx.beginPath();
+        ctx.arc(rect.startX, rect.startY + rect.deltaY, cornerCircleSize, 0, 2 * Math.PI);
+        ctx.fillStyle = '#fff';
+        ctx.fill();
+        ctx.closePath();
+        ctx.beginPath();
+        ctx.arc(rect.startX + rect.deltaX, rect.startY, cornerCircleSize, 0, 2 * Math.PI);
+        ctx.fillStyle = '#fff';
+        ctx.fill();
+        ctx.closePath();
+        ctx.beginPath();
+        ctx.arc(rect.startX + rect.deltaX, rect.startY + rect.deltaY, cornerCircleSize, 0, 2 * Math.PI);
+        ctx.fillStyle = '#fff';
+        ctx.fill();
+        ctx.closePath();
+    }
+    function handleCrop() {
+        var _a, _b;
+        if (!cropBoxRef.current)
+            return;
+        var ctx = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getContext('2d');
+        if (!ctx || !imageRef.current)
+            return;
+        var rect = cropBoxRef.current;
+        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+        drawImage(ctx, imageRef.current, { invertColor: invertColor, applyGrayscale: applyGrayscale });
+        var imageData = ctx.getImageData(rect.startX, rect.startY, rect.deltaX, rect.deltaY);
+        var clone = (_b = canvasRef.current) === null || _b === void 0 ? void 0 : _b.cloneNode();
+        if (!clone)
+            return;
+        clone.width = rect.deltaX;
+        clone.height = rect.deltaY;
+        var cloneCtx = clone.getContext('2d');
+        if (!cloneCtx)
+            return;
+        cloneCtx.putImageData(imageData, 0, 0);
+        var url = clone.toDataURL();
+        console.log(url);
+        cropBoxRef.current = null;
+    }
+    function handleInvert() {
+        var _a;
+        if (!cropBoxRef.current)
+            return;
+        var updated = !invertColor;
+        setInvertColor(updated);
+        var ctx = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.getContext('2d');
+        if (!ctx)
+            return;
+        draw(ctx, cropBoxRef.current, {
+            invertColor: updated,
+            drawCornerBoxes: true,
+            applyGrayscale: applyGrayscale,
+        });
+    }
+    function handleGrayscale() {
+        setApplyGrayscale(!applyGrayscale);
+    }
+    if (!image)
+        return [null, null];
+    var crop = {
+        handleCrop: handleCrop,
+    };
+    var color = {
+        handleInvert: handleInvert,
+        handleGrayscale: handleGrayscale,
+    };
+    return [canvasRef, crop, color];
+}
+exports.default = useImageEditor;

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

@@ -0,0 +1,2 @@
+declare const useLoadingProgress: () => number;
+export default useLoadingProgress;

package/dist/hooks/useLoadingProgress/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var store_1 = require("../../store");
+var treble_1 = require("../../store/treble");
+var useLoadingProgress = function () {
+    var progress = (0, store_1.useThreekitSelector)(treble_1.getLoadingProgress);
+    return progress;
+};
+exports.default = useLoadingProgress;

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

@@ -0,0 +1,3 @@
+declare type UsePlayer = [undefined] | [(node: null | HTMLDivElement) => void];
+declare const usePlayer: () => UsePlayer;
+export default usePlayer;

package/dist/hooks/usePlayer/index.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var react_redux_1 = require("react-redux");
+var treble_1 = require("../../store/treble");
+var constants_1 = require("../../constants");
+var usePlayer = function () {
+    var playerElRef = (0, react_1.useRef)(null);
+    var playerLoaderRef = (0, react_1.useRef)(null);
+    var playerWrapperRef = (0, react_1.useRef)(null);
+    var playerElementId = (0, react_redux_1.useSelector)(treble_1.getPlayerElementId);
+    var playerRef = (0, react_1.useCallback)(function (node) {
+        var _a;
+        if (node !== null) {
+            playerWrapperRef.current = node;
+            if (!playerElementId)
+                return;
+            playerElRef.current = document.getElementById(playerElementId);
+            (_a = playerWrapperRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(playerElRef.current);
+            return;
+        }
+    }, [playerElementId]);
+    (0, react_1.useEffect)(function () { return function () {
+        if (!playerElRef.current)
+            return;
+        if (!playerLoaderRef.current)
+            playerLoaderRef.current = document.getElementById(constants_1.TK_PLAYER_LOADER_DIV);
+        if (!playerElRef.current)
+            throw new Error('Move from element not found');
+        if (!playerLoaderRef.current)
+            throw new Error('Player Loader element not found');
+        playerLoaderRef.current.appendChild(playerElRef.current);
+    }; }, []);
+    if (!playerElementId)
+        return [undefined];
+    return [playerRef];
+};
+exports.default = usePlayer;

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

@@ -1,3 +1,3 @@
 import { ISnapshotsCameras, ITakeSnapshotsConfig } from '../../Treble';
-declare const useSnapshot: (cameras: ISnapshotsCameras, config: ITakeSnapshotsConfig) => (() => Promise<void | string[] | Blob[] | null>) | undefined;
+declare const useSnapshot: (cameras: ISnapshotsCameras, config: ITakeSnapshotsConfig) => (() => Promise<void | string[] | File[] | Blob[] | null>) | undefined;
 export default useSnapshot;

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

@@ -7,7 +7,7 @@ interface HydratedWishlistItem extends IConfigurationResponse {
 }
 declare type UseWishlistHook = [
     Array<HydratedWishlistItem>,
-    (config?: Omit<ISaveConfiguration, 'configurator'>) => void,
+    (config?: Omit<ISaveConfiguration, 'configuration'>) => void,
     () => void
 ] | [undefined, undefined, undefined];
 declare const useWishlist: () => UseWishlistHook;

package/dist/index.d.ts

@@ -13,6 +13,8 @@ import useShare from './hooks/useShare';
 import usePlayerPortal from './hooks/usePlayerPortal';
 import useProductCache from './hooks/useProductCache';
 import useNestedConfigurator from './hooks/useNestedConfigurator';
+import useLoadingProgress from './hooks/useLoadingProgress';
+import usePlayer from './hooks/usePlayer';
 import ThreekitProvider from './components/ThreekitProvider';
 import Player from './components/Player';
 import Button from './components/Button';
@@ -46,4 +48,4 @@ import icons from './icons';
 export * from './icons';
 import TrebleApp from './components/TrebleApp';
 import ProductLayout from './components/ProductLayout';
-export { useAttribute, useConfigurator, useConfigurationLoader, useMetadata, useName, usePlayerLoadingStatus, usePrice, useThreekitInitStatus, useZoom, useSnapshot, useWishlist, useShare, usePlayerPortal, useProductCache, useNestedConfigurator, ThreekitProvider, Player, Button, Cards, Dropdown, Strips, Swatch, Tiles, TilesGroup, Upload, Switch, ProductName, ProductDescription, AttributeTitle, AttributeValue, TotalPrice, message, Modal, Drawer, Accordion, Tabs, PortalToArOverlay, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, icons, TrebleApp, ProductLayout, };
+export { useAttribute, useConfigurator, useConfigurationLoader, useMetadata, useName, usePlayerLoadingStatus, usePrice, useThreekitInitStatus, useZoom, useSnapshot, useWishlist, useShare, usePlayerPortal, useProductCache, useNestedConfigurator, useLoadingProgress, usePlayer, ThreekitProvider, Player, Button, Cards, Dropdown, Strips, Swatch, Tiles, TilesGroup, Upload, Switch, ProductName, ProductDescription, AttributeTitle, AttributeValue, TotalPrice, message, Modal, Drawer, Accordion, Tabs, PortalToArOverlay, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, icons, TrebleApp, ProductLayout, };

package/dist/index.js

@@ -13,7 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProductLayout = exports.TrebleApp = exports.icons = exports.Share = exports.Wishlist = exports.Snapshots = exports.Zoom = exports.FlatForm = exports.AwaitThreekitLoad = exports.PortalToElement = exports.PortalToArOverlay = exports.Tabs = exports.Accordion = exports.Drawer = exports.Modal = exports.message = exports.TotalPrice = exports.AttributeValue = exports.AttributeTitle = exports.ProductDescription = exports.ProductName = exports.Switch = exports.Upload = exports.TilesGroup = exports.Tiles = exports.Swatch = exports.Strips = exports.Dropdown = exports.Cards = exports.Button = exports.Player = exports.ThreekitProvider = exports.useNestedConfigurator = exports.useProductCache = exports.usePlayerPortal = exports.useShare = exports.useWishlist = exports.useSnapshot = exports.useZoom = exports.useThreekitInitStatus = exports.usePrice = exports.usePlayerLoadingStatus = exports.useName = exports.useMetadata = exports.useConfigurationLoader = exports.useConfigurator = exports.useAttribute = void 0;
+exports.ProductLayout = exports.TrebleApp = exports.icons = exports.Share = exports.Wishlist = exports.Snapshots = exports.Zoom = exports.FlatForm = exports.AwaitThreekitLoad = exports.PortalToElement = exports.PortalToArOverlay = exports.Tabs = exports.Accordion = exports.Drawer = exports.Modal = exports.message = exports.TotalPrice = exports.AttributeValue = exports.AttributeTitle = exports.ProductDescription = exports.ProductName = exports.Switch = exports.Upload = exports.TilesGroup = exports.Tiles = exports.Swatch = exports.Strips = exports.Dropdown = exports.Cards = exports.Button = exports.Player = exports.ThreekitProvider = exports.usePlayer = exports.useLoadingProgress = exports.useNestedConfigurator = exports.useProductCache = exports.usePlayerPortal = exports.useShare = exports.useWishlist = exports.useSnapshot = exports.useZoom = exports.useThreekitInitStatus = exports.usePrice = exports.usePlayerLoadingStatus = exports.useName = exports.useMetadata = exports.useConfigurationLoader = exports.useConfigurator = exports.useAttribute = void 0;
 //  Hooks
 var useAttribute_1 = __importDefault(require("./hooks/useAttribute"));
 exports.useAttribute = useAttribute_1.default;
@@ -46,6 +46,10 @@ var useProductCache_1 = __importDefault(require("./hooks/useProductCache"));
 exports.useProductCache = useProductCache_1.default;
 var useNestedConfigurator_1 = __importDefault(require("./hooks/useNestedConfigurator"));
 exports.useNestedConfigurator = useNestedConfigurator_1.default;
+var useLoadingProgress_1 = __importDefault(require("./hooks/useLoadingProgress"));
+exports.useLoadingProgress = useLoadingProgress_1.default;
+var usePlayer_1 = __importDefault(require("./hooks/usePlayer"));
+exports.usePlayer = usePlayer_1.default;
 //  Components
 var ThreekitProvider_1 = __importDefault(require("./components/ThreekitProvider"));
 exports.ThreekitProvider = ThreekitProvider_1.default;

package/dist/store/treble.d.ts

@@ -13,6 +13,7 @@ export interface IPlayerInit {
     initialConfiguration?: IConfiguration;
 }
 export interface ILaunchConfig {
+    assetId?: string;
     productId: string;
     threekitEnv: string;
     serverUrl: string;
@@ -36,6 +37,7 @@ export interface TrebleState {
     isThreekitInitialized: boolean;
     playerElId: undefined | string;
     notifications: boolean;
+    loadingProgress: number;
 }
 export interface NotificationEvent extends Event {
     detail: {
@@ -54,6 +56,7 @@ export declare const setThreekitInitialized: import("@reduxjs/toolkit").ActionCr
 export declare const setPlayerLoading: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, string>;
 export declare const setPlayerElement: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>;
 export declare const reloadTreble: import("@reduxjs/toolkit").ActionCreatorWithPayload<Partial<TrebleState>, string>;
+export declare const updateLoadingProgress: import("@reduxjs/toolkit").ActionCreatorWithPayload<number, string>;
 /*****************************************************
  * Slice
  ****************************************************/
@@ -65,6 +68,7 @@ export declare const getThreekitEnv: (state: RootState) => string;
 export declare const isThreekitInitialized: (state: RootState) => boolean;
 export declare const isPlayerLoading: (state: RootState) => boolean;
 export declare const getPlayerElementId: (state: RootState) => undefined | string;
+export declare const getLoadingProgress: (state: RootState) => number;
 /*****************************************************
  * Complex Actions
  ****************************************************/

package/dist/store/treble.js

@@ -50,7 +50,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reloadPlayer = exports.unloadPlayer = exports.launch = exports.initPlayer = exports.getPlayerElementId = exports.isPlayerLoading = exports.isThreekitInitialized = exports.getThreekitEnv = exports.reloadTreble = exports.setPlayerElement = exports.setPlayerLoading = exports.setThreekitInitialized = exports.setThreekitEnv = void 0;
+exports.reloadPlayer = exports.unloadPlayer = exports.launch = exports.initPlayer = exports.getLoadingProgress = exports.getPlayerElementId = exports.isPlayerLoading = exports.isThreekitInitialized = exports.getThreekitEnv = exports.updateLoadingProgress = exports.reloadTreble = exports.setPlayerElement = exports.setPlayerLoading = exports.setThreekitInitialized = exports.setThreekitEnv = void 0;
 var connection_1 = __importDefault(require("../connection"));
 var toolkit_1 = require("@reduxjs/toolkit");
 var api_1 = __importDefault(require("../api"));
@@ -103,6 +103,7 @@ var initialState = {
     isPlayerLoading: false,
     playerElId: undefined,
     notifications: true,
+    loadingProgress: 0,
 };
 /*****************************************************
  * Actions
@@ -112,6 +113,7 @@ exports.setThreekitInitialized = (0, toolkit_1.createAction)('treble/set-threeki
 exports.setPlayerLoading = (0, toolkit_1.createAction)('treble/set-player-loading');
 exports.setPlayerElement = (0, toolkit_1.createAction)('treble/set-player-element');
 exports.reloadTreble = (0, toolkit_1.createAction)('treble/reload');
+exports.updateLoadingProgress = (0, toolkit_1.createAction)('treble/update-loading-progress');
 /*****************************************************
  * Slice
  ****************************************************/
@@ -139,6 +141,10 @@ var reducer = (0, toolkit_1.createSlice)({
         builder.addCase(exports.reloadTreble, function (state, action) {
             return __assign(__assign({}, state), action.payload);
         });
+        builder.addCase(exports.updateLoadingProgress, function (state, action) {
+            state.loadingProgress = Math.round(action.payload * 100);
+            return state;
+        });
     },
 }).reducer;
 /*****************************************************
@@ -163,6 +169,11 @@ var getPlayerElementId = function (state) {
     return state.treble.playerElId;
 };
 exports.getPlayerElementId = getPlayerElementId;
+//  Player's HTML element
+var getLoadingProgress = function (state) {
+    return state.treble.loadingProgress;
+};
+exports.getLoadingProgress = getLoadingProgress;
 /*****************************************************
  * Complex Actions
  ****************************************************/
@@ -175,7 +186,11 @@ var initPlayer = function (config) {
                     el = config.el, authToken = config.authToken, assetId = config.assetId, stageId = config.stageId, orgId = config.orgId, playerConfig = config.playerConfig, initialConfiguration = config.initialConfiguration;
                     return [4 /*yield*/, window.threekitPlayer(__assign(__assign({ el: el, 
                             // Variables to sort out
-                            authToken: authToken, stageId: stageId, assetId: assetId }, playerConfig), { initialConfiguration: initialConfiguration }))];
+                            authToken: authToken, stageId: stageId, assetId: assetId }, 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);
+                            } }))];
                 case 1:
                     player = _a.sent();
                     return [4 /*yield*/, player.getConfigurator()];
@@ -200,6 +215,7 @@ var initPlayer = function (config) {
                         };
                     dispatch((0, exports.setThreekitInitialized)(true));
                     dispatch((0, exports.setPlayerLoading)(false));
+                    dispatch((0, exports.updateLoadingProgress)(1));
                     if (window.threekit.treble._debugMode)
                         (0, utils_1.runDebugger)();
                     window.threekit.player.on('setConfiguration', function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -211,8 +227,6 @@ var initPlayer = function (config) {
                                     attributes = getState().attributes;
                                     previousAttributes = Object.values(attributes);
                                     updatedAttributes = window.threekit.configurator.getDisplayAttributes();
-                                    if (window.threekit.treble._debugMode)
-                                        (0, utils_1.runDebugger)();
                                     dispatch((0, attributes_1.setAttributes)(updatedAttributes));
                                     return [4 /*yield*/, ((_a = EVENTS.postConfigurationChange) === null || _a === void 0 ? void 0 : _a.call(EVENTS, updatedAttributes, {}, previousAttributes))];
                                 case 1:
@@ -229,7 +243,7 @@ var initPlayer = function (config) {
 exports.initPlayer = initPlayer;
 var launch = function (launchConfig) {
     return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {
-        var config, productId, credentials, productsRaw, products, threekitEnv, serverUrl, playerConfig, envCredentials, _a, assetId, stageId, configurationId, initialConfigurationRaw, threekitDomainRaw, orgId, authToken, el, threekitDomain, initialConfiguration, updatedAssetId, params, configId, configuration;
+        var config, productId, credentials, productsRaw, products, threekitEnv, serverUrl, playerConfig, envCredentials, _a, assetIdRaw, stageId, configurationId, initialConfigurationRaw, assetId, threekitDomainRaw, orgId, authToken, el, threekitDomain, initialConfiguration, updatedAssetId, params, configId, configuration;
         var _b, _c, _d, _e, _f, _g, _h;
         return __generator(this, function (_j) {
             switch (_j.label) {
@@ -287,7 +301,8 @@ var launch = function (launchConfig) {
                     serverUrl = (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.serverUrl) || ((_g = config === null || config === void 0 ? void 0 : config.project) === null || _g === void 0 ? void 0 : _g.serverUrl);
                     playerConfig = Object.assign({}, constants_1.DEFAULT_PLAYER_CONFIG, config.player, launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.playerConfig);
                     envCredentials = credentials[threekitEnv];
-                    _a = products[productId][threekitEnv], assetId = _a.assetId, stageId = _a.stageId, configurationId = _a.configurationId, initialConfigurationRaw = _a.initialConfiguration;
+                    _a = products[productId][threekitEnv], assetIdRaw = _a.assetId, stageId = _a.stageId, configurationId = _a.configurationId, initialConfigurationRaw = _a.initialConfiguration;
+                    assetId = (launchConfig === null || launchConfig === void 0 ? void 0 : launchConfig.assetId) || assetIdRaw;
                     threekitDomainRaw = envCredentials.threekitDomain || "".concat(threekitEnv, ".threekit.com");
                     orgId = envCredentials.orgId, authToken = envCredentials.publicToken;
                     if (playerConfig.elementId) {

package/dist/store/wishlist.d.ts

@@ -9,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[], Omit<ISaveConfiguration, "configurator">, {}>;
+export declare const addToWishlist: import("@reduxjs/toolkit").AsyncThunk<import("../http/configurations").IConfigurationResponse[], Omit<ISaveConfiguration, "configuration">, {}>;
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threekit-tools/treble",
-  "version": "0.0.78",
+  "version": "0.0.81",
   "author": "Amaan Saeed",
   "license": "MIT",
   "files": [