architwin 1.0.19 → 1.0.20

package/lib/architwin.js

@@ -0,0 +1,1750 @@
+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 (g && (g = 0, op[0] && (_ = 0)), _) 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 };
+    }
+};
+import axios from "axios";
+import { distance } from "mathjs";
+// @ts-ignore
+// import * as _config from './config.json'
+import JSZip from "jszip";
+import JSZipUtils from "jszip-utils";
+var _config = {
+    aws: {
+        region: "ap-northeast-1",
+        accessKeyId: "AKIAVVUXZ66KW7GBSW7A",
+        secretAccessKey: "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'",
+    },
+    mp: {
+        sdkKey: "a3ae8341bd8f44899eba16df86307d7d",
+        urlParams: [
+            "help",
+            "play",
+            "nt",
+            "play",
+            "qs",
+            "brand",
+            "dh",
+            "tour",
+            "gt",
+            "hr",
+            "mls",
+            "mt",
+            "tagNav",
+            "pin",
+            "portal",
+            "f",
+            "fp",
+            "lang",
+            "kb",
+            "lp",
+            "st",
+            "title",
+            "tourcta",
+            "wts",
+            "ts",
+            "hl",
+            "vr",
+            "nozoom",
+            "search",
+            "wh",
+        ],
+    },
+};
+var apiURL = "http://localhost:5173/api/v1/";
+var sdkKey = _config.mp.sdkKey;
+var urlParams = _config.mp.urlParams;
+console.log("apiURL...", apiURL);
+// start here
+var _api = {};
+var _space = {};
+var _atwin = {};
+var _tags = [];
+var tags = [];
+var sweeps = [];
+var _allSlideShow = [];
+var _slideShowImage = [];
+var _currentSlideShowID = 0;
+var _currentSlideIndex = 0;
+var _currentSlideShow = null;
+var _timer = null;
+var _videos = [];
+var _currentViewMode = "";
+var _3DXObject = [];
+var _unrenderedObjects = [];
+var _transformControlNode;
+var _inputControlComponent = null;
+var _selectedObject = {};
+var previousTimestamp = 0;
+var _currentSweep = {};
+var _currentCameraPose = {};
+var _sweeps = [];
+// end here
+var _atwinSrc = "/bundle/showcase.html?m=''&applicationKey=".concat(sdkKey, "&newtags=1");
+// =========================================== INITIALIZATION ===========================================
+// initialization: loginUser, iframe, space, tags, objects
+function connectSpace(url, auth, config) {
+    var _a;
+    return __awaiter(this, void 0, void 0, function () {
+        var api, showcase, spaceId, space, tags, objects, showcaseWindow;
+        var _this = this;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    console.log("connectSpace()");
+                    console.log("__config", config);
+                    api = axios.create({
+                        baseURL: apiURL,
+                        headers: {
+                            "Access-Control-Allow-Origin": "*",
+                            "Content-Type": "application/json",
+                            Authorization: auth.apiKey,
+                        },
+                    });
+                    _api = api;
+                    showcase = document.getElementById(config.iframeId);
+                    spaceId = getSpaceId(url);
+                    if (!spaceId) {
+                        console.error("spaceId is undefined");
+                        return [2 /*return*/];
+                    }
+                    return [4 /*yield*/, loginUser(auth.user)];
+                case 1:
+                    _b.sent();
+                    return [4 /*yield*/, getSpace(spaceId)];
+                case 2:
+                    space = _b.sent();
+                    if (!space) {
+                        console.error("space is undefined");
+                        return [2 /*return*/];
+                    }
+                    setSpace(space);
+                    _atwinSrc = getIframeSrc(config);
+                    console.log("__atwinSrc", _atwinSrc);
+                    showcase.src = _atwinSrc;
+                    return [4 /*yield*/, getTags(space)];
+                case 3:
+                    tags = _b.sent();
+                    if (!tags) {
+                        console.log("tags is undefined");
+                        return [2 /*return*/];
+                    }
+                    setTags(tags);
+                    return [4 /*yield*/, get3DObjects(spaceId)];
+                case 4:
+                    objects = _b.sent();
+                    if (!objects) {
+                        console.log("objects is undefined");
+                        return [2 /*return*/];
+                    }
+                    //setObjects(objects);
+                    (_a = showcase.contentWindow) === null || _a === void 0 ? void 0 : _a.location.reload(); // force reload iframe
+                    showcaseWindow = showcase.contentWindow;
+                    showcase.addEventListener("load", function () { return __awaiter(_this, void 0, void 0, function () {
+                        var e_1;
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0:
+                                    console.log('iframe.addEventListener("load")');
+                                    console.log("showcaseWindow", showcaseWindow);
+                                    _a.label = 1;
+                                case 1:
+                                    _a.trys.push([1, 3, , 4]);
+                                    return [4 /*yield*/, showcaseWindow.MP_SDK.connect(showcaseWindow)];
+                                case 2:
+                                    _atwin = _a.sent();
+                                    console.log("Hello Bundle SDK", _atwin);
+                                    onShowcaseConnect();
+                                    return [3 /*break*/, 4];
+                                case 3:
+                                    e_1 = _a.sent();
+                                    console.error(e_1);
+                                    return [3 /*break*/, 4];
+                                case 4: return [2 /*return*/];
+                            }
+                        });
+                    }); });
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+// start here
+// After connectSpace it will render: tags, objects, and listeners
+function onShowcaseConnect() {
+    return __awaiter(this, void 0, void 0, function () {
+        var modelData, e_2;
+        var _this = this;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    console.log("onShowcaseConnect()");
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, _atwin.Model.getData()];
+                case 2:
+                    modelData = _a.sent();
+                    console.log("Model sid:" + modelData.sid);
+                    _atwin.App.state.subscribe(function (appState) { return __awaiter(_this, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0:
+                                    console.log("appState", appState);
+                                    if (!(appState.phase === _atwin.App.Phase.LOADING)) return [3 /*break*/, 2];
+                                    console.log("App is loading...");
+                                    return [4 /*yield*/, hideTags()];
+                                case 1:
+                                    _a.sent();
+                                    return [3 /*break*/, 7];
+                                case 2:
+                                    if (!(appState.phase === _atwin.App.Phase.STARTING)) return [3 /*break*/, 4];
+                                    console.log("App is starting...");
+                                    return [4 /*yield*/, showTags(_tags)];
+                                case 3:
+                                    _a.sent();
+                                    return [3 /*break*/, 7];
+                                case 4:
+                                    if (!(appState.phase === _atwin.App.Phase.PLAYING)) return [3 /*break*/, 7];
+                                    console.log("App is playing...");
+                                    return [4 /*yield*/, getSweeps()];
+                                case 5:
+                                    _a.sent();
+                                    return [4 /*yield*/, setLighting()];
+                                case 6:
+                                    _a.sent();
+                                    _atwin.Sweep.current.subscribe(function (currentSweep) {
+                                        // Change to the current sweep has occurred.
+                                        if (currentSweep.sid === "") {
+                                            console.log("Not currently stationed at a sweep position");
+                                        }
+                                        else {
+                                            _currentSweep = currentSweep;
+                                            console.log("Currently at sweep", _currentSweep.id);
+                                            // check auto play
+                                            videoAutoPlay();
+                                            // console.log("_3DXObject "+_3DXObject.length)
+                                            // _3DXObject.forEach(obj => {
+                                            //   console.log("3D Position "+ JSON.stringify(obj.position))
+                                            // })
+                                        }
+                                    });
+                                    _atwin.Camera.pose.subscribe(function (pose) {
+                                        return __awaiter(this, void 0, void 0, function () {
+                                            var hasElapsed;
+                                            return __generator(this, function (_a) {
+                                                switch (_a.label) {
+                                                    case 0:
+                                                        // Changes to the Camera pose have occurred.
+                                                        _currentCameraPose = pose;
+                                                        console.log("Current Camera Pose", _currentCameraPose);
+                                                        hasElapsed = hasTimeElapsed(300);
+                                                        if (!hasElapsed) return [3 /*break*/, 2];
+                                                        console.log("_unrenderedObjects " + _unrenderedObjects.length);
+                                                        return [4 /*yield*/, renderOnDemand()];
+                                                    case 1:
+                                                        _a.sent();
+                                                        _a.label = 2;
+                                                    case 2:
+                                                        if (hasTimeElapsed(1000)) {
+                                                            getNearbyObjects({ type: 'ALL', distance: 2 });
+                                                        }
+                                                        return [2 /*return*/];
+                                                }
+                                            });
+                                        });
+                                    });
+                                    _atwin.Mode.current.subscribe(function (mode) {
+                                        _currentViewMode = mode;
+                                    });
+                                    _a.label = 7;
+                                case 7: return [2 /*return*/];
+                            }
+                        });
+                    }); });
+                    return [3 /*break*/, 4];
+                case 3:
+                    e_2 = _a.sent();
+                    console.error(e_2);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    });
+}
+// end here
+/**
+ * Super light weight alternative to lodash's debounce
+ * This function will allow you to debounce a function a set amoint in milliseconds
+ * Useful for improving performance if your function is inside a subscribe method
+ * @param maxTime milliseconds
+ * @returns {boolean}
+ */
+function hasTimeElapsed(maxTime) {
+    var currentTimestamp = Date.now();
+    // Difference in milliseconds
+    var differenceInMilliseconds = (currentTimestamp - previousTimestamp) % 1000;
+    previousTimestamp = currentTimestamp;
+    if (differenceInMilliseconds >= maxTime) {
+        console.log("Elapsed more than ".concat(maxTime));
+        return true;
+    }
+    else {
+        console.log("Elapsed less than ".concat(maxTime));
+        return false;
+    }
+}
+/**
+ * This function detects and return objects fetched from the API that have NOT been rendered yet
+ * Not to be confused with getNearbyObjects which returns INodes that have already been rendered
+ * @constructor
+ * @param payload
+ * @type {NearbyPayload}
+ * @returns {Array<IShowcaseObject>}
+ */
+function getNearbyUnrenderedObjects(payload) {
+    var toBeRendered = [];
+    var currentPose = {
+        x: _currentCameraPose.position.x,
+        y: _currentCameraPose.position.y
+    };
+    toBeRendered = _unrenderedObjects.filter(function (obj) {
+        var obj_pos = {
+            x: obj.object_position.x,
+            y: obj.object_position.y,
+        };
+        var distance = calculateDistance(currentPose, obj_pos);
+        return distance < payload.distance;
+    });
+    var filtered = _unrenderedObjects.filter(function (obj) {
+        return toBeRendered.indexOf(obj) === -1;
+    });
+    _unrenderedObjects = filtered;
+    console.log("render toBeRendered " + toBeRendered.length);
+    return toBeRendered;
+}
+/**
+ * This function returns an object that returns an array of 3D, video, and slideshow objects
+ * You can pass a object type as a object parameter to set what the contents of the returned objects will be
+ * @constructor
+ * @param payload
+ * @type {NearbyPayload}
+ * @returns {NearbyObjects}
+ */
+function getNearbyObjects(payload) {
+    if (payload.type === undefined || payload.type === '') {
+        payload.type = 'ALL';
+    }
+    if (payload.distance === undefined) {
+        payload.distance = 2;
+    }
+    var pos1 = {
+        x: _currentCameraPose.position.x,
+        y: _currentCameraPose.position.y
+    };
+    var three_d = [];
+    var videos = [];
+    var slideshows = [];
+    if (payload.type === 'ALL' || '3DX') {
+        three_d = _3DXObject.filter(function (obj) {
+            var pos2 = {
+                x: obj.position.x,
+                y: obj.position.y
+            };
+            var distance = calculateDistance(pos1, pos2);
+            console.log("3DX Distance: " + distance);
+            return distance < payload.distance;
+        });
+    }
+    if (payload.type === 'ALL' || 'VIDEO') {
+        videos = _videos.filter(function (vid) {
+            var pos2 = {
+                x: vid.node.position.x,
+                y: vid.node.position.y
+            };
+            var distance = calculateDistance(pos1, pos2);
+            console.log("Video Distance: " + distance);
+            return distance < payload.distance;
+        });
+    }
+    if (payload.type === 'ALL' || 'SLIDESHOW') {
+        slideshows = _allSlideShow.filter(function (slide) {
+            var pos2 = {
+                x: slide.node.position.x,
+                y: slide.node.position.y
+            };
+            var distance = calculateDistance(pos1, pos2);
+            console.log("Slideshow Distance: " + distance);
+            return distance < payload.distance;
+        });
+    }
+    console.log("nearby3DXObjects " + three_d.length);
+    console.log("nearbyVideos " + videos.length);
+    console.log("nearbySlideshows " + slideshows.length);
+    return {
+        x3d: three_d,
+        videos: videos,
+        slideshows: slideshows
+    };
+}
+function show3DObjects(object) {
+    var _a;
+    return __awaiter(this, void 0, void 0, function () {
+        var sceneObject, id, modelNode, component;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0: return [4 /*yield*/, _atwin.Scene.createObjects(1)];
+                case 1:
+                    sceneObject = (_b.sent())[0];
+                    id = Math.floor(Math.random() * 20);
+                    modelNode = sceneObject.addNode(id.toString());
+                    component = modelNode.addComponent(getComponentLoader(object), {
+                        url: (_a = object.object_data) === null || _a === void 0 ? void 0 : _a.amazon_uri,
+                    });
+                    if (!component.inputs) {
+                        console.error("component.inputs is undefined");
+                        return [2 /*return*/];
+                    }
+                    component.inputs.localScale = {
+                        x: object.object_scale.x,
+                        y: object.object_scale.y,
+                        z: object.object_scale.z,
+                    };
+                    // @ts-ignore
+                    modelNode.obj3D.position.set(object.object_position.x, object.object_position.y, object.object_position.z);
+                    // @ts-ignore
+                    modelNode.obj3D.rotation.set(object.object_rotation.x, object.object_rotation.y, object.object_rotation.z);
+                    _3DXObject.push(modelNode);
+                    console.log("_3DXObject " + _3DXObject.length);
+                    modelNode.start();
+                    //Spy on component
+                    component.spyOnEvent(new ClickSpy(object, modelNode, component));
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+/**
+ * Renders objects if within set range
+ * This function SHOULD be debounced for better performance
+ * @constructor
+ */
+function renderOnDemand() {
+    return __awaiter(this, void 0, void 0, function () {
+        var objects;
+        var _this = this;
+        return __generator(this, function (_a) {
+            if (_unrenderedObjects.length !== 0) {
+                console.log("renderOnDemand()");
+                objects = getNearbyUnrenderedObjects({ type: '', distance: 2 });
+                objects.forEach(function (obj) { return __awaiter(_this, void 0, void 0, function () {
+                    var _a, _b, _c, _d;
+                    return __generator(this, function (_e) {
+                        switch (_e.label) {
+                            case 0:
+                                if (!(((_a = obj.object_data) === null || _a === void 0 ? void 0 : _a.object_type) === "FBX" ||
+                                    ((_b = obj.object_data) === null || _b === void 0 ? void 0 : _b.object_type) === "GLB")) return [3 /*break*/, 2];
+                                return [4 /*yield*/, show3DObjects(obj)];
+                            case 1:
+                                _e.sent();
+                                return [3 /*break*/, 6];
+                            case 2:
+                                if (!(((_c = obj.object_data) === null || _c === void 0 ? void 0 : _c.object_type) === "MP4")) return [3 /*break*/, 4];
+                                return [4 /*yield*/, showVideoObjects(obj)];
+                            case 3:
+                                _e.sent();
+                                return [3 /*break*/, 6];
+                            case 4:
+                                if (!(((_d = obj.object_data) === null || _d === void 0 ? void 0 : _d.object_type) === "ZIP")) return [3 /*break*/, 6];
+                                return [4 /*yield*/, showSlideScreenModel(obj)];
+                            case 5:
+                                _e.sent();
+                                _e.label = 6;
+                            case 6: return [2 /*return*/];
+                        }
+                    });
+                }); });
+            }
+            return [2 /*return*/];
+        });
+    });
+}
+// get iframe src with configurations (mp url parameters)
+function getIframeSrc(config) {
+    console.log("getIframeSrc()", config);
+    var modelId = _space.space_url.split("?m=")[1];
+    if (!modelId) {
+        console.error("modelId is undefined");
+        return "";
+    }
+    var src = "";
+    src += "architwin/bundle/showcase.html?m=".concat(modelId, "&applicationKey=").concat(sdkKey, "&newtags=1");
+    for (var _i = 0, urlParams_1 = urlParams; _i < urlParams_1.length; _i++) {
+        var param = urlParams_1[_i];
+        if (param in config) {
+            // @ts-ignore
+            src += "&".concat(param, "=").concat(config[param]);
+        }
+    }
+    return src;
+}
+// login user to fix cors error
+function loginUser(user) {
+    return __awaiter(this, void 0, void 0, function () {
+        var response;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    console.log("loginUser(user)", user);
+                    return [4 /*yield*/, _api.post("/cas/tickets?email=" + user.email + "&password=" + user.password)];
+                case 1:
+                    response = _a.sent();
+                    console.log("loginUser, response", response.status, response.data);
+                    if (response.status == 200) {
+                        return [2 /*return*/, response.data];
+                    }
+                    else {
+                        return [2 /*return*/, response];
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+// get showcase/space data in api
+function getSpace(spaceId) {
+    return __awaiter(this, void 0, void 0, function () {
+        var response;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    console.log("getShowcase(spaceId: string)", spaceId);
+                    return [4 /*yield*/, _api.get("showcases/id/".concat(spaceId))];
+                case 1:
+                    response = _a.sent();
+                    console.log("response", response);
+                    if (response.status === 200) {
+                        if (response.data.data.length === 0) {
+                            console.error("No data");
+                        }
+                        return [2 /*return*/, response.data.data[0]];
+                    }
+                    else {
+                        console.error("Error in fetchShowcase()" + response);
+                    }
+                    return [2 /*return*/, null];
+            }
+        });
+    });
+}
+function getSpaceId(url) {
+    var urlArray = url.split(/^(([^:\/?#]+):)?(\/\/([^\/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?/);
+    var path = urlArray[5];
+    var spaceId = path.split("/")[3];
+    console.log("urlArray", urlArray);
+    console.log("path", path);
+    if (!spaceId) {
+        console.error("spaceId is undefined");
+        return;
+    }
+    return spaceId;
+}
+function setSpace(space) {
+    console.log("setSpace(space: ISpace)", space);
+    _space = space;
+}
+// get tags from api
+function getTags(space) {
+    return __awaiter(this, void 0, void 0, function () {
+        var response, tags_1, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    console.log("getTags()");
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, _api.get("tags/showcase-id/".concat(space.id))];
+                case 2:
+                    response = _a.sent();
+                    console.log("response", response);
+                    if (response.status === 200) {
+                        tags_1 = response.data.data;
+                        if (!tags_1) {
+                            console.error("tags is undefined");
+                        }
+                        return [2 /*return*/, tags_1];
+                    }
+                    else {
+                        console.error("Custom Error: Unable to fetch tags");
+                    }
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_1 = _a.sent();
+                    console.error(error_1);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/, null];
+            }
+        });
+    });
+}
+function setTags(tags) {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            console.log("setTags()", tags);
+            _tags = tags.map(function (tag) {
+                //@ts-ignore
+                tag.json_data = JSON.parse(tag.json_data);
+                //@ts-ignore
+                tag.json_data.id = tag.json_data.sid;
+                return tag;
+            });
+            mapTags(_tags);
+            return [2 /*return*/];
+        });
+    });
+}
+// get objects from api
+function get3DObjects(showcase_id) {
+    return __awaiter(this, void 0, void 0, function () {
+        var id, response, showcase_objects, getRequests, response_1, object_data_1, threed_objects, error_2, error_3;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!showcase_id) return [3 /*break*/, 8];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 7, , 8]);
+                    id = parseInt(showcase_id);
+                    console.log("showcase_id " + id);
+                    return [4 /*yield*/, _api.get("showcase-objects/showcase-id/".concat(id))];
+                case 2:
+                    response = _a.sent();
+                    showcase_objects = response.data.data;
+                    console.log("showcase_objects " + JSON.stringify(showcase_objects));
+                    getRequests = showcase_objects.map(function (obj) {
+                        return _api.get("objects/id/".concat(obj.object_id));
+                    });
+                    _a.label = 3;
+                case 3:
+                    _a.trys.push([3, 5, , 6]);
+                    return [4 /*yield*/, axios.all(getRequests)];
+                case 4:
+                    response_1 = _a.sent();
+                    object_data_1 = response_1.map(function (res) {
+                        return res.data.data[0];
+                    });
+                    console.log("object_data" + JSON.stringify(object_data_1));
+                    threed_objects = showcase_objects.map(function (showcase) {
+                        var target = object_data_1.find(function (obj) { return obj.id === showcase.object_id; });
+                        if (target) {
+                            showcase.object_data = target;
+                        }
+                        //parse string back to an object
+                        if (showcase.object_position) {
+                            showcase.object_position =
+                                typeof showcase.object_position === "string"
+                                    ? JSON.parse(showcase.object_position)
+                                    : showcase.object_position;
+                        }
+                        if (showcase.object_rotation) {
+                            showcase.object_rotation =
+                                typeof showcase.object_rotation === "string"
+                                    ? JSON.parse(showcase.object_rotation)
+                                    : showcase.object_rotation;
+                        }
+                        if (showcase.object_scale) {
+                            showcase.object_scale =
+                                typeof showcase.object_scale === "string"
+                                    ? JSON.parse(showcase.object_scale)
+                                    : showcase.object_scale;
+                        }
+                        return showcase;
+                    });
+                    console.log("get3DObjectsByShowcaseId " + JSON.stringify(threed_objects));
+                    _unrenderedObjects = threed_objects;
+                    return [2 /*return*/, threed_objects];
+                case 5:
+                    error_2 = _a.sent();
+                    console.error("threed_objects " + error_2);
+                    return [3 /*break*/, 6];
+                case 6: return [3 /*break*/, 8];
+                case 7:
+                    error_3 = _a.sent();
+                    console.error("get3DObjectsByShowcaseId " + error_3);
+                    return [3 /*break*/, 8];
+                case 8: return [2 /*return*/, []];
+            }
+        });
+    });
+}
+// function setObjects(objects: IShowcaseObject[]) {
+//   console.log("setObjects()", objects);
+//   _objects = objects;
+// }
+// =========================================== END INITIALIZATION ===========================================
+// =========================================== TAGS FUNCTIONALITY ===========================================
+// navigate to tag
+function gotoTag(tag_id) {
+    return __awaiter(this, void 0, void 0, function () {
+        var tag, error_4;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    console.log("gotoTag(tag: tag_id)", tag_id);
+                    if (!tag_id) {
+                        console.error("tag is undefined");
+                        return [2 /*return*/];
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    tag = _tags.find(function (i) { return i.id === tag_id; });
+                    if (!tag) {
+                        console.error("tag is not found");
+                        return [2 /*return*/];
+                    }
+                    return [4 /*yield*/, _atwin.Mattertag.navigateToTag(tag.json_data.id, _atwin.Mattertag.Transition.FLY)];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_4 = _a.sent();
+                    console.error(error_4);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    });
+}
+// render tags to space
+function showTags(tags) {
+    return __awaiter(this, void 0, void 0, function () {
+        var _this = this;
+        return __generator(this, function (_a) {
+            tags.forEach(function (tag, indx) { return __awaiter(_this, void 0, void 0, function () {
+                var mpData, tagIds, attachmentId1, error_5;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            mpData = tag.json_data;
+                            if (!mpData) {
+                                console.error("tag.json_data/mpData is undefined");
+                                return [2 /*return*/];
+                            }
+                            return [4 /*yield*/, _atwin.Tag.add({
+                                    anchorPosition: mpData.anchorPosition,
+                                    color: mpData.color,
+                                    description: mpData.description,
+                                    //@ts-ignore
+                                    id: mpData.sid,
+                                    label: mpData.label,
+                                    stemVector: mpData.stemVector,
+                                    stemVisible: mpData.stemVisible,
+                                })];
+                        case 1:
+                            tagIds = _a.sent();
+                            if (!tagIds) return [3 /*break*/, 6];
+                            //@ts-ignore
+                            tag.json_data.id = tagIds[0];
+                            if (!
+                            // @ts-ignore
+                            (tag.json_data.media &&
+                                // @ts-ignore
+                                // @ts-ignore
+                                tag.json_data.media.src.trim() !== "")) 
+                            // @ts-ignore
+                            return [3 /*break*/, 6];
+                            _a.label = 2;
+                        case 2:
+                            _a.trys.push([2, 5, , 6]);
+                            console.log("Attaching media...");
+                            return [4 /*yield*/, _atwin.Tag.registerAttachment(
+                                // @ts-ignore
+                                tag.json_data.media.src)];
+                        case 3:
+                            attachmentId1 = (_a.sent())[0];
+                            tag.json_data["attachments"] = [attachmentId1];
+                            //@ts-ignore
+                            return [4 /*yield*/, _atwin.Tag.attach(tag.json_data.sid, attachmentId1)];
+                        case 4:
+                            //@ts-ignore
+                            _a.sent();
+                            console.log("Media successfully attached");
+                            return [3 /*break*/, 6];
+                        case 5:
+                            error_5 = _a.sent();
+                            console.warn("Custom warn: Media not attached: Invalid media src link: " + error_5);
+                            //@ts-ignore
+                            console.warn(
+                            // @ts-ignore
+                            "mediaSrc: ".concat(tag.json_data.media.src, " | tag index: ").concat(indx));
+                            return [3 /*break*/, 6];
+                        case 6: return [2 /*return*/];
+                    }
+                });
+            }); });
+            console.log("tags", _tags);
+            return [2 /*return*/];
+        });
+    });
+}
+// remove built in tags
+function hideTags() {
+    return __awaiter(this, void 0, void 0, function () {
+        var tags, tagIds;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    console.log("hideTags()");
+                    return [4 /*yield*/, _atwin.Mattertag.getData()];
+                case 1:
+                    tags = _a.sent();
+                    if (!tags) return [3 /*break*/, 3];
+                    tagIds = tags.map(function (i) { return i.sid; });
+                    return [4 /*yield*/, _atwin.Mattertag.remove(tagIds)];
+                case 2:
+                    _a.sent();
+                    console.log("Tags removed in space: ", tagIds);
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
+            }
+        });
+    });
+}
+// only expose tag id and name for the tags array
+function mapTags($tags) {
+    console.log("mapTags()", $tags);
+    tags = $tags.map(function (i) {
+        var x = {};
+        x.id = i.id;
+        x.name = i.json_data.label;
+        return x;
+    });
+    console.log("tags", tags);
+}
+// =========================================== END TAGS FUNCTIONALITY ===========================================
+// =========================================== SWEEP FUNCTIONALITY ===========================================
+// get explicit location for currentSweep
+function getCurrentSweep() {
+    return _currentSweep;
+}
+// get explicit location for currentPose
+function getCurrentCameraPose() {
+    return _currentCameraPose;
+}
+// get explicit location for currentPose's position
+function getCameraPosition() {
+    return _currentCameraPose.position;
+}
+// get explicit location for currentSweep's position
+function getCurrentSweepPosition() {
+    return _currentSweep.position;
+}
+// gets all Sweeps in loaded Space
+function getSweeps() {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            console.log("Getting Sweeps in Space");
+            // original implementation
+            _atwin.Sweep.data.subscribe({
+                onCollectionUpdated: function (collection) {
+                    console.log("Sweeps In Space", collection);
+                    if (!collection) {
+                        console.log("No Sweeps in loaded Space");
+                    }
+                    _sweeps = collection;
+                    var sw = Object.values(_sweeps);
+                    sweeps = sw.map(function (item) {
+                        return {
+                            id: item.uuid,
+                            position: item.position,
+                            neighbors: item.neighbors,
+                        };
+                    });
+                },
+            });
+            return [2 /*return*/, null];
+        });
+    });
+}
+// moves to selected Sweep
+function moveToSweep(sweepId) {
+    return __awaiter(this, void 0, void 0, function () {
+        var transition, transitionTime;
+        return __generator(this, function (_a) {
+            transition = _atwin.Sweep.Transition.FLY;
+            transitionTime = 2000;
+            console.log("Sweep Move", sweepId);
+            _atwin.Sweep.moveTo(sweepId, {
+                // position: position,
+                transition: transition,
+                transitionTime: transitionTime,
+            })
+                .then(function () {
+                // Move successful.
+                console.log("Sweep Arrived at sweep " + sweepId);
+                // getNearbySweeps(sweepId);
+            })
+                .catch(function (error) {
+                // Error with moveTo command
+                console.log("Sweep Error on Arriving", error);
+            });
+            return [2 /*return*/];
+        });
+    });
+}
+// returns nearby Sweeps
+function getNearbySweeps(sweepId) {
+    return __awaiter(this, void 0, void 0, function () {
+        var nearby;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!sweepId) return [3 /*break*/, 2];
+                    return [4 /*yield*/, sweeps.find(function (item) { return item.id == sweepId; })
+                            .neighbors];
+                case 1:
+                    nearby = _a.sent();
+                    console.log("Nearby Sweeps", nearby);
+                    return [2 /*return*/, nearby];
+                case 2:
+                    console.log("No Nearby Sweeps");
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
+            }
+        });
+    });
+}
+// =========================================== END SWEEP FUNCTIONALITY ===========================================
+// =========================================== OBJECTS FUNCTIONALITY ===========================================
+function getComponentLoader(object) {
+    if (object && object.object_data) {
+        var index = object.object_data.object_type;
+        var component = {
+            FBX: _atwin.Scene.Component.FBX_LOADER,
+            GLB: _atwin.Scene.Component.GLTF_LOADER,
+            MP4: "liveVideo",
+            ZIP: "slideScreenModel",
+        };
+        return component[index] || "";
+    }
+    return "";
+}
+function setSelectedObject(data, node, component) {
+    _selectedObject = {
+        object: data,
+        component: component,
+        node: node
+    };
+    console.log("setSelectedObject()");
+}
+function setLighting() {
+    return __awaiter(this, void 0, void 0, function () {
+        var sceneObject, lights;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, _atwin.Scene.createObjects(1)];
+                case 1:
+                    sceneObject = (_a.sent())[0];
+                    lights = sceneObject.addNode();
+                    lights.addComponent("mp.directionalLight", {
+                        intensity: 0.6,
+                        color: { r: 1.0, g: 1.0, b: 1.0 },
+                    });
+                    lights.addComponent("mp.ambientLight", {
+                        intensity: 0.6,
+                        color: { r: 1.0, g: 1.0, b: 1.0 },
+                    });
+                    lights.start();
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+function clearTransformControls() {
+    if (!_transformControlNode) {
+        console.error('_transformControlNode is undefined');
+        return;
+    }
+    if (_inputControlComponent == null || !_inputControlComponent) {
+        console.error('_inputControlComponent is undefined');
+        return;
+    }
+    _transformControlNode.stop();
+    //_inputControlComponent.stop()
+    console.log('clearTransformControls()');
+}
+function setTransformControls(selectedObject, mode) {
+    if (mode === void 0) { mode = 'translate'; }
+    return __awaiter(this, void 0, void 0, function () {
+        var sceneObject, transformNode, transformComponent, inputComponent;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    console.log("Object to be transformed " + selectedObject.object.object_data.name);
+                    clearTransformControls();
+                    return [4 /*yield*/, _atwin.Scene.createObjects(1)];
+                case 1:
+                    sceneObject = (_a.sent())[0];
+                    transformNode = sceneObject.addNode();
+                    transformComponent = transformNode.addComponent('mp.transformControls');
+                    _transformControlNode = transformNode;
+                    inputComponent = transformNode.addComponent('mp.input', {
+                        eventsEnabled: true,
+                        userNavigationEnabled: true,
+                    });
+                    _inputControlComponent = inputComponent.spyOnEvent(new ClickSpy(selectedObject.object, selectedObject.node, selectedObject.component));
+                    transformNode.start();
+                    transformComponent.inputs.selection = selectedObject.node;
+                    transformComponent.inputs.mode = mode;
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+// async function testObject() {
+//   const [ sceneObject ] = await _atwin.Scene.createObjects(1);
+//   const modelNode = sceneObject.addNode();
+//   const component = modelNode.addComponent(_atwin.Scene.Component.FBX_LOADER, {
+//     url: "https://cdn.jsdelivr.net/gh/mrdoob/three.js@dev/examples/models/fbx/stanford-bunny.fbx",
+//   });
+//   // Create a scene node with a transform control component.
+//   const node = sceneObject.addNode();
+//   const myControl = node.addComponent('mp.transformControls');
+//   node.start();
+//   component.inputs.localScale = {
+//     x: 0.00002,
+//     y: 0.00002,
+//     z: 0.00002
+//   };
+//   modelNode.obj3D.position.set(0,-1,0);
+//   modelNode.start()
+//   // Attach the model to the transform control
+//   myControl.inputs.selection = modelNode;
+//   // Make the transform control visible so that the user can manipulate the control selection.
+//   myControl.inputs.visible = true;
+//   // set 'translate' mode to position the selection.
+//   myControl.inputs.mode = 'translate';
+// }
+function calculateDistance(pos1, pos2) {
+    var dx = pos2.x - pos1.x;
+    var dy = pos2.y - pos1.y;
+    return Math.sqrt(dx * dx + dy * dy);
+}
+function showVideoObjects(object) {
+    var _a, _b;
+    return __awaiter(this, void 0, void 0, function () {
+        var sceneObject, liveStreamNode, liveStreamComponent;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0: return [4 /*yield*/, createVideoComponent()];
+                case 1:
+                    _c.sent();
+                    return [4 /*yield*/, _atwin.Scene.createObjects(1)];
+                case 2:
+                    sceneObject = (_c.sent())[0];
+                    liveStreamNode = sceneObject.addNode();
+                    return [4 /*yield*/, liveStreamNode.addComponent(getComponentLoader(object), {
+                            url: (_a = object.object_data) === null || _a === void 0 ? void 0 : _a.amazon_uri,
+                        })];
+                case 3:
+                    liveStreamComponent = _c.sent();
+                    liveStreamNode.position.set(object.object_position.x, object.object_position.y, object.object_position.z);
+                    // @ts-ignore
+                    liveStreamNode.obj3D.rotation.set(object.object_rotation.x, object.object_rotation.y, object.object_rotation.z);
+                    liveStreamNode.scale.set(object.object_scale.x, object.object_scale.y, object.object_scale.z);
+                    if (liveStreamComponent.outputs.loadingState != "Error") {
+                        liveStreamNode.start();
+                    }
+                    liveStreamComponent.inputs.src = (_b = object.object_data) === null || _b === void 0 ? void 0 : _b.amazon_uri;
+                    _videos.push({
+                        data: object,
+                        component: liveStreamComponent,
+                        node: liveStreamNode,
+                        type: 'VIDEO',
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+function playVideo(videoId) {
+    var videoObject = _videos.find(function (object) { return object.data.id == videoId; });
+    if (videoObject) {
+        // @ts-ignore
+        videoObject.component.video.play();
+    }
+    else {
+        console.error("Unable to find video object using that id");
+    }
+}
+function pauseVideo(videoId) {
+    var videoObject = _videos.find(function (object) { return object.data.id == videoId; });
+    if (videoObject) {
+        // @ts-ignore
+        videoObject.component.video.pause();
+    }
+    else {
+        console.error("Unable to find video object using that id");
+    }
+}
+function videoAutoPlay() {
+    function nearestVideo(videoObject) {
+        return __awaiter(this, void 0, void 0, function () {
+            var videoPosition, cameraPosition, computedDistance;
+            return __generator(this, function (_a) {
+                videoPosition = videoObject.data.object_position;
+                cameraPosition = getCurrentSweepPosition();
+                computedDistance = distance([cameraPosition.x, cameraPosition.y, cameraPosition.z], [videoPosition.x, videoPosition.y, videoPosition.z]);
+                try {
+                    if (videoObject.data.autoplay &&
+                        videoObject.data.autoplay_distance &&
+                        computedDistance < videoObject.data.autoplay_distance) {
+                        // @ts-ignore
+                        videoObject.component.video.play();
+                    }
+                    else {
+                        // @ts-ignore
+                        videoObject.component.video.pause();
+                    }
+                }
+                catch (e) {
+                    console.error("Unable to play or stop video");
+                }
+                return [2 /*return*/];
+            });
+        });
+    }
+    _videos.forEach(function (videoObject) { return nearestVideo(videoObject); });
+}
+function createVideoComponent() {
+    function videoRenderer() {
+        this.inputs = {
+            visible: true,
+            userNavigationEnabled: true,
+            eventsEnabled: true,
+            colliderEnabled: true,
+            src: null,
+        };
+        this.outputs = {
+            texture: null,
+            video: null,
+            aspect: 720 / 480,
+        };
+        this.onInit = function () {
+            this.video;
+            this.texture;
+        };
+        this.onEvent = function (eventType, eventData) { };
+        this.onInputsUpdated = function (previous) {
+            this.releaseTexture();
+            var THREE = this.context.three;
+            if (!this.inputs.src) {
+                this.video.src = "";
+                return;
+            }
+            if (this.inputs.src instanceof HTMLVideoElement) {
+                this.video = this.inputs.src;
+            }
+            else {
+                this.video = this.createVideoElement();
+                if (typeof this.inputs.src === "string") {
+                    this.video.src = this.inputs.src;
+                }
+                else {
+                    this.video.srcObject = this.inputs.src;
+                }
+                this.video.load();
+            }
+            this.texture = new THREE.VideoTexture(this.video);
+            this.texture.minFilter = THREE.LinearFilter;
+            this.texture.magFilter = THREE.LinearFilter;
+            this.texture.format = THREE.RGBFormat;
+            var geometry = new THREE.PlaneGeometry(1, 1);
+            geometry.scale(1, 480 / 720, 1);
+            geometry.translate(0, 0.33, 0);
+            this.material = new THREE.MeshBasicMaterial({
+                map: this.texture,
+                side: THREE.DoubleSide,
+            });
+            var mesh = new THREE.Mesh(geometry, this.material);
+            this.outputs.objectRoot = mesh;
+            this.outputs.collider = mesh;
+            mesh.visible = this.inputs.visible;
+            this.outputs.texture = this.texture;
+            this.outputs.video = this.video;
+        };
+        this.releaseTexture = function () {
+            if (this.texture) {
+                this.outputs.texture = null;
+                this.texture.dispose();
+            }
+        };
+        this.createVideoElement = function () {
+            var video = document.createElement("video");
+            video.setAttribute("id", "htmlLivestreamVideo");
+            video.crossOrigin = "anonymous";
+            video.setAttribute("height", "480");
+            video.setAttribute("width", "720");
+            video.setAttribute("webkit-playsinline", "webkit-playsinline");
+            video.setAttribute("controls", "controls");
+            video.muted = false;
+            video.loop = true;
+            video.volume = 1;
+            return video;
+        };
+        this.onTick = function (tickDelta) { };
+        this.onDestroy = function () {
+            this.material.dispose();
+        };
+        this.spyOnEvent = function (payload) {
+            console.log("payload", payload);
+        };
+    }
+    function makeVideoRender() {
+        return new videoRenderer();
+    }
+    _atwin.Scene.register("liveVideo", makeVideoRender);
+}
+//This function is for registering the custom component
+function createSlideScreenModel() {
+    function SlideScreenModelRenderer() {
+        this.inputs = {
+            src: null,
+            userNavigationEnabled: true,
+            eventsEnabled: true,
+            colliderEnabled: true,
+            visible: true,
+        };
+        this.outputs = {
+            texture: null,
+            t_image: null,
+        };
+        this.onInit = function () {
+            this.texture;
+            this.t_image;
+            this.material;
+            this.mesh;
+        };
+        //This is commented out since the slideshow must not be clicked yet
+        this.events = {
+            "INTERACTION.CLICK": true,
+        };
+        this.onEvent = function (eventType, eventData) {
+            return __awaiter(this, void 0, void 0, function () {
+                var slideshow_1, mousePosition, planePosition;
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            console.log("onEventSlideShow", eventType, eventData);
+                            if (!(eventType == "INTERACTION.CLICK")) return [3 /*break*/, 2];
+                            if (!(_allSlideShow.length > 0)) return [3 /*break*/, 2];
+                            slideshow_1 = _allSlideShow.filter(function (l) { var _a, _b, _c, _d; return (_d = ((_b = (_a = l.collider) === null || _a === void 0 ? void 0 : _a.collider) === null || _b === void 0 ? void 0 : _b.uuid) == ((_c = eventData.collider) === null || _c === void 0 ? void 0 : _c.uuid)) !== null && _d !== void 0 ? _d : false; })[0];
+                            console.log("slideShow eventData", slideshow_1);
+                            if (!(slideshow_1 != null)) return [3 /*break*/, 2];
+                            console.log("slideShow eventData", slideshow_1);
+                            return [4 /*yield*/, getMousePosition()];
+                        case 1:
+                            mousePosition = _a.sent();
+                            planePosition = slideshow_1.node.obj3D.position;
+                            console.log("MOUSE POSITION", mousePosition);
+                            console.log("PLANE POSITION", planePosition);
+                            if (slideshow_1.object.object_type == "ZIP") {
+                                if (slideshow_1.id != _currentSlideShowID) {
+                                    _currentSlideIndex = _slideShowImage.find(function (elem) { return elem.id === slideshow_1.id; }).idx;
+                                    console.log("CURRENT INDEX", _currentSlideIndex);
+                                    _currentSlideShow = _slideShowImage.find(function (elem) { return elem.id === slideshow_1.id; }).images;
+                                    console.log("CURRENT SLIDE", _currentSlideShow);
+                                }
+                                if (slideshow_1.id == _currentSlideShowID) {
+                                    console.log("ChangeImage", slideshow_1, _currentSlideShowID);
+                                    if (planePosition.x < mousePosition.x) {
+                                        console.log("LEFT SIDE");
+                                        clearInterval(_timer);
+                                        // model.pause()
+                                        this.inputs.src = imageStream("prev");
+                                    }
+                                    else if (planePosition.y < mousePosition.y) {
+                                        console.log("RIGHT SIDE");
+                                        // model.pause()
+                                        clearInterval(_timer);
+                                        this.inputs.src = imageStream("next");
+                                    }
+                                    else if (planePosition.y > mousePosition.y) {
+                                        console.log("AUTOPLAY");
+                                        _timer = setInterval(function () {
+                                            _currentSlideIndex =
+                                                (_currentSlideIndex + 1) % _currentSlideShow.length;
+                                            console.log("CURRENT INDEX", _currentSlideIndex);
+                                            _this.inputs.src = imageStream("next");
+                                        }, 2000);
+                                    }
+                                }
+                                else {
+                                    _currentSlideShowID = slideshow_1.id;
+                                }
+                            }
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        this.onInputsUpdated = function (previous) {
+            var _this = this;
+            this.releaseTexture();
+            var three = this.context.three;
+            // Create IMAGE
+            this.t_image = document.createElement("IMG");
+            this.t_image.src = this.inputs.src;
+            this.t_image.setAttribute("width", "auto");
+            this.t_image.setAttribute("height", "auto");
+            this.t_image.crossOrigin = "anonymous";
+            var planeGeo = new three.PlaneGeometry(1.5, 1.5);
+            // planeGeo.scale(1, 480/720, 1);
+            planeGeo.translate(0, 0.33, 0);
+            // this.texture = new THREE.Texture(this.t_image);
+            // used texture loader for onLoad callback
+            if (previous.src != this.inputs.src) {
+                console.log("this.inputs.src", this.inputs.src);
+                this.texture = new three.TextureLoader().load(this.t_image.src, function (tex) {
+                    if (tex === void 0) { tex = _this.texture; }
+                    // onLoad callback function
+                    tex.minFilter = three.LinearFilter;
+                    tex.magFilter = three.LinearFilter;
+                    tex.format = three.RGBAFormat;
+                    tex.needsUpdate = true; //This should be true in order to update the texture
+                    tex.onUpdate = _this.textureUpdated;
+                    _this.material = new three.MeshBasicMaterial({
+                        map: _this.texture,
+                        side: three.DoubleSide,
+                        transparent: true,
+                        // color: 0xFF0000,
+                        alphaTest: 0.5,
+                    });
+                    _this.mesh = new three.Mesh(planeGeo, _this.material); //Create a mesh for the Plane
+                    _this.mesh.scale.set(1.0, _this.texture.image.height / _this.texture.image.width, 1.0); // setting the aspect ratio of image as the scale of mesh
+                    _this.outputs.objectRoot = _this.mesh;
+                    _this.outputs.collider = _this.mesh;
+                    _this.outputs.texture = _this.texture;
+                    _this.outputs.t_image = _this.t_image;
+                });
+            }
+            if (this.mesh != null) {
+                this.mesh.visible = this.inputs.visible;
+            }
+        };
+        this.textureUpdated = function (params) {
+            console.log("Update Callback", params);
+        };
+        this.releaseTexture = function () {
+            if (this.texture) {
+                this.outputs.texture = null;
+            }
+        };
+        this.onTick = function (tickDelta) { };
+        this.onDestroy = function () {
+            this.material.dispose();
+            this.texture.dispose();
+        };
+    }
+    function makeSlideScreenModelRenderer() {
+        return new SlideScreenModelRenderer();
+    }
+    // Registering the component with the sdk
+    _atwin.Scene.register("slideScreenModel", makeSlideScreenModelRenderer);
+}
+//This is the function for rendering the slidescreen model
+function showSlideScreenModel(object) {
+    return __awaiter(this, void 0, void 0, function () {
+        var sceneObject, modelNode, component, slideShow;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    createSlideScreenModel();
+                    return [4 /*yield*/, _atwin.Scene.createObjects(1)];
+                case 1:
+                    sceneObject = (_a.sent())[0];
+                    modelNode = sceneObject.addNode();
+                    component = modelNode.addComponent("slideScreenModel");
+                    console.log("COMPONENT", component);
+                    modelNode.scale.set = {
+                        x: object.object_scale.x,
+                        y: object.object_scale.y,
+                        z: object.object_scale.z,
+                    };
+                    //@ts-ignore
+                    modelNode.obj3D.position.set(object.object_position.x, object.object_position.y, object.object_position.z);
+                    //@ts-ignore
+                    modelNode.obj3D.rotation.set(object.object_rotation.x, object.object_rotation.y, object.object_rotation.z);
+                    // modelNode.scale.set(1, 1, 1)
+                    // modelNode.position.set(-3.32,0.01 ,3.33)
+                    modelNode.start();
+                    return [4 /*yield*/, addImageToSlideShow(object.object_data, component, object.id)];
+                case 2:
+                    _a.sent();
+                    console.log("SLIDE OUTPUT", component.outputs);
+                    slideShow = {
+                        id: object.id,
+                        collider: component.outputs,
+                        object: object.object_data,
+                        node: modelNode,
+                        component: component,
+                        type: 'ZIP'
+                    };
+                    _allSlideShow.push(slideShow);
+                    console.log("ALL SLIDESHOW", _allSlideShow);
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+//This function is accessing the zip files and place it inside the slidescreen
+function addImageToSlideShow(data, component, objectID) {
+    return __awaiter(this, void 0, void 0, function () {
+        var dataList;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    dataList = [];
+                    return [4 /*yield*/, new JSZip.external.Promise(function (resolve, reject) {
+                            JSZipUtils.getBinaryContent(data.amazon_uri, function (err, data) {
+                                if (err) {
+                                    console.log("getBI error", err);
+                                    reject(err);
+                                }
+                                else {
+                                    console.log("getBI success", data);
+                                    resolve(data);
+                                }
+                            });
+                        })
+                            .then(function (data) {
+                            console.log("data from getBI", data);
+                            //@ts-ignore
+                            return JSZip.loadAsync(data);
+                        })
+                            .then(function (data) {
+                            console.log("data from loadAsync", data);
+                            var _loop_1 = function (key) {
+                                // determine whether it is a directory
+                                if (key.includes("__MACOSX"))
+                                    return "continue";
+                                if (key.includes(".DS_Store"))
+                                    return "continue";
+                                if (data.files[key].dir)
+                                    return "continue";
+                                var base = data.file(data.files[key].name).async("base64"); // will be converted to base64 format picture
+                                base.then(function (res) {
+                                    dataList.push({
+                                        name: data.files[key].name,
+                                        path: "data:image/png;base64,".concat(res),
+                                    });
+                                    if (dataList.length == 1) {
+                                        component.inputs.src = "data:image/png;base64,".concat(res);
+                                    }
+                                });
+                            };
+                            for (var key in data.files) {
+                                _loop_1(key);
+                            }
+                            _slideShowImage.push({
+                                id: objectID,
+                                images: dataList,
+                                idx: 0,
+                                playID: null,
+                                play: false,
+                                comp: component,
+                            });
+                        })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+function getMousePosition() {
+    return __awaiter(this, void 0, void 0, function () {
+        var planePosition;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, _atwin.Pointer.intersection.subscribe(function (intersection) {
+                        planePosition = intersection.position;
+                        // console.log("This is intersection mouse position", planePosition);
+                    })];
+                case 1:
+                    _a.sent();
+                    // pointer.cancel();
+                    return [2 /*return*/, planePosition];
+            }
+        });
+    });
+}
+//This is the function to change the image in the slideshow
+function imageStream(direction) {
+    var diff = direction === "prev" ? -1 : 1;
+    var length = _currentSlideShow.length;
+    var index = _currentSlideIndex + diff;
+    if (index === -1) {
+        index = length - 1;
+    }
+    if (index === length) {
+        index = 0;
+    }
+    _currentSlideIndex = index;
+    _slideShowImage.find(function (elem) { return elem.id === _currentSlideShowID; }).idx = index;
+    return _currentSlideShow[_currentSlideIndex].path;
+}
+// ===== END OBJECTS FUNCTIONALITY =====
+// ===== NAVIGATION AND CAMERA CONTROL =====
+function cameraRotate(x, y, speed) {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: 
+                // x and y is rotation in horizontal and vertical rotation in degrees
+                // speed, speed of rotation
+                return [4 /*yield*/, _atwin.Camera.rotate(x, y, { speed: speed })
+                        .then(function () {
+                        console.log("camera rotate success.", x, y);
+                    })
+                        .catch(function (error) {
+                        console.log("camera rotate error.", error);
+                    })];
+                case 1:
+                    // x and y is rotation in horizontal and vertical rotation in degrees
+                    // speed, speed of rotation
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+function cameraPan(x, z) {
+    return __awaiter(this, void 0, void 0, function () {
+        var mode;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    mode = getViewMode();
+                    if (!(mode == _atwin.Mode.Mode.FLOORPLAN ||
+                        mode == _atwin.Mode.Mode.DOLLHOUSE)) return [3 /*break*/, 2];
+                    // x is pan (look sideways left and right) in degrees
+                    // z is tilt (look up and down) in degrees
+                    return [4 /*yield*/, _atwin.Camera.pan({ x: x, z: z })
+                            .then(function () {
+                            console.log("camera pan success.");
+                        })
+                            .catch(function (error) {
+                            console.log("camera rotate error:", error);
+                        })];
+                case 1:
+                    // x is pan (look sideways left and right) in degrees
+                    // z is tilt (look up and down) in degrees
+                    _a.sent();
+                    return [3 /*break*/, 3];
+                case 2:
+                    console.error("Incorrect view mode.");
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
+            }
+        });
+    });
+}
+function cameraLookAt(x, y) {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: 
+                // set camera view at coordinate in SCREEN
+                // x and y is PIXEL from upper left corner
+                return [4 /*yield*/, _atwin.Camera.lookAtScreenCoords(x, y)
+                        .then(function () {
+                        console.log("camera looking at...", x, y);
+                    })
+                        .catch(function (error) {
+                        console.log("camera looking at error:", error);
+                    })];
+                case 1:
+                    // set camera view at coordinate in SCREEN
+                    // x and y is PIXEL from upper left corner
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+/**
+ * Moves the camera position in the direction of the argument provided.
+ * @constructor
+ * @param direction FORWARD,BACKWARD,LEFT,RIGHT,UP,DOWN
+ * @type {string}
+ */
+function moveInDirection(direction) {
+    return __awaiter(this, void 0, void 0, function () {
+        var nextDirection;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    nextDirection = _atwin.Camera.Direction.LEFT;
+                    switch (direction.toUpperCase()) {
+                        case "LEFT":
+                            nextDirection = _atwin.Camera.Direction.LEFT;
+                            break;
+                        case "RIGHT":
+                            nextDirection = _atwin.Camera.Direction.RIGHT;
+                            break;
+                        case "UP":
+                            nextDirection = _atwin.Camera.Direction.UP;
+                            break;
+                        case "DOWN":
+                            nextDirection = _atwin.Camera.Direction.DOWN;
+                            break;
+                        case "BACK":
+                            nextDirection = _atwin.Camera.Direction.BACK;
+                            break;
+                        case "FORWARD":
+                            nextDirection = _atwin.Camera.Direction.FORWARD;
+                            break;
+                        default:
+                            nextDirection = _atwin.Camera.Direction.LEFT;
+                            break;
+                    }
+                    return [4 /*yield*/, _atwin.Camera.moveInDirection(nextDirection)
+                            .then(function () {
+                            console.log("Move to...", nextDirection);
+                        })
+                            .catch(function () {
+                            console.warn("An error occured while moving in that direction.", nextDirection);
+                        })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+// =========================================== END NAVIGATION AND CAMERA CONTROL ===================================
+// =========================================== MODE FUNCTIONALITY ==================================================
+function getViewMode() {
+    return _currentViewMode;
+}
+function setViewMode(mode) {
+    return __awaiter(this, void 0, void 0, function () {
+        var modeType;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    console.log("=== get Mode Type ===", _getModeType(mode));
+                    modeType = _getModeType(mode);
+                    return [4 /*yield*/, _atwin.Mode.moveTo(modeType)
+                            .then(function (nextMode) {
+                            // Move successful.
+                            console.log("Arrived at new view mode " + nextMode);
+                        })
+                            .catch(function (error) {
+                            // Error with moveTo command
+                            console.error("Error occur on:", error);
+                        })];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+function _getModeType(mode) {
+    var modes = {
+        DOLLHOUSE: "mode.dollhouse",
+        FLOORPLAN: "mode.floorplan",
+        INSIDE: "mode.inside",
+        OUTSIDE: "mode.outside",
+        TRANSITIONING: "mode.transitioning",
+    };
+    return modes[mode.toUpperCase()] || "";
+}
+// ================== INPUT EVENT CLASSES ======================= //
+var ClickSpy = /** @class */ (function () {
+    function ClickSpy(data, node, component) {
+        this.eventType = 'INTERACTION.CLICK';
+        this.object_data = data;
+        this.node = node;
+        this.component = component;
+    }
+    ClickSpy.prototype.onEvent = function (payload) {
+        return __awaiter(this, void 0, void 0, function () {
+            var selectedObj;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        console.log('INTERACTION.CLICK', payload);
+                        selectedObj = {
+                            object: this.object_data,
+                            node: this.node,
+                            component: this.component
+                        };
+                        setSelectedObject(this.object_data, this.node, this.component);
+                        return [4 /*yield*/, setTransformControls(selectedObj)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    return ClickSpy;
+}());
+export default {
+    tags: tags,
+    sweeps: sweeps,
+    connectSpace: connectSpace,
+    gotoTag: gotoTag,
+    getCurrentSweep: getCurrentSweep,
+    getCurrentSweepPosition: getCurrentSweepPosition,
+    moveToSweep: moveToSweep,
+    getNearbySweeps: getNearbySweeps,
+    pauseVideo: pauseVideo,
+    playVideo: playVideo,
+    getCurrentCameraPose: getCurrentCameraPose,
+    getCameraPosition: getCameraPosition,
+    moveInDirection: moveInDirection,
+    cameraLookAt: cameraLookAt,
+    cameraPan: cameraPan,
+    cameraRotate: cameraRotate,
+    getViewMode: getViewMode,
+    setViewMode: setViewMode,
+};