@threekit-tools/treble 0.0.56 → 0.0.57-animation

package/dist/components/FlatForm/index.js

@@ -10,6 +10,25 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+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 };
 };
@@ -20,7 +39,7 @@ var prop_types_1 = __importDefault(require("prop-types"));
 var flatForm_styles_1 = require("./flatForm.styles");
 var ProductName_1 = __importDefault(require("../ProductName"));
 var ProductDescription_1 = __importDefault(require("../ProductDescription"));
-var formComponents_1 = __importDefault(require("../formComponents"));
+var formComponents_1 = __importStar(require("../formComponents"));
 var utils_1 = require("../../utils");
 var useConfigurator_1 = __importDefault(require("../../hooks/useConfigurator"));
 var constants_1 = require("../../constants");
@@ -45,10 +64,12 @@ var FlatForm = function (props) {
             var Component;
             var props = ((_b = (_a = (attributes || {})) === null || _a === void 0 ? void 0 : _a[attr.name]) === null || _b === void 0 ? void 0 : _b.props) || {};
             var type = attr.type;
-            if (type === 'Asset' &&
-                attr.assetType === constants_1.ASSET_TYPES.upload) {
+            if (attr.type === 'Asset' && attr.assetType === constants_1.ASSET_TYPES.upload) {
                 type = attr.assetType;
             }
+            else if (attr.type === 'String' && attr.values.length === 0) {
+                type = formComponents_1.FORM_COMPONENT_TYPES.stringInput;
+            }
             if ((_d = (_c = (attributes || {})) === null || _c === void 0 ? void 0 : _c[attr.name]) === null || _d === void 0 ? void 0 : _d.component) {
                 Component = (_e = Object.entries(formComponents_1.default[type] || {}).find(function (_a) {
                     var _b, _c;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { IFormComponentProps } from '../containers/formInputContainer';
+export interface ITextInput extends IFormComponentProps<undefined> {
+}
+export declare const TextInput: {
+    (props: ITextInput): JSX.Element;
+    componentName: string;
+    compatibleAttributes: Set<string>;
+};
+declare const _default: (props: ITextInput) => JSX.Element | null;
+export default _default;

package/dist/components/TextInput/index.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextInput = void 0;
+var react_1 = __importDefault(require("react"));
+// import PropTypes from 'prop-types';
+var FormComponentTitle_1 = __importDefault(require("../FormComponentTitle"));
+var FormComponentDescription_1 = __importDefault(require("../FormComponentDescription"));
+var textInput_styles_1 = require("./textInput.styles");
+var shared_styles_1 = require("../shared.styles");
+var utils_1 = require("../../utils");
+var constants_1 = require("../../constants");
+var formInputContainer_1 = __importDefault(require("../containers/formInputContainer"));
+var TextInput = function (props) {
+    var title = props.title, description = props.description, value = props.value, onChange = props.onChange, customClassName = props.className;
+    var cls = (0, utils_1.generateInputClassName)('text-input', customClassName, title);
+    return (react_1.default.createElement(shared_styles_1.FormComponentWrapper, { className: cls },
+        react_1.default.createElement(FormComponentTitle_1.default, { title: title, className: cls }),
+        react_1.default.createElement(FormComponentDescription_1.default, { description: description, className: cls }),
+        react_1.default.createElement(textInput_styles_1.Input, { type: "text", value: value, onChange: function (e) { return onChange && onChange(e.target.value); }, className: cls })));
+};
+exports.TextInput = TextInput;
+exports.TextInput.componentName = 'text-input';
+exports.TextInput.compatibleAttributes = new Set([constants_1.ATTRIBUTE_TYPES.string]);
+exports.default = (0, formInputContainer_1.default)(exports.TextInput);

package/dist/components/TextInput/textInput.styles.d.ts

@@ -0,0 +1 @@
+export declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/TextInput/textInput.styles.js

@@ -0,0 +1,13 @@
+"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.Input = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.Input = styled_components_1.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  margin: 0;\n  padding: 10px 6px;\n  background: #fff;\n  border: 1px solid #d9d9d9;\n  color: ", ";\n  outline: none;\n  border-radius: 2px;\n  font-size: 14px;\n  transition: all 0.3s;\n  font-family: ", ";\n\n  &:hover {\n    border-color: ", ";\n  }\n\n  &:focus {\n    border-color: ", ";\n    box-shadow: 0 0 0 2px ", ";\n  }\n"], ["\n  width: 100%;\n  margin: 0;\n  padding: 10px 6px;\n  background: #fff;\n  border: 1px solid #d9d9d9;\n  color: ", ";\n  outline: none;\n  border-radius: 2px;\n  font-size: 14px;\n  transition: all 0.3s;\n  font-family: ", ";\n\n  &:hover {\n    border-color: ", ";\n  }\n\n  &:focus {\n    border-color: ", ";\n    box-shadow: 0 0 0 2px ", ";\n  }\n"])), function (props) { return props.theme.textColor; }, function (props) { return props.theme.fontFamily; }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.primaryColor; }, function (props) { return "".concat(props.theme.primaryColor, "33"); });
+var templateObject_1;

package/dist/components/containers/formInputContainer.d.ts

@@ -1,4 +1,5 @@
 import { FunctionComponent } from 'react';
+import { RawAttributeValue } from '../../hooks/useAttribute';
 import { IDisplayAttributeAssetValue, IThreekitDisplayAttribute } from '../../threekit';
 export interface IOptionShared {
     name: string;
@@ -23,10 +24,11 @@ export interface IFormContainerProps extends Pick<MetadataKeys, 'metadataKeyThum
     title?: string;
     description?: string;
     value?: string;
-    onClick?: (value: string) => void;
+    onClick?: (value: RawAttributeValue) => Promise<void>;
+    onChange?: (value: RawAttributeValue) => Promise<void>;
     className?: string;
 }
-export interface IFormComponentProps<T extends IOptionShared | undefined> extends Pick<IFormContainerProps, 'title' | 'description' | 'value' | 'onClick' | 'className'> {
+export interface IFormComponentProps<T extends IOptionShared | undefined> extends Pick<IFormContainerProps, 'title' | 'description' | 'value' | 'onClick' | 'onChange' | 'className'> {
     options: null | undefined | Array<T>;
 }
 export interface IFormComponent<P> extends FunctionComponent<P> {

package/dist/components/formComponents.d.ts

@@ -1,7 +1,10 @@
 /// <reference types="react" />
+export declare const FORM_COMPONENT_TYPES: {
+    stringInput: string;
+};
 export declare const formComponents: {
     [x: string]: {
-        [x: string]: ((props: import("./Cards").ICards) => JSX.Element | null) | ((props: import("./Tiles").ITiles) => JSX.Element | null);
+        [x: string]: ((props: import("./Cards").ICards) => JSX.Element | null) | ((props: import("./Tiles").ITiles) => JSX.Element | null) | ((props: import("./TextInput").ITextInput) => JSX.Element | null);
     } | {
         [x: string]: (props: import("./Upload").IUpload) => JSX.Element | null;
     };

package/dist/components/formComponents.js

@@ -18,9 +18,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var _a, _b, _c, _d;
+var _a, _b, _c, _d, _e;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formComponents = void 0;
+exports.formComponents = exports.FORM_COMPONENT_TYPES = void 0;
 var constants_1 = require("../constants");
 var Cards_1 = __importStar(require("./Cards"));
 var Dropdown_1 = __importStar(require("./Dropdown"));
@@ -30,9 +30,13 @@ var Tiles_1 = __importStar(require("./Tiles"));
 var TilesGroup_1 = __importStar(require("./TilesGroup"));
 var Upload_1 = __importStar(require("./Upload"));
 // import UploadArea, { UploadArea as UploadAreaComponent } from './UploadArea';
+var TextInput_1 = __importStar(require("./TextInput"));
+exports.FORM_COMPONENT_TYPES = {
+    stringInput: 'string-input',
+};
+//  First option for each attribute type is the default value
 exports.formComponents = (_a = {},
     _a[constants_1.ATTRIBUTE_TYPES.asset] = (_b = {},
-        //  First option is default
         _b[Strips_1.Strips.componentName] = Strips_1.default,
         _b[Cards_1.Cards.componentName] = Cards_1.default,
         _b[Dropdown_1.Dropdown.componentName] = Dropdown_1.default,
@@ -41,16 +45,19 @@ exports.formComponents = (_a = {},
         _b[TilesGroup_1.TilesGroup.componentName] = TilesGroup_1.default,
         _b),
     _a[constants_1.ATTRIBUTE_TYPES.string] = (_c = {},
-        //  First option is default
         _c[Tiles_1.Tiles.componentName] = Tiles_1.default,
         _c[Dropdown_1.Dropdown.componentName] = Dropdown_1.default,
         _c[Cards_1.Cards.componentName] = Cards_1.default,
         _c[Strips_1.Strips.componentName] = Strips_1.default,
         _c[Swatch_1.Swatch.componentName] = Swatch_1.default,
         _c[TilesGroup_1.TilesGroup.componentName] = TilesGroup_1.default,
+        _c[TextInput_1.TextInput.componentName] = TextInput_1.default,
         _c),
-    _a[constants_1.ASSET_TYPES.upload] = (_d = {},
-        _d[Upload_1.Upload.componentName] = Upload_1.default,
+    _a[exports.FORM_COMPONENT_TYPES.stringInput] = (_d = {},
+        _d[TextInput_1.TextInput.componentName] = TextInput_1.default,
         _d),
+    _a[constants_1.ASSET_TYPES.upload] = (_e = {},
+        _e[Upload_1.Upload.componentName] = Upload_1.default,
+        _e),
     _a);
 exports.default = exports.formComponents;

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

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

package/dist/hooks/useSingleAnimation/index.js

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

package/dist/threekit.d.ts

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

package/dist/utils.d.ts

@@ -22,7 +22,7 @@ export declare const generateLayoutClassName: (component: string, customClassNam
 export declare const generateToolClassName: (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
 export declare const generateDisplayClassName: (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
 export declare const generateFormClassName: (component: string, customClassName?: string | undefined, title?: string | undefined) => string;
-export declare const IsJsonString: (str: string) => boolean;
+export declare const isJsonString: (str: string) => boolean;
 export declare const objectToQueryStr: (obj: Record<string, any>) => string;
 export declare const getParams: () => Record<string, string | {
     [key: string]: any;

package/dist/utils.js

@@ -9,7 +9,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadTrebleConfig = exports.isUuid = exports.filterFormAttributes = exports.selectionToConfiguration = exports.translateAttribute = exports.createThreekitScriptEl = exports.metadataValueToObject = exports.easeInOutCubic = exports.copyToClipboard = exports.dataURItoFile = exports.dataURItoBlob = exports.setCameraPosition = exports.getCameraPosition = exports.findHitNode = exports.deflateRgb = exports.inflateRgb = exports.rgbToHex = exports.hexToRgb = exports.regularToKebabCase = exports.deepCompare = exports.shallowCompare = exports.getResumableUrl = exports.getParams = exports.objectToQueryStr = exports.IsJsonString = exports.generateFormClassName = exports.generateDisplayClassName = exports.generateToolClassName = exports.generateLayoutClassName = exports.generateWidgetClassName = exports.generateInputClassName = exports.generateClassName = void 0;
+exports.loadTrebleConfig = exports.isUuid = exports.filterFormAttributes = exports.selectionToConfiguration = exports.translateAttribute = exports.createThreekitScriptEl = exports.metadataValueToObject = exports.easeInOutCubic = exports.copyToClipboard = exports.dataURItoFile = exports.dataURItoBlob = exports.setCameraPosition = exports.getCameraPosition = exports.findHitNode = exports.deflateRgb = exports.inflateRgb = exports.rgbToHex = exports.hexToRgb = exports.regularToKebabCase = exports.deepCompare = exports.shallowCompare = exports.getResumableUrl = exports.getParams = exports.objectToQueryStr = exports.isJsonString = exports.generateFormClassName = exports.generateDisplayClassName = exports.generateToolClassName = exports.generateLayoutClassName = exports.generateWidgetClassName = exports.generateInputClassName = exports.generateClassName = void 0;
 var constants_1 = require("./constants");
 var generateClassName = function (baseClass) {
     return function (component, customClassName, title) {
@@ -29,7 +29,7 @@ exports.generateLayoutClassName = (0, exports.generateClassName)(constants_1.LAY
 exports.generateToolClassName = (0, exports.generateClassName)(constants_1.TOOL_CLASS_NAME);
 exports.generateDisplayClassName = (0, exports.generateClassName)(constants_1.DISPLAY_CLASS_NAME);
 exports.generateFormClassName = (0, exports.generateClassName)(constants_1.FORM_CLASS_NAME);
-var IsJsonString = function (str) {
+var isJsonString = function (str) {
     try {
         JSON.parse(str);
     }
@@ -38,7 +38,7 @@ var IsJsonString = function (str) {
     }
     return true;
 };
-exports.IsJsonString = IsJsonString;
+exports.isJsonString = isJsonString;
 var isObject = function (object) {
     return object != null && typeof object === 'object';
 };
@@ -50,7 +50,7 @@ var objectToQueryStr = function (obj) {
         if (i)
             output += '&';
         if (val !== undefined)
-            output += "".concat(key, "=").concat((0, exports.IsJsonString)(val) ? JSON.stringify(val) : val);
+            output += "".concat(key, "=").concat((0, exports.isJsonString)(val) ? JSON.stringify(val) : val);
         return output;
     }, '?');
 };
@@ -62,7 +62,7 @@ var getParams = function () {
         if (!(key === null || key === void 0 ? void 0 : key.length))
             return output;
         var preppedValue = decodeURIComponent(value);
-        output[decodeURIComponent(key)] = (0, exports.IsJsonString)(preppedValue)
+        output[decodeURIComponent(key)] = (0, exports.isJsonString)(preppedValue)
             ? JSON.parse(preppedValue)
             : preppedValue;
         return output;

package/package.json

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