@threekit-tools/treble 0.0.82 → 0.0.85

package/dist/types.d.ts

@@ -1,33 +1,67 @@
 /// <reference types="webpack-env" />
 import threekitAPI from './api';
 import Treble from './Treble';
-declare type SCENE_PHASES = 'LOADED' | 'PRELOADED' | 'RENDERED';
-declare type PRIVATE_APIS = 'scene' | 'player';
-export declare type DISPLAY_OPTIONS = 'webgl' | 'image';
-export declare type IAttributeTypes = 'String' | 'Asset' | 'Color' | 'Number' | 'Boolean';
-export declare type AssetType = 'upload' | 'item';
+declare enum SCENE_PHASES {
+    LOADED = 0,
+    PRELOADED = 1,
+    RENDERED = 2
+}
+export declare enum PRIVATE_APIS {
+    SCENE = "scene",
+    PLAYER = "player"
+}
+export declare enum DISPLAY_OPTIONS {
+    WEBGL = "webgl",
+    IMAGE = "image"
+}
+export declare enum ATTRIBUTE_TYPES {
+    STRING = "String",
+    ASSET = "Asset",
+    COLOR = "Color",
+    NUMBER = "Number",
+    BOOLEAN = "Boolean"
+}
+export declare enum ASSET_TYPES {
+    UPLOAD = "upload",
+    ITEM = "item"
+}
+export declare enum PLUG_TYPES {
+    PROXY = "Proxy",
+    TRANSFORM = "Transform"
+}
+export declare enum TRANSFORM_PROPERTY_TYPES {
+    ROTATION = "rotation",
+    TRANSLATION = "translation",
+    SCALE = "scale"
+}
+export declare enum SNAPSHOT_FORMATS {
+    JPG = "jpg",
+    PNG = "png"
+}
+export declare enum SNAPSHOT_OUTPUTS {
+    URL = "url",
+    DOWNLOAD = "download",
+    DATA_URL = "dataUrl",
+    BLOB = "blob",
+    FILE = "file"
+}
 export declare type IMetadata = Record<string, string | number | null>;
-/***************************************************
- *  Scene
- **************************************************/
-export interface ISceneQuery {
+export interface ISceneQueryShared {
     all?: boolean;
     id?: string;
     name?: string | RegExp;
     type?: string | Array<string>;
     names?: Array<RegExp>;
     properties?: any;
-    property?: string;
     child?: string;
     parent?: boolean;
     includeParent?: boolean;
-    from?: string | ISceneQuery;
+    from?: string | ISceneQueryShared | ISceneQueryNode;
     hasPlug?: string;
     operator?: any;
     operatorIndex?: number;
     evalNode?: boolean;
     evalPlug?: string;
-    plug?: string;
     shallow?: boolean;
     skipModels?: boolean;
     configurator?: boolean;
@@ -36,14 +70,20 @@ export interface ISceneQuery {
     tags?: Array<RegExp>;
     hierarchial?: boolean;
 }
+export interface ISceneQueryNode extends ISceneQueryShared {
+    plug?: PLUG_TYPES.PROXY;
+    property?: 'asset';
+}
+export interface ISceneQueryTransform extends ISceneQueryShared {
+    plug: PLUG_TYPES.TRANSFORM;
+    property: TRANSFORM_PROPERTY_TYPES;
+}
+export declare type ISceneQuery = ISceneQueryNode | ISceneQueryTransform | string;
 export interface ISceneResult {
     id: string;
     name: string;
     configurator: IThreekitPrivateConfigurator;
 }
-/***************************************************
- *  Configuration
- **************************************************/
 export interface IConfigurationAsset {
     assetId: string;
     configuration?: string;
@@ -57,22 +97,16 @@ export interface IConfigurationColor {
 export declare type IConfigurationAttribute = IConfigurationAsset | IConfigurationColor | string | number | boolean | undefined;
 export declare type IConfiguration = Record<string, IConfigurationAttribute>;
 export declare type ISetConfiguration = Record<string, IConfigurationAttribute>;
-/***************************************************
- *  ATTRIBUTES
- *
- *  This section covers both getAttributes() and getDisplayAttributes()
- **************************************************/
 interface IDisplayAttributeConfig {
     includeHidden?: boolean;
 }
-interface IAttributeBase<T extends IAttributeTypes, V extends IConfigurationAttribute> {
+interface IAttributeBase<T extends ATTRIBUTE_TYPES, V extends IConfigurationAttribute> {
     type: T;
     id: string;
     name: string;
     value: V;
     label: string;
 }
-/****** ASSET TYPE ATTRIBUTE *******/
 export interface IConfigurationAssetValue {
     assetId: string;
     name: string;
@@ -90,8 +124,8 @@ export interface IHydratedAttributeAssetValue extends IDisplayAttributeAssetValu
     handleSelect: () => Promise<void>;
     selected: boolean;
 }
-export interface IAttributeAssetBase<V> extends IAttributeBase<'Asset', IConfigurationAsset> {
-    assetType: AssetType;
+export interface IAttributeAssetBase<V> extends IAttributeBase<ATTRIBUTE_TYPES.ASSET, IConfigurationAsset> {
+    assetType: ASSET_TYPES;
     blacklist: [];
     defaultValue: IConfigurationAsset;
     hiddenValues?: Array<string>;
@@ -101,7 +135,6 @@ export interface IAttributeAssetBase<V> extends IAttributeBase<'Asset', IConfigu
 export declare type IDisplayAttributeAsset = IAttributeAssetBase<IDisplayAttributeAssetValue>;
 export declare type IHydratedAttributeAsset = IAttributeAssetBase<IHydratedAttributeAssetValue>;
 export declare type IAttributeAsset = IAttributeAssetBase<IConfigurationAssetValue>;
-/****** String TYPE ATTRIBUTE *******/
 export interface IDisplayAttributeStringValue {
     label: string;
     value: string;
@@ -110,7 +143,7 @@ export interface IHydratedAttributeStringValue extends IDisplayAttributeStringVa
     handleSelect: () => Promise<void>;
     selected: boolean;
 }
-export interface IAttributeStringBase<V> extends IAttributeBase<'String', string> {
+export interface IAttributeStringBase<V> extends IAttributeBase<ATTRIBUTE_TYPES.STRING, string> {
     blacklist: [];
     defaultValue: string;
     hiddenValues?: Array<string>;
@@ -120,31 +153,22 @@ export interface IAttributeStringBase<V> extends IAttributeBase<'String', string
 export declare type IDisplayAttributeString = IAttributeStringBase<IDisplayAttributeStringValue>;
 export declare type IHydratedAttributeString = IAttributeStringBase<IHydratedAttributeStringValue>;
 export declare type IAttributeString = IAttributeStringBase<string>;
-/****** STRING TYPE ATTRIBUTE *******/
-export interface IAttributeColor extends IAttributeBase<'Color', IConfigurationColor> {
+export interface IAttributeColor extends IAttributeBase<ATTRIBUTE_TYPES.COLOR, IConfigurationColor> {
     defaultValue: IConfigurationColor;
 }
-/****** NUMBER TYPE ATTRIBUTE *******/
-export interface IAttributeNumber extends IAttributeBase<'Number', number> {
+export interface IAttributeNumber extends IAttributeBase<ATTRIBUTE_TYPES.NUMBER, number> {
     defaultValue: number;
     lockToStep: boolean;
     max?: number;
     min?: number;
     step: number;
 }
-/****** NUMBER TYPE ATTRIBUTE *******/
-export interface IAttributeBoolean extends IAttributeBase<'Boolean', boolean> {
+export interface IAttributeBoolean extends IAttributeBase<ATTRIBUTE_TYPES.BOOLEAN, boolean> {
     defaultValue: boolean;
 }
-/****** getAttributes() *******/
 export declare type IThreekitAttribute = IAttributeAsset | IAttributeColor | IAttributeString | IAttributeNumber | IAttributeBoolean;
-/****** getDisplayAttributes() *******/
 export declare type IThreekitDisplayAttribute = IDisplayAttributeAsset | IDisplayAttributeString | IAttributeColor | IAttributeNumber | IAttributeBoolean;
-/****** Treble Hydrated Values *******/
 export declare type IHydratedAttribute = IHydratedAttributeAsset | IHydratedAttributeString | IAttributeColor | IAttributeNumber | IAttributeBoolean;
-/***************************************************
- *  Camera
- **************************************************/
 export interface ICoordinates {
     x: number;
     y: number;
@@ -160,10 +184,6 @@ export interface ISnapshotConfig {
         height: number;
     };
 }
-export declare type SNAPSHOT_FORMAT_TYPES = 'jpg' | 'png';
-/***************************************************
- * Tools
- **************************************************/
 export interface Node {
     name: string;
     nodeId: string;
@@ -211,9 +231,6 @@ export interface IThreekitTools {
     setTool: () => void;
     setTools: () => void;
 }
-/***************************************************
- *  Threekit Api
- **************************************************/
 export interface IConfigurationChangeEvent {
     name: string;
     appliedConfiguration: Record<string, string>;
@@ -231,13 +248,13 @@ export interface IThreekitConfigurator {
 }
 export interface IThreekitScene {
     PHASES: {
-        LOADED: 'loaded';
-        PRELOADED: 'preloaded';
-        RENDERED: 'rendered';
+        LOADED: SCENE_PHASES.LOADED;
+        PRELOADED: SCENE_PHASES.PRELOADED;
+        RENDERED: SCENE_PHASES.RENDERED;
     };
-    get: (query: ISceneQuery | string) => ISceneResult;
-    find: (query: ISceneQuery | string) => ISceneResult;
-    set: (query: ISceneQuery | string, transform: ICoordinates) => void;
+    get: <T extends ISceneQuery>(query: T) => T extends ISceneQueryTransform ? ICoordinates : ISceneResult;
+    find: (query: ISceneQuery) => string;
+    set: (query: ISceneQueryTransform, transform: ICoordinates) => void;
 }
 export interface IThreekitCamera {
     frameBoundingSphere: () => void;
@@ -259,12 +276,13 @@ export interface IThreekitPlayer {
     on: (phase: SCENE_PHASES | string, callback: (args: any) => void) => void;
     getConfigurator: () => Promise<IThreekitConfigurator>;
     getStageConfigurator: () => Promise<IThreekitConfigurator>;
-    enableApi: (api: PRIVATE_APIS) => any;
+    enableApi: <T extends PRIVATE_APIS>(api: T) => T extends PRIVATE_APIS.PLAYER ? IThreekitPrivatePlayer : any;
     snapshotAsync: (snapshotConfig: ISnapshotConfig) => Promise<string>;
     unload: () => Promise<string>;
 }
 export interface IThreekitPrivateConfigurator extends IThreekitConfigurator {
     getAppliedConfiguration: (attributeName: string) => string;
+    getFullConfiguration: () => IConfiguration;
 }
 export interface IThreekitPrivatePlayer {
     getConfigurator: () => IThreekitPrivateConfigurator;
@@ -272,6 +290,7 @@ export interface IThreekitPrivatePlayer {
         getFullConfiguration: () => IConfiguration;
     };
     calculateLogs: () => Promise<Record<string, any>>;
+    getAssetInstance: (query: ISceneQueryNode | string) => Promise<string>;
 }
 export interface ThreekitInitConfig {
     authToken: string;
@@ -305,9 +324,6 @@ export interface ThreekitInitConfig {
         help?: string;
     };
 }
-/***************************************************
- *  Treble Declarations
- **************************************************/
 export interface IFrameworkConfig {
     productsCtx: __WebpackModuleApi.RequireContext;
 }
@@ -337,9 +353,6 @@ export interface ITrebleConfig {
     treble: IFrameworkConfig;
     player: IPlayerConfig;
 }
-/***************************************************
- *  Global Declaration
- **************************************************/
 declare global {
     interface Window {
         threekitPlayer: (arg0: ThreekitInitConfig) => Promise<IThreekitPlayer>;

package/dist/types.js

@@ -1,2 +1,56 @@
 "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;
+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 = {}));
+var PRIVATE_APIS;
+(function (PRIVATE_APIS) {
+    PRIVATE_APIS["SCENE"] = "scene";
+    PRIVATE_APIS["PLAYER"] = "player";
+})(PRIVATE_APIS = exports.PRIVATE_APIS || (exports.PRIVATE_APIS = {}));
+var DISPLAY_OPTIONS;
+(function (DISPLAY_OPTIONS) {
+    DISPLAY_OPTIONS["WEBGL"] = "webgl";
+    DISPLAY_OPTIONS["IMAGE"] = "image";
+})(DISPLAY_OPTIONS = exports.DISPLAY_OPTIONS || (exports.DISPLAY_OPTIONS = {}));
+var ATTRIBUTE_TYPES;
+(function (ATTRIBUTE_TYPES) {
+    ATTRIBUTE_TYPES["STRING"] = "String";
+    ATTRIBUTE_TYPES["ASSET"] = "Asset";
+    ATTRIBUTE_TYPES["COLOR"] = "Color";
+    ATTRIBUTE_TYPES["NUMBER"] = "Number";
+    ATTRIBUTE_TYPES["BOOLEAN"] = "Boolean";
+})(ATTRIBUTE_TYPES = exports.ATTRIBUTE_TYPES || (exports.ATTRIBUTE_TYPES = {}));
+var ASSET_TYPES;
+(function (ASSET_TYPES) {
+    ASSET_TYPES["UPLOAD"] = "upload";
+    ASSET_TYPES["ITEM"] = "item";
+})(ASSET_TYPES = exports.ASSET_TYPES || (exports.ASSET_TYPES = {}));
+var PLUG_TYPES;
+(function (PLUG_TYPES) {
+    PLUG_TYPES["PROXY"] = "Proxy";
+    PLUG_TYPES["TRANSFORM"] = "Transform";
+})(PLUG_TYPES = exports.PLUG_TYPES || (exports.PLUG_TYPES = {}));
+var TRANSFORM_PROPERTY_TYPES;
+(function (TRANSFORM_PROPERTY_TYPES) {
+    TRANSFORM_PROPERTY_TYPES["ROTATION"] = "rotation";
+    TRANSFORM_PROPERTY_TYPES["TRANSLATION"] = "translation";
+    TRANSFORM_PROPERTY_TYPES["SCALE"] = "scale";
+})(TRANSFORM_PROPERTY_TYPES = exports.TRANSFORM_PROPERTY_TYPES || (exports.TRANSFORM_PROPERTY_TYPES = {}));
+var SNAPSHOT_FORMATS;
+(function (SNAPSHOT_FORMATS) {
+    SNAPSHOT_FORMATS["JPG"] = "jpg";
+    SNAPSHOT_FORMATS["PNG"] = "png";
+})(SNAPSHOT_FORMATS = exports.SNAPSHOT_FORMATS || (exports.SNAPSHOT_FORMATS = {}));
+var SNAPSHOT_OUTPUTS;
+(function (SNAPSHOT_OUTPUTS) {
+    SNAPSHOT_OUTPUTS["URL"] = "url";
+    SNAPSHOT_OUTPUTS["DOWNLOAD"] = "download";
+    SNAPSHOT_OUTPUTS["DATA_URL"] = "dataUrl";
+    SNAPSHOT_OUTPUTS["BLOB"] = "blob";
+    SNAPSHOT_OUTPUTS["FILE"] = "file";
+})(SNAPSHOT_OUTPUTS = exports.SNAPSHOT_OUTPUTS || (exports.SNAPSHOT_OUTPUTS = {}));

package/dist/utils.d.ts

@@ -1,5 +1,5 @@
 import { IThreekitCamera, IConfigurationColor, ICoordinates, IQuaternion, IThreekitDisplayAttribute, ISetConfiguration, IHydratedAttribute } from './types';
-import { ITrebleConfig, IAttributeTypes } from './types';
+import { ITrebleConfig, ATTRIBUTE_TYPES } from './types';
 import { RawAttributeValue } from './hooks/useAttribute';
 import { ITranslationMap } from './api/products';
 interface ICameraPosition {
@@ -53,7 +53,7 @@ export declare const hydrateAttribute: (data: [
     undefined | ITranslationMap,
     undefined | string
 ], optionSelectionHandler: (config: ISetConfiguration) => Promise<void>) => Record<string, IHydratedAttribute>;
-export declare const selectionToConfiguration: (value: RawAttributeValue, attributeType: IAttributeTypes) => string | number | boolean | File | IConfigurationColor | {
+export declare const selectionToConfiguration: (value: RawAttributeValue, attributeType: ATTRIBUTE_TYPES) => string | number | boolean | File | IConfigurationColor | {
     assetId: RawAttributeValue;
 } | undefined;
 export declare const filterFormAttributes: (attributes: Record<string, IThreekitDisplayAttribute>, attributeComponentProps: IAttributesComponentProps, includeReservedAttributes: boolean) => IThreekitDisplayAttribute[];

package/dist/utils.js

@@ -47,6 +47,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadTrebleConfig = exports.runDebugger = exports.isUuid = exports.filterFormAttributes = exports.selectionToConfiguration = exports.hydrateAttribute = exports.metadataValueToObject = exports.easeInOutCubic = exports.copyToClipboard = exports.downloadSnapshot = exports.dataURItoFile = exports.dataURItoBlob = exports.setCameraPosition = exports.getCameraPosition = exports.findHitNode = exports.deflateRgb = exports.inflateRgb = exports.rgbToHex = exports.hexToRgb = exports.regularToKebabCase = exports.deepCompare = exports.shallowCompare = exports.getResumableUrl = exports.getParams = exports.objectToQueryStr = exports.isJsonString = exports.isIOS = exports.generateFormClassName = exports.generateDisplayClassName = exports.generateToolClassName = exports.generateLayoutClassName = exports.generateWidgetClassName = exports.generateInputClassName = exports.generateClassName = void 0;
 var constants_1 = require("./constants");
+var types_1 = require("./types");
 var generateClassName = function (baseClass) {
     return function (component, customClassName, title) {
         var result = "".concat(baseClass, "-").concat(component);
@@ -143,35 +144,26 @@ var shallowCompare = function (value1, value2) {
 };
 exports.shallowCompare = shallowCompare;
 var deepCompare = function (item1, item2) {
-    //  Are the items the same type
     if (typeof item1 !== typeof item2)
         return false;
-    //  If that type is Array we deepCompare each item
-    //  against its counter part
-    //  The same arrays in different orders will fail this check
     else if (Array.isArray(item1)) {
         if (item1.length !== item2.length)
             return false;
         for (var i = 0; i < item1.length; i++)
             if (!(0, exports.deepCompare)(item1[i], item2[i]))
                 return false;
-        //  If they're objects...
     }
     else if (isObject(item1)) {
         var keys1 = Object.keys(item1);
         var keys2 = Object.keys(item2);
-        //  We makre sure they have the same keys...
         if (keys1.length !== keys2.length) {
             return false;
         }
-        //  and then deep compare each value
         for (var _i = 0, keys1_2 = keys1; _i < keys1_2.length; _i++) {
             var key = keys1_2[_i];
             if (!(0, exports.deepCompare)(item1[key], item2[key]))
                 return false;
         }
-        //  This leaves us with literals that can be
-        //  compared directly
     }
     else if (item1 !== item2)
         return false;
@@ -280,7 +272,7 @@ var downloadSnapshot = function (snapshot, filename) { return __awaiter(void 0,
         link.addEventListener('click', clickHandler);
         document.body.appendChild(link);
         link.click();
-        return [2 /*return*/];
+        return [2];
     });
 }); };
 exports.downloadSnapshot = downloadSnapshot;
@@ -365,12 +357,12 @@ var hydrateAttribute = function (data, optionSelectionHandler) {
 exports.hydrateAttribute = hydrateAttribute;
 var selectionToConfiguration = function (value, attributeType) {
     switch (attributeType) {
-        case constants_1.ATTRIBUTE_TYPES.number:
-        case constants_1.ATTRIBUTE_TYPES.string:
+        case types_1.ATTRIBUTE_TYPES.NUMBER:
+        case types_1.ATTRIBUTE_TYPES.STRING:
             return value;
-        case constants_1.ATTRIBUTE_TYPES.asset:
+        case types_1.ATTRIBUTE_TYPES.ASSET:
             return { assetId: value };
-        case constants_1.ATTRIBUTE_TYPES.color:
+        case types_1.ATTRIBUTE_TYPES.COLOR:
             return (0, exports.deflateRgb)(value);
         default:
             return value;
@@ -409,12 +401,12 @@ var runDebugger = function () { return __awaiter(void 0, void 0, void 0, functio
     var logs;
     return __generator(this, function (_a) {
         switch (_a.label) {
-            case 0: return [4 /*yield*/, window.threekit.treble._player.calculateLogs()];
+            case 0: return [4, window.threekit.treble._player.calculateLogs()];
             case 1:
                 logs = _a.sent();
                 if (logs.length)
                     console.log("Threekit Debugger: \n", logs);
-                return [2 /*return*/];
+                return [2];
         }
     });
 }); };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threekit-tools/treble",
-  "version": "0.0.82",
+  "version": "0.0.85",
   "author": "Amaan Saeed",
   "license": "MIT",
   "files": [
@@ -23,18 +23,28 @@
   },
   "scripts": {
     "start": "tsc --watch",
-    "build": "tsc",
+    "build": "npm run clean && tsc",
     "clean": "rimraf dist",
+    "esbuild": "npm run clean && node build.js && tsc --emitDeclarationOnly --outDir dist",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook -o build",
     "lint": "eslint ./src",
+    "lint-staged": "lint-staged",
     "check-format": "prettier -c ./src",
     "format": "prettier --write ./src",
     "test": "jest"
   },
+  "lint-staged": {
+    "./src/**/*.{css,less,scss,html,json,jsx,js,tsx,ts}": [
+      "prettier --write ./src"
+    ],
+    "./src": "eslint ./src --fix"
+  },
   "dependencies": {
     "@reduxjs/toolkit": "^1.6.2",
     "axios": "^0.22.0",
+    "chokidar": "^3.5.3",
+    "live-server": "^1.2.2",
     "react-redux": "^7.2.6",
     "redux": "^4.1.2",
     "redux-logger": "^3.0.6",
@@ -61,14 +71,18 @@
     "babel-jest": "^27.5.1",
     "babel-loader": "^8.2.2",
     "chromatic": "^6.5.3",
+    "esbuild": "^0.14.48",
     "jest": "^27.5.1",
-    "react": ">=17.0.2",
-    "react-dom": ">=17.0.2",
+    "lint-staged": "^13.0.3",
     "rimraf": "^3.0.2",
     "serve": "^12.0.1",
     "themeprovider-storybook": "^1.8.0",
     "ts-jest": "^27.1.3",
     "typescript": ">=4.4.4"
   },
+  "peerDependencies": {
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2"
+  },
   "gitHead": "2e16bcf98f81e16bb1768072fdb3968122e7966f"
 }