@threekit-tools/treble 0.0.85-next-3 → 0.0.85-next-6

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

@@ -0,0 +1,8 @@
+interface BreatheAnimationProps {
+    magnifier?: number;
+    speed?: number;
+    resumeDelay?: number;
+    nodeName: string;
+}
+export declare const BreatheAnimation: (props: BreatheAnimationProps) => null;
+export default BreatheAnimation;

package/dist/components/BreatheAnimation/index.js

@@ -0,0 +1,184 @@
+"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.BreatheAnimation = void 0;
+var react_1 = require("react");
+var useAnimationStart_1 = __importDefault(require("../../hooks/useAnimationStart"));
+var types_1 = require("../../types");
+var BreatheAnimation = function (props) {
+    var readyToAnimate = (0, useAnimationStart_1.default)();
+    var initialTranslation = (0, react_1.useRef)(null);
+    var initialRotation = (0, react_1.useRef)(null);
+    var animationInProgress = (0, react_1.useRef)(false);
+    var animationNodeId = (0, react_1.useRef)(undefined);
+    var startTime = (0, react_1.useRef)(null);
+    var timeoutId = (0, react_1.useRef)(null);
+    var _a = Object.assign({
+        speed: 4,
+        magnifier: 2,
+        resumeDelay: undefined,
+        nodeName: undefined,
+    }, props), speed = _a.speed, magnifier = _a.magnifier, resumeDelay = _a.resumeDelay, nodeName = _a.nodeName;
+    (0, react_1.useEffect)(function () {
+        if (!readyToAnimate)
+            return;
+        if (!nodeName)
+            return;
+        var ruleName = "wobble-animation";
+        var animateFrame = function (timestamp) {
+            if (!initialTranslation.current ||
+                !initialRotation.current ||
+                !animationNodeId.current)
+                return;
+            if (startTime.current === null)
+                startTime.current = timestamp;
+            var elapsed = (timestamp - startTime.current) / 1000;
+            var rotationDelta = {
+                x: 6 * magnifier * Math.cos(elapsed / (2.25 * speed)),
+                y: 3 * magnifier * Math.sin(elapsed / (2 * speed)),
+                z: 2 * magnifier * Math.sin(elapsed / (2 * speed)),
+            };
+            var translationDelta = {
+                x: 0,
+                y: (magnifier * Math.sin(elapsed / speed)) / 100,
+                z: 0,
+            };
+            window.threekit.player.scene.set({
+                id: animationNodeId.current,
+                plug: types_1.PLUG_TYPES.TRANSFORM,
+                property: types_1.TRANSFORM_PROPERTY_TYPES.ROTATION,
+            }, {
+                x: initialRotation.current.x + rotationDelta.x,
+                y: initialRotation.current.y + rotationDelta.y,
+                z: initialRotation.current.z + rotationDelta.z,
+            });
+            window.threekit.player.scene.set({
+                id: animationNodeId.current,
+                plug: types_1.PLUG_TYPES.TRANSFORM,
+                property: types_1.TRANSFORM_PROPERTY_TYPES.TRANSLATION,
+            }, {
+                x: initialTranslation.current.x + translationDelta.x,
+                y: initialTranslation.current.y + translationDelta.y,
+                z: initialTranslation.current.z + translationDelta.z,
+            });
+            if (animationInProgress.current)
+                window.requestAnimationFrame(animateFrame);
+        };
+        (function () { return __awaiter(void 0, void 0, void 0, function () {
+            var player, assetInstance;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        player = window.threekit.player.enableApi(types_1.PRIVATE_APIS.PLAYER);
+                        return [4, player.getAssetInstance(window.threekit.player.scene.find({
+                                id: window.threekit.player.instanceId,
+                                plug: types_1.PLUG_TYPES.PROXY,
+                                property: 'asset',
+                            }))];
+                    case 1:
+                        assetInstance = _a.sent();
+                        animationNodeId.current = window.threekit.player.scene.get({
+                            from: assetInstance,
+                            name: nodeName,
+                        }).id;
+                        initialRotation.current = window.threekit.player.scene.get({
+                            id: animationNodeId.current,
+                            plug: types_1.PLUG_TYPES.TRANSFORM,
+                            property: types_1.TRANSFORM_PROPERTY_TYPES.ROTATION,
+                        });
+                        initialTranslation.current = window.threekit.player.scene.get({
+                            id: animationNodeId.current,
+                            plug: types_1.PLUG_TYPES.TRANSFORM,
+                            property: types_1.TRANSFORM_PROPERTY_TYPES.TRANSLATION,
+                        });
+                        animationInProgress.current = true;
+                        window.threekit.player.tools.addTool({
+                            key: ruleName,
+                            label: 'wobble-animation',
+                            active: true,
+                            enabled: true,
+                            handlers: {
+                                mousedown: function () { return __awaiter(void 0, void 0, void 0, function () {
+                                    return __generator(this, function (_a) {
+                                        animationInProgress.current = false;
+                                        if (resumeDelay === undefined)
+                                            window.threekit.player.tools.removeTool(ruleName);
+                                        return [2];
+                                    });
+                                }); },
+                                mouseup: function () { return __awaiter(void 0, void 0, void 0, function () {
+                                    return __generator(this, function (_a) {
+                                        if (resumeDelay === undefined)
+                                            return [2];
+                                        if (timeoutId.current) {
+                                            clearTimeout(timeoutId.current);
+                                            timeoutId.current = null;
+                                        }
+                                        timeoutId.current = setTimeout(function () {
+                                            initialRotation.current = window.threekit.player.scene.get({
+                                                id: animationNodeId.current,
+                                                plug: types_1.PLUG_TYPES.TRANSFORM,
+                                                property: types_1.TRANSFORM_PROPERTY_TYPES.ROTATION,
+                                            });
+                                            initialTranslation.current = window.threekit.player.scene.get({
+                                                id: animationNodeId.current,
+                                                plug: types_1.PLUG_TYPES.TRANSFORM,
+                                                property: types_1.TRANSFORM_PROPERTY_TYPES.TRANSLATION,
+                                            });
+                                            startTime.current = null;
+                                            animationInProgress.current = true;
+                                            window.requestAnimationFrame(animateFrame);
+                                        }, resumeDelay * 1000);
+                                        return [2];
+                                    });
+                                }); },
+                            },
+                        });
+                        window.requestAnimationFrame(animateFrame);
+                        return [2];
+                }
+            });
+        }); })();
+    }, [readyToAnimate]);
+    return null;
+};
+exports.BreatheAnimation = BreatheAnimation;
+exports.default = exports.BreatheAnimation;

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

@@ -0,0 +1,12 @@
+declare enum RotationDirections {
+    CLOCKWISE = "clockwise",
+    COUNTER_CLOCKWISE = "counter-clockwise"
+}
+interface TurntableAnimationProps {
+    speed?: number;
+    resumeDelay?: number;
+    rotationDirection?: RotationDirections;
+    nodeName: string;
+}
+export declare const TurntableAnimation: (props: TurntableAnimationProps) => null;
+export default TurntableAnimation;

package/dist/components/TurntableAnimation/index.js

@@ -0,0 +1,166 @@
+"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.TurntableAnimation = void 0;
+var react_1 = require("react");
+var useAnimationStart_1 = __importDefault(require("../../hooks/useAnimationStart"));
+var types_1 = require("../../types");
+var RotationDirections;
+(function (RotationDirections) {
+    RotationDirections["CLOCKWISE"] = "clockwise";
+    RotationDirections["COUNTER_CLOCKWISE"] = "counter-clockwise";
+})(RotationDirections || (RotationDirections = {}));
+var TurntableAnimation = function (props) {
+    var readyToAnimate = (0, useAnimationStart_1.default)();
+    var initialRotation = (0, react_1.useRef)(null);
+    var animationInProgress = (0, react_1.useRef)(false);
+    var rotationNodeId = (0, react_1.useRef)(undefined);
+    var startTime = (0, react_1.useRef)(null);
+    var timeoutId = (0, react_1.useRef)(null);
+    var _a = Object.assign({
+        speed: 4,
+        resumeDelay: undefined,
+        rotationDirection: RotationDirections.CLOCKWISE,
+        nodeName: undefined,
+    }, props), speed = _a.speed, resumeDelay = _a.resumeDelay, rotationDirection = _a.rotationDirection, nodeName = _a.nodeName;
+    (0, react_1.useEffect)(function () {
+        if (!readyToAnimate)
+            return;
+        if (!nodeName)
+            return;
+        var ruleName = "turntable-animation";
+        var animateFrame = function (timestamp) {
+            if (!(initialRotation === null || initialRotation === void 0 ? void 0 : initialRotation.current) || !rotationNodeId.current)
+                return;
+            if (startTime.current === null)
+                startTime.current = timestamp;
+            var elapsed = timestamp - startTime.current;
+            var tAnimPercent = (elapsed / (1000 * 60)) % 1;
+            var rotation = speed * 360 * tAnimPercent;
+            var currentRotation = Object.assign({}, initialRotation.current, {
+                y: rotationDirection === RotationDirections.CLOCKWISE
+                    ? initialRotation.current.y + rotation
+                    : initialRotation.current.y - rotation,
+            });
+            window.threekit.player.scene.set({
+                id: rotationNodeId.current,
+                plug: types_1.PLUG_TYPES.TRANSFORM,
+                property: types_1.TRANSFORM_PROPERTY_TYPES.ROTATION,
+            }, currentRotation);
+            if (animationInProgress.current)
+                window.requestAnimationFrame(animateFrame);
+        };
+        (function () { return __awaiter(void 0, void 0, void 0, function () {
+            var player, assetInstance;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        player = window.threekit.player.enableApi(types_1.PRIVATE_APIS.PLAYER);
+                        return [4, player.getAssetInstance(window.threekit.player.scene.find({
+                                id: window.threekit.player.instanceId,
+                                plug: types_1.PLUG_TYPES.PROXY,
+                                property: 'asset',
+                            }))];
+                    case 1:
+                        assetInstance = _b.sent();
+                        rotationNodeId.current = (_a = window.threekit.player.scene.get({
+                            from: assetInstance,
+                            name: nodeName,
+                        })) === null || _a === void 0 ? void 0 : _a.id;
+                        if (!rotationNodeId.current)
+                            return [2];
+                        initialRotation.current = window.threekit.player.scene.get({
+                            id: rotationNodeId.current,
+                            plug: types_1.PLUG_TYPES.TRANSFORM,
+                            property: types_1.TRANSFORM_PROPERTY_TYPES.ROTATION,
+                        });
+                        animationInProgress.current = true;
+                        window.threekit.player.tools.addTool({
+                            key: ruleName,
+                            label: 'turntable-animation',
+                            active: true,
+                            enabled: true,
+                            handlers: {
+                                mousedown: function () { return __awaiter(void 0, void 0, void 0, function () {
+                                    return __generator(this, function (_a) {
+                                        animationInProgress.current = false;
+                                        if (resumeDelay === undefined)
+                                            window.threekit.player.tools.removeTool(ruleName);
+                                        return [2];
+                                    });
+                                }); },
+                                mouseup: function () { return __awaiter(void 0, void 0, void 0, function () {
+                                    return __generator(this, function (_a) {
+                                        if (resumeDelay === undefined)
+                                            return [2];
+                                        if (timeoutId.current) {
+                                            clearTimeout(timeoutId.current);
+                                            timeoutId.current = null;
+                                        }
+                                        timeoutId.current = setTimeout(function () {
+                                            initialRotation.current = window.threekit.player.scene.get({
+                                                id: rotationNodeId.current,
+                                                plug: types_1.PLUG_TYPES.TRANSFORM,
+                                                property: types_1.TRANSFORM_PROPERTY_TYPES.ROTATION,
+                                            });
+                                            startTime.current = null;
+                                            animationInProgress.current = true;
+                                            window.requestAnimationFrame(animateFrame);
+                                        }, resumeDelay * 1000);
+                                        return [2];
+                                    });
+                                }); },
+                            },
+                        });
+                        window.requestAnimationFrame(animateFrame);
+                        return [2, function () {
+                                if (resumeDelay !== undefined)
+                                    window.threekit.player.tools.removeTool(ruleName);
+                            }];
+                }
+            });
+        }); })();
+    }, [readyToAnimate]);
+    return null;
+};
+exports.TurntableAnimation = TurntableAnimation;
+exports.default = exports.TurntableAnimation;

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

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

package/dist/hooks/useAnimationStart/index.js

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

package/dist/index.d.ts

@@ -51,6 +51,8 @@ import ProductLayout from './components/ProductLayout';
 import PlayerLoadingCircular from './components/PlayerLoadingCircular';
 import PlayerLoadingSpinner from './components/PlayerLoadingSpinner';
 import DraggableHint from './components/DraggableHint';
+import TurntableAnimation from './components/TurntableAnimation';
+import BreatheAnimation from './components/BreatheAnimation';
 import AddIcon from './icons/Add';
 import ArrowLeftIcon from './icons/ArrowLeft';
 import ArrowRightIcon from './icons/ArrowRight';
@@ -93,4 +95,4 @@ import WishlistIcon from './icons/Wishlist';
 import ZoomInIcon from './icons/ZoomIn';
 import ZoomOutIcon from './icons/ZoomOut';
 import SpinnerIcon from './icons/Spinner';
-export { useAttribute, useConfigurator, useConfigurationLoader, useFirstPlayerInteraction, 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, Skeleton, message, Modal, Drawer, Accordion, Tabs, PortalToArOverlay, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, TrebleApp, ProductLayout, PlayerLoadingCircular, PlayerLoadingSpinner, DraggableHint, AddIcon, ArrowLeftIcon, ArrowRightIcon, CameraIcon, CaretDownIcon, CaretUpIcon, CaretLeftIcon, CaretRightIcon, CartIcon, CheckmateIcon, ClipboardIcon, ColorPickerIcon, CopyIcon, DeleteIcon, DoubleCaretLeftIcon, DoubleCaretRightIcon, DownloadIcon, DraggableIcon, DragIcon, EditIcon, HeartIcon, ImageIcon, InfoIcon, MailIcon, MenuIcon, MoreIcon, NewWindowIcon, PauseIcon, PlayIcon, RedoIcon, RemoveIcon, RulerIcon, SearchIcon, SettingsIcon, ShareIcon, SwitchIcon, TagIcon, UndoIcon, WishlistIcon, ZoomInIcon, ZoomOutIcon, SpinnerIcon, };
+export { useAttribute, useConfigurator, useConfigurationLoader, useFirstPlayerInteraction, 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, Skeleton, message, Modal, Drawer, Accordion, Tabs, PortalToArOverlay, PortalToElement, AwaitThreekitLoad, FlatForm, Zoom, Snapshots, Wishlist, Share, TrebleApp, ProductLayout, PlayerLoadingCircular, PlayerLoadingSpinner, DraggableHint, TurntableAnimation, BreatheAnimation, AddIcon, ArrowLeftIcon, ArrowRightIcon, CameraIcon, CaretDownIcon, CaretUpIcon, CaretLeftIcon, CaretRightIcon, CartIcon, CheckmateIcon, ClipboardIcon, ColorPickerIcon, CopyIcon, DeleteIcon, DoubleCaretLeftIcon, DoubleCaretRightIcon, DownloadIcon, DraggableIcon, DragIcon, EditIcon, HeartIcon, ImageIcon, InfoIcon, MailIcon, MenuIcon, MoreIcon, NewWindowIcon, PauseIcon, PlayIcon, RedoIcon, RemoveIcon, RulerIcon, SearchIcon, SettingsIcon, ShareIcon, SwitchIcon, TagIcon, UndoIcon, WishlistIcon, ZoomInIcon, ZoomOutIcon, SpinnerIcon, };

package/dist/index.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProductLayout = exports.TrebleApp = 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.Skeleton = 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.useFirstPlayerInteraction = exports.useConfigurationLoader = exports.useConfigurator = exports.useAttribute = void 0;
-exports.SpinnerIcon = exports.ZoomOutIcon = exports.ZoomInIcon = exports.WishlistIcon = exports.UndoIcon = exports.TagIcon = exports.SwitchIcon = exports.ShareIcon = exports.SettingsIcon = exports.SearchIcon = exports.RulerIcon = exports.RemoveIcon = exports.RedoIcon = exports.PlayIcon = exports.PauseIcon = exports.NewWindowIcon = exports.MoreIcon = exports.MenuIcon = exports.MailIcon = exports.InfoIcon = exports.ImageIcon = exports.HeartIcon = exports.EditIcon = exports.DragIcon = exports.DraggableIcon = exports.DownloadIcon = exports.DoubleCaretRightIcon = exports.DoubleCaretLeftIcon = exports.DeleteIcon = exports.CopyIcon = exports.ColorPickerIcon = exports.ClipboardIcon = exports.CheckmateIcon = exports.CartIcon = exports.CaretRightIcon = exports.CaretLeftIcon = exports.CaretUpIcon = exports.CaretDownIcon = exports.CameraIcon = exports.ArrowRightIcon = exports.ArrowLeftIcon = exports.AddIcon = exports.DraggableHint = exports.PlayerLoadingSpinner = exports.PlayerLoadingCircular = void 0;
+exports.SpinnerIcon = exports.ZoomOutIcon = exports.ZoomInIcon = exports.WishlistIcon = exports.UndoIcon = exports.TagIcon = exports.SwitchIcon = exports.ShareIcon = exports.SettingsIcon = exports.SearchIcon = exports.RulerIcon = exports.RemoveIcon = exports.RedoIcon = exports.PlayIcon = exports.PauseIcon = exports.NewWindowIcon = exports.MoreIcon = exports.MenuIcon = exports.MailIcon = exports.InfoIcon = exports.ImageIcon = exports.HeartIcon = exports.EditIcon = exports.DragIcon = exports.DraggableIcon = exports.DownloadIcon = exports.DoubleCaretRightIcon = exports.DoubleCaretLeftIcon = exports.DeleteIcon = exports.CopyIcon = exports.ColorPickerIcon = exports.ClipboardIcon = exports.CheckmateIcon = exports.CartIcon = exports.CaretRightIcon = exports.CaretLeftIcon = exports.CaretUpIcon = exports.CaretDownIcon = exports.CameraIcon = exports.ArrowRightIcon = exports.ArrowLeftIcon = exports.AddIcon = exports.BreatheAnimation = exports.TurntableAnimation = exports.DraggableHint = exports.PlayerLoadingSpinner = exports.PlayerLoadingCircular = void 0;
 var useAttribute_1 = __importDefault(require("./hooks/useAttribute"));
 exports.useAttribute = useAttribute_1.default;
 var useConfigurator_1 = __importDefault(require("./hooks/useConfigurator"));
@@ -111,6 +111,10 @@ var PlayerLoadingSpinner_1 = __importDefault(require("./components/PlayerLoading
 exports.PlayerLoadingSpinner = PlayerLoadingSpinner_1.default;
 var DraggableHint_1 = __importDefault(require("./components/DraggableHint"));
 exports.DraggableHint = DraggableHint_1.default;
+var TurntableAnimation_1 = __importDefault(require("./components/TurntableAnimation"));
+exports.TurntableAnimation = TurntableAnimation_1.default;
+var BreatheAnimation_1 = __importDefault(require("./components/BreatheAnimation"));
+exports.BreatheAnimation = BreatheAnimation_1.default;
 var Add_1 = __importDefault(require("./icons/Add"));
 exports.AddIcon = Add_1.default;
 var ArrowLeft_1 = __importDefault(require("./icons/ArrowLeft"));

package/dist/store/treble.d.ts

@@ -32,6 +32,7 @@ export interface TrebleState {
     threekitEnv: string;
     isPlayerLoading: boolean;
     isThreekitInitialized: boolean;
+    isFirstRenderComplete: boolean;
     playerElId: undefined | string;
     notifications: boolean;
     loadingProgress: undefined | number;
@@ -48,6 +49,7 @@ interface EventHandlers {
 }
 export declare const setThreekitEnv: import("@reduxjs/toolkit").ActionCreatorWithPayload<string, string>;
 export declare const setThreekitInitialized: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, string>;
+export declare const setIsFirstRenderComplete: import("@reduxjs/toolkit").ActionCreatorWithPayload<boolean, string>;
 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>;
@@ -56,6 +58,7 @@ export declare const setPlayerInteraction: import("@reduxjs/toolkit").ActionCrea
 declare const reducer: import("redux").Reducer<TrebleState, import("redux").AnyAction>;
 export declare const getThreekitEnv: (state: RootState) => string;
 export declare const isThreekitInitialized: (state: RootState) => boolean;
+export declare const isFirstRenderComplete: (state: RootState) => boolean;
 export declare const isPlayerLoading: (state: RootState) => boolean;
 export declare const getPlayerElementId: (state: RootState) => undefined | string;
 export declare const getLoadingProgress: (state: RootState) => undefined | number;

package/dist/store/treble.js

@@ -50,12 +50,13 @@ 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.getPlayerInteraction = exports.getLoadingProgress = exports.getPlayerElementId = exports.isPlayerLoading = exports.isThreekitInitialized = exports.getThreekitEnv = exports.setPlayerInteraction = exports.updateLoadingProgress = exports.reloadTreble = exports.setPlayerElement = exports.setPlayerLoading = exports.setThreekitInitialized = exports.setThreekitEnv = void 0;
+exports.reloadPlayer = exports.unloadPlayer = exports.launch = exports.initPlayer = exports.getPlayerInteraction = exports.getLoadingProgress = exports.getPlayerElementId = exports.isPlayerLoading = exports.isFirstRenderComplete = exports.isThreekitInitialized = exports.getThreekitEnv = exports.setPlayerInteraction = exports.updateLoadingProgress = exports.reloadTreble = exports.setPlayerElement = exports.setPlayerLoading = exports.setIsFirstRenderComplete = exports.setThreekitInitialized = exports.setThreekitEnv = void 0;
 var connection_1 = __importDefault(require("../connection"));
 var toolkit_1 = require("@reduxjs/toolkit");
 var api_1 = __importDefault(require("../api"));
 var utils_1 = require("../utils");
 var constants_1 = require("../constants");
+var types_1 = require("../types");
 var Treble_1 = __importDefault(require("../Treble"));
 var attributes_1 = require("./attributes");
 var price_1 = require("./price");
@@ -84,6 +85,7 @@ var EVENTS = {};
 var initialState = {
     threekitEnv: 'preview',
     isThreekitInitialized: false,
+    isFirstRenderComplete: false,
     isPlayerLoading: false,
     playerElId: undefined,
     notifications: true,
@@ -92,6 +94,7 @@ var initialState = {
 };
 exports.setThreekitEnv = (0, toolkit_1.createAction)('treble/set-threekit-env');
 exports.setThreekitInitialized = (0, toolkit_1.createAction)('treble/set-threekit-initialized');
+exports.setIsFirstRenderComplete = (0, toolkit_1.createAction)('treble/set-is-first-render-complete');
 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');
@@ -110,6 +113,10 @@ var reducer = (0, toolkit_1.createSlice)({
             state.isThreekitInitialized = action.payload;
             return state;
         });
+        builder.addCase(exports.setIsFirstRenderComplete, function (state, action) {
+            state.isFirstRenderComplete = action.payload;
+            return state;
+        });
         builder.addCase(exports.setPlayerLoading, function (state, action) {
             state.isPlayerLoading = action.payload;
             return state;
@@ -138,6 +145,10 @@ var isThreekitInitialized = function (state) {
     return state.treble.isThreekitInitialized;
 };
 exports.isThreekitInitialized = isThreekitInitialized;
+var isFirstRenderComplete = function (state) {
+    return state.treble.isFirstRenderComplete;
+};
+exports.isFirstRenderComplete = isFirstRenderComplete;
 var isPlayerLoading = function (state) {
     return state.treble.isPlayerLoading;
 };
@@ -193,6 +204,9 @@ var initPlayer = function (config) {
                     dispatch((0, exports.setPlayerLoading)(false));
                     dispatch((0, exports.updateLoadingProgress)(1));
                     dispatch((0, exports.setPlayerInteraction)(true));
+                    window.threekit.player.on(types_1.SCENE_PHASES.RENDERED, function () {
+                        dispatch((0, exports.setIsFirstRenderComplete)(true));
+                    });
                     ruleName = 'use-first-player-interaction';
                     window.threekit.player.tools.addTool({
                         key: ruleName,

package/dist/types.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="webpack-env" />
 import threekitAPI from './api';
 import Treble from './Treble';
-declare enum SCENE_PHASES {
-    LOADED = 0,
-    PRELOADED = 1,
-    RENDERED = 2
+export declare enum SCENE_PHASES {
+    LOADED = "loaded",
+    PRELOADED = "preloaded",
+    RENDERED = "rendered"
 }
 export declare enum PRIVATE_APIS {
     SCENE = "scene",

package/dist/types.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SNAPSHOT_OUTPUTS = exports.SNAPSHOT_FORMATS = exports.TRANSFORM_PROPERTY_TYPES = exports.PLUG_TYPES = exports.ASSET_TYPES = exports.ATTRIBUTE_TYPES = exports.DISPLAY_OPTIONS = exports.PRIVATE_APIS = void 0;
+exports.SNAPSHOT_OUTPUTS = exports.SNAPSHOT_FORMATS = exports.TRANSFORM_PROPERTY_TYPES = exports.PLUG_TYPES = exports.ASSET_TYPES = exports.ATTRIBUTE_TYPES = exports.DISPLAY_OPTIONS = exports.PRIVATE_APIS = exports.SCENE_PHASES = void 0;
 var SCENE_PHASES;
 (function (SCENE_PHASES) {
-    SCENE_PHASES[SCENE_PHASES["LOADED"] = 0] = "LOADED";
-    SCENE_PHASES[SCENE_PHASES["PRELOADED"] = 1] = "PRELOADED";
-    SCENE_PHASES[SCENE_PHASES["RENDERED"] = 2] = "RENDERED";
-})(SCENE_PHASES || (SCENE_PHASES = {}));
+    SCENE_PHASES["LOADED"] = "loaded";
+    SCENE_PHASES["PRELOADED"] = "preloaded";
+    SCENE_PHASES["RENDERED"] = "rendered";
+})(SCENE_PHASES = exports.SCENE_PHASES || (exports.SCENE_PHASES = {}));
 var PRIVATE_APIS;
 (function (PRIVATE_APIS) {
     PRIVATE_APIS["SCENE"] = "scene";

package/package.json

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