{text}
}\r\n {children}\r\n \r\n );\r\n return tooltip ? (\r\n\r\n
\r\n );\r\n};\r\nexport default ReactDelayRender({ delay: 0 })(LoginPage);\r\n","import uuid from \"uuid\";\r\n// import testTree from \"./testtree.json\";\r\n\r\nexport const getPathOffile = (fileFullPath) => {\r\n const sp = fileFullPath.split(\"/\");\r\n sp.pop();\r\n return \"/\" + sp.join(\"/\");\r\n}\r\nconst getParentFolder = fullpath => {\r\n const pathArray = fullpath.split(\"/\").filter(a => a !== null && a !== \"\");\r\n return { parentFolder: pathArray[pathArray.length - 2], path: pathArray.slice(0, pathArray.length - 2).join(\"/\") };\r\n}\r\nconst isSimilarFile = (filePath, file) => {\r\n const { parentFolder, path } = getParentFolder(filePath);\r\n return file.label === parentFolder.substr(1) && getPathOffile(file.fullpath) === `/${path}`;\r\n}\r\nconst partitionArray = (array, isValid) =>\r\n array.reduce(([pass, fail], elem) => {\r\n return isValid(elem) ? [[...pass, elem], fail] : [pass, [...fail, elem]];\r\n }, [[], []]);\r\n\r\n//defaultitempath can be folder path or file path\r\nexport function arrangeIntoTree({ files, folders, defaultItemPath, setActiveItem = true }) {\r\n\r\n //ignore RUGshared folder\r\n const filterRugshared = arr => arr.filter(item => !item.FullPath.split(\"/\").includes(\"RUGShared\"));\r\n files = filterRugshared(files);\r\n folders = filterRugshared(folders);\r\n\r\n // ignore files whose parents have \".\"\" as first char\r\n const [notSimilarFiles, similarFiles] = partitionArray(files, item => getParentFolder(item.FullPath).parentFolder.charAt(0) !== \".\");\r\n\r\n // ignore folders starting with . as first char\r\n folders = folders.filter(item => item.Name.charAt(0) !== \".\")\r\n\r\n files = notSimilarFiles.map(item => {\r\n return {\r\n id: uuid.v4(),\r\n label: item.Name,\r\n fullpath: item.FullPath,\r\n path: getPathOffile(item.FullPath),\r\n isExpanded: false,\r\n childNodes: [],\r\n hasCaret: false,\r\n type: \"file\",\r\n similarItems: similarFiles.filter(s => isSimilarFile(s.FullPath, { fullpath: item.FullPath, label: item.Name })).map(item => {\r\n return {\r\n label: item.Name,\r\n fullpath: item.FullPath,\r\n path: getPathOffile(item.FullPath),\r\n }\r\n })\r\n };\r\n });\r\n let defaultItem;\r\n if (defaultItemPath)\r\n defaultItem = files.find(item => item.fullpath.toLowerCase() === defaultItemPath.toLowerCase());\r\n if (!defaultItem) {\r\n const rootFiles = files.filter(file => file.path === \"/Designs\")\r\n if (!rootFiles.length)\r\n defaultItem = files[0]\r\n else\r\n defaultItem = rootFiles[0]\r\n files = [...rootFiles, ...files.slice(0, files.length - rootFiles.length)]\r\n }\r\n let pathsArray = folders.map(path => path.FullPath.split(\"/\"));\r\n let openNode;\r\n\r\n //eta bata recursively tree banauna suru hunxa\r\n let tree = [];\r\n pathsArray.forEach(path => {\r\n let currentLevel = tree;\r\n let fullpath = \"\";\r\n path.forEach((part, index) => {\r\n let existingPath = findWhere(currentLevel, \"label\", part);\r\n if (fullpath === \"\") {\r\n fullpath = part;\r\n } else {\r\n fullpath = fullpath + \"/\" + part;\r\n }\r\n if (existingPath) {\r\n currentLevel = existingPath.childNodes;\r\n } else {\r\n const fp = `/${fullpath}`;\r\n const designsInFolder = files.filter(item => item.path === fp)\r\n const isExpanded = defaultItem && defaultItem.path.split(\"/\").includes(part.valueOf());\r\n const isSelected = setActiveItem && defaultItem && defaultItem.path === fp;\r\n let newPart = {\r\n id: uuid.v4(),\r\n label: part.valueOf(),\r\n fullpath: fp,\r\n isExpanded,\r\n isSelected,\r\n childNodes: [],\r\n hasCaret: true,\r\n type: \"folder\",\r\n filesInNode: designsInFolder,\r\n showThumbnails: designsInFolder.find(item => item.id === defaultItem.id),\r\n level: index,\r\n thumbsLength: 0\r\n };\r\n if (defaultItem && defaultItem.path === fp) {\r\n openNode = newPart;\r\n }\r\n currentLevel.push(newPart);\r\n currentLevel = newPart.childNodes;\r\n }\r\n });\r\n });\r\n if (defaultItemPath) {\r\n if (defaultItemPath.charAt(0) !== \"/\")\r\n defaultItemPath = `/${defaultItemPath}`\r\n //will return true if folder with same fullpath is found\r\n const ftree = findItemNested(tree, defaultItemPath, \"fullpath\");\r\n if (ftree) {\r\n ftree.isExpanded = true;\r\n ftree.isSelected = true;\r\n ftree.showThumbnails = true;\r\n tree = [ftree]\r\n defaultItem = ftree.filesInNode[0]\r\n openNode = ftree\r\n }\r\n }\r\n\r\n return { tree, defaultItem, openNode, flatfileList: files };\r\n}\r\n\r\nfunction findWhere(array, key, value) {\r\n let t = 0;\r\n while (t < array.length && array[t][key] !== value) {\r\n t++;\r\n }\r\n if (t < array.length) {\r\n return array[t];\r\n } else {\r\n return false;\r\n }\r\n}\r\nexport const findItemNested = (arr, itemId, key = \"id\", nestingKey = \"childNodes\") => {\r\n return arr.reduce((a, item) => {\r\n if (a) return a;\r\n if (item[key].toLowerCase() === itemId.toLowerCase()) return item;\r\n if (item[nestingKey])\r\n return findItemNested(item[nestingKey], itemId, key, nestingKey);\r\n return a\r\n }, null);\r\n}\r\n\r\n// export const findItemNested = (arr, itemId, key = \"id\", nestingKey = \"childNodes\") => {\r\n// // console.log(arr)\r\n// return arr.reduce((a, item) => {\r\n// if (a) return a;\r\n// if (item[key] === itemId) return item;\r\n// if (item[nestingKey])\r\n// return findItemNested(item[nestingKey], itemId, key, nestingKey);\r\n// return a\r\n// }, null);\r\n// }\r\nexport const updateElementOfTree = (array, ids, key, value) => {\r\n const arr = [...array]\r\n arr.forEach(function iter(a) {\r\n if (ids.includes(a.id)) {\r\n a[key] = value;\r\n }\r\n Array.isArray(a.childNodes) && a.childNodes.forEach(iter);\r\n });\r\n return arr;\r\n};\r\nexport const updateNode = (array, node) => {\r\n const arr = [...array]\r\n arr.forEach(function iter(a) {\r\n if (node.id === a.id) {\r\n a.filesInNode = node.filesInNode;\r\n }\r\n Array.isArray(a.childNodes) && a.childNodes.forEach(iter);\r\n });\r\n return arr\r\n};\r\nexport const updateSimilarFilesOfNode = (array, node) => {\r\n const arr = [...array]\r\n arr.forEach(function iter(a) {\r\n a.filesInNode.forEach(fileNode => {\r\n if (node.id === fileNode.id) {\r\n fileNode.similarItems = node.similarItems;\r\n }\r\n })\r\n Array.isArray(a.childNodes) && a.childNodes.forEach(iter);\r\n });\r\n return arr\r\n}\r\nexport const updateSingleFileProp = (array, node, newid) => {\r\n const arr = [...array]\r\n arr.forEach(function iter(a) {\r\n a.filesInNode.forEach(fileNode => {\r\n if (node.id === fileNode.id) {\r\n fileNode.Thumb = node.Thumb;\r\n fileNode.Props = node.Props;\r\n if(newid){\r\n fileNode.id = newid;\r\n\r\n }\r\n }\r\n })\r\n Array.isArray(a.childNodes) && a.childNodes.forEach(iter);\r\n });\r\n return arr\r\n}\r\nexport const searchFiles = (arr, searchKey) => {\r\n let result = [];\r\n arr.forEach(function iter(a) {\r\n a.filesInNode.forEach(fileNode => {\r\n if (fileNode.label.toLowerCase().indexOf(searchKey.toLowerCase()) !== -1) result.push({ ...fileNode, parent: a })\r\n })\r\n Array.isArray(a.childNodes) && a.childNodes.forEach(iter);\r\n });\r\n return result;\r\n}\r\nexport const expandTreeNode = (arr, node) => {\r\n arr.forEach(function iter(a, index) {\r\n a.isSelected = a.fullpath === node.fullpath;\r\n if (a.level >= node.level) {\r\n a.isExpanded = false;\r\n }\r\n a.showThumbnails = false;\r\n if (node.id === a.id) {\r\n a.isExpanded = true;\r\n a.showThumbnails = true;\r\n }\r\n Array.isArray(a.childNodes) && a.childNodes.forEach(iter);\r\n });\r\n return arr\r\n}\r\nexport const expandTreeNodeByPath = (arr, path) => {\r\n arr.forEach(function iter(a, index) {\r\n const isEqual = a.fullpath === path\r\n a.isSelected = isEqual\r\n a.isExpanded = isEqual\r\n a.showThumbnails = isEqual\r\n // if (a.level >= node.level) {\r\n // a.isExpanded = false;\r\n // }\r\n // a.showThumbnails = false;\r\n // if (node.id === a.id) {\r\n // a.isExpanded = true;\r\n // a.showThumbnails = true;\r\n // }\r\n Array.isArray(a.childNodes) && a.childNodes.forEach(iter);\r\n });\r\n return arr\r\n}\r\nexport const updateEveryElementOfTree = (array, key, value) => {\r\n const arr = [...array]\r\n arr.forEach(function iter(a, index) {\r\n a[key] = value;\r\n Array.isArray(a.childNodes) && a.childNodes.forEach(iter);\r\n });\r\n return arr\r\n};\r\nexport const findPrevNext = (array, node) => {\r\n const arr = [...array]\r\n let prev, next;\r\n arr.forEach(function iter(a, index, aParent) {\r\n a.filesInNode.forEach((fileInNode, i) => {\r\n if (node.id === fileInNode.id) {\r\n prev = a.filesInNode[i - 1]\r\n next = a.filesInNode[i + 1]\r\n if (i === 0) {// current node is the first item\r\n if (index === 0) {\r\n prev = node\r\n } else {\r\n const prevFolder = aParent.childNodes[index - 1];\r\n prev = prevFolder.filesInNode[prevFolder.filesInNode.length - 1] //last item of previous folder\r\n\r\n }\r\n }\r\n if (i >= a.filesInNode.length - 1) {//current node is the last item\r\n if (index >= aParent.childNodes.length - 1) {\r\n next = node\r\n } else {\r\n const nextFolder = aParent.childNodes[index + 1];\r\n // const nextFolder = a[index + 1];\r\n next = nextFolder.filesInNode[0]//first item of next folder\r\n\r\n }\r\n }\r\n }\r\n })\r\n Array.isArray(a.childNodes) && a.childNodes.forEach((x, i) => iter(x, i, a));\r\n });\r\n return { prev, next }\r\n}\r\nexport const getSimilarDesigns = (designlist, design) => {\r\n const files = designlist.filter(item => item.Type === \"file\")\r\n const similarFiles = files.filter(s => isSimilarFile(s.FullPath, design)).map(item => {\r\n return {\r\n label: item.Name,\r\n fullpath: item.FullPath,\r\n path: getPathOffile(item.FullPath),\r\n }\r\n })\r\n return similarFiles\r\n}","export const colorNumberModes = {\r\n NONE: 0,\r\n NUMERIC: 1,\r\n ALPHA: 2\r\n};\r\nexport const CurrencyFormat = {\r\n None: 0,\r\n US: 1,\r\n EU: 2\r\n};\r\nexport const mode = {\r\n None: 0,\r\n Both: 1, //Both admin and the multiple account\r\n OnlyAdmin: 2\r\n};\r\nexport const flaginCurrentMode = (isAdmin, flag) => {\r\n let flagStatus = false;\r\n if (isAdmin && flag !== mode.None) {\r\n flagStatus = true;\r\n } else if (!isAdmin && flag == mode.Both) {\r\n flagStatus = true;\r\n }\r\n return flagStatus;\r\n};\r\nexport const defaultFlags = {\r\n colorSeparatedTexture: true, //individual texture for individual colors\r\n showColorPercentage: true, //show percentage of color in color swatch\r\n hasOrderSheet: true, //if false order sheet will not be shown\r\n defaultQualityIndex: 0, //index for rug quality\r\n defaultStandardSize: 0,\r\n defaultUnit: null, //default unit for rug (ft or cm).\r\n hasRugshare: false,\r\n hasHoverZoom: false, //zoom design/illustration on hover\r\n hasArp: false, //augmented rug presentation\r\n showCopyright: true, //show copyright text?\r\n hasVps: true,\r\n showAddToCart: false,\r\n showSaveImage: true, // download image feature\r\n applyColorPaletteinSameFolder: false, //color and material changes in a design is applied to other same folder designs (example in dalyn rugs)\r\n applyColorPaletteinVariations: false, //color and material changes in a design is applied to other same designs variations (example in dalyn rugs)\r\n hasMasterCarving: mode.Both,\r\n designThumbsAsBg: mode.None,\r\n fullPageThumb: mode.None, //true for showing as default screen, \"SET\" for loading from button null/false for hiding\r\n showAllDesignsButton: mode.None,\r\n showWarningInfoInFooter: false, //show warning text in footer when colors from different palette are selected (eg: flipo)\r\n designBrowser: {\r\n showCurrentOpenFolder: false\r\n },\r\n rugshare: {\r\n socialMediaShareDescription: \"\",\r\n shareCustomizedDesign: false\r\n },\r\n colorCustomizationTools: {\r\n showColorCustomizationTools: false, //for multiple accounts\r\n showMapColors: false, //mapcolors is shown in admin by default. Showmapcolors == true for multiple accounts\r\n addShuffleColors: false,\r\n addColorPercentToggle: false,\r\n addAutocolor: false\r\n },\r\n colorSelectionBox: {\r\n showColorName: false,\r\n showSimilarColors: true,\r\n showColorFilter: true,\r\n showCarving: mode.None, // individual carving\r\n customColorOptions: [], //to choose from color wheel,\r\n collectionFilter: [], // show color collection and width in ordersheet according to folder. Has folder, collection, width list\r\n swatchSize: 2,\r\n colorPaletteLabels: {\r\n colorLabelInfo: \"\", // appears inside dialog box\r\n labelTemplate: \"\",\r\n labels: [],\r\n colorLabelFilter: []\r\n }\r\n },\r\n visualizations: {\r\n defaultView: \"DESIGN_VIEW_DEEPZOOM\", //DESIGN_VIEW_DEEPZOOM or ROOM_VIEW\r\n designViews: [\"DESIGN_VIEW_DEEPZOOM\"],\r\n myRoomEnabled: true,\r\n showIcebreakerinMyroom: true\r\n },\r\n designView: {\r\n minZoom: 0.75,\r\n maxZoom: 3,\r\n defaultZoom: 2,\r\n wallToWallLockAxis: null, //null, x, y\r\n hasDesignWaterMark: false,\r\n dpi: 1\r\n },\r\n designDetailSection: {\r\n isCollapsible: false,\r\n showDesignPathInTitle: false,\r\n showSizeSelection: true,\r\n showDesignDimensions: true,\r\n showAddToFavoriteText: false\r\n },\r\n designVariations: {\r\n appendDesignName: true, //appends design name to variation name if true\r\n sayOriginal: true\r\n },\r\n colorAreaSwatch: {\r\n hasMixply: mode.None, // allow mixply in multiple accounts\r\n showColorPercentage: true, //show percentage of color in color swatch\r\n colorNumberMode: colorNumberModes.NONE,\r\n showRedoButton: false,\r\n shape: \"CIRCLE\", //\"RECTANGLE_H\", \"SQUARE\", \"RECTANGLE_V\",\r\n // mixPlyOptions: [\r\n // { ply: 1, text: \"Single Color\" },\r\n // { ply: 2, text: \"2-Ply\" },\r\n // { ply: 3, text: \"3-Ply\" },\r\n // { ply: 4, text: \"4-Ply\" }\r\n // ]\r\n mixPlyOptions: [\r\n { ply: 1, text: \"Single Color\" },\r\n { ply: 3, text: \"Mix Ply\" }\r\n ],\r\n sameColorLock: false,\r\n exclusiveMatArr: [] // [0, 1] if mat 0 and 1 are exclusive. [[0,1],2] if 0,1 can appear together but not with 2.\r\n },\r\n language: {\r\n langOptions: [], //languages to allow switching //{ val: \"en\", text: \"EN\" } format\r\n strings: {} //strings to overwrite\r\n },\r\n ordersheet: {\r\n showRugSizeInOrderForm: true,\r\n currencyFormat: CurrencyFormat.NONE,\r\n populateRugSize: true, // width and height is left blank when it's false\r\n changeableUnits: true, // unit is always set to defaultUnit when it's false\r\n strInPrice: \"SILK\", //String to show instead of price eg: in hollyhunt, silk % (100% SILK) is shown instead of price ($100)\r\n autoPopulateFields: [], //[\"Shape\"] list name of ordersheet field you need to populate dynamically and add condition in getCustomFieldValue() function in ordersheet/index file\r\n roundOffToFtOrCm: false,\r\n roundOffToNearestHalf: false,\r\n addedCustomFields: []\r\n },\r\n email: {\r\n setCustomEmail: false,\r\n customerEmailBody: null,\r\n customerEmailSubject: null, //'test customer email subject',\r\n customerEmailFromAddress: null,\r\n companyEmailBody: null, //test company email body',\r\n companyEmailSubject: null, //'test company email subject',\r\n companyEmailFromAddress: null\r\n }\r\n};\r\n","import convert from \"convert-units\";\r\nimport { colorNumberModes } from \"../components/pages/EntryPage/defaultflags\";\r\nimport React from \"react\";\r\nimport { MD5 } from \"../utils/md5\";\r\nimport { getPathOffile } from \"../utils/arrayUtils\";\r\n\r\nconst StateContext = React.createContext();\r\nconst DispatchContext = React.createContext();\r\n\r\nconst SET_DETAILS = \"SET_DETAILS\";\r\nconst SET_TILE_DETAILS = \"SET_TILE_DETAILS\";\r\nconst SET_DETAILS_ONLY = \"SET_DETAILS_ONLY\";\r\nconst SELECT_DESIGN_COLOR = \"SELECT_DESIGN_COLOR\";\r\nconst CHANGE_COLOR = \"CHANGE_COLOR\";\r\nconst SET_DESIGN_PATH = \"SET_DESIGN_PATH\";\r\nconst CHANGE_TEXTURE = \"CHANGE_DESIGN_TEXTURE\";\r\nconst CHANGE_COLOR_TEXTURE = \"CHANGE_DESIGN_COLOR_TEXTURE\";\r\nconst CHANGE_COLOR_PALETTE = \"CHANGE_COLOR_PALETTE\";\r\nconst UNDO_COLOR_SELECTION = \"UNDO_COLOR_SELECTION\";\r\nconst REDO_COLOR_SELECTION = \"REDO_COLOR_SELECTION\";\r\nconst RESET_COLOR_SELECTION = \"RESET_COLOR_SELECTION\";\r\nconst SET_ORDER_PROPERTIES = \"SET_ORDER_PROPERTIES\";\r\nconst CHANGE_PILE = \"CHANGE_PILE\";\r\nconst CHANGE_COLOR_SCHEME = \"CHANGE_COLOR_SCHEME\";\r\nconst SET_LOADING = \"SET_LOADING\";\r\nconst SET_CUSTOMIZATION_FLAG = \"SET_CUSTOMIZATION_FLAG\";\r\nconst TOGGLE_COLOR_CARVING = \"TOGGLE_COLOR_CARVING\";\r\nconst MIX_PLY = \"MIX_PLY\";\r\nconst CHANGE_YARN_COLOR = \"CHANGE_YARN_COLOR\";\r\nconst SELECT_YARN = \"SELECT_YARN\";\r\nconst CHANGE_YARN_MATERIAL = \"CHANGE_YARN_MATERIAL\";\r\nconst SET_CUSTOSCOUT_COORDS = \"SET_CUSTOSCOUT_COORDS\";\r\nconst TOOGLE_CUSTOSCOUT = \"TOOGLE_CUSTOSCOUT\";\r\nconst SET_AVAIL_SIZES = \"SET_AVAIL_SIZES\";\r\nconst SELECT_ILLU_SIZE = \"SELECT_ILLU_SIZE\";\r\n\r\nconst designDetailActions = {\r\n SET_DETAILS,\r\n SET_DETAILS_ONLY,\r\n CHANGE_COLOR,\r\n SELECT_DESIGN_COLOR,\r\n SET_DESIGN_PATH,\r\n CHANGE_TEXTURE,\r\n CHANGE_COLOR_PALETTE,\r\n UNDO_COLOR_SELECTION,\r\n REDO_COLOR_SELECTION,\r\n RESET_COLOR_SELECTION,\r\n SET_ORDER_PROPERTIES,\r\n CHANGE_PILE,\r\n CHANGE_COLOR_TEXTURE,\r\n CHANGE_COLOR_SCHEME,\r\n SET_LOADING,\r\n SET_TILE_DETAILS,\r\n SET_CUSTOMIZATION_FLAG,\r\n TOGGLE_COLOR_CARVING,\r\n MIX_PLY,\r\n CHANGE_YARN_COLOR,\r\n CHANGE_YARN_MATERIAL,\r\n SELECT_YARN,\r\n SET_CUSTOSCOUT_COORDS,\r\n TOOGLE_CUSTOSCOUT,\r\n SET_AVAIL_SIZES,\r\n SELECT_ILLU_SIZE,\r\n};\r\nconst designDetailState = {\r\n loading: true,\r\n designDetails: {},\r\n designName: null,\r\n currentDesignPath: null,\r\n fullpath: null,\r\n selectedColor: -1,\r\n customizationFlag: false,\r\n history: [],\r\n undoHistory: [],\r\n totalKnots: null,\r\n tileDetails: null,\r\n hash: null,\r\n updateDesignTiles: null,\r\n updateNormapTiles: null,\r\n yarnIndex: -1,\r\n custoScout: {\r\n show: false,\r\n designPoint: null,\r\n containerPoint: null\r\n },\r\n carvingColorsIndex: []\r\n};\r\nconst designDetailReducer = (state, action) => {\r\n // console.log(action.type, action.payload)\r\n switch (action.type) {\r\n case SET_DETAILS:\r\n const details = normalizeUnit({\r\n ...action.payload.designDetails,\r\n defaultUnit: window.flags.defaultUnit\r\n });\r\n let designColorsPalette = action.payload.designDetails.DesignColors || [];\r\n if (window.flags.applyColorPaletteinVariations) {\r\n window.sessionStorage.removeItem(\"ParentFolder\");\r\n window.sessionStorage.removeItem(\"DesignColors\");\r\n }\r\n //if session storage ma xa vane designdetains.DesignColors && getPathOffile (state.fullpath)=== (session ko path)\r\n if (window.flags.applyColorPaletteinSameFolder && state.fullpath) {\r\n const ParentFolder = window.sessionStorage.getItem(\"ParentFolder\");\r\n const DesignColors = window.sessionStorage.getItem(\"DesignColors\");\r\n if (getPathOffile(state.fullpath) === ParentFolder && DesignColors) {\r\n designColorsPalette = JSON.parse(DesignColors);\r\n }\r\n }\r\n const designDetails = {\r\n ...action.payload.designDetails,\r\n ...details,\r\n OrderProperties: {\r\n QualityIndex: window.flags.defaultQualityIndex\r\n },\r\n DesignColors: designColorsPalette\r\n };\r\n return {\r\n ...state,\r\n designDetails,\r\n history: [],\r\n totalKnots: designDetails.DesignColors.map(c => c.Knots).reduce((a, b) => a + b, 0),\r\n colorNumbers: updateColorNumbers(designDetails.DesignColors),\r\n selectedColor: -1,\r\n currentDesignPath: action.payload.customizationFlag ? null : \"\",\r\n fullpath: action.payload.fullpath,\r\n designName: action.payload.label,\r\n updateDesignTiles: null,\r\n updateNormapTiles: null,\r\n customizationFlag: action.payload.customizationFlag,\r\n hash: action.payload.hash\r\n ? action.payload.hash\r\n : generateHash(designDetails, action.payload.fullpath),\r\n carvingColorsIndex: getCarvingColorNumbers(designDetails.DesignColors)\r\n };\r\n case SET_TILE_DETAILS:\r\n return setTileDetails(state, action.payload);\r\n case SELECT_DESIGN_COLOR:\r\n return { ...state, selectedColor: action.payload };\r\n case CHANGE_COLOR:\r\n return changeDesignColor(state, action.payload);\r\n case CHANGE_COLOR_PALETTE:\r\n return changeColorPalette(state, action.payload);\r\n\r\n case UNDO_COLOR_SELECTION:\r\n if (!state.history.length) return state;\r\n return undoDesignColor(state);\r\n case REDO_COLOR_SELECTION:\r\n return state;\r\n case RESET_COLOR_SELECTION:\r\n if (!state.history.length) return state;\r\n return {\r\n ...state,\r\n designDetails: state.history[0].designDetails,\r\n updateDesignTiles: null,\r\n updateNormapTiles: null,\r\n hash: state.history[0].hash,\r\n history: []\r\n };\r\n case SET_DESIGN_PATH:\r\n return { ...state, currentDesignPath: action.payload };\r\n case CHANGE_TEXTURE:\r\n return {\r\n ...state\r\n };\r\n case CHANGE_COLOR_TEXTURE:\r\n return changeColorMaterial(state, action.payload);\r\n case CHANGE_PILE:\r\n return changeColorPile(state, action.payload);\r\n case CHANGE_COLOR_SCHEME:\r\n return changeColorScheme(state, action.payload);\r\n case SET_LOADING:\r\n if (state.loading === action.payload) return state;\r\n return { ...state, loading: action.payload };\r\n case SET_CUSTOMIZATION_FLAG:\r\n return { ...state, customizationFlag: action.payload };\r\n case TOGGLE_COLOR_CARVING:\r\n return toggleCarving(state, action.payload);\r\n case MIX_PLY:\r\n return mixPly(state, action.payload);\r\n case CHANGE_YARN_COLOR:\r\n return changeYarnColor(state, action.payload);\r\n case CHANGE_YARN_MATERIAL:\r\n return changeYarnMaterial(state, action.payload);\r\n case SELECT_YARN:\r\n return {\r\n ...state,\r\n yarnIndex: action.payload.yarnIndex,\r\n selectedColor: action.payload.colorIndex\r\n };\r\n case SET_CUSTOSCOUT_COORDS:\r\n return {\r\n ...state,\r\n custoScout: {\r\n ...state.custoScout,\r\n designPoint: action.payload.designPoint,\r\n containerPoint: action.payload.containerPoint\r\n }\r\n };\r\n case TOOGLE_CUSTOSCOUT:\r\n return {\r\n ...state,\r\n custoScout: {\r\n ...state.custoScout,\r\n show: action.payload\r\n }\r\n };\r\n default:\r\n return state;\r\n }\r\n};\r\n\r\nconst changeDesignColor = (state, payload) => {\r\n const { designDetails, selectedColor, updateDesignTiles, updateNormapTiles, hash } = state;\r\n const colorDetail = payload;\r\n const d = JSON.parse(JSON.stringify({ ...designDetails }));\r\n const colorMaterial = parseInt(colorDetail.Texture);\r\n d.DesignColors[selectedColor].Color = colorDetail.Color;\r\n d.DesignColors[selectedColor].ColorName = colorDetail.ColorName;\r\n d.DesignColors[selectedColor].AssociatedMat = colorDetail.Texture;\r\n if (colorMaterial !== -1) {\r\n d.DesignColors[selectedColor].Material = colorMaterial;\r\n d.DesignColors[selectedColor].YarnDetails.forEach(yarn => {\r\n yarn.Material = colorMaterial;\r\n });\r\n }\r\n d.DesignColors[selectedColor].YarnDetails[0].Color = colorDetail.Color;\r\n d.DesignColors[selectedColor].YarnDetails[0].ColorName = colorDetail.ColorName;\r\n d.DesignColors[selectedColor].YarnDetails[0].AssociatedMat = colorDetail.Texture;\r\n\r\n //set in session storage\r\n if (window.flags.applyColorPaletteinSameFolder || window.flags.applyColorPaletteinVariations) {\r\n const DesignColors = d.DesignColors;\r\n const ParentFolder = getPathOffile(state.fullpath);\r\n window.sessionStorage.setItem(\"ParentFolder\", ParentFolder);\r\n window.sessionStorage.setItem(\"DesignColors\", JSON.stringify(DesignColors));\r\n }\r\n if (window.flags.colorAreaSwatch.sameColorLock) {\r\n const origDesignColors = state.history.length\r\n ? state.history[0].designDetails.DesignColors\r\n : designDetails.DesignColors;\r\n origDesignColors.forEach((color, index) => {\r\n if (index === selectedColor) return;\r\n if (color.YarnDetails[0].Color === origDesignColors[selectedColor].YarnDetails[0].Color) {\r\n console.log(\r\n \"changeDesignColor -> \",\r\n color.YarnDetails[0].Color,\r\n origDesignColors[selectedColor].YarnDetails[0].Color\r\n );\r\n d.DesignColors[index].Color = colorDetail.Color;\r\n d.DesignColors[index].ColorName = colorDetail.ColorName;\r\n d.DesignColors[index].YarnDetails[0].Color = colorDetail.Color;\r\n d.DesignColors[index].YarnDetails[0].ColorName = colorDetail.ColorName;\r\n d.DesignColors[index].YarnDetails[0].AssociatedMat = colorDetail.Texture;\r\n\r\n if (colorMaterial !== -1) {\r\n d.DesignColors[index].Material = colorMaterial;\r\n d.DesignColors[index].YarnDetails.forEach(yarn => {\r\n yarn.Material = colorMaterial;\r\n });\r\n }\r\n }\r\n });\r\n }\r\n return {\r\n ...state,\r\n designDetails: d,\r\n history: [...state.history, { designDetails, updateDesignTiles, updateNormapTiles, hash }],\r\n customizationFlag: true,\r\n updateDesignTiles: { colorIndex: selectedColor },\r\n updateNormapTiles: null,\r\n hash: generateHash(d)\r\n };\r\n};\r\n\r\nconst changeColorMaterial = (state, { material, materialName, colorIndex }) => {\r\n const { designDetails, updateDesignTiles, updateNormapTiles, hash } = state;\r\n const d = JSON.parse(JSON.stringify({ ...designDetails }));\r\n d.DesignColors[colorIndex].Material = material;\r\n d.DesignColors[colorIndex].materialName = materialName;\r\n d.DesignColors[colorIndex].YarnDetails.forEach(yarn => {\r\n yarn.Material = material;\r\n yarn.MaterialName = materialName;\r\n });\r\n // d.DesignColors[colorIndex].YarnDetails[0].Material = material;\r\n\r\n if (window.flags.applyColorPaletteinSameFolder || window.flags.applyColorPaletteinVariations) {\r\n const DesignColors = d.DesignColors;\r\n const ParentFolder = getPathOffile(state.fullpath);\r\n window.sessionStorage.setItem(\"ParentFolder\", ParentFolder);\r\n window.sessionStorage.setItem(\"DesignColors\", JSON.stringify(DesignColors));\r\n }\r\n return {\r\n ...state,\r\n history: [...state.history, { designDetails, updateDesignTiles, updateNormapTiles, hash }],\r\n designDetails: d,\r\n selectedColor: colorIndex,\r\n customizationFlag: true,\r\n updateDesignTiles: { colorIndex },\r\n updateNormapTiles: null,\r\n hash: generateHash(d)\r\n };\r\n};\r\nconst changeYarnColor = (state, payload) => {\r\n const { designDetails, yarnIndex, selectedColor, updateDesignTiles } = state;\r\n const { Color, ColorName } = payload;\r\n\r\n const d = JSON.parse(JSON.stringify({ ...designDetails }));\r\n d.DesignColors[selectedColor].YarnDetails[yarnIndex] = {\r\n ...d.DesignColors[selectedColor].YarnDetails[yarnIndex],\r\n Color,\r\n ColorName\r\n };\r\n\r\n if (window.flags.applyColorPaletteinSameFolder || window.flags.applyColorPaletteinVariations) {\r\n const DesignColors = d.DesignColors;\r\n const ParentFolder = getPathOffile(state.fullpath);\r\n window.sessionStorage.setItem(\"ParentFolder\", ParentFolder);\r\n window.sessionStorage.setItem(\"DesignColors\", JSON.stringify(DesignColors));\r\n }\r\n const updatedDesignTiles = { colorIndex: selectedColor };\r\n return {\r\n ...state,\r\n designDetails: d,\r\n updateDesignTiles: updatedDesignTiles,\r\n updateNormapTiles: null,\r\n history: [...state.history, { designDetails, updateDesignTiles }],\r\n customizationFlag: true,\r\n hash: generateHash(d)\r\n };\r\n};\r\nconst changeYarnMaterial = (state, payload) => {\r\n const { designDetails, yarnIndex, selectedColor, updateNormapTiles, hash } = state;\r\n const { material, materialName, colorIndex } = payload;\r\n\r\n const d = JSON.parse(JSON.stringify({ ...designDetails }));\r\n d.DesignColors[selectedColor].YarnDetails[yarnIndex] = {\r\n ...d.DesignColors[selectedColor].YarnDetails[yarnIndex],\r\n Material: material\r\n };\r\n\r\n if (window.flags.applyColorPaletteinSameFolder || window.flags.applyColorPaletteinVariations) {\r\n const DesignColors = d.DesignColors;\r\n const ParentFolder = getPathOffile(state.fullpath);\r\n window.sessionStorage.setItem(\"ParentFolder\", ParentFolder);\r\n window.sessionStorage.setItem(\"DesignColors\", JSON.stringify(DesignColors));\r\n }\r\n const updateDesignTiles = { colorIndex: selectedColor };\r\n return {\r\n ...state,\r\n designDetails: d,\r\n updateDesignTiles,\r\n updateNormapTiles: null,\r\n history: [...state.history, { designDetails, updateDesignTiles, updateNormapTiles, hash }],\r\n customizationFlag: true,\r\n hash: generateHash(d)\r\n };\r\n};\r\nconst mixPly = (state, payload) => {\r\n const { designDetails } = state;\r\n const { colorIndex, plyNumber } = payload;\r\n const d = JSON.parse(JSON.stringify({ ...designDetails }));\r\n const { YarnDetails } = d.DesignColors[colorIndex];\r\n const { Color: firstColor } = YarnDetails[0];\r\n let updateDesignTiles = null;\r\n let yarnDetailArr = Array(plyNumber);\r\n\r\n for (let i = 0; i < plyNumber; i++) {\r\n //Check if all colors are same, if same no need to render\r\n if (YarnDetails[i] && YarnDetails[i].Color !== firstColor) {\r\n updateDesignTiles = true;\r\n }\r\n yarnDetailArr[i] = YarnDetails[i] ? YarnDetails[i] : YarnDetails[0];\r\n }\r\n\r\n if (plyNumber === 1) {\r\n //check if all the mix ply contains color 1, if yes dont render\r\n for (let i = 0; i < YarnDetails.length; i++) {\r\n if (YarnDetails && YarnDetails[i].Color !== firstColor) {\r\n updateDesignTiles = true;\r\n }\r\n }\r\n }\r\n d.DesignColors[colorIndex].YarnDetails = yarnDetailArr;\r\n if (updateDesignTiles) {\r\n updateDesignTiles = { colorIndex, YarnDetails };\r\n const hash = generateHash(d);\r\n return { ...state, designDetails: d, customizationFlag: true, updateDesignTiles, hash };\r\n }\r\n\r\n if (window.flags.applyColorPaletteinSameFolder || window.flags.applyColorPaletteinVariations) {\r\n const DesignColors = d.DesignColors;\r\n const ParentFolder = getPathOffile(state.fullpath);\r\n window.sessionStorage.setItem(\"ParentFolder\", ParentFolder);\r\n window.sessionStorage.setItem(\"DesignColors\", JSON.stringify(DesignColors));\r\n }\r\n return { ...state, designDetails: d, customizationFlag: true };\r\n};\r\nconst toggleCarving = (state, payload) => {\r\n const { designDetails, selectedColor, updateDesignTiles, updateNormapTiles, hash } = state;\r\n const d = JSON.parse(JSON.stringify({ ...designDetails }));\r\n\r\n if (payload && payload.length > 0) {\r\n payload.forEach(element => {\r\n d.DesignColors[element].Carving = !d.DesignColors[element].Carving;\r\n });\r\n } else if (payload && payload.length === 0) {\r\n let firstColorCarving = d.DesignColors[0].Carving;\r\n d.DesignColors.forEach((designColor, i) => {\r\n designColor.Carving = !firstColorCarving;\r\n });\r\n } else {\r\n d.DesignColors[selectedColor].Carving = !d.DesignColors[selectedColor].Carving;\r\n }\r\n let tilesToUpdate = payload ? null : { colorIndex: selectedColor };\r\n\r\n return {\r\n ...state,\r\n designDetails: d,\r\n customizationFlag: true,\r\n updateDesignTiles: null,\r\n updateNormapTiles: tilesToUpdate,\r\n history: [...state.history, { designDetails, updateDesignTiles, updateNormapTiles, hash }],\r\n hash: generateHash(d)\r\n };\r\n};\r\nconst changeColorPile = (state, { colorIndex, pileHeight }) => {\r\n const { designDetails, updateDesignTiles, updateNormapTiles, hash } = state;\r\n const d = JSON.parse(JSON.stringify({ ...state.designDetails }));\r\n d.DesignColors[colorIndex].PileHeight = pileHeight;\r\n const colorNumbers = updateColorNumbers(d.DesignColors);\r\n return {\r\n ...state,\r\n designDetails: d,\r\n customizationFlag: true,\r\n colorNumbers: colorNumbers,\r\n selectedColor: colorIndex,\r\n updateDesignTiles: null,\r\n updateNormapTiles: { colorIndex },\r\n hash: generateHash(d),\r\n history: [...state.history, { designDetails, updateDesignTiles, updateNormapTiles, hash }]\r\n };\r\n};\r\nconst changeColorScheme = (state, payload) => {\r\n const { fullpath, designName } = payload;\r\n const details = normalizeUnit({\r\n ...payload.designDetails,\r\n defaultUnit: window.flags.defaultUnit\r\n });\r\n let designColorsPalette = payload.designDetails.DesignColors || [];\r\n if (window.flags.applyColorPaletteinVariations) {\r\n const DesignColors = window.sessionStorage.getItem(\"DesignColors\");\r\n\r\n if (DesignColors) {\r\n designColorsPalette = JSON.parse(DesignColors);\r\n }\r\n }\r\n const designDetails = {\r\n ...payload.designDetails,\r\n ...details,\r\n OrderProperties: {\r\n QualityIndex: window.flags.defaultQualityIndex\r\n },\r\n DesignColors: designColorsPalette\r\n };\r\n return {\r\n ...state,\r\n history: [],\r\n designDetails,\r\n hash: generateHash(designDetails, fullpath),\r\n updateDesignTiles: null,\r\n updateNormapTiles: null,\r\n designName: designName,\r\n currentDesignPath: \"\",\r\n totalKnots: designColorsPalette.map(c => c.Knots).reduce((a, b) => a + b, 0),\r\n colorNumbers: updateColorNumbers(designColorsPalette),\r\n fullpath,\r\n selectedColor: -1,\r\n customizationFlag: true\r\n };\r\n};\r\nconst changeColorPalette = (state, colorPalette) => {\r\n const { designDetails, updateDesignTiles, updateNormapTiles, hash } = state;\r\n const d = JSON.parse(JSON.stringify({ ...designDetails }));\r\n colorPalette.forEach((item, index) => {\r\n if (d.DesignColors[index] && d.DesignColors[index].YarnDetails.length === 1) {\r\n d.DesignColors[index].Color = item.Value;\r\n d.DesignColors[index].ColorName = item.Name;\r\n d.DesignColors[index].YarnDetails[0].Color = item.Value;\r\n d.DesignColors[index].YarnDetails[0].ColorName = item.Name;\r\n }\r\n });\r\n return {\r\n ...state,\r\n customizationFlag: true,\r\n history: [...state.history, { designDetails, updateDesignTiles, updateNormapTiles, hash }],\r\n designDetails: d,\r\n updateDesignTiles: { colorIndex: -1 },\r\n updateNormapTiles: null,\r\n hash: generateHash(d)\r\n };\r\n};\r\nconst convertUnit = (from, to, valueArr) => {\r\n return valueArr.map(val =>\r\n Number(\r\n convert(val)\r\n .from(from)\r\n .to(to)\r\n .toFixed(2)\r\n )\r\n );\r\n};\r\nconst normalizeUnit = ({ PhysicalWidth, PhysicalHeight, defaultUnit, Unit }) => {\r\n let width = PhysicalWidth,\r\n height = PhysicalHeight,\r\n defUnit = defaultUnit;\r\n if (!defaultUnit) {\r\n if (Unit === \"in\") defUnit = \"ft\";\r\n else defUnit = Unit;\r\n }\r\n [width, height] = convertUnit(Unit, defUnit, [PhysicalWidth, PhysicalHeight]);\r\n if (\r\n defUnit === \"cm\" ||\r\n window.flags.ordersheet.roundOffToFtOrCm ||\r\n window.flags.ordersheet.roundOffToNearestHalf\r\n ) {\r\n width = window.flags.ordersheet.roundOffToNearestHalf\r\n ? Math.round(width * 2) / 2\r\n : Math.round(width);\r\n height = window.flags.ordersheet.roundOffToNearestHalf\r\n ? Math.round(height * 2) / 2\r\n : Math.round(height);\r\n }\r\n return { PhysicalWidth: width, PhysicalHeight: height, Unit: defUnit };\r\n};\r\nconst updateColorNumbers = designColors => {\r\n const { colorNumberMode } = window.flags.colorAreaSwatch;\r\n var map = {};\r\n var result = [];\r\n var cnt = 1;\r\n var element, temp;\r\n designColors.forEach((designColor, i) => {\r\n element = designColor.ColorName + \"-\" + designColor.PileHeight;\r\n if (!map[element]) {\r\n map[element] = [cnt++];\r\n }\r\n map[element].push(i);\r\n });\r\n for (element in map) {\r\n var indices = map[element];\r\n if (colorNumberMode === colorNumberModes.ALPHA) temp = String.fromCharCode(64 + indices[0]);\r\n else temp = indices[0];\r\n if (indices.length === 2) {\r\n result[indices[1]] = temp;\r\n } else {\r\n for (var j = 1; j < indices.length; ++j) {\r\n result[indices[j]] = temp + String.fromCharCode(96 + j);\r\n }\r\n }\r\n }\r\n return result;\r\n};\r\n\r\nfunction undoDesignColor(state) {\r\n const his = [...state.history];\r\n if (!his.length) return state;\r\n const { designDetails, updateDesignTiles, updateNormapTiles, hash } = his.pop();\r\n return { ...state, updateNormapTiles, designDetails, updateDesignTiles, hash, history: his };\r\n}\r\n\r\nconst setTileDetails = (state, payload) => {\r\n // const { props1x, props2x, props4x } = payload;\r\n return {\r\n ...state,\r\n tileDetails: payload\r\n };\r\n};\r\nexport const generateHash = (details, fullpath = \"\") => {\r\n const des = JSON.stringify(details);\r\n // const key = sessionStorage.getItem(\"apikey\")\r\n return MD5(des + fullpath);\r\n};\r\nconst getCarvingColorNumbers = designColors => {\r\n let carvingColorNumbers = [];\r\n if (designColors && designColors.length > 0) {\r\n if (checkPartialCarving(designColors)) {\r\n designColors.forEach((designColor, i) => {\r\n if (designColor.Carving) {\r\n carvingColorNumbers.push(i);\r\n }\r\n });\r\n } else {\r\n }\r\n }\r\n return carvingColorNumbers;\r\n};\r\nconst checkPartialCarving = designColors => {\r\n let partialCarving = false;\r\n let firstColorCarving = designColors[0].Carving;\r\n designColors.forEach((designColor, i) => {\r\n if (firstColorCarving !== designColor.Carving) {\r\n partialCarving = true;\r\n }\r\n });\r\n return partialCarving;\r\n};\r\nfunction DesignDetailStateProvider({ children }) {\r\n const [state, dispatch] = React.useReducer(designDetailReducer, designDetailState);\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n window.open(\r\n \"https://alternativetechnology.zendesk.com/hc/en-us/articles/900001316283-exploRUG-v3-Walkthrough\"\r\n )\r\n }\r\n />\r\n \r\n
\r\n A refreshed experience
\r\n\r\n exploRUG now provides a better experience for your clients.\r\n
\r\n Besides the look and the features, this update also has significant performance\r\n improvements.\r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n Sign in to your explorug\r\n
\r\n \r\n\r\n
\r\n \r\n );\r\n};\r\nAtDialog.propTypes = {\r\n onClose: PropTypes.func,\r\n isOpen: PropTypes.bool,\r\n className: PropTypes.string,\r\n size: PropTypes.oneOf([\"lg\", \"md\", \"sm\", \"xs\"])\r\n};\r\nAtDialog.defaultProps = {\r\n size: \"md\",\r\n className: \"\",\r\n isOpen: false\r\n};\r\nexport default AtDialog;\r\n","import React from \"react\";\r\nimport AtIcon from \"../AtIcon\";\r\n\r\nconst CircularButton = props => {\r\n const { icon, onClick, className = \"\", size = \"medium\", children } = props;\r\n return (\r\n \r\n {/* {this.maybeRenderHeader()} */}\r\n {props.children}\r\n
\r\n \r\n {icon &&
\r\n );\r\n};\r\n\r\nexport default CircularButton;\r\n","import React, { useState, useRef, useEffect } from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport CircularButton from \"../../atoms/CircularButton\";\r\nimport { flaginCurrentMode } from \"../../pages/EntryPage/defaultflags\";\r\nimport classNames from \"classnames\";\r\nimport { Tooltip } from \"@blueprintjs/core\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\nconst Thumbnail = props => {\r\n const {\r\n className = \"\",\r\n thumb,\r\n thumbnailName,\r\n onRemoveClicked,\r\n onThumbnailClick,\r\n onEditClick,\r\n hasRemove,\r\n hasEdit,\r\n imageRotated,\r\n infoThumbs,\r\n aspect = \"portrait\",\r\n showTitle = true,\r\n active,\r\n thumbType\r\n } = props;\r\n const [isHovering, setIsHovering] = useState(false);\r\n const [isloading, setIsloading] = useState(true);\r\n const thumbImg = useRef(null);\r\n const [scrollTo, setScrollTo] = useState(true);\r\n const ref = useRef(null);\r\n\r\n useEffect(() => {\r\n let effectActive = true;\r\n\r\n setIsloading(true);\r\n if (!thumb.Thumb) return;\r\n const image = new Image();\r\n image.src = thumb.Thumb;\r\n image.onload = () => {\r\n if (!effectActive) return;\r\n try {\r\n if (thumbImg?.current) {\r\n thumbImg.current.src = image.src;\r\n thumbImg.current.backgroundImage = image.src;\r\n }\r\n } catch (error) {\r\n console.error(error);\r\n }\r\n setIsloading(false);\r\n };\r\n return () => { effectActive = false }\r\n }, [thumb.Thumb]);\r\n\r\n\r\n const rendername = name =>\r\n name &&\r\n name.split(\"~\").map((item, i) => {\r\n return {item}
;\r\n });\r\n\r\n const getBgImage = () => {\r\n if (\r\n !flaginCurrentMode(window.InterfaceElements.IsAdmin, window.flags.designThumbsAsBg) ||\r\n thumbType === \"ROOM_THUMBS\"\r\n )\r\n return \"none\";\r\n const thumbSrc = thumbImg.current !== null ? \"url(\" + thumbImg.current.src + \")\" : \"none\";\r\n return thumbSrc;\r\n };\r\n return (\r\n\r\n {thumb.infoThumbs.map((item, index) => {\r\n return (\r\n <>\r\n {\r\n thumb.infoTitles?.length ?\r\n \r\n \r\n :\r\n
\r\n )}\r\n \r\n { }} key={index}>\r\n {typeof item === \"string\" ? {item} : item}\r\n
\r\n { }} key={index}>\r\n {typeof item === \"string\" ? {item} : item}\r\n
\r\n }\r\n \r\n\r\n );\r\n })}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default LazyThumbnail;\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport Thumbnail from \"../Thumbnail\";\r\nimport LazyThumbnail from \"../../pages/DesignBrowser/LazyThumbnail\";\r\nimport { useMount } from \"react-use\";\r\n\r\nconst ThumbList = props => {\r\n const {\r\n thumbList,\r\n activeId,\r\n onThumbnailClick,\r\n onEditClick,\r\n onRemoveClicked,\r\n className = \"\",\r\n lazyDesignThumbnail = false\r\n } = props;\r\n\r\n return (\r\n \r\n {thumbList.map((thumb, index) =>\r\n lazyDesignThumbnail ? (\r\n onRemoveClicked && onRemoveClicked(thumb, index)}\r\n onThumbnailClick={() => {\r\n if (!onThumbnailClick) return;\r\n onThumbnailClick(thumb, index, thumbList[index - 1], thumbList[index + 1]);\r\n }}\r\n active={thumb.id === activeId}\r\n />\r\n ) : (\r\n onRemoveClicked && onRemoveClicked(thumb, index)}\r\n onEditClick={() => onEditClick && onEditClick(thumb, index)}\r\n onThumbnailClick={() => {\r\n if (!onThumbnailClick) return;\r\n onThumbnailClick(thumb, index, thumbList[index - 1], thumbList[index + 1]);\r\n }}\r\n active={thumb.id === activeId}\r\n />\r\n )\r\n )}\r\n
\r\n );\r\n};\r\n\r\nThumbList.propTypes = {\r\n thumbList: PropTypes.array.isRequired,\r\n activeId: PropTypes.string,\r\n onThumbnailClick: PropTypes.func\r\n};\r\n\r\nexport default ThumbList;\r\n","import React from \"react\";\r\nimport classNames from \"classnames\";\r\nimport AtIcon from \"../../atoms/AtIcon\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\nconst CameraButton1 = props => {\r\n const { onClick, className = \"\", size = \"medium\", clipped = false, disabled, nopointer } = props;\r\n return (\r\n {header}
}\r\n\r\n {options.map((option, index) => {\r\n return (\r\n onClick(e, index)}\r\n aspect=\"landscape\"\r\n active={activeIndex === index}\r\n />\r\n );\r\n })}\r\n
\r\n {children}\r\n \r\n sliderOnChange(value)}\r\n knobSize={sliderSize.knob}\r\n >\r\n \r\n \r\n
\r\n\r\n \r\n {/* \r\n \r\n sliderOnChange(value)}\r\n knobSize={sliderSize.knob}\r\n >\r\n \r\n \r\n
\r\n\r\n */}\r\n {/* \r\n sliderOnChange(value)}\r\n knobSize={sliderSize.knob}\r\n >\r\n \r\n \r\n
\r\n */}\r\n \r\n {/*
*/}\r\n \r\n );\r\n};\r\n\r\nexport default BlurCircle;\r\n","import React, { useState } from \"react\";\r\nimport { useRoomConfigState, useDispatchRoomConfig, roomConfigActions } from \"./roomconfig.reducer\";\r\nimport { MenuDivider, MenuItem, Menu } from \"@blueprintjs/core\";\r\nimport AtButton from \"../atoms/AtButton\";\r\nimport classNames from \"classnames\";\r\nconst IllustrationOptions = props => {\r\n const { roomData, isIdle } = props;\r\n const { config } = roomData;\r\n const { roomType, scene1 } = config;\r\n const dispatchRoomConfig = useDispatchRoomConfig();\r\n const roomConfigState = useRoomConfigState();\r\n const { floorOptions, carpetOptions, roomelements, activeshot, activedata } = roomConfigState;\r\n const [showMenu, setShowMenu] = useState(false);\r\n\r\n const isMultishot = roomelements.shots && Object.entries(roomelements.shots).length > 1;\r\n const hasIlluOptions =\r\n (roomType !== \"illustration\" && floorOptions.floors.length > 0) ||\r\n isMultishot ||\r\n (activedata && Object.keys(activedata).length > 0);\r\n const hasOptions = roomType !== \"illustration\" || hasIlluOptions;\r\n const tooltipProps = { position: \"bottom\" };\r\n\r\n window.dismissMenu = () => {\r\n setShowMenu(false);\r\n };\r\n\r\n const setCarpetOption = carpetOption =>\r\n dispatchRoomConfig({\r\n type: roomConfigActions.SET_CARPET_OPTION,\r\n payload: carpetOption\r\n });\r\n const handleRotation = angle => {\r\n const { rotation } = carpetOptions;\r\n if (!rotation) return;\r\n let newRotation = [rotation[0], rotation[1], rotation[2] + angle];\r\n const newCarpetOptions = { ...carpetOptions, rotation: newRotation };\r\n setCarpetOption(newCarpetOptions);\r\n };\r\n const handleResetRotation = () => {\r\n const newCarpetOptions = { ...carpetOptions, rotation: scene1.surface1.rotation };\r\n setCarpetOption(newCarpetOptions);\r\n };\r\n const handleShowFloor = () =>\r\n dispatchRoomConfig({\r\n type: roomConfigActions.SET_SHOW_FLOOR_OPTION,\r\n payload: true\r\n });\r\n const handleShowViewpoints = () => {\r\n dispatchRoomConfig({\r\n type: roomConfigActions.SET_SHOW_VP_DIALOG,\r\n payload: true\r\n });\r\n };\r\n const handleShowColorBox = object => {\r\n dispatchRoomConfig({\r\n type: roomConfigActions.SET_SHOW_COLOR_BOX,\r\n payload: { object, isOpen: true }\r\n });\r\n };\r\n const handleResetPosition = () => {\r\n const newCarpetOptions = { ...carpetOptions, position: scene1.surface1.position };\r\n setCarpetOption(newCarpetOptions);\r\n };\r\n const handleReset = () => {\r\n const newCarpetOptions = { ...carpetOptions, position: scene1.surface1.position, rotation: scene1.surface1.rotation };\r\n setCarpetOption(newCarpetOptions);\r\n }\r\n const renderFloorOption = path => (\r\n \r\n {path ? (\r\n 
\r\n ) : (\r\n \r\n )}\r\n Change Floor\r\n
\r\n );\r\n const renderMultishotOption = shot => Change Viewpoint
;\r\n const getObjectProps = key => roomelements.objects[key] || {};\r\n\r\n const renderActiveOption = objKey => (\r\n Change {getObjectProps(objKey).label} Color
\r\n );\r\n\r\n const rotationOptions = (\r\n \r\n Rotate Carpet\r\n
\r\n );\r\n return (\r\n \r\n handleRotation(-15)}\r\n />\r\n handleRotation(15)}\r\n />\r\n {/*
\r\n \r\n {showMenu && (\r\n \r\n )}\r\n {hasOptions && (\r\n setShowMenu(!showMenu)}\r\n />\r\n )}\r\n
\r\n );\r\n};\r\nexport default IllustrationOptions;\r\n","import React from \"react\";\r\nimport { Overlay, H5, H2 } from \"@blueprintjs/core\";\r\nimport Thumbnail from \"../molecules/Thumbnail\";\r\nimport { useRoomConfigState, useDispatchRoomConfig, roomConfigActions } from \"./roomconfig.reducer\";\r\nimport AtDialog from \"../molecules/AtDialog\";\r\nimport AtIcon from \"../atoms/AtIcon\";\r\n\r\nconst FloorSelectionDialog = props => {\r\n const { floorOptions, handleClose, handleThumbClick, handleReset } = props;\r\n return (\r\n <>\r\n \r\n
\r\n \r\n {/* 
*/}\r\n
\r\n Please choose your floor
\r\n\r\n {/* {scenesData &&\r\n scenesData.map((category, i) => {\r\n return ( */}\r\n
\r\n {/* );\r\n })} */}\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default FloorSelectionDialog;\r\n","import React from \"react\";\r\nimport { Overlay, H5 } from \"@blueprintjs/core\";\r\nimport Thumbnail from \"../molecules/Thumbnail\";\r\nimport { useRoomConfigState, useDispatchRoomConfig, roomConfigActions } from \"./roomconfig.reducer\";\r\n\r\nconst ViewpointDialog = props => {\r\n const { baseUrl, shots, showViewpointDialog, activeshot,handleChangeShot, handleClose, handleThumbClick } = props\r\n return \r\n {\r\n handleThumbClick(floor);\r\n // handleClose();\r\n }}\r\n />\r\n );\r\n })}\r\n
\r\n\r\n {/* {i < scenesData.length - 1 && */}\r\n {/* */}\r\n\r\n {/* } */}\r\n \r\n
\r\n\r\n \r\n Royal Mosa\r\n \r\n The floor tiles in this collection are used with the courtesy of{\" \"}\r\n \r\n Royal Mosa\r\n \r\n \r\n
\r\n \r\n {handleReset && (\r\n
\r\n )}\r\n {floorOptions.floors.map((floor, i) => {\r\n return (\r\n \r\n \r\n Original\r\n
\r\n \r\n handleThumbClick(shotKey)}\r\n />\r\n ))}\r\n
\r\n \r\n}\r\n\r\n\r\nexport default ViewpointDialog","import React from \"react\";\r\n\r\nconst getSquareSVG = props => {\r\n const { yarns, handleClick, shape,strokeColor=\"#808080\", ...otherprops } = props;\r\n\r\n return (\r\n \r\n\r\n );\r\n};\r\nconst getCircleSVG = props => {\r\n const { yarns, handleClick, shape,strokeColor=\"#808080\", ...otherprops } = props;\r\n return (\r\n \r\n );\r\n};\r\nconst getSVGofShape = props => {\r\n const { yarns, handleClick, shape, ...otherprops } = props;\r\n switch (shape) {\r\n case \"CIRCLE\":\r\n return getCircleSVG(props);\r\n break;\r\n case \"SQUARE\":\r\n return getSquareSVG(props);\r\n break;\r\n default:\r\n return null\r\n }\r\n};\r\n\r\nconst Mixply4 = props => {\r\n const { yarns, handleClick, ...otherprops } = props;\r\n return (\r\n getSVGofShape(props)\r\n );\r\n};\r\n\r\nMixply4.propTypes = {};\r\n\r\nexport default Mixply4;\r\n","import React from \"react\";\r\n\r\nconst getSquareSVG = props => {\r\n const { yarns, handleClick, shape,strokeColor=\"#808080\", ...otherprops } = props;\r\n\r\n return (\r\n \r\n \r\n );\r\n};\r\nconst getCircleSVG = props => {\r\n const { yarns, handleClick, shape,strokeColor=\"#808080\", ...otherprops } = props;\r\n return (\r\n \r\n\r\n );\r\n};\r\nconst getSVGofShape = props => {\r\n const { yarns, handleClick, shape, ...otherprops } = props;\r\n switch (shape) {\r\n case \"CIRCLE\":\r\n return getCircleSVG(props);\r\n break;\r\n case \"SQUARE\":\r\n return getSquareSVG(props);\r\n break;\r\n default:\r\n return null\r\n }\r\n};\r\n\r\nconst Mixply3 = props => {\r\n return getSVGofShape(props)\r\n};\r\n\r\nMixply3.propTypes = {};\r\n\r\nexport default Mixply3;\r\n","import React from \"react\";\r\n\r\nconst getSquareSVG = props => {\r\n const { yarns, handleClick, shape, strokeColor=\"#808080\", ...otherprops } = props;\r\n \r\n return (\r\n \r\n );\r\n};\r\n\r\nconst getCircleSVG = props => {\r\n const { yarns, handleClick, shape, strokeColor=\"#808080\", ...otherprops } = props;\r\n return (\r\n \r\n );\r\n};\r\nconst getSVGofShape = props => {\r\n const { yarns, handleClick, shape, ...otherprops } = props;\r\n switch (shape) {\r\n case \"CIRCLE\":\r\n return getCircleSVG(props);\r\n break;\r\n case \"SQUARE\":\r\n return getSquareSVG(props);\r\n break;\r\n default:\r\n return null;\r\n }\r\n};\r\n\r\nconst Mixply2 = props => {\r\n return getSVGofShape(props);\r\n};\r\n\r\nMixply2.propTypes = {};\r\n\r\nexport default Mixply2;\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nconst getSquareSVG = props => {\r\n const { yarns, handleClick, shape,strokeColor=\"#808080\", ...otherprops } = props;\r\n\r\n return (\r\n \r\n );\r\n};\r\nconst getCircleSVG = props => {\r\n const { yarns, handleClick, shape,strokeColor=\"#808080\", ...otherprops } = props;\r\n return (\r\n \r\n );\r\n};\r\nconst getSVGofShape = props => {\r\n const { shape } = props;\r\n switch (shape) {\r\n case \"CIRCLE\":\r\n return getCircleSVG(props);\r\n break;\r\n case \"SQUARE\":\r\n return getSquareSVG(props);\r\n break;\r\n default:\r\n return null;\r\n }\r\n};\r\nconst Mixply1 = props => {\r\n const { yarns, handleClick, ...otherprops } = props;\r\n return getSVGofShape(props);\r\n};\r\n\r\nMixply1.propTypes = {};\r\n\r\nexport default Mixply1;\r\n","import React from \"react\";\r\nimport Mixply4 from \"./Mixply4\";\r\nimport Mixply3 from \"./Mixply3\";\r\nimport Mixply2 from \"./Mixply2\";\r\nimport Mixply1 from \"./Mixply1\";\r\n\r\nconst hexToRgb = hex => {\r\n var result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\r\n return result\r\n ? {\r\n r: parseInt(result[1], 16),\r\n g: parseInt(result[2], 16),\r\n b: parseInt(result[3], 16)\r\n }\r\n : null;\r\n};\r\nconst isRGBsimilarToGray = colorHex => {\r\n const rgb = hexToRgb(colorHex);\r\n const isRGBsimilar = isSimilar(rgb.r) && isSimilar(rgb.g) && isSimilar(rgb.b);\r\n return isRGBsimilar;\r\n};\r\nconst isSimilar = colorVal => {\r\n const similar = Math.abs(colorVal - 128) < 8;\r\n return similar;\r\n};\r\n\r\nconst CircularColorSVG = props => {\r\n const { yarns } = props;\r\n let strokeColor;\r\n yarns.forEach(element => {\r\n if (isRGBsimilarToGray(element)) {\r\n strokeColor = \"#333\";\r\n }\r\n });\r\n const renderView = () => {\r\n switch (yarns.length) {\r\n case 1:\r\n return Select Viewpoint
\r\n {shots && Object.entries(shots).map(([shotKey, shotProps], i) => (\r\n\r\n \r\n {(DefaultTextureNames || AdditionalTextureNames) && (\r\n <>\r\n {CustomTextureNames && CustomTextureNames.length > 0 && (\r\n {\r\n handleMaterialChange({ material: i, materialName: textureName });\r\n }}\r\n />\r\n )\r\n )}\r\n {AdditionalTextureNames &&\r\n AdditionalTextureNames.map((textureName, i) => (\r\n {\r\n handleMaterialChange({ material: 4 + i, materialName: textureName });\r\n }}\r\n />\r\n ))}\r\n \r\n )}\r\n\r\n {CustomTextureNames && CustomTextureNames.length > 0 && (\r\n <>\r\n {\r\n handleMaterialChange({\r\n material: CustomTextureIndices[i],\r\n materialName: textureName\r\n });\r\n }}\r\n />\r\n ))}\r\n \r\n )}\r\n \r\n }\r\n minimal\r\n position=\"bottom-left\"\r\n portalContainer={document.getElementById(\"app-main\")}\r\n >\r\n
\r\n );\r\n return (\r\n \r\n {shouldShowDropDown() ? (\r\n <>\r\n {getMaterialName(designColor.YarnDetails[0].Material)}\r\n {!allMaterialOptionsHidden() &&
\r\n \r\n \r\n item.Color)}\r\n handleClick={handleYarnClick}\r\n shape={casFlags.shape}\r\n />\r\n\r\n {totalKnots && (\r\n \r\n {((designColor.Knots / totalKnots) * 100).toFixed(1)}%\r\n \r\n )}\r\n
\r\n \r\n\r\n \r\n {designColor && (\r\n \r\n {mixPlyOptions.map(plyOption => (\r\n handleMixPly(plyOption.ply)}\r\n text={plyOption.text}\r\n >\r\n ))}\r\n \r\n }\r\n >\r\n
\r\n \r\n );\r\n});\r\n","import React from \"react\";\r\nimport AtIcon from \"../../atoms/AtIcon\";\r\nimport CircularColorSVG from \"../../atoms/CircularColorSVG\";\r\nimport Mixply1 from \"../../atoms/CircularColorSVG/Mixply1\";\r\nimport { Popover, Menu, MenuItem, Icon } from \"@blueprintjs/core\";\r\nimport {\r\n useDispatchDesignDetail,\r\n designDetailActions\r\n} from \"../../../reducers/designdetails.reducer\";\r\nimport { getMaterialName } from \"./index\";\r\nexport const NestedAreaSwatch = props => {\r\n const { className, colorIndex, handleClick, style, designColor, colorNumber, yarnIndex } = props;\r\n const dispatchDesignDetails = useDispatchDesignDetail();\r\n const currentYarn = designColor.YarnDetails[yarnIndex];\r\n const { colorAreaSwatch: casFlags } = window.flags;\r\n const { DefaultTextureVisible, DefaultTextureNames } = window.TextureOptions;\r\n const handleyarnMaterialChange = ({ material, materialName }) => {\r\n dispatchDesignDetails({\r\n type: designDetailActions.CHANGE_YARN_MATERIAL,\r\n payload: { material, materialName, colorIndex }\r\n });\r\n };\r\n const shouldShowDropdown = designColor.YarnDetails.map(item => item.Material).reduce(\r\n (prev, current) => current === 0 || current === 1\r\n );\r\n return (\r\n \r\n \r\n {colorTitle}\r\n \r\n {designColor.Carving &&
\r\n \r\n )}\r\n\r\n {colorSeparatedTexture && (\r\n <>\r\n {materialDropdown}\r\n {showPile && (\r\n \r\n \r\n {DefaultPileheightNames && DefaultPileheightNames.length > 0 && (\r\n <>\r\n {CustomPileheightNames && CustomPileheightNames.length > 0 && (\r\n {\r\n dispatchDesignDetails({\r\n type: designDetailActions.CHANGE_PILE,\r\n payload: {\r\n pileHeight: DefaultPileheightValues[i],\r\n colorIndex\r\n }\r\n });\r\n }}\r\n />\r\n )\r\n )}\r\n \r\n )}\r\n {CustomPileheightNames && CustomPileheightNames.length > 0 && (\r\n <>\r\n {\r\n dispatchDesignDetails({\r\n type: designDetailActions.CHANGE_PILE,\r\n payload: { pileHeight: CustomPileheightIndices[i], colorIndex }\r\n });\r\n }}\r\n />\r\n ))}\r\n \r\n )}\r\n \r\n }\r\n minimal\r\n position=\"bottom-left\"\r\n portalContainer={document.getElementById(\"app-main\")}\r\n >\r\n
\r\n )}\r\n \r\n )}\r\n \r\n \r\n {getPileheightText(designColor.PileHeight)}\r\n \r\n
\r\n \r\n \r\n {colorNumber ? colorNumber : colorIndex + 1}\r\n \r\n console.log(\"mixPly color clicked\")}\r\n shape={casFlags.shape}\r\n />\r\n
\r\n\r\n \r\n {designColor && (\r\n
\r\n \r\n );\r\n};\r\n","import React, { useRef } from \"react\";\r\nimport { useMount } from \"react-use\";\r\nimport { overlayTextureinCanvas } from \"../../../utils/utils\";\r\n\r\nconst ColorPreview = props => {\r\n const { style, colorName, color, material, colorTextures, renderTexturedPreview } = props;\r\n const canvasRef = useRef();\r\n useMount(() => {\r\n // console.log(color, colorName);\r\n const ctx = canvasRef.current.getContext(\"2d\");\r\n ctx.fillStyle = color;\r\n ctx.fillRect(0, 0, 160, 160);\r\n if (!renderTexturedPreview) return;\r\n const img = colorTextures.find(item => item.index === material);\r\n if (img && img.image)\r\n overlayTextureinCanvas({\r\n image: img.image,\r\n color,\r\n canvasSize: 160,\r\n canvas: canvasRef.current\r\n });\r\n });\r\n return (\r\n \r\n {currentYarn.ColorName}\r\n {designColor.Carving &&
\r\n )}\r\n\r\n \r\n \r\n {DefaultTextureNames &&\r\n DefaultTextureNames.slice(0, 2).map(\r\n (textureName, i) =>\r\n DefaultTextureVisible[i] && (\r\n {\r\n handleyarnMaterialChange({ material: i, materialName: textureName });\r\n }}\r\n />\r\n )\r\n )}\r\n \r\n }\r\n minimal\r\n position=\"bottom-left\"\r\n portalContainer={document.getElementById(\"app-main\")}\r\n >\r\n
\r\n \r\n {getMaterialName(currentYarn.Material)}\r\n {shouldShowDropdown &&
\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ColorPreview;\r\n","import React, { useEffect, useState, useRef } from \"react\";\r\nimport { isMobileDevice } from \"../../../utils/utils\";\r\nimport classNames from \"classnames\";\r\n\r\nconst isInViewPort = elem => {\r\n const bounding = elem.getBoundingClientRect();\r\n const parent = elem.parentElement;\r\n const { left, top, bottom, right } = parent.getBoundingClientRect();\r\n return (\r\n bounding.top + bounding.height >= top &&\r\n bounding.left + bounding.width >= left &&\r\n bounding.bottom - bounding.height <= bottom &&\r\n bounding.right - bounding.width <= right\r\n );\r\n};\r\nconst SwatchBox = props => {\r\n const { swatchSize, colorRow, onColorSwatchClick, active, handleHover, swatchSpace } = props;\r\n const disabledSwatch = colorRow.ColorName.toLowerCase() === \"_blank\";\r\n const { showColorName } = window.flags.colorSelectionBox;\r\n const [hover, setHover] = useState(null);\r\n\r\n // const [scrollTo, setScrollTo] = useState(true);\r\n const ref = useRef(null);\r\n useEffect(() => {\r\n const props = { block: \"center\", inline: \"center\" };\r\n // const props = {};\r\n const isInVP = isInViewPort(ref.current);\r\n if (active && !isInVP) ref.current.scrollIntoView(props);\r\n }, [ref, active]);\r\n useEffect(() => {\r\n if (!ref.current || !handleHover) return;\r\n if (hover === true && !isMobileDevice) handleHover(ref.current);\r\n if (hover === false) handleHover(null);\r\n }, [hover]); // eslint-disable-line\r\n return (\r\n {colorName}
\r\n \r\n
\r\n )\r\n );\r\n};\r\nexport default SimilarColors;\r\n","/* eslint-disable no-useless-escape */\r\nimport React, { useEffect, useState } from \"react\";\r\nimport { SketchPicker } from \"react-color\";\r\n\r\nimport styled from \"styled-components\";\r\nimport {\r\n colorListActions,\r\n useColorListState,\r\n useDispatchColorList\r\n} from \"../../../reducers/colors.reducer\";\r\nimport {\r\n Popover,\r\n Menu,\r\n InputGroup,\r\n MenuItem,\r\n Position,\r\n Button,\r\n MenuDivider,\r\n Portal,\r\n Switch\r\n} from \"@blueprintjs/core\";\r\nimport {\r\n useDesignDetailState,\r\n useDispatchDesignDetail,\r\n designDetailActions\r\n} from \"../../../reducers/designdetails.reducer\";\r\nimport { NestedAreaSwatch } from \"../../molecules/AreaSwatch/NestedAreaSwatch\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\nimport { flaginCurrentMode } from \"../../pages/EntryPage/defaultflags\";\r\nimport strings from \"../../../strings\";\r\nimport classNames from \"classnames\";\r\nimport ColorPreview from \"./ColorPreview\";\r\nimport SwatchBox from \"./SwatchBox\";\r\nimport SimilarColors from \"./SimilarColors\";\r\nimport { compare } from \"../../../utils/colorutils\";\r\nimport AtIcon from \"../../atoms/AtIcon\";\r\nconst SwatchContainer = styled.div`\r\n display: flex;\r\n flex-grow: 1;\r\n flex-wrap: wrap;\r\n overflow: auto;\r\n width: auto;\r\n /* for firefox */\r\n scrollbar-width: thin;\r\n /*height= size of each swatch + 2 * size of space between them + size of scroll bar */\r\n height: ${props => `${(props.swatchSize + 2 * props.swatchSpace) * props.colorRows + 1.25}rem`};\r\n flex-direction: column;\r\n align-items: center;\r\n align-content: flex-start;\r\n justify-content: flex-start;\r\n padding: ${props => `${props.swatchSpace}rem`};\r\n`;\r\nconst getSortingOptions = colorString => {\r\n const sortingOptions = [\r\n {\r\n name: colorString.sortingBySequence,\r\n key: null\r\n },\r\n {\r\n name: colorString.sortingByName,\r\n key: \"ColorName\"\r\n },\r\n {\r\n name: colorString.sortingByColor,\r\n key: \"H\"\r\n },\r\n {\r\n name: colorString.sortingBySharpness,\r\n key: \"S\"\r\n },\r\n {\r\n name: colorString.sortingByBrightness,\r\n key: \"L\"\r\n }\r\n ];\r\n\r\n return sortingOptions;\r\n};\r\nconst getSortingOrders = colorString => {\r\n const sortingOrders = [\r\n { name: colorString.ascending, value: 1 },\r\n { name: colorString.descending, value: -1 }\r\n ];\r\n return sortingOrders;\r\n};\r\n\r\nconst ColorSelectionBox = props => {\r\n const {\r\n onColorSwatchClick,\r\n swatchSpace = 0.15,\r\n className = \"\",\r\n selectColorOnClick = true,\r\n selectionColor,\r\n style,\r\n onClose,\r\n renderTexturedPreview = true,\r\n ...otherprops\r\n } = props;\r\n\r\n const state = useColorListState();\r\n const dispatch = useDispatchColorList();\r\n const designDetailState = useDesignDetailState();\r\n const { designDetails, selectedColor, yarnIndex, colorNumbers, fullpath } = designDetailState;\r\n const dispatchDesignDetail = useDispatchDesignDetail();\r\n const {\r\n collections,\r\n collectionIndex,\r\n loading,\r\n activeColor,\r\n filteredCollection,\r\n colorTextures\r\n } = state;\r\n const [sortingOrder, setSortingOrder] = useState(1);\r\n const sortingOptions = getSortingOptions(strings.color);\r\n const [sortingKey, setSortingKey] = useState(sortingOptions[0].key);\r\n const [colorCollection, setColorCollection] = useState();\r\n const [hoveredBox, setHoveredBox] = useState(null);\r\n const { colorSelectionBox: CsbFlags } = window.flags;\r\n const { customColorOptions, collectionFilter, colorPaletteLabels, swatchSize } = CsbFlags;\r\n const [selectedCustomColor, setSelectedCustomColor] = useState({\r\n Color: \"#ffffff\",\r\n ColorName: \"R255 G255 B255\"\r\n });\r\n const [selectedCustomColorOption, setSelectedCustomColorOption] = useState(null);\r\n useEffect(() => {\r\n // console.log(sortingKey);\r\n if (!filteredCollection) return;\r\n // const collection = filteredCollection;\r\n const { NumRows, ColorRows } = filteredCollection;\r\n //sort the colors\r\n const colorRowsSorted = [...ColorRows].sort((a, b) => {\r\n if (!sortingKey) return a - b;\r\n return compare(a, sortingKey, b, sortingOrder);\r\n });\r\n let sortagain = [];\r\n //if the sorting is by sharpness or brightness, it needs to be sorted again along the rows with decreasing lightness\r\n if (sortingKey === \"H\" || sortingKey === \"S\") {\r\n for (let i = 0; i < ColorRows.length; i += NumRows) {\r\n const a = [...colorRowsSorted].slice(i, i + NumRows);\r\n a.sort((a, b) => compare(a, \"L\", b, -1));\r\n sortagain = [...sortagain, ...a];\r\n }\r\n } else {\r\n sortagain = [...colorRowsSorted];\r\n }\r\n // console.log(sortagain);\r\n setColorCollection({ ...filteredCollection, ColorRows: sortagain });\r\n }, [collectionIndex, sortingKey, sortingOrder, filteredCollection]);\r\n const handleColorSwatchClick = (color, e) => {\r\n e.stopPropagation();\r\n if (onColorSwatchClick) onColorSwatchClick(color, e);\r\n if (selectColorOnClick)\r\n dispatch({\r\n type: colorListActions.SET_ACTIVE_COLOR,\r\n payload: color\r\n });\r\n };\r\n const handleColorSearch = e => {\r\n dispatch({ type: colorListActions.SEARCH_COLOR, payload: e.target.value });\r\n };\r\n const handleCarving = e => {\r\n dispatchDesignDetail({ type: designDetailActions.TOGGLE_COLOR_CARVING });\r\n };\r\n const isCarvingAllowed = selectedColorIndex => {\r\n let carvingAllowed = flaginCurrentMode(window.InterfaceElements.IsAdmin, CsbFlags.showCarving); // CsbFlags.showCarving || window.InterfaceElements.IsAdmin;\r\n return carvingAllowed;\r\n };\r\n const selectCustomColorOption = colorIndex => {\r\n let selectedCustomDb = customColorOptions[colorIndex];\r\n setSelectedCustomColorOption(selectedCustomDb);\r\n if (activeColor)\r\n setSelectedCustomColor({ Color: activeColor.Color, ColorName: activeColor.ColorName });\r\n };\r\n const handleCustomColorPicked = e => {\r\n const tex =\r\n selectedCustomColorOption && selectedCustomColorOption.texture\r\n ? selectedCustomColorOption.texture\r\n : -1;\r\n let color = {\r\n Color: selectedCustomColor.Color,\r\n ColorName: selectedCustomColor.ColorName,\r\n Texture: tex\r\n };\r\n onColorSwatchClick(color, e);\r\n //handleColorSwatchClick(selectedCustomColor,e)\r\n };\r\n const handleCustomColorSelected = color => {\r\n const { rgb, hex } = color;\r\n setSelectedCustomColor({ Color: hex, ColorName: `R${rgb.r} G${rgb.g} B${rgb.b}` });\r\n };\r\n const getFolderName = fullpath => {\r\n return fullpath.split(\"/\")[1];\r\n };\r\n const renderCollectionDropdown = () => {\r\n const showThisCollection = collection => {\r\n if (collectionFilter.length === 0) return true;\r\n else {\r\n let showThis = false;\r\n let folderName = getFolderName(fullpath);\r\n let collectionsToshow = collectionFilter.filter(\r\n filtermap => filtermap.folder.toLowerCase() === folderName.toLowerCase()\r\n );\r\n if (!collectionsToshow || !collectionsToshow.length || !collectionsToshow[0].collection) {\r\n showThis = true;\r\n } else {\r\n collectionsToshow[0].collection.forEach(element => {\r\n if (element.toLowerCase() === collection.Name.toLowerCase()) {\r\n showThis = true;\r\n }\r\n });\r\n }\r\n\r\n return showThis;\r\n }\r\n };\r\n return (\r\n collections && (\r\n \r\n )\r\n );\r\n };\r\n const renderSortingOptions = sortingOrders => (\r\n \r\n );\r\n const LabelTemplateFlipo = props => {\r\n const { label } = props;\r\n return (\r\n {strings.color.similarColors}
\r\n\r\n {similarColors.map((color, index) => (\r\n {\r\n onColorSwatchClick(color, e);\r\n }}\r\n />\r\n ))}\r\n
\r\n \r\n
\r\n );\r\n };\r\n const renderLabelTemplate = props => {\r\n const { templateName } = props;\r\n switch (templateName) {\r\n case \"flipo\":\r\n return premounted
\r\n {label}
\r\n \r\n \r\n
\r\n )}\r\n \r\n
\r\n )}\r\n \r\n
\r\n {colorCollection && (\r\n \r\n \r\n \r\n {!selectedCustomColorOption\r\n ? collections[collectionIndex].Name\r\n : selectedCustomColorOption.text}\r\n {collections.length + customColorOptions.length > 1 && (\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {colorCollection.ColorRows.map((colorRow, index) => (\r\n {\r\n handleColorSwatchClick(colorRow, e);\r\n }}\r\n active={colorRow === activeColor}\r\n handleHover={elem => setHoveredBox({ elem, colorRow })}\r\n />\r\n ))}\r\n {/* {state.filteredCollection.ColorRows.map((colorRow, index) => (\r\n {\r\n onColorSwatchClick(colorRow, e);\r\n }}\r\n active={colorRow === activeColor}\r\n handleHover={elem => setHoveredBox({ elem, colorRow })}\r\n />\r\n ))} */}\r\n \r\n {hoveredBox && hoveredBox.elem && (\r\n \r\n \r\n )}\r\n
\r\n {colorPaletteLabels.colorLabelInfo &&\r\n colorPaletteLabels.colorLabelInfo !== \"\" &&\r\n showColorLabelInfo() && (\r\n \r\n {colorPaletteLabels.labels.length > 0 && (\r\n
\r\n )}\r\n {selectedCustomColorOption ? (\r\n <>\r\n \r\n {colorPaletteLabels.labels.map((label, index) => (\r\n \r\n {renderLabelTemplate({ templateName: \"flipo\", label })}\r\n
\r\n ))}\r\n \r\n \r\n
\r\n \r\n ) : (\r\n \r\n {\" \"}\r\n {colorPaletteLabels.colorLabelInfo}\r\n
\r\n )}\r\n \r\n )}\r\n \r\n )\r\n );\r\n};\r\n\r\nexport default ColorSelectionBox;\r\n","import React from \"react\";\r\nimport { useRoomConfigState, useDispatchRoomConfig, roomConfigActions } from \"./roomconfig.reducer\";\r\nimport classNames from \"classnames\";\r\nimport { Overlay, Popover } from \"@blueprintjs/core\";\r\nimport ColorSelectionBox from \"../organisms/ColorSelectionBox\";\r\n\r\nconst ColorSelection = props => {\r\n const { isIdle, removeTransState, handleColorSwatchClick } = props;\r\n const roomConfigState = useRoomConfigState();\r\n const dispatchRoomConfig = useDispatchRoomConfig();\r\n const { activedata } = roomConfigState;\r\n const handleClose = object => {\r\n dispatchRoomConfig({\r\n type: roomConfigActions.SET_SHOW_COLOR_BOX,\r\n payload: { object, isOpen: false }\r\n });\r\n };\r\n const handleOpen = object => {\r\n dispatchRoomConfig({\r\n type: roomConfigActions.SET_SHOW_COLOR_BOX,\r\n payload: { object, isOpen: true }\r\n });\r\n };\r\n const getPosition = objProps => ({\r\n left: `${objProps[0]}%`,\r\n top: `${objProps[1]}%`\r\n });\r\n\r\n const getPosition1 = objProps => ({\r\n left: `${objProps[0] - 15}%`\r\n });\r\n\r\n const renderSelectionBox = (objKey, objProps, onClose) => (\r\n \r\n handleColorSwatchClick(color, objKey)}\r\n onClose={onClose}\r\n style={getPosition1(objProps)}\r\n />\r\n
\r\n );\r\n if (!activedata) return <>;\r\n return Object.entries(activedata).map(\r\n ([objKey, objProps]) =>\r\n roomConfigState.objectstate[objKey].mystic !== \"hide\" && (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n`;\r\nconst mockHtml1 = `\r\n\r\n \r\n \r\n \r\n \r\n
\r\n`;\r\nconst mockHtml_FoldedView = `\r\n\r\n \r\n \r\n \r\n \r\n
\r\n`;\r\nconst mockHtml_PerspectiveView = `\r\n\r\n \r\n \r\n \r\n \r\n
\r\n`;\r\nconst mockHtml_BedroomModern = `\r\n\r\n \r\n \r\n \r\n \r\n
\r\n`;\r\nconst mockHtml_FoldedBack = `\r\n\r\n \r\n \r\n \r\n \r\n
\r\n`;\r\nconst mockHtml_ActBody = `\r\n \r\n
\r\n`;\r\nconst mockHtml_artgallery = `\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n\r\n\r\n \r\n
\r\n`;\r\nconst mockHtml_BabyFeet = `\r\n\r\n
\r\n \r\n
\r\n\r\n\r\n 10' x 10'
\r\n \r\n \r\n \r\n \r\n\r\n \r\n
\r\n`;\r\nconst mockHtml_BookWorm = `\r\n\r\n
\r\n\r\n 10' x 10'
\r\n \r\n \r\n \r\n \r\n
\r\n`;\r\nconst mockHtml_Bodypaint = `\r\n\r\n \r\n \r\n \r\n \r\n
\r\n`;\r\n\r\nlet catalogProps = [\r\n {\r\n id: \"ors_design_name\",\r\n type: \"DESIGN_NAME\"\r\n },\r\n {\r\n id: \"ors_design_area\",\r\n type: \"DESIGN_AREA\"\r\n },\r\n {\r\n id: \"ors_room_view\",\r\n type: \"ROOM_VIEW\",\r\n path: \"Rooms/Catalogs/Just Married.crf3d\"\r\n },\r\n {\r\n id: \"ors_logo_area\",\r\n type: \"LOGO_AREA\"\r\n }\r\n];\r\n\r\nconst areaComponentref = {\r\n DESIGN_NAME: \"DESIGN_NAME\",\r\n DESIGN_AREA: \"DESIGN_AREA\",\r\n ROOM_VIEW: \"ROOM_VIEW\",\r\n LOGO_AREA: \"LOGO_AREA\"\r\n};\r\n\r\nconst CatalogUrl = \"\";\r\nlet catalogRoomView = new RoomViewHelper();\r\n\r\nconst CatalogView = props => {\r\n const { active, roomData, filterData = null } = props;\r\n const designDetailState = useDesignDetailState();\r\n const dispatchDesignDetails = useDispatchDesignDetail();\r\n const [catalogPropsState, setcatalogPropsState] = useState([...catalogProps]);\r\n const [renderedDesign, setrenderedDesign] = useState(null);\r\n const [renderedRoom, setrenderedRoom] = useState(null);\r\n const [colorSelectionPos, setcolorSelectionPos] = useState({ x: -1, y: -1 });\r\n const [selectedHtml, setselectedHtml] = useState(null);\r\n const [showTransition, setshowTransition] = useState(false);\r\n\r\n const roomconfigstate = useRoomConfigState();\r\n\r\n const { customDesignUrl } = roomconfigstate;\r\n const { designDetails } = designDetailState;\r\n const windowsize = useWindowSize();\r\n\r\n useMount(() => {\r\n const canvasConfig = {\r\n bgCanvas: document.createElement(\"canvas\"),\r\n threeCanvas: document.createElement(\"canvas\"),\r\n maskCanvas: document.createElement(\"canvas\"),\r\n shadowCanvas: document.createElement(\"canvas\"),\r\n transitionCanvas: document.createElement(\"canvas\"),\r\n container: {\r\n clientWidth: document.getElementById(\"catalogview\").offsetWidth,\r\n clientHeight: document.getElementById(\"catalogview\").offsetHeight\r\n },\r\n inputCanvas: document.createElement(\"canvas\"),\r\n objCanvasContainer: document.createElement(\"div\")\r\n };\r\n catalogRoomView.initCanvas(canvasConfig);\r\n });\r\n\r\n useEffect(() => {\r\n sizeContainers({});\r\n }, [windowsize]);\r\n\r\n const sizeContainers = () => {\r\n catalogRoomView.container = {\r\n clientWidth: document.getElementById(\"catalogview\").offsetWidth,\r\n clientHeight: document.getElementById(\"catalogview\").offsetHeight\r\n };\r\n catalogRoomView.resize({\r\n width: catalogRoomView.container.clientWidth,\r\n height: catalogRoomView.container.clientHeight\r\n });\r\n // const at_catalog_layout = document.getElementById(\"at_catalog_layout\");\r\n // const catalog_roomcanvas = document.getElementById(\"catalog-roomcanvas\");\r\n // if (at_catalog_layout && catalog_roomcanvas) {\r\n // at_catalog_layout.style.width =\r\n // catalog_roomcanvas.offsetWidth + \"px\";\r\n // at_catalog_layout.style.height =\r\n // catalog_roomcanvas.offsetHeight + \"px\";\r\n // }\r\n };\r\n\r\n useEffect(() => {\r\n if (!active) return;\r\n if (!filterData) {\r\n let effectcanvas = document.getElementById(\"catalog-effectcanvas\");\r\n if (effectcanvas && effectcanvas.width) {\r\n effectcanvas.style.display = \"none\";\r\n effectcanvas.getContext(\"2d\").clearRect(0, 0, effectcanvas.width, effectcanvas.height);\r\n }\r\n let designcanvas = document.getElementById(\"catalog-designcanvas\");\r\n if (designcanvas) {\r\n designcanvas.style.opacity = 1;\r\n }\r\n } else {\r\n applyEffects();\r\n }\r\n }, [filterData]);\r\n\r\n const applyEffects = async () => {\r\n let roomcanvas = document.getElementById(\"catalog-roomcanvas\");\r\n let designcanvas = document.getElementById(\"catalog-designcanvas\");\r\n if (!roomcanvas) return;\r\n const canvas = document.createElement(\"canvas\");\r\n canvas.width = roomcanvas.width;\r\n canvas.height = roomcanvas.height;\r\n canvas.getContext(\"2d\").drawImage(roomcanvas, 0, 0);\r\n\r\n if (designcanvas && designcanvas.width > 0) {\r\n let dx =\r\n ((designcanvas.getBoundingClientRect().left - roomcanvas.getBoundingClientRect().left) /\r\n roomcanvas.offsetWidth) *\r\n roomcanvas.width;\r\n let dy =\r\n ((designcanvas.getBoundingClientRect().top - roomcanvas.getBoundingClientRect().top) /\r\n roomcanvas.offsetHeight) *\r\n roomcanvas.height;\r\n canvas\r\n .getContext(\"2d\")\r\n .drawImage(\r\n designcanvas,\r\n dx,\r\n dy,\r\n (designcanvas.offsetWidth / roomcanvas.offsetWidth) * roomcanvas.width,\r\n (designcanvas.offsetHeight / roomcanvas.offsetHeight) * roomcanvas.height\r\n );\r\n }\r\n await applyPresetOnCanvas(canvas, presetsMapping[filterData]());\r\n let effectcanvas = document.getElementById(\"catalog-effectcanvas\");\r\n effectcanvas.getContext(\"2d\").drawImage(canvas, 0, 0);\r\n effectcanvas.style.display = \"block\";\r\n if (designcanvas && designcanvas.width > 0) designcanvas.style.opacity = 0;\r\n };\r\n\r\n useEffect(() => {\r\n if (roomData && designDetails && active) {\r\n if (\r\n !(\r\n catalogRoomView.designDetails === designDetails &&\r\n catalogRoomView.roomData &&\r\n catalogRoomView.roomData.config === roomData.config\r\n )\r\n ) {\r\n setshowTransition(true);\r\n if (catalogRoomView.roomData && catalogRoomView.roomData.config !== roomData.config) {\r\n catalogRoomView.clearAll();\r\n }\r\n renderHtml();\r\n } else if (customDesignUrl?.url) {\r\n renderHtml();\r\n }\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [roomData, designDetails, customDesignUrl, active]);\r\n\r\n function blobToFile(theBlob, fileName) {\r\n return new File([theBlob], fileName, {\r\n lastModified: new Date().getTime(),\r\n type: theBlob.type\r\n });\r\n }\r\n const renderHtml = async () => {\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_LOADING,\r\n payload: true\r\n });\r\n document.getElementById(\"catalogview\").innerHTML = \"\";\r\n if (roomData.config.name === \"Just Married\") {\r\n document.getElementById(\"catalogview\").insertAdjacentHTML(\"afterbegin\", mockHtml);\r\n setselectedHtml(mockHtml);\r\n } else if (roomData.config.name === \"Art Gallery\") {\r\n document.getElementById(\"catalogview\").insertAdjacentHTML(\"afterbegin\", mockHtml_artgallery);\r\n setselectedHtml(mockHtml_artgallery);\r\n } else if (roomData.config.name === \"Baby Feet\") {\r\n document.getElementById(\"catalogview\").insertAdjacentHTML(\"afterbegin\", mockHtml_BabyFeet);\r\n setselectedHtml(mockHtml_BabyFeet);\r\n } else if (roomData.config.name === \"Book Worm\") {\r\n document.getElementById(\"catalogview\").insertAdjacentHTML(\"afterbegin\", mockHtml_BookWorm);\r\n setselectedHtml(mockHtml_BookWorm);\r\n } else if (roomData.config.name === \"Bodypaint\") {\r\n document.getElementById(\"catalogview\").insertAdjacentHTML(\"afterbegin\", mockHtml_Bodypaint);\r\n setselectedHtml(mockHtml_Bodypaint);\r\n } else if (roomData.config.name === \"Act Body\") {\r\n document.getElementById(\"catalogview\").insertAdjacentHTML(\"afterbegin\", mockHtml_ActBody);\r\n setselectedHtml(mockHtml_ActBody);\r\n } else if (roomData.config.name === \"Folded View\") {\r\n document.getElementById(\"catalogview\").insertAdjacentHTML(\"afterbegin\", mockHtml_FoldedView);\r\n setselectedHtml(mockHtml_FoldedView);\r\n } else if (roomData.config.name === \"Perspective View\") {\r\n document\r\n .getElementById(\"catalogview\")\r\n .insertAdjacentHTML(\"afterbegin\", mockHtml_PerspectiveView);\r\n setselectedHtml(mockHtml_PerspectiveView);\r\n } else if (roomData.config.name === \"Bedroom Modern\") {\r\n document\r\n .getElementById(\"catalogview\")\r\n .insertAdjacentHTML(\"afterbegin\", mockHtml_BedroomModern);\r\n setselectedHtml(mockHtml_BedroomModern);\r\n } else if (roomData.config.name === \"Folded Back\") {\r\n document.getElementById(\"catalogview\").insertAdjacentHTML(\"afterbegin\", mockHtml_FoldedBack);\r\n setselectedHtml(mockHtml_FoldedBack);\r\n } else {\r\n document.getElementById(\"catalogview\").insertAdjacentHTML(\"afterbegin\", mockHtml1);\r\n setselectedHtml(mockHtml1);\r\n }\r\n const catalogPropsTemp = [...catalogProps];\r\n let count = catalogPropsState.length;\r\n const resolveThis = () => {\r\n count--;\r\n if (count === 0) {\r\n setcatalogPropsState([...catalogPropsTemp]);\r\n // document.getElementById(\"at_catalog_layout\").style.width =\r\n // document.getElementById(\"catalog-roomcanvas\").offsetWidth + \"px\";\r\n setTimeout(() => {\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_LOADING,\r\n payload: false\r\n });\r\n setshowTransition(false);\r\n }, 400);\r\n }\r\n };\r\n\r\n catalogPropsState.forEach(async (component, index) => {\r\n if (component.type === areaComponentref.DESIGN_NAME) {\r\n document\r\n .getElementById(component.id)\r\n .insertAdjacentHTML(\"afterbegin\", `${designDetailState.designName}
`);\r\n catalogPropsTemp[index].value = designDetailState.designName;\r\n resolveThis();\r\n } else if (component.type === areaComponentref.DESIGN_AREA) {\r\n const designfile = await renderDesign(component);\r\n catalogPropsTemp[index].value = `${CatalogUrl}/Data/${designfile.name}`;\r\n setrenderedDesign(designfile);\r\n resolveThis();\r\n } else if (component.type === areaComponentref.ROOM_VIEW) {\r\n const roomfile = await renderRoomArea(component);\r\n catalogPropsTemp[index].value = `${CatalogUrl}/Data/${roomfile.name}`;\r\n setrenderedRoom(roomfile);\r\n resolveThis();\r\n } else if (component.type === areaComponentref.LOGO_AREA) {\r\n catalogPropsTemp[index].value = await renderLogo(component);\r\n resolveThis();\r\n }\r\n });\r\n };\r\n\r\n const renderRoomArea = component => {\r\n return new Promise(async resolve => {\r\n const roomImgBlob = await getIllustration();\r\n\r\n let roomimg = new Image();\r\n roomimg.onload = () => {\r\n w = roomimg.width;\r\n h = roomimg.height;\r\n let roomcanvas = createCanvas(roomimg.width, roomimg.height);\r\n roomcanvas.setAttribute(\"id\", \"catalog-roomcanvas\");\r\n let effectcanvas = createCanvas(roomimg.width, roomimg.height);\r\n effectcanvas.setAttribute(\"id\", \"catalog-effectcanvas\");\r\n let offsetX = 0;\r\n if (roomData.config.name === \"Folded Back\") {\r\n offsetX = 0.3 * w;\r\n }\r\n roomcanvas.getContext(\"2d\").drawImage(roomimg, offsetX, 0);\r\n const transitionCanvas = document.getElementById(\"catalog-transition-canvas\");\r\n transitionCanvas.width = roomimg.width;\r\n transitionCanvas.height = roomimg.height;\r\n transitionCanvas.getContext(\"2d\").drawImage(roomimg, 0, 0);\r\n\r\n // if (roomimg.width < roomimg.height) {\r\n // roomcanvas.style.cssText = `position: absolute;max-width: 100%;top: -9999px;right: -9999px;left:-9999px;bottom: -9999px;margin: auto;`;\r\n // } else {\r\n // roomcanvas.style.cssText = `position: absolute;max-height: 100%;top: -9999px;right: -9999px;left:-9999px;bottom: -9999px;margin: auto;`;\r\n // }\r\n roomcanvas.addEventListener(\"click\", e =>\r\n onCanvasClick(e, roomcanvas.getBoundingClientRect())\r\n );\r\n document.getElementById(component.id).innerHTML = \"\";\r\n document.getElementById(component.id).appendChild(roomcanvas);\r\n document.getElementById(component.id).appendChild(effectcanvas);\r\n const roomname = `${designDetailState.designName.replace(/ /g, \"\")}_room-view.png`;\r\n const file = blobToFile(roomImgBlob, roomname);\r\n resolve(file);\r\n };\r\n roomimg.src = URL.createObjectURL(roomImgBlob);\r\n });\r\n };\r\n\r\n const renderLogo = async component => {\r\n let logo = new Image();\r\n\r\n logo.onload = () => {\r\n logo.style.cssText = `max-width: 100%;max-height: 100%;`;\r\n document.getElementById(component.id).appendChild(logo);\r\n };\r\n const logosrc = `${AppProvider.domain}${window.InterfaceElements.LogoUrl}`;\r\n logo.src = logosrc;\r\n\r\n return logosrc;\r\n };\r\n\r\n const renderDesign = async component => {\r\n let designcanvas;\r\n if (customDesignUrl?.url) {\r\n let image = await readImage(customDesignUrl.url);\r\n designcanvas = createCanvas(image.width, image.height);\r\n designcanvas.getContext(\"2d\").drawImage(image, 0, 0);\r\n } else {\r\n designcanvas = await AppProvider.getRenderedDesign({\r\n designDetails: designDetailState.designDetails,\r\n fullpath: designDetailState.fullpath,\r\n hash: designDetailState.hash\r\n });\r\n }\r\n // designcanvas.height = designcanvas.height * designDetailState.designDetails.KLRatio;\r\n designcanvas.style.cssText = `max-width: 100%;max-height: 100%;transform:translateY(${((designDetailState\r\n .designDetails.KLRatio -\r\n 1) /\r\n 2) *\r\n 100}%) scaleY(${designDetailState.designDetails.KLRatio})`;\r\n designcanvas.setAttribute(\"id\", \"catalog-designcanvas\");\r\n document.getElementById(component.id).appendChild(designcanvas);\r\n return new Promise(resolve => {\r\n designcanvas.toBlob(function (blob) {\r\n const designname = `${designDetailState.designName.replace(/ /g, \"\")}_visualization.png`;\r\n const file = blobToFile(blob, designname);\r\n resolve(file);\r\n });\r\n });\r\n };\r\n\r\n window.downloadRenderedCatalog_old = async () => {\r\n let roomimg = new Image();\r\n\r\n const drawImg = async (canvas, id, blob) => {\r\n const width = canvas.width;\r\n const height = canvas.height;\r\n return new Promise(resolve => {\r\n let designimg = new Image();\r\n designimg.crossOrigin = \"anonymous\";\r\n designimg.onload = () => {\r\n const elementW = document.getElementById(id).style.width;\r\n const elementH = document.getElementById(id).style.height;\r\n const elementL = document.getElementById(id).style.left;\r\n const elementT = document.getElementById(id).style.top;\r\n let w = elementW.includes(\"%\")\r\n ? (Number(elementW.replace(\"%\", \"\")) * width) / 100\r\n : Number(elementW.replace(\"px\", \"\"));\r\n let h = elementH.includes(\"%\")\r\n ? (Number(elementH.replace(\"%\", \"\")) * height) / 100\r\n : Number(elementH.replace(\"px\", \"\"));\r\n let left = elementL.includes(\"%\")\r\n ? (Number(elementL.replace(\"%\", \"\")) * width) / 100\r\n : Number(elementL.replace(\"px\", \"\"));\r\n let top = elementT.includes(\"%\")\r\n ? (Number(elementT.replace(\"%\", \"\")) * height) / 100\r\n : Number(elementT.replace(\"px\", \"\"));\r\n if (designimg.height > designimg.width) {\r\n canvas\r\n .getContext(\"2d\")\r\n .drawImage(\r\n designimg,\r\n 0,\r\n 0,\r\n designimg.width,\r\n designimg.height,\r\n left,\r\n top,\r\n (designimg.width * h) / designimg.height,\r\n h\r\n );\r\n } else {\r\n canvas\r\n .getContext(\"2d\")\r\n .drawImage(\r\n designimg,\r\n 0,\r\n 0,\r\n designimg.width,\r\n designimg.height,\r\n left,\r\n top,\r\n w,\r\n (w * designimg.height) / designimg.width\r\n );\r\n }\r\n resolve();\r\n };\r\n designimg.src = typeof blob === \"string\" ? blob : URL.createObjectURL(blob);\r\n });\r\n };\r\n\r\n roomimg.onload = async () => {\r\n const height = roomimg.height;\r\n const width =\r\n (Number(document.getElementById(\"at_catalog_layout\").style.width.replace(\"vh\", \"\")) / 100) *\r\n roomimg.height;\r\n const canvas = createCanvas(width, height);\r\n canvas\r\n .getContext(\"2d\")\r\n .drawImage(roomimg, (roomimg.width - width) / 2, 0, width, height, 0, 0, width, height);\r\n await drawImg(canvas, \"ors_design_area\", renderedDesign);\r\n await drawImg(\r\n canvas,\r\n \"ors_logo_area\",\r\n `${AppProvider.domain}${window.InterfaceElements.LogoUrl}`\r\n );\r\n canvas.getContext(\"2d\").font =\r\n (document.getElementById(\"ors_design_name\").offsetHeight * height) /\r\n document.getElementById(\"at_catalog_layout\").offsetHeight +\r\n \"px \" +\r\n document.getElementById(\"ors_design_name\").style.fontFamily;\r\n canvas.getContext(\"2d\").fillStyle = document.getElementById(\"ors_design_name\").style.color;\r\n canvas.getContext(\"2d\").textAlign = \"right\";\r\n canvas\r\n .getContext(\"2d\")\r\n .fillText(\r\n designDetailState.designName,\r\n (Number(document.getElementById(\"ors_design_name\").style.width.replace(\"%\", \"\")) *\r\n width) /\r\n 100,\r\n (Number(document.getElementById(\"ors_design_name\").style.top.replace(\"%\", \"\")) * height) /\r\n 100\r\n );\r\n const mime = \"jpg\";\r\n const downloadName = `${designDetailState.designName} in ${roomData.Name}.${mime}`;\r\n downloadImageData(canvas, downloadName, \"image/\" + mime);\r\n };\r\n roomimg.src = URL.createObjectURL(renderedRoom);\r\n };\r\n\r\n // const downlodPDF = () => {\r\n // AppProvider.downloadPdf({\r\n // url: CatalogUrl,\r\n // catalogProps: catalogPropsState,\r\n // rendereddesign: renderedDesign,\r\n // renderedroom: renderedRoom\r\n // });\r\n // };\r\n\r\n const getIllustration = async () => {\r\n // if (designDetailState.loading) return;\r\n const { dims } = roomData.config;\r\n // const { dims } = {...roomData.config, roomType:\"roomview\", designinroomformat:\"roomview\"};\r\n const { width, height } = dims;\r\n catalogRoomView.bgCanvas.width = width;\r\n catalogRoomView.bgCanvas.height = height;\r\n catalogRoomView.threeCanvas.width = width;\r\n catalogRoomView.threeCanvas.height = height;\r\n catalogRoomView.maskCanvas.width = width;\r\n catalogRoomView.maskCanvas.height = height;\r\n catalogRoomView.shadowCanvas.width = width;\r\n catalogRoomView.shadowCanvas.height = height;\r\n catalogRoomView.inputCanvas.width = width;\r\n catalogRoomView.inputCanvas.height = height;\r\n catalogRoomView.transitionCanvas.width = width;\r\n catalogRoomView.transitionCanvas.height = height;\r\n catalogRoomView.initConfig({\r\n baseUrl: roomData.baseUrl,\r\n config: roomData.config,\r\n // config: {...roomData.config, roomType:\"roomview\", designinroomformat:\"roomview\"},\r\n files: roomData.Files,\r\n local: roomData.fromlocal\r\n });\r\n const activeshot = Object.keys(roomData.config.roomElements.shots)[0];\r\n const isinitialized = catalogRoomView.preinitShot({\r\n shot: activeshot,\r\n light: null,\r\n view: null\r\n });\r\n if (!isinitialized) {\r\n await Promise.all(catalogRoomView.initShot());\r\n }\r\n catalogRoomView.resetOnDesignChange();\r\n const dominantColorHex = getDominantColor(designDetailState.designDetails);\r\n catalogRoomView.realTimeDynamicRendering = true;\r\n catalogRoomView.updateBackground({ dominantColorHex });\r\n catalogRoomView.updateMask();\r\n // if (\r\n // catalogRoomView.designPath !== designDetailState.designPath\r\n // ) {\r\n // const tileData = await AppProvider.fetchTileDetails({\r\n // file: designDetailState.designPath\r\n // });\r\n // dispatchDesignDetails({\r\n // type: designDetailActions.SET_TILE_DETAILS,\r\n // payload: tileData\r\n // });\r\n // catalogRoomView.setTileDetails(tileData);\r\n // }\r\n await catalogRoomView.updatethreeCanvas(activeshot);\r\n catalogRoomView.setTileDetails(designDetailState.tileDetails);\r\n if (customDesignUrl?.url) {\r\n await catalogRoomView.renderDesignFromCustomUrl({ customUrl: customDesignUrl.url });\r\n } else {\r\n await catalogRoomView.renderDesign({\r\n designDetails: designDetailState.designDetails,\r\n designPath: designDetailState.fullpath,\r\n hash: designDetailState.hash\r\n });\r\n }\r\n\r\n await catalogRoomView.updateShadow();\r\n await catalogRoomView.makeTransitionCanvas({\r\n objects: {},\r\n canvas: null,\r\n resetDimensions: false\r\n });\r\n\r\n return new Promise(resolve => {\r\n catalogRoomView.transitionCanvas.toBlob(blob => {\r\n resolve(blob);\r\n });\r\n });\r\n };\r\n\r\n const onCanvasClick = (event, rect) => {\r\n const { clientX, clientY } = event;\r\n const { top, left, width, height } = rect;\r\n const x = clientX - left;\r\n const y = clientY - top;\r\n if (!catalogRoomView.moved && catalogRoomView.annotationCanvas) {\r\n const imgData = catalogRoomView.annotationCanvas.getContext(\"2d\").getImageData(x, y, 1, 1);\r\n if (!imgData.data.every(data => data === 255 || data === 0)) {\r\n catalogRoomView.selectedColorCode = imgData.data.slice(0, 3);\r\n setcolorSelectionPos({ x: x, y: y });\r\n }\r\n }\r\n };\r\n\r\n const onRoomColorSwatchClick = async color => {\r\n setcolorSelectionPos({ x: -1, y: -1 });\r\n catalogRoomView.updateBackground({ dominantColorHex: color.Color });\r\n catalogRoomView.updateMask();\r\n await catalogRoomView.updateShadow();\r\n await catalogRoomView.makeTransitionCanvas({ objects: {}, canvas: null });\r\n catalogRoomView.transitionCanvas.toBlob(roomImgBlob => {\r\n let roomimg = new Image();\r\n roomimg.onload = () => {\r\n let roomcanvas = createCanvas(roomimg.width, roomimg.height);\r\n roomcanvas.getContext(\"2d\").drawImage(roomimg, 0, 0);\r\n\r\n // if (roomimg.width < roomimg.height) {\r\n // roomcanvas.style.cssText = `position: absolute;max-width: 100%;top: -9999px;right: -9999px;left:-9999px;bottom: -9999px;margin: auto;`;\r\n // } else {\r\n // roomcanvas.style.cssText = `position: absolute;max-height: 100%;top: -9999px;right: -9999px;left:-9999px;bottom: -9999px;margin: auto;`;\r\n // }\r\n roomcanvas.addEventListener(\"click\", e =>\r\n onCanvasClick(e, roomcanvas.getBoundingClientRect())\r\n );\r\n let index = -1;\r\n catalogPropsState.forEach((element, i) => {\r\n if (element.type === areaComponentref.ROOM_VIEW) {\r\n index = i;\r\n }\r\n });\r\n document.getElementById(catalogPropsState[index].id).innerHTML = \"\";\r\n document.getElementById(catalogPropsState[index].id).appendChild(roomcanvas);\r\n const roomname = `${designDetailState.designName.replace(/ /g, \"\")}_room-view.png`;\r\n const file = blobToFile(roomImgBlob, roomname);\r\n let catalogPropsTemp = [...catalogPropsState];\r\n catalogPropsTemp[index].value = `${CatalogUrl}/Data/${file.name}`;\r\n setcatalogPropsState([...catalogPropsTemp]);\r\n setrenderedRoom(file);\r\n };\r\n roomimg.src = URL.createObjectURL(roomImgBlob);\r\n });\r\n };\r\n\r\n window.downloadRenderedCatalog = async () => {\r\n let wd = document.getElementById(\"at_catalog_layout\").getBoundingClientRect().width;\r\n let ht = document.getElementById(\"at_catalog_layout\").getBoundingClientRect().height;\r\n let roomcanvas = document.getElementById(\"catalog-roomcanvas\");\r\n let effectcanvas = document.getElementById(\"catalog-effectcanvas\");\r\n if (filterData) {\r\n roomcanvas.style.display = \"none\";\r\n document.getElementById(\"catalogview\").appendChild(roomcanvas);\r\n } else {\r\n effectcanvas.style.display = \"none\";\r\n document.getElementById(\"catalogview\").appendChild(effectcanvas);\r\n }\r\n effectcanvas.style.transform = \"none\";\r\n const downloadName = `${designDetailState.designName} in ${roomData.config.name}`;\r\n return new Promise(resolve => {\r\n makePDf(\"at_catalog_layout\", wd, ht, downloadName, () => {\r\n if (filterData) {\r\n effectcanvas.before(roomcanvas);\r\n } else {\r\n roomcanvas.after(effectcanvas);\r\n }\r\n effectcanvas.style.transform = \"translateY(calc(-100% - 4px))\";\r\n if (filterData) {\r\n effectcanvas.style.display = \"block\";\r\n }\r\n roomcanvas.style.display = \"block\";\r\n resolve();\r\n });\r\n });\r\n };\r\n\r\n return (\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n {tutorialTexts[activeIndex].icon && tutorialTexts[activeIndex].icon}\r\n {tutorialTexts[activeIndex].text}\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default Tutorial;\r\n","import { H2 } from \"@blueprintjs/core\";\r\nimport React, { useState } from \"react\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\nimport AtIcon from \"../../atoms/AtIcon\";\r\nimport AtDialog from \"../../molecules/AtDialog\";\r\nimport Thumbnail from \"../../molecules/Thumbnail\";\r\n\r\nconst CameraOptions = props => {\r\n const {\r\n show,\r\n filterOptions,\r\n activeFilterIndex,\r\n onFilterSelect,\r\n blurOptions,\r\n activeBlurIndex,\r\n onBlurSelect,\r\n onShot,\r\n handleClose\r\n } = props;\r\n\r\n const [seePreview, setseePreview] = useState(false);\r\n // const [activeBlurIndex, setactiveBlurIndex] = useState(0);\r\n return (\r\n <>\r\n \r\n {\r\n setseePreview(true);\r\n }}\r\n />\r\n
\r\n \r\n \r\n
\r\n Camera Options
\r\n\r\n
\r\n \r\n \r\n
\r\n\r\n {/* blur */}\r\n {blurOptions && blurOptions.length > 0 && (\r\n \r\n
\r\n\r\n \r\n Filters\r\n \r\n Enhance your studio shots with these filter options\r\n \r\n
\r\n \r\n {filterOptions.map((filter, index) => {\r\n return (\r\n {\r\n onFilterSelect(e, index);\r\n }}\r\n />\r\n );\r\n })}\r\n
\r\n\r\n \r\n \r\n
\r\n )}\r\n \r\n
\r\n\r\n \r\n Camera blur\r\n \r\n Add depth to your shots with these realistic camera blur options\r\n \r\n
\r\n \r\n {blurOptions.map((option, index) => {\r\n return (\r\n onBlurSelect(e, index)}\r\n />\r\n );\r\n })}\r\n
\r\n\r\n \r\n setseePreview(!seePreview)}\r\n text={\"Camera Options\"}\r\n className=\"btn-cam-opts\"\r\n />\r\n onShot()}\r\n text={\"Capture Shot\"}\r\n icon=\"double-chevron-camera\"\r\n className=\"btn-cam-shot\"\r\n />\r\n {/* */}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default CameraOptions;\r\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"rect\", {\n x: 4,\n y: 4,\n width: 6,\n height: 6,\n rx: 3,\n fill: \"#00D092\",\n stroke: \"#EEF0F1\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n});\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"rect\", {\n x: 14,\n y: 4,\n width: 6,\n height: 6,\n rx: 3,\n fill: \"#2A59F4\",\n stroke: \"#EEF0F1\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n});\n\nvar _ref4 = /*#__PURE__*/React.createElement(\"rect\", {\n x: 4,\n y: 14,\n width: 6,\n height: 6,\n rx: 3,\n fill: \"#D9822B\",\n stroke: \"#EEF0F1\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n});\n\nvar _ref5 = /*#__PURE__*/React.createElement(\"rect\", {\n x: 14,\n y: 14,\n width: 6,\n height: 6,\n rx: 3,\n fill: \"#DB3737\",\n stroke: \"#EEF0F1\",\n strokeLinecap: \"round\",\n strokeLinejoin: \"round\"\n});\n\nvar SvgIconMmc = function SvgIconMmc(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2, _ref3, _ref4, _ref5);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconMmc, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon-mmc.b246b845.svg\";\nexport { ForwardRef as ReactComponent };","import * as THREE from \"three\";\r\nimport { OrbitControls } from \"./../../utils/OrbitControls\";\r\nimport { FBXLoader } from \"three/examples/jsm/loaders/FBXLoader\";\r\nimport { convertArrIntoRad, convertArrintoDeg, convertUnit, areaOfellipse, createVector, makeUrl } from \"./../../utils/utils\";\r\nimport { CanvasTexture } from \"three\";\r\n\r\nexport default class ThreeViewHelper {\r\n constructor() {\r\n\r\n this.scene = new THREE.Scene();\r\n\r\n this.textureLoader = new THREE.TextureLoader();\r\n this.fbxLoader = new FBXLoader();\r\n this.raycaster = new THREE.Raycaster();\r\n this.offset = new THREE.Vector3();\r\n this.carpetLoaded = false;\r\n this.objectLoaded = false;\r\n }\r\n reset() {\r\n this.clearScene();\r\n this.scene = null;\r\n this.renderer = null;\r\n this.camera = null;\r\n this.orbit = null;\r\n this.carpetLoaded = false;\r\n this.objectLoaded = false;\r\n this.scene = new THREE.Scene();\r\n }\r\n init({ canvas, config = {}, shots, dims = {}, surfaceName = \"surface1\", resolution }) {\r\n this.reset()\r\n window.scene = this.scene;\r\n let { width = window.innerWidth, height = window.innerHeight } = dims;\r\n this.w = width\r\n this.h = height\r\n this.surfaceName = surfaceName;\r\n this.sceneConfig = config;\r\n this.objProps = config[surfaceName];\r\n\r\n this.renderer = renderer(canvas, { ...config, width, height, resolution });\r\n const camConfig = config[shots[0]];\r\n this.camera = perspectiveCamera({ ...camConfig, width, height });\r\n this.scene.add(this.camera);\r\n this.orbit = addOrbitControl(this.renderer, this.scene, this.camera, camConfig);\r\n this.orbit.enabled = false;\r\n // this.orbit.screenSpacePanning = true;\r\n }\r\n setupLights() {\r\n this.directionalLight = new THREE.DirectionalLight(0xffffff, 0.9)\r\n this.scene.add(this.directionalLight)\r\n this.ambientLight = new THREE.AmbientLight(0xffffff, 0.5)\r\n this.scene.add(this.ambientLight)\r\n }\r\n removeLights() {\r\n if (this.directionalLight)\r\n this.scene.remove(this.directionalLight)\r\n if (this.ambientLight)\r\n this.scene.remove(this.ambientLight)\r\n }\r\n setup3dObject({ fbxUrl }) {\r\n const objKey = \"surface1\"\r\n this.objConf = this.sceneConfig[objKey];\r\n if (this.carpetLoaded) {\r\n this.scene.remove(this.carpetMesh)\r\n const tarObj = this.scene.getObjectByName(\"TargetObject\")\r\n this.scene.remove(tarObj)\r\n\r\n this.carpetLoaded = false\r\n this.removeLights()\r\n }\r\n const { position = [0, 0, 0], rotation = [90, 0, 0], scale } = this.objConf;\r\n return new Promise((resolve, reject) => {\r\n const setup = () => {\r\n this.object.position.fromArray(position);\r\n this.object.scale.fromArray(scale);\r\n this.object.rotation.fromArray(convertArrIntoRad(rotation));\r\n if (this.material) {\r\n this.object.material = this.material\r\n this.object.material.needsUpdate = true\r\n this.render()\r\n }\r\n this.objectLoaded = true\r\n this.render()\r\n resolve();\r\n }\r\n if (!this.objectLoaded)\r\n\r\n this.fbxLoader.load(fbxUrl, obj => {\r\n\r\n this.object = obj.getObjectByName(objKey)\r\n this.scene.add(this.object);\r\n setup()\r\n }, undefined, console.error);\r\n else setup()\r\n })\r\n\r\n }\r\n async setupCarpet({ fbxUrl }) {\r\n this.objConf = this.sceneConfig[this.surfaceName];\r\n const { position = [0, 0, 0], rotation = [90, 0, 0] } = this.objConf;\r\n\r\n const setCarpet = (({ fbxUrl }) => {\r\n if (this.objectLoaded) {\r\n this.scene.remove(this.object)\r\n const tarObj = this.scene.getObjectByName(\"TargetObject\")\r\n if (tarObj)\r\n this.scene.remove(tarObj)\r\n this.removeLights()\r\n this.objectLoaded = false\r\n }\r\n return new Promise((resolve, reject) => {\r\n const setup = () => {\r\n // this.originalMesh = \r\n this.carpetMesh.position.fromArray(position);\r\n const { flagged } = this.sceneConfig;\r\n let fact = flagged ? 10 : 1\r\n this.directionalLight.position.set(position[0] - 3000 / fact, position[1] + 3000 / fact, position[2])\r\n var targetObject = new THREE.Object3D();\r\n targetObject.name = \"TargetObject\"\r\n targetObject.position.set(...position);\r\n this.scene.add(targetObject);\r\n this.directionalLight.target = targetObject;\r\n // let helper = new THREE.DirectionalLightHelper(this.directionalLight, 100, 0xff0000);\r\n // this.scene.add(helper);\r\n\r\n this.carpetMesh.rotation.fromArray(convertArrIntoRad(rotation.slice(0, 3)));\r\n if (this.designDetails)\r\n this.setCarpetScale(this.designDetails)\r\n\r\n if (this.material) {\r\n this.carpetMesh.material = this.material\r\n this.carpetMesh.material.needsUpdate = true\r\n this.render()\r\n }\r\n this.carpetLoaded = true\r\n this.render()\r\n resolve();\r\n }\r\n if (!this.carpetLoaded)\r\n\r\n this.fbxLoader.load(fbxUrl, obj => {\r\n\r\n this.carpetMesh = obj.getObjectByName(this.surfaceName)\r\n this.scene.add(this.carpetMesh);\r\n this.setupLights()\r\n setup()\r\n }, undefined, console.error);\r\n else setup()\r\n })\r\n }).bind(this)\r\n\r\n const setupFloor = (() => {\r\n return new Promise((resolve, reject) => {\r\n this.floorObjectKey = this.sceneConfig.objects3d.find(item => item === \"floor\" || item === \"Floor\" || item === \"FLOOR\")\r\n const floor = this.scene.getObjectByName(\"floor\") || this.scene.getObjectByName(\"Floor\") || this.scene.getObjectByName(\"FLOOR\")\r\n if (floor) {\r\n this.scene.remove(floor);\r\n this.render()\r\n }\r\n if (this.floorObjectKey) {\r\n const { modelUrl } = this.sceneConfig\r\n const fbxUrl = makeUrl(this.baseUrl, modelUrl);\r\n const setup = () => {\r\n const objKey = this.floorObjectKey;\r\n const objConf = this.sceneConfig[objKey]\r\n const { position = [0, 0, 0], rotation = [90, 0, 0], scale } = objConf;\r\n this.floor.position.fromArray(position);\r\n this.floor.scale.fromArray(scale);\r\n this.floor.rotation.fromArray(convertArrIntoRad(rotation));\r\n this.floor.material.needsUpdate = true;\r\n this.floor.visible = false;\r\n }\r\n const geometry = new THREE.BoxGeometry(1, 1, 1);\r\n const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });\r\n this.floor = new THREE.Mesh(geometry, material);\r\n setup();\r\n this.scene.add(this.floor);\r\n this.floor.geometry.computeBoundingBox();\r\n this.bounds = new THREE.Box3().setFromObject(this.floor);\r\n this.setupRoomBounds();\r\n resolve();\r\n }\r\n else {\r\n this.floor = null;\r\n this.bounds = null;\r\n resolve();\r\n };\r\n });\r\n }).bind(this)\r\n\r\n const carpet = await setCarpet({ fbxUrl });\r\n const floor = await setupFloor();\r\n const promiseArr = [carpet, floor];\r\n return Promise.all(promiseArr);\r\n\r\n\r\n\r\n\r\n }\r\n setupRoomBounds() {\r\n if (!this.bounds || !this.carpetMesh) return\r\n let smallBoxHalfSize = new THREE.Vector3();\r\n let boxBox = new THREE.Box3().setFromObject(this.carpetMesh);\r\n boxBox.getSize(smallBoxHalfSize);\r\n smallBoxHalfSize.multiplyScalar(0.5);\r\n let min = this.bounds.min.clone();\r\n let max = this.bounds.max.clone();\r\n min = min.add(smallBoxHalfSize);\r\n max = max.sub(smallBoxHalfSize);\r\n this.clampingBox = new THREE.Box3(min, max);\r\n }\r\n setCarpetScale(designDetails) {\r\n const { PhysicalWidth, PhysicalHeight, Unit } = designDetails\r\n if (!PhysicalWidth || !PhysicalHeight || !Unit) {\r\n console.error(\"Could not set carept scale\")\r\n return\r\n }\r\n const { flagged } = this.sceneConfig;\r\n let fact = flagged ? 10 : 1\r\n\r\n const wid = convertUnit(Unit, \"ft\", PhysicalWidth)\r\n const hgt = convertUnit(Unit, \"ft\", PhysicalHeight)\r\n this.carpetMesh.scale.set(wid / fact, hgt / fact, 2 / fact)\r\n this.setupRoomBounds()\r\n }\r\n setObjectVisibility(visibility) {\r\n this.object.visible = visibility\r\n this.render()\r\n }\r\n setCarpetVisibility(visibility) {\r\n this.carpetMesh.visible = visibility\r\n this.render()\r\n }\r\n setObjectTexture({ designDetails, designCanvas }) {\r\n return new Promise((resolve, reject) => {\r\n const { surfaceUnit = \"in\", doubleSide } = this.objProps;\r\n const PhysicalWidth = convertUnit(designDetails.Unit, surfaceUnit, designDetails.PhysicalWidth);\r\n const PhysicalHeight = convertUnit(designDetails.Unit, surfaceUnit, designDetails.PhysicalHeight);\r\n this.designDetails = { ...designDetails, PhysicalHeight, PhysicalWidth, Unit: surfaceUnit }\r\n const designTexture = new CanvasTexture(designCanvas);\r\n designTexture.anisotropy = this.renderer.capabilities.getMaxAnisotropy();\r\n designTexture.wrapS = designTexture.wrapT = THREE.RepeatWrapping;\r\n this.material = new THREE.MeshBasicMaterial({\r\n map: designTexture,\r\n transparent: true,\r\n side: doubleSide ? THREE.DoubleSide : THREE.FrontSide,\r\n alphaTest: 0.5,\r\n });\r\n if (!this.object) {\r\n console.error(\"could not find the object\")\r\n resolve()\r\n return;\r\n }\r\n this.object.material = this.material;\r\n this.object.material.needsUpdate = true;\r\n\r\n this.render()\r\n resolve()\r\n\r\n })\r\n\r\n }\r\n setCarpetTexture({ designDetails, designCanvas, normapCanvas }) {\r\n this.designDetails = designDetails\r\n\r\n const designTexture = new CanvasTexture(designCanvas);\r\n const normalTexture = new CanvasTexture(normapCanvas);\r\n // designTexture.magFilter = THREE.LinearFilter;\r\n // designTexture.minFilter = THREE.LinearFilter;\r\n designTexture.anisotropy = this.renderer.capabilities.getMaxAnisotropy();\r\n normalTexture.anisotropy = this.renderer.capabilities.getMaxAnisotropy();\r\n this.material = new THREE.MeshStandardMaterial({\r\n map: designTexture,\r\n normalMap: normalTexture,\r\n roughness: 1,\r\n metalness: 0.1,\r\n needsUpdate: true,\r\n transparent: true,\r\n side: THREE.FrontSide\r\n })\r\n if (!this.carpetMesh) return;\r\n this.setCarpetScale(this.designDetails)\r\n this.carpetMesh.material = this.material\r\n this.carpetMesh.material.needsUpdate = true\r\n this.render()\r\n }\r\n render() {\r\n if (!this.renderer) return;\r\n this.renderer.render(this.scene, this.camera);\r\n }\r\n setFov(value) {\r\n const { camera } = this;\r\n camera.fov = value;\r\n camera.updateProjectionMatrix();\r\n this.render();\r\n }\r\n mouseDownTouchStart(e) {\r\n if (!this.carpetMesh) return;\r\n let intersect = this.raycastMouseOnCarpet(e);\r\n if (!intersect) return\r\n const objPos = this.carpetMesh.position.clone();\r\n this.offset.copy(intersect.point).sub(objPos);\r\n return intersect\r\n }\r\n\r\n mouseTouchMove(e) {\r\n if (!this.carpetMesh) return;\r\n //TODO:instead of casting on carpet, cast on an infinite plane \r\n let intersect = this.raycastMouseOnCarpet(e);\r\n if (!intersect) return\r\n const objPos = this.carpetMesh.position.clone();\r\n const sub = intersect.point.sub(this.offset);\r\n sub.y = objPos.y;\r\n const subClamped = sub.clone();\r\n if (this.bounds) subClamped.clamp(this.clampingBox.min, this.clampingBox.max)\r\n subClamped.y = objPos.y;\r\n this.carpetMesh.position.copy(subClamped);\r\n this.render();\r\n }\r\n raycastMouseOnCarpet(e) {\r\n const { x, y } = e;\r\n let { mouseX, mouseY } = this.convMouseCord(x, y);\r\n var mouse = new THREE.Vector3(mouseX, mouseY, 0.99);\r\n this.raycaster.setFromCamera(mouse, this.camera);\r\n var intersects = this.raycaster.intersectObject(this.carpetMesh);\r\n return intersects[0];\r\n }\r\n convMouseCord(x, y) {\r\n // const { offsetX, offsetY } = this.getRendererOffset();\r\n const vec = new THREE.Vector2();\r\n const { width, height } = this.renderer.getSize(vec);\r\n\r\n var mouseX = ((x) / width) * 2 - 1;\r\n var mouseY = -((y) / height) * 2 + 1;\r\n return { mouseX, mouseY };\r\n }\r\n getCameraConfig() {\r\n const position = this.camera.position.toArray();\r\n const rotation = convertArrintoDeg(this.camera.rotation.toArray());\r\n const target = this.orbit.target.position.toArray();\r\n return { position, rotation, target };\r\n }\r\n rotateCarpet(rotationInDegrees, axis) {\r\n if (!this.carpetMesh) return\r\n this.carpetMesh.rotation[axis] += (rotationInDegrees * Math.PI) / 180;\r\n this.render();\r\n }\r\n scaleObject(surfaceName, scaleFactor, axis) {\r\n let object = this.scene.getObjectByName(surfaceName);\r\n object.scale[axis] += scaleFactor;\r\n this.render();\r\n }\r\n attachTransformControls(surfaceName) {\r\n let object = this.scene.getObjectByName(surfaceName);\r\n\r\n this.transform.attach(object);\r\n this.scene.add(this.transform);\r\n }\r\n getRendererOffset() {\r\n var offsetY = this.renderer.domElement.offsetTop;\r\n var offsetX = this.renderer.domElement.offsetLeft;\r\n return { offsetX, offsetY };\r\n }\r\n clearScene() {\r\n while (this.scene?.children.length > 0) {\r\n this.scene.remove(this.scene.children[0]);\r\n }\r\n this.render();\r\n }\r\n\r\n\r\n toScreenXY(position, camera) {\r\n var pos = position.clone();\r\n let projScreenMat = new THREE.Matrix4();\r\n projScreenMat.multiply(camera.projectionMatrix, camera.matrixWorldInverse);\r\n projScreenMat.multiplyVector3(pos);\r\n console.log(this.w, this.h)\r\n const { offsetX, offsetY } = this.getRendererOffset()\r\n console.log(offsetY)\r\n return {\r\n x: (pos.x + 1) * this.w / 2 + offsetX,\r\n y: (- pos.y + 1) * this.h / 2 + offsetY\r\n };\r\n\r\n }\r\n\r\n getCarpetPositions() {\r\n this.carpetMesh.geometry.computeBoundingBox();\r\n let box = this.carpetMesh.geometry.boundingBox;\r\n const widthheight = box.max.sub(box.min)\r\n\r\n const plane = new THREE.PlaneGeometry(widthheight.x, widthheight.y)\r\n const mat = new THREE.MeshBasicMaterial({ color: 0xff0000 })\r\n const m = new THREE.Mesh(plane, mat)\r\n m.scale.copy(this.carpetMesh.scale)\r\n m.position.copy(this.carpetMesh.position)\r\n m.rotation.copy(this.carpetMesh.rotation)\r\n const a = []\r\n plane.vertices.forEach(vertex => {\r\n const v = vertex.clone()\r\n v.applyMatrix4(this.carpetMesh.matrixWorld);\r\n a.push(v)\r\n })\r\n const b = a.map(vertex => createVector(vertex, this.camera, this.w, this.h))\r\n return [b[0], b[1], b[3], b[2]]\r\n }\r\n getCarpetArea() {\r\n const positions = this.getCarpetPositions();\r\n // positions[0].x\r\n }\r\n getCarpetMask() {\r\n const originalBg = this.scene.background;\r\n const object = this.scene.getObjectByName(this.surfaceName)\r\n const originalMat = object.material;\r\n // this.scene.background = new THREE.Color(0xffffff);\r\n const material = new THREE.MeshBasicMaterial({ color: 0xFFFFFF });\r\n object.material = material;\r\n object.material.needsUpdate = true;\r\n this.render();\r\n const dataurl = this.renderer.domElement.toDataURL();\r\n this.scene.background = originalBg;\r\n object.material = originalMat;\r\n this.render();\r\n return dataurl\r\n }\r\n toggleOrbitControls(enable) {\r\n this.orbit.enabled = enable;\r\n this.orbit.update();\r\n }\r\n toggleScreenSpacePanning(enable) {\r\n this.orbit.screenSpacePanning = enable;\r\n this.orbit.update();\r\n }\r\n toggleOrbitLockAxis(axis, enable) {\r\n if (axis === 0) {\r\n this.orbit.lockVertical = enable;\r\n this.orbit.update();\r\n } else if (axis === 1) {\r\n this.orbit.lockHorizontal = enable;\r\n this.orbit.update();\r\n }\r\n }\r\n changeShot(shotConfig) {\r\n const { position, rotation, target, fov } = shotConfig;\r\n const { camera } = this;\r\n camera.fov = fov;\r\n camera.updateProjectionMatrix();\r\n camera.position.fromArray(position);\r\n camera.rotation.fromArray(rotation);\r\n // camera.lookAt(...target);\r\n this.orbit.target.fromArray(target);\r\n this.orbit.update();\r\n this.render();\r\n }\r\n updateMap() {\r\n if (this.carpetMesh && this.carpetMesh.material.map) {\r\n this.carpetMesh.material.map.needsUpdate = true;\r\n this.carpetMesh.material.normalMap.needsUpdate = true;\r\n }\r\n if (this.object && this.object.material.map) {\r\n this.object.material.map.needsUpdate = true;\r\n // this.object.material.normalMap.needsUpdate = true;\r\n\r\n }\r\n this.render()\r\n }\r\n resizeRenderer({ width, height }) {\r\n this.w = width;\r\n this.h = height\r\n this.camera.aspect = width / height;\r\n this.camera.updateProjectionMatrix();\r\n\r\n this.renderer.setSize(width, height);\r\n }\r\n getObjectConfig() {\r\n console.log(this.carpetLoaded, this.objectLoaded)\r\n if (this.objectLoaded) {\r\n return null\r\n } else {\r\n return this.carpetMesh\r\n }\r\n }\r\n calculateCarpetSize() {\r\n const carpetSize = new THREE.Vector3();\r\n var box = new THREE.Box3();\r\n box.setFromObject(this.carpetMesh);\r\n box.getSize(carpetSize)\r\n // this.carpetMesh.geometry.computeBoundingBox();\r\n // this.carpetMesh.geometry.boundingBox.getSize(carpetSize);\r\n return carpetSize;\r\n }\r\n distbetween2Vertices(vertex1, vertex2, axis) {\r\n const { camera, renderer } = this;\r\n const vec = new THREE.Vector2()\r\n renderer.getSize(vec);\r\n const { x: width, y: height } = vec;\r\n const v1 = createVector(vertex1, camera, width, height);\r\n const v2 = createVector(vertex2, camera, width, height);\r\n const xDist = Math.abs(Math.abs(v2.x) - Math.abs(v1.x));\r\n const yDist = Math.abs(Math.abs(v2.y) - Math.abs(v1.y));\r\n return { xDist: xDist, yDist: yDist };\r\n }\r\n getGizmoCordinates() {\r\n const carpetSize = this.calculateCarpetSize();\r\n const smallerDim = carpetSize.x > carpetSize.y ? carpetSize.x : carpetSize.y;\r\n const carpetRadius = smallerDim / 5;\r\n const carpetCenter = this.carpetMesh.position.clone();\r\n\r\n const vertex1 = carpetCenter.clone();\r\n const vertex2 = new THREE.Vector3(\r\n carpetCenter.x,\r\n carpetCenter.y,\r\n carpetCenter.z + carpetRadius)\r\n\r\n const dist1 = this.distbetween2Vertices(vertex1, vertex2);\r\n const radYY = dist1.yDist;\r\n const radYX = dist1.xDist;\r\n\r\n const vertex3 = new THREE.Vector3(\r\n carpetCenter.x + carpetRadius,\r\n carpetCenter.y,\r\n carpetCenter.z);\r\n //TODO:this could be point of failure\r\n const vertex4 = carpetCenter.clone();\r\n const dist2 = this.distbetween2Vertices(vertex3, vertex4);\r\n const radXX = dist2.xDist;\r\n const radXY = dist2.yDist;\r\n\r\n const area1 = areaOfellipse(radYY, radXX);\r\n const area2 = areaOfellipse(radXY, radYX);\r\n let radX, radY;\r\n if (area1 > area2) {\r\n radX = radXX;\r\n radY = radYY;\r\n } else {\r\n radX = radXY;\r\n radY = radYX;\r\n }\r\n const canvasCenter = createVector(carpetCenter, this.camera, this.w, this.h);\r\n return { radX, radY, canvasCenter }\r\n }\r\n // downloadImageData() {\r\n // const dataurl = this.renderer.domElement.toBlob(blob => {\r\n // var strData = URL.createObjectURL(blob);\r\n // var link = document.createElement(\"a\");\r\n // document.body.appendChild(link); //Firefox requires the link to be in the body\r\n // link.setAttribute(\"download\", \"download.png\");\r\n // link.href = strData;\r\n // link.click()\r\n // document.body.removeChild(link); //remove the link when done\r\n // })\r\n\r\n\r\n // }\r\n}\r\nconst perspectiveCamera = (config = {}) => {\r\n const { innerWidth, innerHeight } = window;\r\n let {\r\n fov = 40,\r\n near = 0.1,\r\n far = 100000,\r\n height = innerHeight,\r\n width = innerWidth,\r\n position = [0, 200, 500],\r\n target = [0, 0, 0],\r\n rotation = [0, 0, 0],\r\n } = config;\r\n const aspect = width / height;\r\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\r\n camera.lookAt(new THREE.Vector3(...target)); // This seems to be disabled by OrbitControls\r\n camera.position.set(...position);\r\n camera.rotation.set(...convertArrIntoRad(rotation));\r\n return camera;\r\n};\r\nconst renderer = (canvas, config = {}) => {\r\n const { innerWidth, innerHeight, devicePixelRatio } = window;\r\n let {\r\n width = innerWidth,\r\n height = innerHeight,\r\n preserveDrawingBuffer = true,\r\n alpha = true,\r\n antialias = false,\r\n resolution = 1\r\n } = config;\r\n //console.log(width, height);\r\n const renderer = new THREE.WebGLRenderer({\r\n canvas,\r\n preserveDrawingBuffer,\r\n alpha,\r\n antialias\r\n });\r\n // renderer.autoClear = false;\r\n // renderer.setClearColor(0x000000);\r\n renderer.setPixelRatio(resolution);\r\n renderer.setSize(width, height);\r\n return renderer;\r\n};\r\n\r\nconst addOrbitControl = function (renderer, scene, camera, config = {}) {\r\n let { target = [0, 0, 0] } = config;\r\n const control = new OrbitControls(camera, renderer.domElement);\r\n control.enableKeys = false;\r\n control.target = new THREE.Vector3(...target);\r\n // controls .rotateSpeed = 5;\r\n // controls .zoomSpeed = 2.5;\r\n control.addEventListener(\"change\", () => {\r\n renderer.render(scene, camera);\r\n });\r\n function animate() {\r\n requestAnimationFrame(animate);\r\n control.update();\r\n }\r\n animate();\r\n return control;\r\n};\r\nexport const loadFbx = (url) => {\r\n return new Promise((resolve, reject) => {\r\n new FBXLoader().load(\r\n url,\r\n resolve,\r\n undefined,\r\n reject\r\n );\r\n });\r\n}","import { readImage, resizeKeepingAspect, convertUnit, convertArrIntoRad } from \"./../../utils/utils\";\r\nimport { clearCanvas, createCanvas, downloadImageData } from \"./../../utils/canvasutils\";\r\nimport ThreeViewHelper from \"./threeviewhelper\";\r\n// import TileCanvas from \"../tilecanvasnew\";\r\n// const tileCanvas = new TileCanvas()\r\n\r\nfunction createName() {\r\n let res = \"\"\r\n Array.from(arguments).forEach(argument => {\r\n if (argument) {\r\n res = `${res}${argument}.`;\r\n }\r\n });\r\n return res\r\n}\r\nfunction makeUrl() {\r\n let res = \"\"\r\n Array.from(arguments).forEach((argument, index) => {\r\n if (argument) {\r\n res = `${res}${index === 0 ? \"\" : \"/\"}${argument}`;\r\n }\r\n });\r\n return res\r\n}\r\nconst rgbFromHex = hex => {\r\n let rgb = Array[3]\r\n rgb[0] = parseInt(hex.substring(1, 3), 16);\r\n rgb[1] = parseInt(hex.substring(3, 5), 16);\r\n rgb[2] = parseInt(hex.substring(5, 7), 16);\r\n return rgb\r\n}\r\n\r\nconst patchRgb = [45, 24, 18];\r\n\r\nexport default class RoomViewHelper {\r\n constructor() {\r\n this.config = {};\r\n this.baseUrl = null;\r\n this.dimension = { width: null, height: null };\r\n this.dimensionPixels = { width: null, height: null };\r\n this.bgImage = null;\r\n this.maskImage = null;\r\n this.bgPatchImage = null;\r\n this.bgPatchShadowImage = null;\r\n this.shadowImage = null;\r\n this.highlightImage = null;\r\n this.canvasArray = Array(4);\r\n\r\n this.carpetURL = \"\";\r\n this.fbxLoaded = false;\r\n this.threeView = new ThreeViewHelper();\r\n\r\n this.zoom = 2;\r\n\r\n }\r\n\r\n initCanvas(options) {\r\n this.bgCanvas = options.bgCanvas\r\n this.threeCanvas = options.threeCanvas\r\n this.maskCanvas = options.maskCanvas\r\n this.shadowCanvas = options.shadowCanvas\r\n this.container = options.container\r\n this.inputCanvas = options.inputCanvas\r\n }\r\n clearAllCanvases() {\r\n const { width, height } = this.dimension;\r\n console.info(\"Clearing canvases\", this.shadowCanvas)\r\n clearCanvas(this.bgCanvas, width, height);\r\n clearCanvas(this.maskCanvas, width, height);\r\n clearCanvas(this.shadowCanvas, width, height);\r\n clearCanvas(this.inputCanvas, width, height);\r\n }\r\n initConfig({ baseUrl, config, files }) {\r\n this.baseUrl = baseUrl\r\n this.config = config\r\n const illustrationDims = this.config.dims;\r\n const containerDims = {\r\n width: this.container.clientWidth,\r\n height: this.container.clientHeight\r\n }\r\n\r\n this.resolution = window.devicePixelRatio;\r\n this.dimensionPixels = resizeKeepingAspect(illustrationDims, containerDims, \"fit_inside\")\r\n\r\n this.dimension = {\r\n width: window.screen.width * this.resolution,\r\n height: window.screen.height * this.resolution\r\n };\r\n this.resolution = this.dimension.width / this.dimensionPixels.width\r\n this.inputCanvas.width = this.dimensionPixels.width\r\n this.inputCanvas.height = this.dimensionPixels.height\r\n // setCanvasDimensions(this.inputCanvas, this.dimension, this.dimensionPixels)\r\n\r\n const x = { shot: this.config.shots[0], light: this.config.lights ? this.config.lights[0] : null };\r\n const bgUrl = `${createName(x.shot, x.light)}bg.jpg`;\r\n const bgPatchUrl = `${createName(x.shot, x.light)}pch.png`;\r\n const bgPatchShadowUrl = `${createName(x.shot, x.light)}pch.sh.jpg`;\r\n const maskUrl = `${createName(x.shot, x.light)}m.png`;\r\n const shadowUrl = `${createName(x.shot, x.light)}sh.jpg`;\r\n const highlightUrl = `${createName(x.shot, x.light)}hl.jpg`;\r\n const glowUrl = `${createName(x.shot, x.light)}gl.jpg`;\r\n const promises = [];\r\n if (!files.includes(bgUrl))\r\n promises.push(Promise.reject(\"no background image\"))\r\n else {\r\n promises.push(readImage(makeUrl(baseUrl, bgUrl)).then(img => this.bgImage = img))\r\n if (files.includes(bgPatchUrl))\r\n promises.push(readImage(bgPatchUrl).then(img => this.patchImage = img))\r\n else\r\n this.patchImage = null\r\n if (files.includes(bgPatchShadowUrl))\r\n promises.push(readImage(makeUrl(baseUrl, bgPatchShadowUrl)).then(img => this.patchShadow = img))\r\n else {\r\n this.patchShadow = null\r\n }\r\n if (files.includes(maskUrl))\r\n promises.push(readImage(makeUrl(baseUrl, maskUrl)).then(img => this.maskImage = img))\r\n else\r\n this.maskImage = null\r\n if (files.includes(shadowUrl))\r\n promises.push(readImage(makeUrl(baseUrl, shadowUrl)).then(img => this.shadowImage = img))\r\n if (files.includes(highlightUrl))\r\n promises.push(readImage(makeUrl(baseUrl, highlightUrl)).then(img => this.highlightImage = img))\r\n if (files.includes(glowUrl))\r\n promises.push(readImage(makeUrl(baseUrl, glowUrl)).then(img => this.glowImage = img))\r\n }\r\n return promises\r\n }\r\n updateBackground(options = {}) {\r\n const { clear = false, dominantColorHex, canvas = this.bgCanvas } = options\r\n const { width, height } = this.dimension;\r\n\r\n const bgCtx = canvas.getContext(\"2d\");\r\n clearCanvas(canvas, width, height);\r\n setCanvasDimensions(canvas, this.dimension, this.dimensionPixels)\r\n if (clear) {\r\n return \"clear\";\r\n }\r\n bgCtx.drawImage(this.bgImage, 0, 0, width, height);\r\n if (this.patchImage && dominantColorHex) {\r\n\r\n const activeColor = rgbFromHex(dominantColorHex)\r\n const patchCanvas = createCanvas(width, height);\r\n const patchCtx = patchCanvas.getContext(\"2d\");\r\n patchCtx.drawImage(this.patchImage, 0, 0, width, height)\r\n let patchData = patchCtx.getImageData(0, 0, width, height);\r\n\r\n for (let i = 0; i < patchData.data.length; i += 4) {\r\n if (patchData.data[i] === patchRgb[0] && patchData.data[i + 1] === patchRgb[1] && patchData.data[i + 2] === patchRgb[2]) {\r\n patchData.data[i] = activeColor[0];\r\n patchData.data[i + 1] = activeColor[1];\r\n patchData.data[i + 2] = activeColor[2];\r\n }\r\n }\r\n patchCtx.putImageData(patchData, 0, 0);\r\n\r\n bgCtx.globalCompositeOperation = \"overlay\";\r\n bgCtx.drawImage(patchCanvas, 0, 0, width, height);\r\n\r\n if (this.patchShadow) {\r\n bgCtx.globalCompositeOperation = \"multiply\";\r\n bgCtx.drawImage(this.patchShadow, 0, 0, width, height);\r\n }\r\n }\r\n return \"successfully updated bg\"\r\n }\r\n updatethreeCanvas() {\r\n if (!this.config.scenes) return\r\n const scene = this.config.scenes[0];\r\n const { roomType } = this.config;\r\n const sceneConfig = this.config[scene];\r\n this.threeView.init({\r\n canvas: this.threeCanvas,\r\n config: sceneConfig,\r\n shots: this.config.shots,\r\n dims: this.dimensionPixels,\r\n resolution: this.resolution\r\n })\r\n switch (roomType) {\r\n case \"illustration\":\r\n return this.threeView.setup3dObject({ fbxUrl: makeUrl(this.baseUrl, sceneConfig.modelUrl) });\r\n default:\r\n return this.threeView.setupCarpet({ fbxUrl: \"https://v3.explorug.com/rug.fbx\" });\r\n\r\n }\r\n }\r\n\r\n changeDimensions({ physicalWidthCms, physicalHeightCms }) {\r\n const { width, height } = this.designDetails;\r\n let PhysicalWidth, PhysicalHeight;\r\n if (!physicalWidthCms || !physicalHeightCms) {\r\n const { width: newWidth, height: newHeight } = resizeKeepingAspect({ width, height }, { width: 1200, height: 1500 }, \"fit_inside\");\r\n PhysicalWidth = convertUnit(\"in\", \"ft\", newWidth / 10)\r\n PhysicalHeight = convertUnit(\"in\", \"ft\", newHeight / 10)\r\n }\r\n else {\r\n PhysicalWidth = convertUnit(\"cm\", \"ft\", physicalWidthCms)\r\n PhysicalHeight = convertUnit(\"cm\", \"ft\", physicalHeightCms)\r\n }\r\n\r\n const designDetails = { Width: width, Height: height, PhysicalWidth, PhysicalHeight, Unit: \"ft\" }\r\n this.designDetails = designDetails;\r\n this.threeView.setCarpetScale(designDetails);\r\n this.threeView.carpetMesh.material.needsUpdate = true;\r\n this.threeView.render();\r\n return Promise.resolve()\r\n }\r\n\r\n async renderFromJpg({ designImagePath, physicalWidthCms, physicalHeightCms }) {\r\n let designImage = new Image();\r\n await new Promise((resolve) => {\r\n designImage.onload = () => {\r\n resolve();\r\n }\r\n designImage.crossOrigin = \"anonymous\";\r\n designImage.src = designImagePath;\r\n });\r\n\r\n this.threeView.setCarpetVisibility(false)\r\n // return readImage(designPath).then(designImage => {\r\n // const designImage = designPath;\r\n const { width, height } = designImage\r\n const canvas = createCanvas(width, height)\r\n const context = canvas.getContext(\"2d\");\r\n context.drawImage(designImage, 0, 0\r\n )\r\n const canvasNorm = createCanvas(width, height)\r\n const ctxNorm = canvasNorm.getContext(\"2d\")\r\n ctxNorm.fillStyle = \"rgb(127,127,255)\";\r\n ctxNorm.fillRect(0, 0, width, height);\r\n let PhysicalWidth, PhysicalHeight;\r\n if (!physicalWidthCms || !physicalHeightCms) {\r\n const { width: newWidth, height: newHeight } = resizeKeepingAspect({ width, height }, { width: 1200, height: 1500 }, \"fit_inside\");\r\n PhysicalWidth = convertUnit(\"in\", \"ft\", newWidth / 10)\r\n PhysicalHeight = convertUnit(\"in\", \"ft\", newHeight / 10)\r\n }\r\n else {\r\n PhysicalWidth = convertUnit(\"cm\", \"ft\", physicalWidthCms)\r\n PhysicalHeight = convertUnit(\"cm\", \"ft\", physicalHeightCms)\r\n }\r\n\r\n // if (PhysicalWidth > 12 || PhysicalHeight > 15) {\r\n // console.log(PhysicalWidth, PhysicalHeight)\r\n // const { width, height } = resizeKeepingAspect({ width: PhysicalWidth, height: PhysicalHeight }, { width: 12, height: 15 }, \"fit_inside\")\r\n // // PhysicalWidth = width;\r\n // // PhysicalHeight = height;\r\n // }\r\n const { position = [0, 0, 0], rotation = [90, 0, 0] } = this.threeView.objConf;\r\n this.threeView.carpetMesh.position.fromArray(position);\r\n this.threeView.carpetMesh.rotation.fromArray(convertArrIntoRad(rotation.slice(0, 3)));\r\n const designDetails = { Width: width, Height: height, PhysicalWidth, PhysicalHeight, Unit: \"ft\" }\r\n this.designDetails = designDetails;\r\n this.threeView.setCarpetTexture({\r\n designDetails,\r\n designCanvas: canvas,\r\n normapCanvas: canvasNorm\r\n })\r\n this.updateGizmo();\r\n this.threeView.setCarpetVisibility(true)\r\n return Promise.resolve()\r\n // })\r\n }\r\n renderDesign({ designDetails, designPath, hash }) {\r\n // this.designDetails = designDetails;\r\n // this.designPath = designPath;\r\n // const { roomType } = this.config;\r\n // const { designScale } = this.config[this.config.scenes[0]]\r\n // if (designScale)\r\n // this.zoom = designScale\r\n // tileCanvas.init({ tileSize: 256, zoom: this.zoom, designDetails })\r\n\r\n // switch (roomType) {\r\n // case \"illustration\":\r\n // return new Promise((resolve, reject) => {\r\n // this.threeView.setObjectTexture({\r\n // designDetails,\r\n // designCanvas: tileCanvas.canvas\r\n // })\r\n // // this.threeView.setObjectVisibility(false)\r\n\r\n // tileCanvas.drawCanvasTiles({\r\n // designPath,\r\n // zoom: this.zoom,\r\n // designDetails,\r\n // hash,\r\n // drawNormap: false\r\n // }, () => {\r\n // // this.threeView.updateMap()\r\n // }, () => {\r\n // this.threeView.updateMap()\r\n // setTimeout(() => {\r\n // resolve()\r\n // // this.threeView.setObjectVisibility(true)\r\n // }, 500);\r\n // })\r\n // })\r\n\r\n // default:\r\n\r\n // return new Promise((resolve, reject) => {\r\n // this.threeView.setCarpetTexture({\r\n // designDetails,\r\n // designCanvas: tileCanvas.canvas,\r\n // normapCanvas: tileCanvas.canvasNorm\r\n // })\r\n // this.threeView.setCarpetVisibility(false)\r\n\r\n // tileCanvas.drawCanvasTiles({\r\n // designPath,\r\n // zoom: this.zoom,\r\n // designDetails,\r\n // hash\r\n // }, () => {\r\n // // this.threeView.updateMap()\r\n // }, () => {\r\n // this.threeView.updateMap()\r\n // setTimeout(() => {\r\n // resolve()\r\n // this.threeView.setCarpetVisibility(true)\r\n // this.updateGizmo()\r\n // }, 500);\r\n // })\r\n // })\r\n\r\n // }\r\n\r\n // return new Promise((resolve, reject) => {\r\n // readImage(\"temp/testcircular/diffuse.jpg\").then(dif => {\r\n // readImage(\"temp/testcircular/diffuse-norm.png\").then(norm => {\r\n // const desCanvas = createCanvas(4096, 4096)\r\n // const nomCanvas = createCanvas(4096, 4096)\r\n // desCanvas.getContext(\"2d\").drawImage(dif, 0, 0, 4096, 4096)\r\n // nomCanvas.getContext(\"2d\").drawImage(norm, 0, 0, 4096, 4096)\r\n // this.threeView.setCarpetTexture({\r\n // designDetails,\r\n // designCanvas: desCanvas,\r\n // normapCanvas: nomCanvas\r\n // })\r\n // this.threeView.updateMap()\r\n // resolve()\r\n // })\r\n // })\r\n // })\r\n }\r\n setTileDetails(tileDetails) {\r\n this.tileDetails = tileDetails\r\n }\r\n updateTiles({ designDetails, updateDesignTiles, updateNormapTiles, hash }) {\r\n // if (!this.tileDetails) {\r\n // return Promise.resolve()\r\n // }\r\n // return new Promise((resolve, reject) => {\r\n // let colorIndex;\r\n // if (updateDesignTiles) colorIndex = updateDesignTiles.colorIndex\r\n // if (updateNormapTiles) colorIndex = updateNormapTiles.colorIndex\r\n\r\n // this.designDetails = designDetails\r\n\r\n // let colorTileData = null\r\n // if (colorIndex && colorIndex !== -1) {\r\n // const tileData = this.tileDetails[`colorTileData${this.zoom}`]\r\n // colorTileData = tileData[colorIndex].tiles\r\n // } else {\r\n // //all tiles\r\n // }\r\n // const props = {\r\n // tiles: colorTileData,\r\n // zoom: this.zoom,\r\n // designDetails,\r\n // designPath: this.designPath,\r\n // hash\r\n // }\r\n // if (!updateNormapTiles) {\r\n // tileCanvas.designTilesUpdated = true\r\n // tileCanvas.updateDesignTiles(props, () => {\r\n // this.threeView.updateMap()\r\n // }, () => {\r\n // this.threeView.updateMap()\r\n // setTimeout(() => {\r\n // resolve()\r\n\r\n // }, 500);\r\n // })\r\n // } else {\r\n // tileCanvas.normapTilesUpdated = true\r\n // tileCanvas.updateNormapTiles(props, () => {\r\n // this.threeView.updateMap()\r\n // }, () => {\r\n // this.threeView.updateMap()\r\n // setTimeout(() => {\r\n // resolve()\r\n\r\n // }, 500);\r\n // })\r\n // // this.tileCanvas1x.updateNo(props, () => this.render())\r\n // }\r\n // })\r\n\r\n }\r\n updateMask(options = {}) {\r\n const { clear = false } = options;\r\n const { width, height } = this.dimension;\r\n setCanvasDimensions(this.maskCanvas, this.dimension, this.dimensionPixels)\r\n clearCanvas(this.maskCanvas, width, height);\r\n if (clear) return \"clear\"\r\n if (!this.maskImage) return\r\n\r\n const tmpCanvas = createCanvas(width, height);\r\n tmpCanvas.getContext(\"2d\").drawImage(this.bgCanvas, 0, 0, width, height);\r\n makeMask(tmpCanvas, width, height, this.maskImage);\r\n\r\n this.maskCanvas.getContext(\"2d\").drawImage(tmpCanvas, 0, 0, width, height);\r\n }\r\n updateShadow(options = {}) {\r\n const { clear = false } = options\r\n const { width, height } = this.dimension;\r\n const tempCanvas = createCanvas(width, height);\r\n const tCtx = tempCanvas.getContext(\"2d\");\r\n\r\n setCanvasDimensions(this.shadowCanvas, this.dimension, this.dimensionPixels)\r\n clearCanvas(this.shadowCanvas, width, height);\r\n\r\n if (clear) return \"clear\";\r\n // const ctx = this.canvas.getContext(\"2d\");\r\n // tCtx.fillStyle = \"rgb(0,0,0)\";\r\n // tCtx.fillRect(0, 0, width, height)\r\n tCtx.drawImage(this.bgCanvas, 0, 0, width, height);\r\n tCtx.drawImage(this.threeCanvas, 0, 0, width, height);\r\n tCtx.drawImage(this.maskCanvas, 0, 0, width, height);\r\n\r\n if (this.shadowImage) {\r\n tCtx.globalCompositeOperation = \"multiply\";\r\n tCtx.drawImage(this.shadowImage, 0, 0, width, height);\r\n }\r\n if (this.highlightImage) {\r\n tCtx.globalCompositeOperation = \"screen\";\r\n tCtx.drawImage(this.highlightImage, 0, 0, width, height);\r\n } if (this.glowImage) {\r\n tCtx.globalCompositeOperation = \"overlay\";\r\n tCtx.drawImage(this.glowImage, 0, 0, width, height);\r\n }\r\n tCtx.globalCompositeOperation = \"destination-in\";\r\n tCtx.drawImage(this.threeCanvas, 0, 0, width, height);\r\n this.shadowCanvas.getContext(\"2d\").drawImage(tempCanvas, 0, 0, width, height)\r\n }\r\n\r\n mouseDownTouchStart(e) {\r\n this.updateGizmo()\r\n this.intersectsGizmo = this.findGizmoIntersection(e)\r\n this.prev = { ...e }\r\n if (!this.intersectsGizmo) {\r\n const intersectsCarpet = this.threeView.mouseDownTouchStart(e)\r\n this.shadowCleared = false\r\n if (intersectsCarpet) {\r\n this.updateShadow({ clear: true });\r\n this.shadowCleared = true\r\n }\r\n } else {\r\n this.prev = { ...e }\r\n this.updateShadow({ clear: true });\r\n this.shadowCleared = true\r\n }\r\n }\r\n mouseDownTouchMove(e) {\r\n if (!this.intersectsGizmo) {\r\n this.threeView.mouseTouchMove(e)\r\n this.updateGizmo()\r\n } else {\r\n const difference = e.x - this.prev.x;\r\n this.threeView.rotateCarpet(difference, \"z\")\r\n this.prev = { ...e }\r\n }\r\n\r\n }\r\n mouseDownTouchEnd(e) {\r\n if (this.shadowCleared)\r\n this.updateShadow();\r\n }\r\n findGizmoIntersection(e) {\r\n const { x, y } = e\r\n if (!this.inputCanvas) return;\r\n var imgData = this.inputCanvas\r\n .getContext(\"2d\")\r\n .getImageData(x - 10, y - 10, 20, 20);\r\n var ingizmo = false;\r\n for (var i = 0; i < imgData.data.length; i += 4) {\r\n if (imgData.data[i + 3] !== 0) {\r\n ingizmo = true;\r\n break;\r\n }\r\n }\r\n return ingizmo\r\n }\r\n updateGizmo() {\r\n const diamondHeight = 10;\r\n const context = this.inputCanvas.getContext(\"2d\")\r\n const { width, height } = this.inputCanvas\r\n let { radX, radY, canvasCenter } = this.threeView.getGizmoCordinates()\r\n\r\n const rgb = {\r\n r: 250,\r\n g: 250,\r\n b: 250,\r\n a: 0.8\r\n };\r\n const colorStr =\r\n \"rgba(\" + rgb.r + \", \" + rgb.g + \", \" + rgb.b + \", \" + rgb.a + \")\";\r\n var radiusX;\r\n var radiusY;\r\n if (radX > radY) {\r\n radiusX = radX;\r\n radiusY = radY;\r\n } else {\r\n radiusX = radY;\r\n radiusY = radX;\r\n }\r\n // Draw the ellipse\r\n context.strokeStyle = colorStr;\r\n context.fillStyle = colorStr;\r\n context.lineWidth = 1;\r\n context.shadowOffsetX = 0;\r\n context.shadowColor = \"black\";\r\n context.shadowOffsetY = 1;\r\n context.clearRect(0, 0, width, height);\r\n context.beginPath();\r\n context.ellipse(\r\n canvasCenter.x,\r\n canvasCenter.y,\r\n radiusX,\r\n radiusY,\r\n 0,\r\n 0,\r\n 2 * Math.PI\r\n );\r\n context.stroke();\r\n context.beginPath();\r\n context.moveTo(canvasCenter.x, canvasCenter.y + radiusY - 5);\r\n context.lineTo(canvasCenter.x + diamondHeight, canvasCenter.y + radiusY);\r\n context.lineTo(canvasCenter.x, canvasCenter.y + radiusY + 5);\r\n context.lineTo(canvasCenter.x - diamondHeight, canvasCenter.y + radiusY);\r\n context.fill();\r\n }\r\n resize(newDims) {\r\n if (!this.config.dims || !this.threeView.renderer) return\r\n this.dimensionPixels = resizeKeepingAspect(this.config.dims, newDims, \"fit_inside\")\r\n setCanvasDimensionsStyle(this.bgCanvas, this.dimensionPixels)\r\n this.threeView.resizeRenderer(this.dimensionPixels)\r\n setCanvasDimensionsStyle(this.maskCanvas, this.dimensionPixels)\r\n setCanvasDimensionsStyle(this.shadowCanvas, this.dimensionPixels)\r\n this.inputCanvas.width = this.dimensionPixels.width\r\n this.inputCanvas.height = this.dimensionPixels.height\r\n this.updateGizmo()\r\n }\r\n renderInCanvas() {\r\n const { width: w, height: h } = this.dimensionPixels;\r\n const renderCanvas = createCanvas(w, h);\r\n const renderCtx = renderCanvas.getContext(\"2d\");\r\n renderCtx.drawImage(this.bgCanvas, 0, 0, w, h);\r\n renderCtx.drawImage(this.threeCanvas, 0, 0, w, h);\r\n renderCtx.drawImage(this.maskCanvas, 0, 0, w, h);\r\n renderCtx.drawImage(this.shadowCanvas, 0, 0, w, h);\r\n return renderCanvas;\r\n }\r\n downloadRendering(name, mime) {\r\n const renderCanvas = this.renderInCanvas();\r\n downloadImageData(renderCanvas, name, \"image/\" + mime);\r\n }\r\n\r\n rotatebybutton(deg) {\r\n this.threeView.rotateCarpet(deg, \"z\");\r\n }\r\n}\r\n\r\nfunction makeMask(canvas, w, h, maskImg, flag = false) {\r\n const tCanvas = createCanvas(w, h);\r\n\r\n const shCtx = canvas.getContext(\"2d\");\r\n const tmpCtx = tCanvas.getContext(\"2d\");\r\n tmpCtx.drawImage(maskImg, 0, 0, w, h);\r\n let imgData = shCtx.getImageData(0, 0, w, h);\r\n let maskData = tmpCtx.getImageData(0, 0, w, h);\r\n for (let i = 0; i < maskData.data.length; i += 4) {\r\n if (flag) {\r\n imgData.data[i + 3] = maskData.data[i];\r\n } else {\r\n imgData.data[i + 3] = maskData.data[i];\r\n }\r\n }\r\n shCtx.putImageData(imgData, 0, 0);\r\n return maskData;\r\n}\r\nconst setCanvasDimensionsStyle = (canvas, dimensionPixels) => {\r\n const { width: widthPix, height: heightPix } = dimensionPixels;\r\n\r\n canvas.style.width = `${widthPix}px`;\r\n canvas.style.height = `${heightPix}px`;\r\n}\r\nconst setCanvasDimensions = (canvas, dimension, dimensionPixels) => {\r\n const { width, height } = dimension;\r\n const { width: widthPix, height: heightPix } = dimensionPixels;\r\n\r\n canvas.width = width\r\n canvas.height = height\r\n canvas.style.width = `${widthPix}px`;\r\n canvas.style.height = `${heightPix}px`;\r\n}","import React, { useState, forwardRef } from \"react\";\r\nfunction isTouchEvent(event) {\r\n return event.nativeEvent.type === \"touchstart\" || event.nativeEvent.type === \"touchmove\";\r\n}\r\nconst InputCanvas = (props, ref) => {\r\n const { onStart, onMove, onEnd, zIndex, pointerEvent, remapCoord, ...otherprops } = props;\r\n const [mouseDown, setMouseDown] = useState(false);\r\n\r\n const handleMouseDown = (e) => {\r\n const location = getlocation(e, ref.current.getBoundingClientRect());\r\n if (!location) return;\r\n setMouseDown(true);\r\n if (!onStart) return;\r\n onStart(location);\r\n };\r\n\r\n const handleMouseMove = (e) => {\r\n if (!mouseDown || !onMove) return;\r\n const location = getlocation(e, ref.current.getBoundingClientRect());\r\n if (!location) return;\r\n onMove(location);\r\n };\r\n const handleMouseUp = (e) => {\r\n if (e.cancelable) {\r\n e.stopPropagation();\r\n }\r\n setMouseDown(false);\r\n if (onEnd) onEnd();\r\n };\r\n\r\n function getlocation(event, rect) {\r\n // if (isTouchEvent(event)) {\r\n // console.log(event.nativeEvent.targetTouches[0], event.nativeEvent.touches[0]);\r\n // }\r\n const { clientX, clientY } = isTouchEvent(event) ? event.nativeEvent.targetTouches[0] : event;\r\n const { top, left, width, height } = rect;\r\n const xabs = clientX - left;\r\n const yabs = clientY - top;\r\n if (!remapCoord)\r\n return {\r\n x: xabs,\r\n y: yabs,\r\n };\r\n\r\n const { width: mapWidth, height: mapHeight } = remapCoord;\r\n const x = (mapWidth * xabs) / width;\r\n const y = (mapHeight * yabs) / height;\r\n return { x, y };\r\n }\r\n return (\r\n \r\n
}\r\n {roomData && designImageProps && (\r\n \r\n {\r\n onChange(e.target.value);\r\n setValue(e.target.value);\r\n }}\r\n >\r\n {dropdownItems &&\r\n dropdownItems.map((cat, index) => (\r\n \r\n ))}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AtDropdown;\r\n","// Load the required clients and packages\r\nimport { CognitoIdentityClient } from \"@aws-sdk/client-cognito-identity\"\r\nimport { fromCognitoIdentityPool } from \"@aws-sdk/credential-provider-cognito-identity\"\r\nimport { S3Client, PutObjectCommand, ListObjectsCommand, DeleteObjectCommand, DeleteObjectsCommand } from \"@aws-sdk/client-s3\";\r\n\r\n// Set the AWS Region\r\nconst REGION = \"us-east-1\"; //REGION\r\n\r\n// Initialize the Amazon Cognito credentials provider\r\nconst s3 = new S3Client({\r\n region: REGION,\r\n credentials: fromCognitoIdentityPool({\r\n client: new CognitoIdentityClient({ region: REGION }),\r\n identityPoolId: \"us-east-1:525b68be-bd75-429c-9f72-1e262ecd82a4\", // IDENTITY_POOL_ID\r\n }),\r\n});\r\n\r\nconst albumBucketName = \"virtualrugstudio\"; //BUCKET_NAME\r\n\r\nconst hasAlbum = async (name) => {\r\n if (!name) return false;\r\n try {\r\n const data = await s3.send(\r\n new ListObjectsCommand({ Delimiter: \"/\", Bucket: albumBucketName })\r\n );\r\n\r\n if (data.CommonPrefixes === undefined) {\r\n console.log(\"no albums found\");\r\n return false;\r\n } else {\r\n var albums = data.CommonPrefixes.map(function (commonPrefix) {\r\n var prefix = commonPrefix.Prefix;\r\n var albumName = decodeURIComponent(prefix.replace(\"/\", \"\"));\r\n return albumName;\r\n });\r\n return albums.includes(name);\r\n }\r\n } catch (err) {\r\n return console.log(\"There was an error listing your albums: \" + err.message);\r\n }\r\n};\r\n\r\nexport const viewAlbum = async (albumName) => {\r\n const albumPhotosKey = encodeURIComponent(albumName) + \"/\";\r\n try {\r\n const data = await s3.send(\r\n new ListObjectsCommand({\r\n Prefix: albumPhotosKey,\r\n Bucket: albumBucketName,\r\n })\r\n );\r\n if (!data?.Contents?.length > 1) { //the first content is the album folder itself\r\n console.log(\"You don't have any photos in this album.\");\r\n } else {\r\n const href = \"https://s3.\" + REGION + \".amazonaws.com/\";\r\n const bucketUrl = href + albumBucketName + \"/\";\r\n\r\n const photos = data.Contents.filter(function (photo) {\r\n return photo.Key !== albumPhotosKey;\r\n }).map(function (photo) {\r\n const photoKey = photo.Key;\r\n const photoUrl = bucketUrl + photoKey;\r\n return photoUrl;\r\n });\r\n return photos;\r\n }\r\n } catch (err) {\r\n console.log(\"There was an error viewing your album: \" + err.message);\r\n return;\r\n }\r\n};\r\n\r\n\r\n// Create an album in the bucket\r\nconst createAlbum = async (albumName) => {\r\n albumName = albumName.trim();\r\n if (!albumName) {\r\n return console.log(\"Album names must contain at least one non-space character.\");\r\n }\r\n if (albumName.indexOf(\"/\") !== -1) {\r\n return console.log(\"Album names cannot contain slashes.\");\r\n }\r\n var albumKey = encodeURIComponent(albumName);\r\n try {\r\n const key = albumKey + \"/\";\r\n const params = { Bucket: albumBucketName, Key: key };\r\n const data = await s3.send(new PutObjectCommand(params));\r\n console.log(\"Successfully created album.\");\r\n } catch (err) {\r\n return console.log(\"There was an error creating your album: \" + err.message);\r\n }\r\n};\r\n\r\n\r\n// Add a photo to an album\r\nexport const addPhoto = async ({ albumName, file, deleteExistingAlbum = false }) => {\r\n try {\r\n const albumExists = await hasAlbum(albumName);\r\n if (albumExists) {\r\n if (deleteExistingAlbum) {\r\n await deleteAlbum({albumName,deleteObjectsOnly:true});\r\n }\r\n }\r\n else {\r\n await createAlbum(albumName);\r\n }\r\n\r\n const albumPhotosKey = encodeURIComponent(albumName) + \"/\";\r\n const fileName = file.name;\r\n const photoKey = albumPhotosKey + fileName;\r\n const uploadParams = {\r\n Bucket: albumBucketName,\r\n Key: photoKey,\r\n Body: file\r\n };\r\n try {\r\n const data = await s3.send(new PutObjectCommand(uploadParams));\r\n console.log(\"Successfully uploaded photo.\");\r\n\r\n const href = \"https://s3.\" + REGION + \".amazonaws.com/\";\r\n const bucketUrl = href + albumBucketName + \"/\";\r\n const photoUrl = bucketUrl + photoKey;\r\n return photoUrl;\r\n } catch (err) {\r\n return console.log(\"There was an error uploading your photo: \", err.message);\r\n }\r\n } catch (err) {\r\n if (!file) {\r\n return console.log(\"Choose a file to upload first.\");\r\n }\r\n }\r\n};\r\n\r\nconst deleteAlbum = async ({ albumName, deleteObjectsOnly = false }) => {\r\n //deleteObjectsOnly = true , only deletes the album contents not the album folder itself\r\n //deleteObjectsOnly = false , deletes the whole album along with the folder\r\n const albumKey = encodeURIComponent(albumName) + \"/\";\r\n try {\r\n const params = { Bucket: albumBucketName, Prefix: albumKey };\r\n const data = await s3.send(new ListObjectsCommand(params));\r\n const objects = data.Contents.filter(function (object) {\r\n return !deleteObjectsOnly || (object.Key !== albumKey);\r\n }).map(function (object) {\r\n return { Key: object.Key };\r\n });\r\n if (!objects?.length) return;\r\n try {\r\n const params = {\r\n Bucket: albumBucketName,\r\n Delete: { Objects: objects },\r\n Quiet: true,\r\n };\r\n const data = await s3.send(new DeleteObjectsCommand(params));\r\n return console.log(\"Successfully deleted album.\");\r\n } catch (err) {\r\n return console.log(\"There was an error deleting your album: \", err.message);\r\n }\r\n } catch (err) {\r\n return console.log(\"There was an error deleting your album1: \", err.message);\r\n }\r\n};\r\n\r\n\r\n","import axios from \"axios\";\r\nimport convert from \"convert-units\";\r\nimport pako from \"pako\";\r\n\r\nconst fileApiUrl = 'https://v3.explorug.com/managefiles.aspx';\r\n\r\nfunction bytesToBase64(bytes) {\r\n var binary = \"\";\r\n var len = bytes.byteLength;\r\n for (var i = 0; i < len; i++) {\r\n binary += String.fromCharCode(bytes[i]);\r\n }\r\n return window.btoa(binary);\r\n}\r\nconst comperessJSON = (colors) => bytesToBase64(pako.deflate(JSON.stringify(colors), { to: \"string\" }));\r\n\r\n\r\n\r\nexport const renameFolder = async ({ key, oldpath, newfoldername }) => {\r\n let data = new FormData();\r\n data.append(\"key\", key);\r\n data.append(\"action\", \"renamefolder\");\r\n data.append(\"newfoldername\", newfoldername);\r\n data.append(\"oldpath\", oldpath);\r\n\r\n try {\r\n const res = await axios.post(fileApiUrl, data);\r\n return res.data === \"Success\";\r\n } catch (err) {\r\n return false;\r\n }\r\n};\r\nexport const renameFile = async ({ key, oldfile, newfilename }) => {\r\n let data = new FormData();\r\n data.append(\"key\", key);\r\n data.append(\"action\", \"renamefile\");\r\n data.append(\"newfilename\", newfilename);\r\n data.append(\"oldfile\", oldfile);\r\n\r\n try {\r\n const res = await axios.post(fileApiUrl, data);\r\n return res.data === \"Success\";\r\n } catch (err) {\r\n return false;\r\n }\r\n};\r\nexport const addFolder = async ({ key, path }) => {\r\n let data = new FormData();\r\n data.append(\"key\", key);\r\n data.append(\"action\", \"addfolder\");\r\n data.append(\"path\", path);\r\n try {\r\n const res = await axios.post(fileApiUrl, data);\r\n return res.data === \"Success\";\r\n } catch (err) {\r\n return false;\r\n }\r\n};\r\n\r\nexport const deletefile = async ({ key, file }) => {\r\n let data = new FormData();\r\n data.append(\"key\", key);\r\n data.append(\"action\", \"deletefile\");\r\n data.append(\"file\", file);\r\n try {\r\n const res = await axios.post(fileApiUrl, data);\r\n return res.data === \"Success\";\r\n } catch (err) {\r\n return false;\r\n }\r\n};\r\nexport const deleteFolder = async ({ key, path }) => {\r\n let data = new FormData();\r\n data.append(\"key\", key);\r\n data.append(\"action\", \"deletefolder\");\r\n data.append(\"path\", path);\r\n try {\r\n const res = await axios.post(fileApiUrl, data);\r\n return res.data === \"Success\";\r\n } catch (err) {\r\n return false;\r\n }\r\n};\r\n\r\nexport const uploadFile = async ({ key, file, path, width, length, forceUnit = \"\" }) => {\r\n let newWid = width;\r\n let newLgt = length;\r\n let data = new FormData();\r\n data.append(\"key\", key);\r\n data.append(\"action\", \"uploadfile\");\r\n data.append(\"file\", file);\r\n data.append(\"path\", path);\r\n if (forceUnit !== \"\" && forceUnit === \"in\") {\r\n newWid = newWid * 2.54;\r\n newLgt = newLgt * 2.54;\r\n }\r\n if (width && length) {\r\n data.append(\"width\", newWid);\r\n data.append(\"length\", newLgt);\r\n }\r\n try {\r\n const res = await axios.post(fileApiUrl, data);\r\n return res.data === \"Success\";\r\n } catch (err) {\r\n return false;\r\n }\r\n};\r\n\r\nexport const moveFile = async ({ key, oldfile, newpath }) => {\r\n let data = new FormData();\r\n data.append(\"key\", key);\r\n data.append(\"action\", \"movefile\");\r\n data.append(\"oldfile\", oldfile);\r\n data.append(\"newpath\", newpath);\r\n try {\r\n const res = await axios.post(fileApiUrl, data);\r\n return res.data === \"Success\";\r\n } catch (err) {\r\n return false;\r\n }\r\n};\r\n//TODO: check success\r\nexport const copyFileList = async ({ key, fileMap }) => {\r\n let data = new FormData();\r\n data.append(\"key\", key);\r\n data.append(\"action\", \"copyfiles\");\r\n data.append(\"filemap\", JSON.stringify(fileMap));\r\n try {\r\n const res = await axios.post(fileApiUrl, data);\r\n return true;\r\n } catch (err) {\r\n return false;\r\n }\r\n};\r\nexport const moveFileList = async ({ key, fileMap }) => {\r\n let data = new FormData();\r\n data.append(\"key\", key);\r\n data.append(\"action\", \"movefiles\");\r\n data.append(\"filemap\", JSON.stringify(fileMap));\r\n try {\r\n const res = await axios.post(fileApiUrl, data);\r\n return true;\r\n } catch (err) {\r\n return false;\r\n }\r\n};\r\nexport const copyFile = async ({ key, oldfile, newpath }) => {\r\n let data = new FormData();\r\n data.append(\"key\", key);\r\n data.append(\"action\", \"copyfile\");\r\n data.append(\"oldfile\", oldfile);\r\n data.append(\"newpath\", newpath);\r\n try {\r\n const res = await axios.post(fileApiUrl, data);\r\n return res.data === \"Success\";\r\n } catch (err) {\r\n return false;\r\n }\r\n};\r\nexport const setFileOrder = async ({ key, fileOrder, path }) => {\r\n // return true;\r\n let data = new FormData();\r\n data.append(\"key\", key);\r\n data.append(\"action\", \"addfileorder\");\r\n data.append(\"order\", JSON.stringify(fileOrder));\r\n data.append(\"path\", path);\r\n try {\r\n const res = await axios.post(fileApiUrl, data);\r\n return res.data === \"Success\";\r\n } catch (err) {\r\n return false;\r\n }\r\n};\r\nexport const changeDesignDims = async ({ key, file, physicalWidth, physicalHeight, unit }) => {\r\n const width = convert(physicalWidth)\r\n .from(unit)\r\n .to(\"cm\");\r\n const height = convert(physicalHeight)\r\n .from(unit)\r\n .to(\"cm\");\r\n let data = new FormData();\r\n data.append(\"key\", key);\r\n data.append(\"action\", \"resize\");\r\n data.append(\"width\", width);\r\n data.append(\"length\", height);\r\n data.append(\"file\", file);\r\n try {\r\n const res = await axios.post(fileApiUrl, data);\r\n return res.data === \"Success\";\r\n } catch (err) {\r\n return false;\r\n }\r\n};\r\nexport const addFolderInfo = async ({ key, path, info }) => {\r\n let data = new FormData();\r\n data.append(\"key\", key);\r\n data.append(\"action\", \"addfolderinfo\");\r\n data.append(\"path\", path);\r\n data.append(\"info\", comperessJSON(info));\r\n try {\r\n const res = await axios.post(fileApiUrl, data);\r\n return res.data === \"Success\";\r\n } catch (err) {\r\n return false;\r\n }\r\n};","import { Classes, Overlay } from \"@blueprintjs/core\";\r\nimport React from \"react\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\n\r\nconst AlertWarning = props => {\r\n const { message, show, handleClose } = props;\r\n\r\n return (\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default AlertWarning;\r\n","import React, { useEffect, useRef, useState, useCallback } from \"react\";\r\n// import ReactDOM from \"react-dom\";\r\nimport { Overlay, H5, H2, H4, H6, H3, Tooltip } from \"@blueprintjs/core\";\r\nimport { PayPalScriptProvider, PayPalButtons, FUNDING } from \"@paypal/react-paypal-js\";\r\nimport AtIcon from \"../../atoms/AtIcon\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\nimport { AtSpinner } from \"../../atoms/AtSpinner\";\r\nimport AtDialog from \"../../molecules/AtDialog\";\r\nimport loadImage from \"blueimp-load-image\";\r\nimport UploadPreview from \"./../../../UploadPreview/App\";\r\nimport {\r\n roomConfigActions,\r\n useDispatchRoomConfig\r\n} from \"../../IllustrationView/roomconfig.reducer\";\r\nimport HttpClient from \"../../../api/httpClient\";\r\nimport AtDropdown from \"../../atoms/AtDropdown\";\r\nimport { addPhoto } from \"./aws-utils\";\r\nimport { addFolder, changeDesignDims, moveFile, uploadFile } from \"../../../api/filemanagerapi\";\r\nimport AppProvider from \"../../../api/appProvider\";\r\nimport { getExtension, getFilenameWithoutExt } from \"../../../utils/utils\";\r\nimport { createCanvas } from \"../../../utils/canvasutils\";\r\nimport AlertWarning from \"../AlertWarning\";\r\nimport { designDetailActions, useDispatchDesignDetail } from \"../../../reducers/designdetails.reducer\";\r\nimport { useDebounce } from \"use-debounce/lib\";\r\nimport { isRunner, unsupportedDesign } from \"../VpsStage\";\r\nimport { useDispatchDesignList, designListActions as actions, } from \"../../../reducers/designstree.reducer\";\r\n\r\nconst paymentAmount = 59;\r\n\r\nconst tryTimes = 1;\r\n\r\nconst paymentStatusEnum = {\r\n SUCCESS: \"SUCCESS\",\r\n FAILED: \"FAILED\",\r\n PROCESSING: \"PROCESSING\"\r\n};\r\n\r\nconst units = [\"inches\", \"cms\"];\r\nconst unitFactor = { \"inches\": 1 / 2.54, \"cms\": 2.54 };\r\nconst unitAbbr = { \"inches\": \"in\", \"cms\": \"cm\" };\r\nconst defaultUnitIndex = 0;\r\n\r\nconst pileunits = [\"mm\", \"cms\"];\r\nconst defaultPileUnitIndex = 0;\r\n\r\nconst maxCarpetDims = {\r\n inches: 200,\r\n cms: 500\r\n}\r\n\r\nexport const nameSeparator = \"_~_\";\r\n\r\nlet paymentWindow = null;\r\n\r\n// let PayPalButton = window.paypal?.Buttons?.driver(\"react\", { React, ReactDOM });\r\n// window.opener.postMessage('success', \"*\");\r\n\r\nconst previewIframeBaseUrl = `${window.location.origin}/modules/uploadpreview`;\r\n// const previewIframeBaseUrl = `http://localhost:3000/`;\r\n// const previewIframeBaseUrl = `http://localhost:3000/`;\r\n\r\nfunction hasTransparentPixel(data) {\r\n let isTransparent = false;\r\n\r\n for (let index = 0; index < data.length; index += 4) {\r\n\r\n if (data[index + 3] === 0) {\r\n isTransparent = true;\r\n break;\r\n }\r\n }\r\n return isTransparent;\r\n}\r\n\r\nfunction countPixels(data) {\r\n const colorCounts = {};\r\n let count = 0;\r\n let colorSeparated = true;\r\n for (let index = 0; index < data.length; index += 4) {\r\n const rgba = data[index] + \",\" + data[index + 1] + \",\" + data[index + 2] + \",\" + data[index + 3];\r\n if (!colorCounts[rgba]) {\r\n colorCounts[rgba] = 1;\r\n count++;\r\n }\r\n if (count >= 100) {\r\n colorSeparated = false;\r\n break;\r\n }\r\n }\r\n return colorSeparated;\r\n}\r\n\r\nconst toFixed = (num) => {\r\n num = Number(num);\r\n let returnval = num;\r\n if (Math.trunc(num) === num) returnval = Number(num);\r\n else returnval = Number(num.toFixed(2));\r\n return returnval;\r\n}\r\n\r\nconst estimateRugPhotoDims = (canvas) => {\r\n let maxW = 10 * 12;\r\n let maxH = 16 * 12;\r\n let physicalW = Math.min(canvas.width / 10, maxW);\r\n let physicalH = physicalW * canvas.height / canvas.width;\r\n if (physicalH > maxH) {\r\n physicalH = maxH;\r\n physicalW = physicalH * canvas.width / canvas.height;\r\n }\r\n return ({ width: physicalW, height: physicalH })\r\n}\r\n\r\nconst UploadPlatform = props => {\r\n const { show, handleClose, editDesign } = props;\r\n const [eFile, seteFile] = useState(null);\r\n const [uploadedDesign, setuploadedDesign] = useState(null);\r\n const [showUnsupportedDisclaimer, setshowUnsupportedDisclaimer] = useState(false); //false , 1 for irregular , 2 for runner\r\n const [showPngToJpegDisclaimer, setshowPngToJpegDisclaimer] = useState(false);\r\n const [showJpegDisclaimer, setshowJpegDisclaimer] = useState(false);\r\n const [draggingFile, setdraggingFile] = useState(0);// 0 : none, 1: left input zone, 2: right preview drop zone\r\n const [alertMessage, setalertMessage] = useState(null);\r\n const [token, settoken] = useState('');\r\n const [useToken, setuseToken] = useState(false);\r\n const [tokenMsg, settokenMsg] = useState({ status: null, msg: null });\r\n const [progressPercent, setprogressPercent] = useState(-1);\r\n const [customDesignDetails, setcustomDesignDetails] = useState({\r\n w: 96,\r\n h: 120,\r\n kl: 1,\r\n unit: units[defaultUnitIndex],\r\n ph: 6,\r\n punit: pileunits[defaultPileUnitIndex]\r\n });\r\n const [debouncedDesignDetails] = useDebounce(customDesignDetails, 100);\r\n const [previewRendering, setpreviewRendering] = useState(false);\r\n const [designUploadSuccess, setdesignUploadSuccess] = useState(false);\r\n const [designFinalUploading, setdesignFinalUploading] = useState(null);\r\n const dispatchRoomConfig = useDispatchRoomConfig();\r\n const dispatchDesignDetails = useDispatchDesignDetail();\r\n const dispatch = useDispatchDesignList();\r\n\r\n const inputRef = useRef(null);\r\n\r\n const validImageTypes = ['image/jpeg'];\r\n const validcarpetTypes = ['png', 'ctfx'];\r\n\r\n const reset = (resetdesign = true) => {\r\n if (resetdesign)\r\n setuploadedDesign(null);\r\n else if (uploadedDesign?.url) {\r\n setuploadedDesign({ file: uploadedDesign.file });\r\n }\r\n setdesignUploadSuccess(false);\r\n setdesignFinalUploading(null);\r\n setprogressPercent(-1);\r\n settokenMsg({ status: null, msg: null });\r\n setuseToken(false);\r\n settoken('');\r\n setalertMessage(null);\r\n setshowPngToJpegDisclaimer(false);\r\n setshowJpegDisclaimer(false);\r\n setshowUnsupportedDisclaimer(false);\r\n }\r\n\r\n useEffect(() => {\r\n if (!show) {\r\n seteFile(null);\r\n reset();\r\n }\r\n }, [show])\r\n\r\n useEffect(() => {\r\n if (!editDesign?.id) {\r\n reset();\r\n return;\r\n }\r\n let designDetails = editDesign;\r\n\r\n (async () => {\r\n reset();\r\n\r\n setprogressPercent(30);\r\n if (!designDetails) return;\r\n const keyType = designDetails.isJPEG ? AppProvider.keys.jpeg : AppProvider.keys.ctf;\r\n AppProvider.setActiveKey(keyType, [AppProvider.keyScopes.design]);\r\n let canvas;\r\n if (designDetails.isJPEG) {\r\n canvas = await AppProvider.getRenderedDesign({ designDetails: designDetails.Props, fullpath: designDetails.fullpath, zoom: 1 });\r\n }\r\n else {\r\n canvas = await AppProvider.getRenderedDesign({ designDetails: designDetails.Props, fullpath: designDetails.fullpath, zoom: 2 });\r\n }\r\n\r\n if (!designDetails) return;\r\n setprogressPercent(70);\r\n const isTransparent = designDetails.Props.IsIrregular;\r\n if (isTransparent)\r\n setshowUnsupportedDisclaimer(unsupportedDesign.IRREGULAR);\r\n canvas.toBlob(function (blob) {\r\n if (!designDetails) return;\r\n const url = URL.createObjectURL(blob);\r\n setprogressPercent(100);\r\n setcustomDesignDetails({\r\n ...customDesignDetails,\r\n w: toFixed(designDetails.Props.PhysicalWidth),\r\n h: toFixed(designDetails.Props.PhysicalHeight),\r\n kl: designDetails.Props.KLRatio,\r\n unit: designDetails.Props.Unit === \"in\" ? units[0] : units[1]\r\n });\r\n setTimeout(() => {\r\n setuploadedDesign({ url: url, name: designDetails.label, file: new File([blob], designDetails.label), uploadedPath: designDetails.fullpath });\r\n }, 500);\r\n AppProvider.setActiveKey(null, null, true); //restoring previous key\r\n });\r\n })()\r\n\r\n\r\n return () => {\r\n designDetails = null;\r\n }\r\n\r\n }, [editDesign])\r\n\r\n useEffect(() => {\r\n if (!uploadedDesign?.url || !debouncedDesignDetails?.w || !debouncedDesignDetails?.h) {\r\n resetPreviewDesign();\r\n return;\r\n }\r\n let msg = {\r\n design: uploadedDesign.url,\r\n width: `${debouncedDesignDetails.w * (debouncedDesignDetails.unit === \"cms\" ? 1 : 2.54)}`,\r\n height: `${debouncedDesignDetails.h * (debouncedDesignDetails.unit === \"cms\" ? 1 : 2.54)}`\r\n }\r\n let iframeEl = document.getElementById(\"previewIframe\");\r\n if (iframeEl) {\r\n iframeEl.contentWindow.postMessage(msg, \"*\");\r\n }\r\n }, [uploadedDesign, debouncedDesignDetails])\r\n\r\n const resetPreviewDesign = () => {\r\n let iframeEl = document.getElementById(\"previewIframe\");\r\n if (!iframeEl) return;\r\n iframeEl.contentWindow.postMessage({ reset: true }, \"*\");\r\n }\r\n\r\n const triggerInput = () => {\r\n if (inputRef?.current)\r\n inputRef.current.click();\r\n };\r\n\r\n const checkTempJpegUpload = async (file) => {\r\n const keyType = AppProvider.keys.jpeg;\r\n AppProvider.setActiveKey(keyType, [AppProvider.keyScopes.design]);\r\n const albumPhotosKey = encodeURIComponent(window.userEmail?.replace(\"@\", \"\") || \"default\");\r\n await addFolder(\r\n {\r\n key: AppProvider.getApiKey(AppProvider.keyScopes.design),\r\n path: \"/Designs/Internal/Uploads/Temp/\" + albumPhotosKey,\r\n }\r\n )\r\n const res = await tryUpload(uploadFile,\r\n {\r\n key: AppProvider.getApiKey(AppProvider.keyScopes.design),\r\n file: file,\r\n path: \"/Designs/Internal/Uploads/Temp/\" + albumPhotosKey,\r\n }\r\n , tryTimes);\r\n\r\n AppProvider.setActiveKey(null, null, true); // set previous key\r\n if (!res) {\r\n setalertMessage(\"Could not upload the file. Please check your internet connection and that the name of the uploaded file only consists of english characters or numbers.\");\r\n return false;\r\n }\r\n else {\r\n return true;\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n if (!eFile) return;\r\n let uploadedImage = eFile;\r\n\r\n const fileType = uploadedImage['type'];\r\n const fileExt = getExtension(uploadedImage.name);\r\n\r\n if (!validImageTypes.includes(fileType) && !validcarpetTypes.includes(fileExt.toLowerCase())) {\r\n setalertMessage(\"Sorry, we only support .JPG, .PNG, or .CTFX files. Please refer to the upload guide on the left panel for more information.\");\r\n return;\r\n }\r\n if (uploadedImage.size * 0.000001 > 15) {\r\n setalertMessage(\"Sorry, we only support files up to 15MB. Please try uploading another file.\");\r\n return;\r\n }\r\n\r\n (async () => {\r\n reset(false);\r\n let fileNameIndex = 1;\r\n let uploadedImageNameLabel = getFilenameWithoutExt(uploadedImage.name);\r\n let uploadName = uploadedImageNameLabel;\r\n if (uploadName.length > 20) uploadName = uploadedImageNameLabel.substring(0, 20);\r\n\r\n const iter = (checkname, index) => {\r\n if (window.usedFileNames?.length && window.usedFileNames.includes(checkname)) {\r\n uploadName = `${uploadedImageNameLabel}_${index}`;\r\n iter(uploadName, index + 1);\r\n }\r\n else {\r\n let newuploadedImage = new File([uploadedImage], uploadName + `${nameSeparator}${Date.now()}` + \".\" + fileExt, { type: fileType });\r\n uploadedImage = newuploadedImage;\r\n window.usedFileNames.push(uploadName);\r\n }\r\n };\r\n if (!uploadedImage) return;\r\n iter(uploadName, fileNameIndex);\r\n\r\n if (validImageTypes.includes(fileType)) {\r\n setprogressPercent(30);\r\n if (!uploadedImage) return;\r\n let file = uploadedImage;\r\n let canUpload = await checkTempJpegUpload(file);\r\n if (!canUpload) return;\r\n loadImage(\r\n uploadedImage,\r\n async canvas1 => {\r\n let canvas = canvas1;\r\n if (!uploadedImage) return;\r\n if (canvas1.width > canvas1.height) {\r\n // let canvas = createCanvas(canvas1.height, canvas1.width);\r\n // canvas.drawImage\r\n await new Promise(resolve => {\r\n canvas = document.createElement(\"canvas\");\r\n var ctx = canvas.getContext(\"2d\");\r\n const image = canvas1;\r\n const degrees = 90;\r\n if (degrees == 90 || degrees == 270) {\r\n canvas.width = image.height;\r\n canvas.height = image.width;\r\n } else {\r\n canvas.width = image.width;\r\n canvas.height = image.height;\r\n }\r\n if (degrees == 90 || degrees == 270) {\r\n ctx.translate(image.height / 2, image.width / 2);\r\n } else {\r\n ctx.translate(image.width / 2, image.height / 2);\r\n }\r\n ctx.rotate(degrees * Math.PI / 180);\r\n ctx.drawImage(image, -image.width / 2, -image.height / 2);\r\n canvas.toBlob(blob => {\r\n file = new File([blob], uploadedImage.name, {\r\n type: uploadedImage.type,\r\n });\r\n resolve();\r\n }, uploadedImage.type)\r\n\r\n // loadImage(\r\n // uploadedImage,\r\n // async canvas2 => {\r\n // canvas = canvas2;\r\n // canvas.toBlob(blob => {\r\n // file = new File([blob], uploadedImage.name);\r\n // resolve();\r\n // }, 'image/jpeg', 1)\r\n // }, {\r\n // canvas: true,\r\n // orientation: 6\r\n // });\r\n })\r\n }\r\n setprogressPercent(70);\r\n canvas.toBlob(function (blob) {\r\n if (!uploadedImage) return;\r\n const { width: physicalW, height: physicalH } = estimateRugPhotoDims(canvas);\r\n setcustomDesignDetails({\r\n ...customDesignDetails,\r\n w: toFixed(physicalW),\r\n h: toFixed(physicalH),\r\n unit: units[0]\r\n });\r\n var url = URL.createObjectURL(blob);\r\n setprogressPercent(100);\r\n setTimeout(() => {\r\n setshowJpegDisclaimer(true);\r\n setuploadedDesign({ url: url, name: uploadedImage.name, file: file, isJpeg: true });\r\n }, 500);\r\n });\r\n },\r\n {\r\n canvas: true\r\n }\r\n );\r\n }\r\n else {\r\n if (validcarpetTypes.includes(fileExt.toLowerCase())) {\r\n setprogressPercent(10);\r\n\r\n const uploadToTemp = async (uploadcanvas) => {\r\n let file = null;\r\n if (uploadcanvas) {\r\n await uploadcanvas.toBlob(function (blob) {\r\n file = new File([blob], uploadedImage.name, {\r\n type: uploadedImage.type,\r\n });\r\n })\r\n }\r\n else {\r\n file = uploadedImage;\r\n }\r\n const keyType = AppProvider.keys.ctf;\r\n if (!uploadedImage) return;\r\n AppProvider.setActiveKey(keyType, [AppProvider.keyScopes.design]);\r\n const albumPhotosKey = encodeURIComponent(window.userEmail?.replace(\"@\", \"\") || \"default\");\r\n await addFolder(\r\n {\r\n key: AppProvider.getApiKey(AppProvider.keyScopes.design),\r\n path: \"/Designs/Internal/Uploads/Temp/\" + albumPhotosKey,\r\n }\r\n )\r\n if (!uploadedImage) return;\r\n setprogressPercent(30);\r\n const res = await tryUpload(uploadFile,\r\n {\r\n key: AppProvider.getApiKey(AppProvider.keyScopes.design),\r\n file: file,\r\n path: \"/Designs/Internal/Uploads/Temp/\" + albumPhotosKey,\r\n }\r\n , tryTimes);\r\n if (!uploadedImage) return;\r\n setprogressPercent(50);\r\n if (!res) {\r\n setalertMessage(\"Could not upload the file. Please check your internet connection or if your file type is supported.\");\r\n return;\r\n }\r\n\r\n //to update the key since new design is uploaded\r\n await AppProvider.autoLogin({ keyType: keyType });\r\n\r\n const fullpath = \"Designs/Internal/Uploads/Temp/\"\r\n + albumPhotosKey + \"/\"\r\n + uploadedImage.name.replace(\".\" + fileExt, \".ctf\");\r\n\r\n const designDetails = await AppProvider.getDesignThumbnails({\r\n designs: [\r\n {\r\n fullpath: fullpath\r\n }]\r\n })\r\n if (!uploadedImage) return;\r\n setprogressPercent(50);\r\n const canvas = await AppProvider.getRenderedDesign({ designDetails: designDetails[0].Props, fullpath: fullpath, zoom: 2 });\r\n if (!uploadedImage) return;\r\n setprogressPercent(70);\r\n\r\n const isTransparent = designDetails[0].Props.IsIrregular;\r\n if (isTransparent)\r\n setshowUnsupportedDisclaimer(unsupportedDesign.IRREGULAR);\r\n\r\n canvas.toBlob(function (blob) {\r\n if (!uploadedImage) return;\r\n const url = URL.createObjectURL(blob);\r\n setprogressPercent(100);\r\n setcustomDesignDetails({\r\n ...customDesignDetails,\r\n w: toFixed(designDetails[0].Props.PhysicalWidth),\r\n h: toFixed(designDetails[0].Props.PhysicalHeight),\r\n kl: designDetails[0].Props.KLRatio,\r\n unit: designDetails[0].Props.Unit === \"in\" ? units[0] : units[1]\r\n });\r\n setTimeout(() => {\r\n setuploadedDesign({ url: url, name: uploadedImage.name, file: file, uploadedPath: fullpath });\r\n }, 500);\r\n AppProvider.setActiveKey(null, null, true); //restoring previous key\r\n });\r\n }\r\n\r\n if (fileType === 'image/png') {\r\n let file = uploadedImage;\r\n await loadImage(\r\n uploadedImage,\r\n async canvas1 => {\r\n let canvas = canvas1;\r\n if (!uploadedImage) return;\r\n let ctx = canvas.getContext(\"2d\");\r\n let ctxdata = ctx.getImageData(0, 0, canvas.width, canvas.height).data;\r\n let colorSeparated = countPixels(ctxdata);\r\n let isTransparent = hasTransparentPixel(ctxdata);\r\n if (isTransparent) {\r\n setshowUnsupportedDisclaimer(unsupportedDesign.IRREGULAR);\r\n }\r\n if (isTransparent && !colorSeparated) {\r\n setalertMessage(\"Irregular carpets are not supported in Virtual Rug Studio currently. Please try a different rug to continue.\");\r\n return;\r\n }\r\n await new Promise(resolve => {\r\n if (canvas1.width > canvas1.height) {\r\n\r\n canvas = document.createElement(\"canvas\");\r\n var ctx = canvas.getContext(\"2d\");\r\n const image = canvas1;\r\n const degrees = 90;\r\n if (degrees == 90 || degrees == 270) {\r\n canvas.width = image.height;\r\n canvas.height = image.width;\r\n } else {\r\n canvas.width = image.width;\r\n canvas.height = image.height;\r\n }\r\n if (degrees == 90 || degrees == 270) {\r\n ctx.translate(image.height / 2, image.width / 2);\r\n } else {\r\n ctx.translate(image.width / 2, image.height / 2);\r\n }\r\n ctx.rotate(degrees * Math.PI / 180);\r\n ctx.drawImage(image, -image.width / 2, -image.height / 2);\r\n }\r\n resolve();\r\n\r\n })\r\n setprogressPercent(20);\r\n\r\n if ((fileType === 'image/png') && !colorSeparated) {\r\n //treat as jpeg\r\n await canvas.toBlob(async (blob) => {\r\n let newuploadedImage = new File([uploadedImage], uploadedImage.name.replace(\".png\", \"\") + \".jpg\", { type: \"image/jpeg\" });\r\n uploadedImage = newuploadedImage;\r\n file = new File([blob], uploadedImage.name, {\r\n type: uploadedImage.type,\r\n });\r\n\r\n if (!uploadedImage) return;\r\n let canUpload = await checkTempJpegUpload(file);\r\n if (!canUpload) return;\r\n setshowPngToJpegDisclaimer(true);\r\n setshowJpegDisclaimer(true);\r\n const { width: physicalW, height: physicalH } = estimateRugPhotoDims(canvas);\r\n setcustomDesignDetails({\r\n ...customDesignDetails,\r\n w: toFixed(physicalW),\r\n h: toFixed(physicalH),\r\n unit: units[0]\r\n });\r\n const url = URL.createObjectURL(file);\r\n setprogressPercent(100);\r\n setTimeout(() => {\r\n setuploadedDesign({ url: url, name: uploadedImage.name, file: file, isJpeg: true });\r\n }, 500);\r\n }, \"image/jpeg\");\r\n\r\n\r\n } else {\r\n uploadToTemp(canvas);\r\n }\r\n },\r\n {\r\n canvas: true\r\n }\r\n )\r\n }\r\n else {\r\n uploadToTemp();\r\n }\r\n\r\n\r\n\r\n }\r\n\r\n }\r\n })()\r\n\r\n return () => {\r\n uploadedImage = null;\r\n }\r\n }, [eFile])\r\n\r\n useEffect(() => {\r\n if (progressPercent === 100) {\r\n setTimeout(() => {\r\n setprogressPercent(-1);\r\n }, 500);\r\n }\r\n\r\n }, [progressPercent])\r\n\r\n useEffect(() => {\r\n if (!customDesignDetails || showUnsupportedDisclaimer === unsupportedDesign.IRREGULAR) return;\r\n const isrunner = isRunner({ width: customDesignDetails.w, height: customDesignDetails.h });\r\n if (isrunner) setshowUnsupportedDisclaimer(unsupportedDesign.RUNNER);\r\n else if (showUnsupportedDisclaimer === unsupportedDesign.RUNNER) setshowUnsupportedDisclaimer(false);\r\n }, [customDesignDetails])\r\n\r\n const onInputChange = async (e) => {\r\n setprogressPercent(0);\r\n const files = e?.target?.files || e?.dataTransfer?.files;\r\n let uploadedImage = files[0];\r\n if (!uploadedImage) return;\r\n seteFile(uploadedImage);\r\n\r\n };\r\n\r\n\r\n const changeDesignDetails = (key, value) => {\r\n setcustomDesignDetails({ ...customDesignDetails, [key]: value });\r\n };\r\n\r\n const createOrder = (data, actions) => {\r\n return actions.order.create({\r\n purchase_units: [\r\n {\r\n amount: {\r\n value: paymentAmount\r\n }\r\n }\r\n ],\r\n style: {\r\n layout: \"horizontal\"\r\n }\r\n });\r\n };\r\n\r\n // const onEditSucess = async () => {\r\n // dispatchDesignDetails({\r\n // type: designDetailActions.SET_LOADING,\r\n // payload: true\r\n // });\r\n // const keyType = editDesign.isJPEG ? AppProvider.keys.jpeg : AppProvider.keys.ctf;\r\n // AppProvider.setActiveKey(keyType, [AppProvider.keyScopes.design]);\r\n // await changeDesignDims(\r\n // {\r\n // key: AppProvider.getApiKey(AppProvider.keyScopes.design),\r\n // file: uploadedDesign.uploadedPath,\r\n // physicalWidth: `${customDesignDetails.w * (customDesignDetails.unit === \"cms\" ? 1 : 2.54)}`,\r\n // physicalHeight: `${customDesignDetails.h * customDesignDetails.kl * (customDesignDetails.unit === \"cms\" ? 1 : 2.54)}`,\r\n // unit: \"cm\"\r\n // }\r\n // );\r\n // await AppProvider.clearCache({ mode: \"designs\", files: [uploadedDesign.uploadedPath] });\r\n // const res = await moveFile(\r\n // {\r\n // key: AppProvider.getApiKey(AppProvider.keyScopes.design),\r\n // oldfile: uploadedDesign.uploadedPath,\r\n // newpath: \"/Designs/Internal/Uploads/\" + albumPhotosKey,\r\n // }\r\n // );\r\n // await AppProvider.autoLogin({ keyType: keyType });\r\n\r\n // window.getUploadedFile(uploadedDesign.file.name, uploadedDesign.file.type === \"image/jpeg\");\r\n // setdesignUploadSuccess(true);\r\n // }\r\n\r\n const tryUpload = async (func, args, n, timeout = 0) => {\r\n const res = await func(args);\r\n if (!res) {\r\n if (--n > 0) {\r\n if (timeout > 0) {\r\n setTimeout(async () => {\r\n await tryUpload(func, args, n, timeout);\r\n }, timeout);\r\n }\r\n else {\r\n await tryUpload(func, args, n, timeout);\r\n }\r\n }\r\n }\r\n return res;\r\n }\r\n\r\n const onPaymentSuccess = async () => {\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_LOADING,\r\n payload: true\r\n });\r\n const keyType = uploadedDesign.isJpeg ? AppProvider.keys.jpeg : AppProvider.keys.ctf;\r\n AppProvider.setActiveKey(keyType, [AppProvider.keyScopes.design]);\r\n const albumPhotosKey = encodeURIComponent(window.userEmail?.replace(\"@\", \"\") || \"default\");\r\n await addFolder(\r\n {\r\n key: AppProvider.getApiKey(AppProvider.keyScopes.design),\r\n path: \"/Designs/Internal/Uploads/\" + albumPhotosKey,\r\n }\r\n )\r\n\r\n let file = uploadedDesign.file;\r\n let width = customDesignDetails.w * (customDesignDetails.unit === \"cms\" ? 1 : 2.54);\r\n let height = customDesignDetails.h * (customDesignDetails.unit === \"cms\" ? 1 : 2.54);\r\n const isCTFX = getExtension(file.name) === validcarpetTypes[1];\r\n let isFileChanged = false;\r\n\r\n if (!isCTFX && customDesignDetails.w > customDesignDetails.h) {\r\n await new Promise(resolve => {\r\n loadImage(\r\n uploadedDesign.file,\r\n async canvas1 => {\r\n const canvas = document.createElement(\"canvas\");\r\n const ctx = canvas.getContext(\"2d\");\r\n const image = canvas1;\r\n const degrees = 270;\r\n if (degrees == 90 || degrees == 270) {\r\n canvas.width = image.height;\r\n canvas.height = image.width;\r\n } else {\r\n canvas.width = image.width;\r\n canvas.height = image.height;\r\n }\r\n if (degrees == 90 || degrees == 270) {\r\n ctx.translate(image.height / 2, image.width / 2);\r\n } else {\r\n ctx.translate(image.width / 2, image.height / 2);\r\n }\r\n ctx.rotate(degrees * Math.PI / 180);\r\n ctx.drawImage(image, -image.width / 2, -image.height / 2);\r\n canvas.toBlob(blob => {\r\n isFileChanged = true;\r\n file = new File([blob], uploadedDesign.name, {\r\n type: uploadedDesign.file.type,\r\n });\r\n resolve();\r\n }, uploadedDesign.file.type)\r\n }, {\r\n canvas: true\r\n });\r\n })\r\n }\r\n\r\n if (isFileChanged) {\r\n let res;\r\n if (uploadedDesign.isJpeg) {\r\n res = await tryUpload(uploadFile,\r\n {\r\n key: AppProvider.getApiKey(AppProvider.keyScopes.design),\r\n file: file,\r\n path: \"/Designs/Internal/Uploads/\" + albumPhotosKey,\r\n // width: width,\r\n // length: height\r\n }\r\n , tryTimes);\r\n }\r\n else {\r\n res = await tryUpload(uploadFile,\r\n {\r\n key: AppProvider.getApiKey(AppProvider.keyScopes.design),\r\n file: file,\r\n path: \"/Designs/Internal/Uploads/\" + albumPhotosKey\r\n }\r\n , tryTimes);\r\n }\r\n\r\n if (!res) {\r\n setalertMessage(\"Could not upload the file.\");\r\n settoken('');\r\n setdesignFinalUploading(null);\r\n settokenMsg({ status: null, msg: null });\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_LOADING,\r\n payload: false\r\n });\r\n return;\r\n }\r\n const fileExt = getExtension(uploadedDesign.name);\r\n const fullpath = \"Designs/Internal/Uploads/\"\r\n + albumPhotosKey + \"/\"\r\n + uploadedDesign.name.replace(\".\" + fileExt, uploadedDesign.isJpeg ? \".jpg\" : \".ctf\");\r\n // if (!uploadedDesign.isJpeg) {\r\n await changeDesignDims(\r\n {\r\n key: AppProvider.getApiKey(AppProvider.keyScopes.design),\r\n file: fullpath,\r\n physicalWidth: width,\r\n physicalHeight: height,\r\n unit: \"cm\"\r\n }\r\n );\r\n // }\r\n await AppProvider.clearCache({ mode: \"designs\", files: [fullpath] });\r\n }\r\n else if (!uploadedDesign.uploadedPath) {\r\n const res = await tryUpload(uploadFile,\r\n {\r\n key: AppProvider.getApiKey(AppProvider.keyScopes.design),\r\n file: file,\r\n path: \"/Designs/Internal/Uploads/\" + albumPhotosKey,\r\n width: width,\r\n length: height\r\n }\r\n , tryTimes);\r\n if (!res) {\r\n setalertMessage(\"Could not upload the file.\");\r\n settoken('');\r\n setdesignFinalUploading(null);\r\n settokenMsg({ status: null, msg: null });\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_LOADING,\r\n payload: false\r\n });\r\n return;\r\n }\r\n // await changeDesignDims(\r\n // {\r\n // key: AppProvider.getApiKey(AppProvider.keyScopes.design),\r\n // file: uploadedDesign.uploadedPath,\r\n // physicalWidth: `${customDesignDetails.w * (customDesignDetails.unit === \"cms\" ? 1 : 2.54)}`,\r\n // physicalHeight: `${customDesignDetails.h * customDesignDetails.kl * (customDesignDetails.unit === \"cms\" ? 1 : 2.54)}`,\r\n // unit: \"cm\"\r\n // }\r\n // );\r\n // await AppProvider.clearCache({ mode: \"designs\", files: [uploadedDesign.uploadedPath] });\r\n }\r\n else {\r\n await changeDesignDims(\r\n {\r\n key: AppProvider.getApiKey(AppProvider.keyScopes.design),\r\n file: uploadedDesign.uploadedPath,\r\n physicalWidth: `${customDesignDetails.w * (customDesignDetails.unit === \"cms\" ? 1 : 2.54)}`,\r\n physicalHeight: `${customDesignDetails.h * (uploadedDesign.isJpeg ? 1 : customDesignDetails.kl) * (customDesignDetails.unit === \"cms\" ? 1 : 2.54)}`,\r\n unit: \"cm\"\r\n }\r\n );\r\n await AppProvider.clearCache({ mode: \"designs\", files: [uploadedDesign.uploadedPath] });\r\n const res = await moveFile(\r\n {\r\n key: AppProvider.getApiKey(AppProvider.keyScopes.design),\r\n oldfile: uploadedDesign.uploadedPath,\r\n newpath: \"/Designs/Internal/Uploads/\" + albumPhotosKey,\r\n }\r\n );\r\n }\r\n\r\n //to update the key since new design is uploaded\r\n await AppProvider.autoLogin({ keyType: keyType });\r\n\r\n window.getUploadedFile(uploadedDesign.file.name, uploadedDesign.file.type === \"image/jpeg\");\r\n // const toCms = customDesignDetails.unit === \"cms\" ? 1 : 2.54;\r\n // dispatchRoomConfig({\r\n // type: roomConfigActions.SET_CUSTOM_DESIGN_URL,\r\n // payload: { url: uploadedDesign.url, physicalWidCms: customDesignDetails.w * toCms, physicalHGtCms: customDesignDetails.h * toCms }\r\n // });\r\n setdesignUploadSuccess(true);\r\n // handleClose();\r\n }\r\n\r\n const onApprove = (data, actions) => {\r\n return actions.order.capture().then(async function (orderData) {\r\n setdesignFinalUploading('paypal');\r\n onPaymentSuccess();\r\n });\r\n };\r\n\r\n const uploadToken = (e) => {\r\n e.preventDefault();\r\n if (tokenMsg.status === 2) return;\r\n if (!token || token === \"\") {\r\n settokenMsg({ status: 0, msg: \"Please enter your coupon in the field above.\" });\r\n setTimeout(() => {\r\n settokenMsg(tokenMsg => tokenMsg.status === 0 ? ({ status: null, msg: null }) : tokenMsg)\r\n }, 3000);\r\n return;\r\n }\r\n settokenMsg({ status: 2, msg: null }); //status 2 is for processing\r\n HttpClient.get(\r\n `https://alternative.com.np/atcurrency.php?couponid=${token}&amount=${paymentAmount}`,\r\n {}\r\n ).then(response => {\r\n if (response.data === \"success\") {\r\n settokenMsg({ status: 1, msg: \"Token applied successfully.\" });\r\n setdesignFinalUploading('token');\r\n onPaymentSuccess();\r\n }\r\n else {\r\n settokenMsg({ status: 0, msg: \"Invalid Token.\" });\r\n }\r\n }).catch(error => {\r\n settokenMsg({ status: 0, msg: \"Could not process token. Try again later.\" });\r\n });\r\n }\r\n\r\n const handlePreviewRendering = useCallback(value => {\r\n setpreviewRendering(value);\r\n }, []);\r\n\r\n const onDesignEdit = async () => {\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_LOADING,\r\n payload: true\r\n });\r\n setdesignFinalUploading('edit');\r\n const keyType = editDesign.isJPEG ? AppProvider.keys.jpeg : AppProvider.keys.ctf;\r\n AppProvider.setActiveKey(keyType, [AppProvider.keyScopes.design]);\r\n const newWid = customDesignDetails.w * (customDesignDetails.unit === \"cms\" ? 1 : 2.54);\r\n const newHgt = customDesignDetails.h * (editDesign.isJPEG ? 1 : customDesignDetails.kl) * (customDesignDetails.unit === \"cms\" ? 1 : 2.54);\r\n await changeDesignDims(\r\n {\r\n key: AppProvider.getApiKey(AppProvider.keyScopes.design),\r\n file: editDesign.fullpath,\r\n physicalWidth: Math.floor(newWid),\r\n physicalHeight: Math.floor(newHgt),\r\n unit: \"cm\"\r\n }\r\n );\r\n await AppProvider.clearCache({ mode: \"designs\", files: [editDesign.fullpath] });\r\n //to update the key since new design is uploaded\r\n await AppProvider.autoLogin({ keyType: keyType });\r\n\r\n const finish = async () => {\r\n const updatedDesign = await AppProvider.getDesignThumbnails({ designs: [editDesign] });\r\n dispatch({\r\n type: actions.UPDATE_SINGLE_FILE_PROP,\r\n payload: { ...editDesign, ...updatedDesign[0] }\r\n });\r\n dispatch({\r\n type: actions.SET_ACTIVE_NODE,\r\n payload: { ...editDesign, ...updatedDesign[0] }\r\n });\r\n setdesignUploadSuccess(true);\r\n }\r\n\r\n setTimeout(() => {\r\n finish();\r\n }, 1000);\r\n\r\n }\r\n\r\n return (\r\n <>\r\n\r\n \r\n {message}\r\n
\r\n \r\n
*/}\r\n\r\n \r\n
\r\n \r\n Please upload your design
\r\n\r\n {designUploadSuccess && <>\r\n
\r\n ) :\r\n <>\r\n \r\n handleClose()}> \r\n
\r\n \r\n }\r\n {!designUploadSuccess && (uploadedDesign?.file ? (\r\n {uploadedDesign.name.split(nameSeparator)[0]}
\r\nDesign uploaded successfully!
\r\n Your design is now ready.
\r\n You can view it in different settings available in the 'Shot Selection' menu.
\r\n \r\n
\r\n :\r\n \r\n }\r\n\r\n\r\n {uploadedDesign.file.name.split(nameSeparator)[0]}
\r\n {showUnsupportedDisclaimer &&\r\n {showUnsupportedDisclaimer === unsupportedDesign.IRREGULAR ?\r\n \"Irregular carpets are currently not supported in Virtual Rug Studio. Please try a different rug or change the dimensions to continue.\"\r\n : \"Runner carpets are currently not supported in Virtual Rug Studio. Please try a different rug or change the dimensions to continue.\"\r\n }\r\n
}\r\n {showPngToJpegDisclaimer && \r\n The .PNG file you uploaded has more than 100 colors and will be treated as a rug photo. setshowPngToJpegDisclaimer(false)}>Okay\r\n
}\r\n {showJpegDisclaimer && \r\n Please note that some illustrations do not support rug photos. setshowJpegDisclaimer(false)}>Okay\r\n
}\r\n {progressPercent > -1 ?\r\n \r\n {eFile &&
\r\n \r\n {\r\n seteFile(null);\r\n setprogressPercent(-1);\r\n }} />\r\n
}\r\n {eFile.name}
\r\n\r\n
\r\n Please specify the desired size of the rug
\r\n \r\n
\r\n\r\n {\r\n // (!showUnsupportedDisclaimer ||\r\n // (showUnsupportedDisclaimer !== unsupportedDesign.RUNNER)) &&\r\n (!showUnsupportedDisclaimer) &&\r\n (customDesignDetails.w <= maxCarpetDims[customDesignDetails.unit] &&\r\n customDesignDetails.h <= maxCarpetDims[customDesignDetails.unit])\r\n &&\r\n <>\r\n \r\n Width\r\n maxCarpetDims[customDesignDetails.unit]}\r\n position=\"bottom\"\r\n content={`Maximum ${maxCarpetDims[customDesignDetails.unit]} ${customDesignDetails.unit} allowed`}\r\n >\r\n changeDesignDetails(\"w\", toFixed(e.target.value))}\r\n >\r\n \r\n
\r\n \r\n Length\r\n maxCarpetDims[customDesignDetails.unit]}\r\n position=\"bottom\"\r\n content={`Maximum ${maxCarpetDims[customDesignDetails.unit]} ${customDesignDetails.unit} allowed`}\r\n >\r\n changeDesignDetails(\"h\", toFixed(e.target.value))}\r\n >\r\n \r\n
\r\n \r\n Unit\r\n {\r\n setcustomDesignDetails({\r\n ...customDesignDetails,\r\n \"unit\": units[val],\r\n \"w\": toFixed(customDesignDetails.w * unitFactor[units[val]]),\r\n \"h\": toFixed(customDesignDetails.h * unitFactor[units[val]]),\r\n });\r\n }}\r\n />\r\n
\r\n \r\n Please make sure that the uploaded design looks appropriate in this view.\r\n
\r\n \r\n You can then view and save this rug in the offered Virtual Studio settings, all for US ${paymentAmount} only.\r\n \r\n\r\n \r\n {designFinalUploading === 'paypal' ?\r\n { }}\r\n style={{ width: '150px !important', height: '25px', backgroundColor: \"var(--brand-primary)\", color: 'white' }}>\r\n {((tokenMsg.status === 2) || designFinalUploading === 'token') && \r\n :\r\n \r\n createOrder(data, actions)}\r\n onApprove={(data, actions) => onApprove(data, actions)} />\r\n \r\n\r\n }\r\n\r\n\r\n\r\n {/* {PayPalButton && createOrder(data, actions)}\r\n onApprove={(data, actions) => onApprove(data, actions)}\r\n />} */}\r\n setuploadedDesign(null)}> \r\n
\r\n Verifying
\r\n\r\n setuseToken(true)}>I have a Coupon Code\r\n
\r\n \r\n }\r\n {useToken &&\r\n <>\r\n \r\n \r\n\r\n
\r\n {tokenMsg?.msg &&\r\n {tokenMsg.msg}
}\r\n\r\n \r\n }\r\n \r\n
\r\n {progressPercent > -1 ? \"Uploading your design...\" : \"Please upload your design\"}
\r\n {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n setdraggingFile(1);\r\n }}\r\n onDragOver={(e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n setdraggingFile(1);\r\n }}\r\n onDrop={(e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n onInputChange(e);\r\n setdraggingFile(0);\r\n }}\r\n onDragExit={(e) => {\r\n setdraggingFile(0);\r\n }}\r\n onDragLeave={(e) => {\r\n setdraggingFile(0);\r\n }}\r\n onMouseLeave={(e) => {\r\n setdraggingFile(0);\r\n }}\r\n onClick={triggerInput}\r\n >\r\n {progressPercent < 0 && <>\r\n {\r\n e.stopPropagation();\r\n triggerInput(e)\r\n }}\r\n >\r\n
\r\n \r\n }\r\n \r\n \r\n Drop your design here\r\n {/* */}\r\n
\r\n }\r\n {progressPercent > -1 &&\r\n <>\r\n {eFile && \r\n {\r\n seteFile(null);\r\n setprogressPercent(-1);\r\n }} />\r\n
}\r\n {eFile.name}
\r\n\r\n
\r\n \r\n Supported files:\r\n
\r\n - \r\n
- Maximum 15 MB \r\n
- JPG for rug photos\r\n
\r\n High quality JPGs with atleast 2500 px width or height look better in closeup shots\r\n \r\n - PNG for color separated designs \r\n
- CTFX for Galaincha designs \r\n
- Recommended minimum size :\r\n
\r\n 5′ × 9′ or 150 × 275 cms \r\n - Recommended maximum size :\r\n
\r\n 12′ × 16′ or 370 × 480 cms \r\n
\r\n Your uploaded designs are private and can only be accessed by you.\r\n
\r\n\r\n \r\n )}\r\n\r\n }\r\n\r\n {editDesign?.id && uploadedDesign?.file && \r\n {designUploadSuccess && <>\r\n
\r\n }\r\n\r\n \r\n handleClose()}> \r\n
\r\n \r\n }\r\n {!designUploadSuccess &&\r\n <>\r\n {uploadedDesign.name.split(nameSeparator)[0]}
\r\nDesign edited successfully!
\r\n Your design is now ready.
\r\n You can view it in different settings available in the 'Shot Selection' menu.
\r\n {uploadedDesign.name.split(nameSeparator)[0]}
\r\n {showUnsupportedDisclaimer &&\r\n {showUnsupportedDisclaimer === unsupportedDesign.IRREGULAR ?\r\n \"Disclaimer: The design you uploaded is irregular. Irregular designs are supported in limited views only.\"\r\n : \"Runner carpets are currently not supported in Virtual Rug Studio. Please try a different rug or change the dimensions to continue.\"\r\n }\r\n
}\r\n Change Size
\r\n \r\n
\r\n \r\n Width\r\n maxCarpetDims[customDesignDetails.unit]}\r\n position=\"bottom\"\r\n content={`Maximum ${maxCarpetDims[customDesignDetails.unit]} ${customDesignDetails.unit} allowed`}\r\n >\r\n changeDesignDetails(\"w\", toFixed(e.target.value))}\r\n >\r\n \r\n\r\n
\r\n \r\n Length\r\n maxCarpetDims[customDesignDetails.unit]}\r\n position=\"bottom\"\r\n content={`Maximum ${maxCarpetDims[customDesignDetails.unit]} ${customDesignDetails.unit} allowed`}\r\n >\r\n changeDesignDetails(\"h\", toFixed(e.target.value))}\r\n >\r\n \r\n
\r\n \r\n Unit\r\n {\r\n setcustomDesignDetails({\r\n ...customDesignDetails,\r\n \"unit\": units[val],\r\n \"w\": toFixed(customDesignDetails.w * unitFactor[units[val]]),\r\n \"h\": toFixed(customDesignDetails.h * unitFactor[units[val]]),\r\n });\r\n }}\r\n />\r\n
\r\n \r\n \r\n {designFinalUploading === 'edit' && \r\n
\r\n \r\n }\r\n\r\n Update Design
\r\n {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n setdraggingFile(2);\r\n }}\r\n onDragOver={(e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n setdraggingFile(2);\r\n }}\r\n onDrop={(e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n // if (!uploadedDesign?.url)\r\n onInputChange(e);\r\n setdraggingFile(0);\r\n }}\r\n onDragExit={(e) => {\r\n setdraggingFile(0);\r\n }}\r\n onDragLeave={(e) => {\r\n setdraggingFile(0);\r\n }}\r\n onMouseLeave={(e) => {\r\n setdraggingFile(0);\r\n }}\r\n onClick={(e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n if (!uploadedDesign?.url)\r\n triggerInput(e)\r\n }}\r\n >\r\n {/* */}\r\n
}\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default UploadPlatform;\r\n","/* eslint-disable react-hooks/exhaustive-deps */\r\nimport React, { useEffect, useState, useRef, useCallback } from \"react\";\r\nimport { Popover, Card, Slider, Overlay, ButtonGroup, H4 } from \"@blueprintjs/core\";\r\nimport AppProvider, { getFloor } from \"../../../api/appProvider\";\r\n\r\nimport { useFullscreen, useToggle, useIdle } from \"react-use\";\r\nimport classNames from \"classnames\";\r\nimport AtIcon from \"../../atoms/AtIcon\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\nimport CameraButton from \"../../molecules/CameraButton\";\r\nimport OptionsSidePanel from \"../OptionsSidePanel\";\r\nimport IllustrationView from \"../../IllustrationView\";\r\nimport { getExtension, readJSON } from \"../../../utils/utils\";\r\nimport {\r\n useDesignDetailState,\r\n useDispatchDesignDetail,\r\n designDetailActions\r\n} from \"../../../reducers/designdetails.reducer\";\r\nimport { AtSpinner, AtSpinnerOverlay } from \"../../atoms/AtSpinner\";\r\nimport Thumbnail from \"../../molecules/Thumbnail\";\r\nimport DesignList, { jpegExtensions } from \"../DesignList\";\r\nimport CatalogView from \"../../CatalogView\";\r\nimport CloseupView from \"../../InteractivePerspectiveView/CloseupView\";\r\nimport {\r\n roomConfigActions,\r\n useDispatchRoomConfig\r\n} from \"../../IllustrationView/roomconfig.reducer\";\r\nimport { config2Point1 } from \"../../../configMatcher\";\r\nimport Tutorial from \"./Tutorial\";\r\nimport CameraOptions from \"../CameraOptions\";\r\nimport FloorSelectionDialog from \"../../IllustrationView/FloorSelectionDialog\";\r\nimport { ReactComponent as MMC } from \"./icon-mmc.svg\";\r\nimport { designListActions, useDispatchDesignList } from \"../../../reducers/designstree.reducer\";\r\nimport UploadPlatform from \"../UploadPlatform\";\r\nimport { useUiState } from \"../../../reducers/mainui.reducer\";\r\nconst viewTypes = {\r\n perspective: \"PerspectiveView\",\r\n illustration: \"illustration\",\r\n catalog: \"Catalog\",\r\n roomview: \"roomview\",\r\n closeupview: \"closeupview\"\r\n};\r\n\r\nconst filters = [\r\n { label: \"Original\", Thumb: `${window.assetspath}/v3assets/vps/Filters/Ludwig.jpg` },\r\n {\r\n filterName: \"Amaro\",\r\n label: \"Amaro\",\r\n Thumb: `${window.assetspath}/v3assets/vps/Filters/Ludwig.jpg`\r\n },\r\n {\r\n filterName: \"Hefe\",\r\n label: \"Hefe\",\r\n Thumb: `${window.assetspath}/v3assets/vps/Filters/Aden.jpg`\r\n },\r\n {\r\n filterName: \"Moon\",\r\n label: \"Moon\",\r\n Thumb: `${window.assetspath}/v3assets/vps/Filters/Moon.jpg`\r\n },\r\n {\r\n filterName: \"Sutro\",\r\n label: \"Sutro\",\r\n Thumb: `${window.assetspath}/v3assets/vps/Filters/Hudson.jpg`\r\n },\r\n {\r\n filterName: \"X-Pro II\",\r\n label: \"X-Pro II\",\r\n Thumb: `${window.assetspath}/v3assets/vps/Filters/Hudson.jpg`\r\n }\r\n];\r\n\r\nconst blursDef = [\r\n { label: \"Normal\", Thumb: `${window.assetspath}/v3assets/vps/Filters/Ludwig.jpg` },\r\n {\r\n label: \"Near\",\r\n centerAt: { x: 0.5, y: 0.9 },\r\n Thumb: `${window.assetspath}/v3assets/vps/Filters/Ludwig.jpg`\r\n },\r\n {\r\n label: \"Center\",\r\n centerAt: { x: 0.5, y: 0.5 },\r\n Thumb: `${window.assetspath}/v3assets/vps/Filters/Ludwig.jpg`\r\n },\r\n {\r\n label: \"Far\",\r\n centerAt: { x: 0.5, y: 0.1 },\r\n Thumb: `${window.assetspath}/v3assets/vps/Filters/Ludwig.jpg`\r\n }\r\n];\r\nexport const unsupportedDesign = {\r\n IRREGULAR: \"Irregular\",\r\n RUNNER: \"Runner\"\r\n};\r\nlet firstload = false;\r\n\r\nexport const isRunner = ({ width, height }) => {\r\n const ratio = width / height;\r\n if (ratio <= 1 / 1.75 || ratio >= 1.75) return true;\r\n return false;\r\n};\r\nconst VpsStage = props => {\r\n const {\r\n selectedView,\r\n handleCollapsePanel,\r\n showIllustrationModal,\r\n setshowMMC,\r\n showMMC,\r\n // mainRef,\r\n prevIllustration,\r\n nextIllustration,\r\n disableIllustrations,\r\n changeDesignType\r\n } = props;\r\n const designDetailState = useDesignDetailState();\r\n const dispatchDesignDetails = useDispatchDesignDetail();\r\n const dispatchDesignList = useDispatchDesignList();\r\n const dispatchRoomConfig = useDispatchRoomConfig();\r\n const [activeCameraFilter, setactiveCameraFilter] = useState(0);\r\n const [activeCameraBlur, setactiveCameraBlur] = useState(0);\r\n const [roomdata, setRoomData] = useState(null);\r\n const [isRendering, setIsRendering] = useState(false);\r\n const [disableCamera, setdisableCamera] = useState(true);\r\n const [illviewRoomData, setillviewRoomData] = useState(null);\r\n const [catalogviewRoomData, setcatalogviewRoomData] = useState(null);\r\n const [closeviewRoomData, setCloseviewRoomData] = useState();\r\n const [currentRenderingView, setcurrentRenderingView] = useState({ prev: null, active: null });\r\n const [showFilterPanel, setshowFilterPanel] = useState(false);\r\n // const [showirregularDesignAlert, setshowirregularDesignAlert] = useState(false);\r\n const [showunsupportedDesignAlert, setshowunsupportedDesignAlert] = useState(false);\r\n // const [customUrl, setcustomUrl] = useState(null);\r\n const [showDesignPopOver, setshowDesignPopOver] = useState(false);\r\n const [showUploadRugDialog, setshowUploadRugDialog] = useState(false);\r\n const [showTutorial, setshowTutorial] = useState(false);\r\n const [showRugColors, setshowRugColors] = useState(false);\r\n\r\n const [hideActive, sethideActive] = useState(true);\r\n const [triggerHideActive, settriggerHideActive] = useState(false);\r\n const [blurData, setblurData] = useState({ blur: true, active: false, radius: 10 });\r\n const [blurs, setblurs] = useState(blursDef);\r\n\r\n const [tiltShiftFilter, settiltShiftFilter] = useState({\r\n active: false,\r\n options: { centerAt: { x: 0.5, y: 0.5 }, dontBlur: 20, maxRadius: 15 }\r\n });\r\n const [resetTrigger, setresetTrigger] = useState(0);\r\n const [nextDesigns, setnextDesigns] = useState({ next: null, prev: null });\r\n const [customUploadFolder, setcustomUploadFolder] = useState(null);\r\n const [editDesign, seteditDesign] = useState(null);\r\n\r\n const [floorOptions, setfloorOptions] = useState({\r\n show: false,\r\n floors: [],\r\n activeFloor: {}\r\n });\r\n\r\n const mainRef = useRef(null);\r\n\r\n const [fullscreenstatus, togglefullscreen] = useToggle(false);\r\n const isFullScreen = useFullscreen(mainRef, fullscreenstatus, {\r\n onClose: () => togglefullscreen(false)\r\n });\r\n\r\n const isIdle = useIdle(5e3);\r\n\r\n useEffect(() => {\r\n (async () => {\r\n let floorOptionsTemp = await getFloor();\r\n setfloorOptions(floorOptionsTemp);\r\n })();\r\n return () => {\r\n firstload = false;\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (showIllustrationModal || showDesignPopOver || showFilterPanel || showMMC) {\r\n window.dismissMenu && window.dismissMenu();\r\n }\r\n }, [showDesignPopOver, showIllustrationModal, showFilterPanel, showMMC]);\r\n\r\n useEffect(() => {\r\n if (!showFilterPanel && activeCameraFilter !== 0) {\r\n setactiveCameraFilter(0);\r\n }\r\n }, [showFilterPanel]);\r\n\r\n useEffect(() => {\r\n settiltShiftFilter({\r\n active: activeCameraBlur !== 0,\r\n options: {\r\n ...tiltShiftFilter.options,\r\n centerAt:\r\n blurs && blurs[activeCameraBlur] ? blurs[activeCameraBlur].centerAt : { x: 0.5, y: 0.5 }\r\n }\r\n });\r\n }, [activeCameraBlur]);\r\n\r\n useEffect(() => {\r\n if (!selectedView) return;\r\n let isSupported = true;\r\n if (selectedView.category !== \"Studio Rooms\") {\r\n if (designDetailState.designDetails.IsIrregular) {\r\n setLoading(false);\r\n setshowunsupportedDesignAlert(unsupportedDesign.RUNNER);\r\n isSupported = false;\r\n return;\r\n } else if (\r\n isRunner({\r\n width: designDetailState.designDetails.PhysicalWidth,\r\n height: designDetailState.designDetails.PhysicalHeight\r\n })\r\n ) {\r\n setshowunsupportedDesignAlert(unsupportedDesign.IRREGULAR);\r\n isSupported = false;\r\n } else setshowunsupportedDesignAlert(false);\r\n } else setshowunsupportedDesignAlert(false);\r\n if (!isSupported) return;\r\n if (selectedView.fromlocal) {\r\n const baseUrl = selectedView.Dir;\r\n readJSON(`${baseUrl}/config.json`).then(config => {\r\n const name = selectedView.Name.replace(new RegExp(\"[0-9]\", \"g\"), \"\").trim();\r\n setRoomData({ ...selectedView, Name: name, config, baseUrl });\r\n });\r\n } else {\r\n setLoading(true);\r\n AppProvider.fetchRoomDetails({ file: selectedView.FullPath }).then(roomData => {\r\n if (!roomData && !roomData.dir) return;\r\n const s = roomData.Dir.split(\"/\");\r\n let baseUrl;\r\n if (s[1] === \"Assets\") {\r\n const ss = s.slice(2);\r\n baseUrl = `${AppProvider.assetsDomain}/${ss.join(\"/\")}`;\r\n } else {\r\n baseUrl = `${AppProvider.domain}${roomData.Dir}`;\r\n }\r\n readJSON(`${baseUrl}/config.json`).then(async config => {\r\n const name = selectedView.Name.replace(new RegExp(\"[0-9]\", \"g\"), \"\").trim();\r\n if (config.version !== 2.1) {\r\n let mappedConfig = await config2Point1(name, baseUrl, config);\r\n setRoomData({\r\n ...roomData,\r\n Name: name,\r\n config: mappedConfig,\r\n baseUrl,\r\n category: \"Studio Rooms\"\r\n });\r\n } else {\r\n setRoomData({\r\n ...roomData,\r\n Name: name,\r\n config,\r\n baseUrl,\r\n category: selectedView.category\r\n });\r\n }\r\n });\r\n });\r\n }\r\n }, [selectedView]);\r\n\r\n useEffect(() => {\r\n if (!roomdata) return;\r\n if (!roomdata.config.blur) {\r\n setblurData({ ...blurData, blur: roomdata.config.blur, active: false });\r\n setblurs([]);\r\n } else {\r\n setblurData({ ...blurData, blur: roomdata.config.blur });\r\n setblurs([...blursDef]);\r\n }\r\n const config = roomdata.config;\r\n if (roomdata.config.roomType !== viewTypes.closeupview) {\r\n setshowTutorial(false);\r\n }\r\n if (currentRenderingView.prev || currentRenderingView.active) sethideActive(false);\r\n if (roomdata.config.roomType === viewTypes.closeupview) {\r\n setCloseviewRoomData(roomdata);\r\n if (\r\n !currentRenderingView.active ||\r\n (currentRenderingView.active && currentRenderingView.active !== viewTypes.closeupview)\r\n )\r\n sethideActive(true);\r\n setcurrentRenderingView({\r\n prev:\r\n currentRenderingView.active !== viewTypes.closeupview\r\n ? currentRenderingView.active\r\n : currentRenderingView.prev,\r\n active: viewTypes.closeupview\r\n });\r\n } else if (roomdata.category === viewTypes.catalog) {\r\n if (!catalogviewRoomData || roomdata.config.name !== catalogviewRoomData.config.name) {\r\n setcatalogviewRoomData({ ...roomdata });\r\n if (\r\n !currentRenderingView.active ||\r\n (currentRenderingView.active && currentRenderingView.active !== viewTypes.catalog)\r\n )\r\n sethideActive(true);\r\n }\r\n setcurrentRenderingView({\r\n prev:\r\n currentRenderingView.active !== viewTypes.catalog\r\n ? currentRenderingView.active\r\n : currentRenderingView.prev,\r\n active: viewTypes.catalog\r\n });\r\n } else if (roomdata.config.version > 2) {\r\n if (!illviewRoomData || roomdata.config.name !== illviewRoomData.config.name) {\r\n setillviewRoomData({ ...roomdata });\r\n if (\r\n !currentRenderingView.active ||\r\n (currentRenderingView.active && currentRenderingView.active !== viewTypes.illustration)\r\n )\r\n sethideActive(true);\r\n }\r\n setcurrentRenderingView({\r\n prev:\r\n currentRenderingView.active !== viewTypes.illustration\r\n ? currentRenderingView.active\r\n : currentRenderingView.prev,\r\n active: viewTypes.illustration\r\n });\r\n }\r\n }, [roomdata]);\r\n const setLoading = loading =>\r\n dispatchDesignDetails({ type: designDetailActions.SET_LOADING, payload: loading });\r\n\r\n useEffect(() => {\r\n if (!designDetailState?.designDetails || !selectedView) return;\r\n if (showRugColors && !designDetailState.designDetails.DesignColors.length) {\r\n setshowRugColors(false);\r\n }\r\n if (!designDetailState.designDetails.DesignColors.length) {\r\n changeDesignType && changeDesignType(\"jpeg\");\r\n if (\r\n selectedView?.category &&\r\n selectedView.category.toLowerCase() === \"carpet in the making\"\r\n ) {\r\n setTimeout(() => {\r\n dispatchDesignDetails({ type: designDetailActions.SET_LOADING, payload: false });\r\n setshowunsupportedDesignAlert(\"Rug photos \");\r\n }, 400);\r\n }\r\n } else {\r\n changeDesignType && changeDesignType(\"ctfx\");\r\n }\r\n const irregular = designDetailState.designDetails.IsIrregular;\r\n const runner = isRunner({\r\n width: designDetailState.designDetails.PhysicalWidth,\r\n height: designDetailState.designDetails.PhysicalHeight\r\n });\r\n\r\n if (irregular || runner) {\r\n disableIllustrations(irregular ? unsupportedDesign.IRREGULAR : unsupportedDesign.RUNNER);\r\n if (roomdata.category !== \"Studio Rooms\") {\r\n setTimeout(() => {\r\n dispatchDesignDetails({ type: designDetailActions.SET_LOADING, payload: false });\r\n setshowunsupportedDesignAlert(\r\n (irregular ? unsupportedDesign.IRREGULAR : unsupportedDesign.RUNNER) + \" designs \"\r\n );\r\n }, 400);\r\n } else setshowunsupportedDesignAlert(false);\r\n } else {\r\n disableIllustrations(false);\r\n setshowunsupportedDesignAlert(false);\r\n }\r\n }, [designDetailState.designDetails]);\r\n\r\n useEffect(() => {\r\n if (!hideActive) {\r\n return;\r\n }\r\n let tim = setTimeout(() => {\r\n settriggerHideActive(true);\r\n }, 300);\r\n return () => {\r\n clearTimeout(tim);\r\n };\r\n }, [hideActive]);\r\n\r\n useEffect(() => {\r\n settriggerHideActive(false);\r\n if (triggerHideActive && !designDetailState.loading) {\r\n sethideActive(false);\r\n }\r\n }, [triggerHideActive]);\r\n\r\n useEffect(() => {\r\n if (!designDetailState.loading) {\r\n sethideActive(false);\r\n }\r\n }, [designDetailState.loading]);\r\n\r\n useEffect(() => {\r\n if (showRugColors) {\r\n document.getElementsByClassName(\"mmc-stickright-wrapper\")[0].style.display = \"block\";\r\n } else {\r\n document.getElementsByClassName(\"mmc-stickright-wrapper\")[0].style.display = \"none\";\r\n }\r\n }, [showRugColors]);\r\n\r\n window.enter = () => {\r\n if (!firstload) return false;\r\n setshowTutorial(true);\r\n setcustomUploadFolder(window.userEmail?.replace(\"@\", \"\") || \"default\");\r\n return true;\r\n };\r\n\r\n const handleRendering = val => {\r\n if (val && !firstload) {\r\n handleCollapsePanel(true);\r\n firstload = true;\r\n // handleReady(true);\r\n }\r\n setdisableCamera(val);\r\n if (!val) return;\r\n switch (currentRenderingView.active) {\r\n case viewTypes.closeupview:\r\n setillviewRoomData(null);\r\n setcatalogviewRoomData(null);\r\n break;\r\n case viewTypes.illustration:\r\n setCloseviewRoomData(null);\r\n setcatalogviewRoomData(null);\r\n break;\r\n case viewTypes.catalog:\r\n setCloseviewRoomData(null);\r\n setillviewRoomData(null);\r\n break;\r\n\r\n default:\r\n break;\r\n }\r\n };\r\n const downloadIllustration = async () => {\r\n setIsRendering(true);\r\n\r\n if (!currentRenderingView.active) return;\r\n switch (currentRenderingView.active) {\r\n case viewTypes.closeupview:\r\n await window.downloadRenderedCloseupIll();\r\n break;\r\n case viewTypes.illustration:\r\n await window.downloadRendered3dIllinIllView();\r\n break;\r\n case viewTypes.catalog:\r\n await window.downloadRenderedCatalog();\r\n break;\r\n default:\r\n await window.downloadRendered3dIll();\r\n break;\r\n }\r\n setTimeout(() => {\r\n setIsRendering(false);\r\n }, 300);\r\n };\r\n\r\n const changeActiveFloor = floorOption => {\r\n setfloorOptions({ ...floorOptions, activeFloor: floorOption, show: false });\r\n };\r\n const setActiveFloor = floorName => {\r\n if (floorName) {\r\n let matchesName = floorOptions.floors.filter((el, i) => {\r\n return el.name === floorName;\r\n });\r\n if (matchesName.length > 0) {\r\n setfloorOptions({ ...floorOptions, activeFloor: matchesName[0], show: false });\r\n return matchesName[0];\r\n }\r\n }\r\n return null;\r\n };\r\n const handleDesignPopOverClose = useCallback(event => {\r\n setshowDesignPopOver(false);\r\n }, []);\r\n\r\n const handleUploadPlatformClose = useCallback(event => {\r\n seteditDesign(null);\r\n setshowUploadRugDialog(false);\r\n }, []);\r\n\r\n const handleSetNextDesigns = useCallback(val => {\r\n setnextDesigns(val);\r\n }, []);\r\n\r\n const nextDesign = () => {\r\n dispatchDesignList({\r\n type: designListActions.SET_ACTIVE_NODE,\r\n payload: nextDesigns.next\r\n });\r\n };\r\n const prevDesign = () => {\r\n dispatchDesignList({\r\n type: designListActions.SET_ACTIVE_NODE,\r\n payload: nextDesigns.prev\r\n });\r\n };\r\n\r\n return (\r\n \r\n {showunsupportedDesignAlert && (\r\n \r\n {illviewRoomData && (\r\n setresetTrigger(resetTrigger + 1)}\r\n >\r\n )}\r\n togglefullscreen()}\r\n >\r\n \r\n \r\n setshowRugColors(true)}\r\n >\r\n
\r\n {/* mmc */}\r\n \r\n { handleCollapsePanel();setshowirregularDesignAlert(false)}}\r\n >\r\n {\r\n handleCollapsePanel();\r\n }}\r\n >\r\n \r\n
\r\n )}\r\n \r\n {\" \"}\r\n {showunsupportedDesignAlert} are not supported in this shot. Please select a different\r\n shot.\r\n
\r\n \r\n Rug Colors\r\n setshowRugColors(false)} />\r\n
\r\n \r\n {designDetailState?.designDetails?.DesignColors?.length &&\r\n designDetailState.designDetails.DesignColors.map((colorobj, index) => {\r\n return (\r\n setshowMMC(index, colorobj)}\r\n >
\r\n );\r\n })}\r\n \r\n \r\n {blurData.active && (\r\n \r\n downloadIllustration()}\r\n disabled={isRendering}\r\n >\r\n {isRendering ? (\r\n 
\r\n )}\r\n Take shot\r\n \r\n setshowFilterPanel(false)}\r\n >\r\n
\r\n \r\n \r\n )}\r\n Take shot\r\n \r\n \r\n \r\n handleCollapsePanel()}\r\n >\r\n {\r\n setshowDesignPopOver(!showDesignPopOver);\r\n }}\r\n >\r\n {\r\n setshowUploadRugDialog(!showUploadRugDialog);\r\n }}\r\n >\r\n {/* {showUploadRugDialog && ( */}\r\n
\r\n {(closeviewRoomData || illviewRoomData) &&\r\n roomdata.config.roomType !== \"illustration\" &&\r\n roomdata.category.toLowerCase() !== \"carpet in the making\" && (\r\n \r\n {\r\n setfloorOptions({ ...floorOptions, show: true });\r\n }}\r\n >\r\n {\r\n setfloorOptions({ ...floorOptions, show: false });\r\n }}\r\n handleReset={illviewRoomData && (() => changeActiveFloor(null))}\r\n handleThumbClick={changeActiveFloor}\r\n />\r\n
\r\n )}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default VpsStage;\r\n","import React, { useEffect, useState } from \"react\";\r\nimport { useMount } from \"react-use\";\r\nimport AppProvider from \"../../../api/appProvider\";\r\nimport { arrangeIntoTree, getPathOffile } from \"../../../utils/arrayUtils\";\r\nimport { useDebouncedCallback } from \"use-debounce/lib\";\r\nimport {\r\n designListActions as actions,\r\n useDesignListState,\r\n useDispatchDesignList\r\n} from \"../../../reducers/designstree.reducer\";\r\nimport { H2, H6 } from \"@blueprintjs/core\";\r\nimport AtDialog from \"../../molecules/AtDialog\";\r\nimport ThumbList from \"../../molecules/ThumbList\";\r\nimport AtIcon from \"../../atoms/AtIcon\";\r\nimport { getExtension, getFilenameWithoutExt } from \"../../../utils/utils\";\r\nimport deepmerge from \"deepmerge\";\r\nimport { isRunner, unsupportedDesign } from \"../VpsStage\";\r\nimport { nameSeparator } from \"../UploadPlatform\";\r\n\r\nconst thumbnailType = \"portrait\";\r\nexport const jpegExtensions = [\"jpg\", \"jpeg\"];\r\nconst DesignList = props => {\r\n const { handleThumbnailClick, hidden = true, handleClose, setNextDesigns, customUploadFolder, restrictJPEG, restrictDesigns, seteditDesign } = props;\r\n\r\n const [customTree, setcustomTree] = useState({});\r\n const [stateTree, setstateTree] = useState([]);\r\n const [uploadedFile, setuploadedFile] = useState({ name: null, isJPEG: false });\r\n\r\n const { initDesignPath } = window.initialData;\r\n\r\n const state = useDesignListState();\r\n const dispatch = useDispatchDesignList();\r\n\r\n useEffect(() => {\r\n if (!state.tree) return;\r\n if (JSON.stringify(state.tree) !== JSON.stringify(stateTree)) {\r\n setstateTree(state.tree);\r\n }\r\n }, [state.tree]);\r\n\r\n window.getUploadedFile = (filename, isJPEG) => {\r\n setuploadedFile({ name: filename, isJPEG: isJPEG });\r\n }\r\n\r\n const getFolderTree = ({ folderPath, defaultFilePath, defaultFileKeyType, scope }) => {\r\n if (!folderPath) return;\r\n folderPath = folderPath.toLowerCase();\r\n let passPath = folderPath;\r\n if (scope === \"internal\") {\r\n passPath = folderPath.split(\"designs/\")[1];\r\n }\r\n return new Promise((resolve) => {\r\n AppProvider.fetchList(\"design\", passPath).then(initialList => {\r\n const files = initialList.filter(item => (item.Type === \"file\" && item.FullPath.toLowerCase().includes(folderPath)));\r\n const folders = initialList.filter(item => (item.Type === \"folder\" && item.FullPath.toLowerCase() === folderPath));\r\n let defaultItemPath;\r\n\r\n\r\n if (!defaultFilePath) {\r\n defaultItemPath = files[0].FullPath;\r\n } else {\r\n // if (defaultFileKeyType) {\r\n // files.map(item => {\r\n // if (getFilenameWithoutExt(item.FullPath) === defaultFilePath) {\r\n // defaultItemPath = item.FullPath;\r\n // return { ...item, KeyType: defaultFileKeyType }\r\n // }\r\n // else return item;\r\n // });\r\n // }\r\n // else\r\n defaultItemPath = (files.find(item => getFilenameWithoutExt(item.FullPath) === defaultFilePath)).FullPath;\r\n }\r\n const params = { files, folders, defaultItemPath };\r\n const { tree, defaultItem, openNode, flatfileList } = arrangeIntoTree(params);\r\n if (!openNode) resolve(null);\r\n AppProvider.getDesignThumbnails({ designs: [...flatfileList] }).then(items => {\r\n let updatedTree = [...tree];\r\n\r\n const findinItems = (filesInNode) => {\r\n items.forEach(item => {\r\n const index = filesInNode.findIndex(\r\n fileInNode => item.fullpath === fileInNode.fullpath\r\n );\r\n if (index !== -1) filesInNode[index] = item;\r\n });\r\n return filesInNode;\r\n }\r\n let folderTree = null;\r\n updatedTree.forEach(function iter(node, index, object) {\r\n let { filesInNode } = node;\r\n node.filesInNode = findinItems(filesInNode);\r\n if (!folderTree && (node.fullpath.toLowerCase() === \"/\" + folderPath)) {\r\n folderTree = node;\r\n Array.isArray(folderTree.childNodes) && folderTree.childNodes.forEach(iter);\r\n }\r\n else {\r\n Array.isArray(node.childNodes) && node.childNodes.forEach(iter);\r\n }\r\n\r\n });\r\n\r\n const defItemWithThumb = items.find(item => item.fullpath === defaultItem.fullpath);\r\n\r\n resolve({ tree: folderTree, flatfileList, openNode, defItemWithThumb });\r\n\r\n });\r\n })\r\n });\r\n\r\n }\r\n\r\n useEffect(() => {\r\n if (!state.tree || !uploadedFile?.name) return;\r\n\r\n (async () => {\r\n const folderPath = window.InterfaceElements.StartupFolder;\r\n const defaultFilePath = window.InterfaceElements.StartupFolder + '/' + getFilenameWithoutExt(uploadedFile.name);\r\n const returned = await getFolderTree({\r\n folderPath,\r\n defaultFilePath,\r\n defaultFileKeyType: AppProvider.activeKey,\r\n scope: \"internal\"\r\n });\r\n if (!returned) return;\r\n const { tree: folderTree, flatfileList, openNode, defItemWithThumb } = returned;\r\n\r\n defItemWithThumb.isJPEG = uploadedFile.isJPEG;\r\n defItemWithThumb.label = defItemWithThumb.label.split(nameSeparator)[0];\r\n\r\n for (let i = 0; i < folderTree.length; i++) {\r\n const iter = async (node) => {\r\n if (node.type === 'folder' && node.filesInNode?.length) {\r\n for (let j = 0; j < node.filesInNode.length; j++) {\r\n await iter(node.filesInNode[j]);\r\n }\r\n }\r\n else if (node.type === 'file' && node.fullpath === defaultFilePath) {\r\n node.isJPEG = uploadedFile.isJPEG;\r\n node.label = node.label.split(nameSeparator)[0];\r\n return;\r\n }\r\n\r\n if (Array.isArray(node.childNodes)) {\r\n for (let j = 0; j < node.childNodes.length; j++) {\r\n await iter(node.childNodes[j]);\r\n }\r\n }\r\n }\r\n await iter(folderTree[i]);\r\n }\r\n\r\n let updatedTree = [...state.tree];\r\n if (updatedTree[0].label === \"Your Designs\") {\r\n updatedTree[0].filesInNode.push(defItemWithThumb);\r\n }\r\n else {\r\n updatedTree = [{ ...folderTree, label: \"Your Designs\", level: 0 }, ...updatedTree];\r\n }\r\n dispatch({\r\n type: actions.SET_TREE,\r\n payload: { tree: updatedTree, flatfileList, openNode }\r\n });\r\n\r\n if (openNode.filesInNode && openNode.filesInNode.length > 0)\r\n onThumbnailClick(defItemWithThumb);\r\n })();\r\n }, [uploadedFile])\r\n\r\n useEffect(() => {\r\n (async () => {\r\n if (!customUploadFolder) return;\r\n\r\n const currentKey = AppProvider.activeKey;\r\n window.InterfaceElements.StartupFolder = `Designs/Internal/Uploads/${customUploadFolder}`;\r\n\r\n const findinItems = (items, filesInNode) => {\r\n items.forEach(item => {\r\n const index = filesInNode.findIndex(\r\n fileInNode => item.fullpath === fileInNode.fullpath\r\n );\r\n item.label = item.label.split(nameSeparator)[0];\r\n if (index !== -1) {\r\n if (jpegExtensions.includes(getExtension(item.fullpath))) {\r\n filesInNode[index] = { ...item, infoThumbs: [\r\n
\r\n {renderNodes(node.childNodes, restrictJPEG, restrictDesigns)}\r\n \r\n );\r\n };\r\n\r\n return (\r\n <>\r\n {stateTree && (\r\n \r\n
\r\n \r\n {node.label}\r\n \r\n
\r\n \r\n {\r\n\r\n seteditDesign(e)\r\n handleClose && handleClose();\r\n }}\r\n > \r\n
\r\n\r\n {!props.lastNode && node.childNodes && node.childNodes.length <= 0 && (\r\n \r\n )}\r\n \r\n {\r\n handleClose && handleClose();\r\n }}\r\n />\r\n
\r\n \r\n
\r\n Please choose your design
\r\n\r\n {renderNodes(stateTree, restrictJPEG, restrictDesigns)}\r\n
\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default React.memo(DesignList);\r\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"g\", {\n clipPath: \"url(#clip0)\"\n}, /*#__PURE__*/React.createElement(\"g\", {\n filter: \"url(#filter0_d)\",\n id: \"top-group-svg\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M11.984 29.76H10V21.92C10 15.2926 15.3726 9.92004 22 9.92004H52.16C52.16 15.3987 47.7187 19.84 42.24 19.84H21.904C20.8083 19.84 19.92 20.7283 19.92 21.824C19.92 26.207 16.3669 29.76 11.984 29.76Z\",\n fill: \"#FFB627\"\n})), /*#__PURE__*/React.createElement(\"g\", {\n filter: \"url(#filter1_d)\",\n id: \"bottom-group-svg\"\n}, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M50.0961 32.24H52.0801V40.08C52.0801 46.7074 46.7075 52.08 40.0801 52.08H9.92008C9.92008 46.6013 14.3614 42.16 19.8401 42.16H40.1761C41.2718 42.16 42.1601 41.2717 42.1601 40.176C42.1601 35.793 45.7131 32.24 50.0961 32.24Z\",\n fill: \"url(#paint0_linear)\"\n})));\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"defs\", null, /*#__PURE__*/React.createElement(\"filter\", {\n id: \"filter0_d\",\n x: 6,\n y: 5.92004,\n width: 58.16,\n height: 35.84,\n filterUnits: \"userSpaceOnUse\",\n colorInterpolationFilters: \"sRGB\"\n}, /*#__PURE__*/React.createElement(\"feFlood\", {\n floodOpacity: 0,\n result: \"BackgroundImageFix\"\n}), /*#__PURE__*/React.createElement(\"feColorMatrix\", {\n in: \"SourceAlpha\",\n type: \"matrix\",\n values: \"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n}), /*#__PURE__*/React.createElement(\"feOffset\", {\n dx: 4,\n dy: 4\n}), /*#__PURE__*/React.createElement(\"feGaussianBlur\", {\n stdDeviation: 4\n}), /*#__PURE__*/React.createElement(\"feColorMatrix\", {\n type: \"matrix\",\n values: \"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0\"\n}), /*#__PURE__*/React.createElement(\"feBlend\", {\n mode: \"normal\",\n in2: \"BackgroundImageFix\",\n result: \"effect1_dropShadow\"\n}), /*#__PURE__*/React.createElement(\"feBlend\", {\n mode: \"normal\",\n in: \"SourceGraphic\",\n in2: \"effect1_dropShadow\",\n result: \"shape\"\n})), /*#__PURE__*/React.createElement(\"filter\", {\n id: \"filter1_d\",\n x: 5.92017,\n y: 28.24,\n width: 58.16,\n height: 35.84,\n filterUnits: \"userSpaceOnUse\",\n colorInterpolationFilters: \"sRGB\"\n}, /*#__PURE__*/React.createElement(\"feFlood\", {\n floodOpacity: 0,\n result: \"BackgroundImageFix\"\n}), /*#__PURE__*/React.createElement(\"feColorMatrix\", {\n in: \"SourceAlpha\",\n type: \"matrix\",\n values: \"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n}), /*#__PURE__*/React.createElement(\"feOffset\", {\n dx: 4,\n dy: 4\n}), /*#__PURE__*/React.createElement(\"feGaussianBlur\", {\n stdDeviation: 4\n}), /*#__PURE__*/React.createElement(\"feColorMatrix\", {\n type: \"matrix\",\n values: \"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0\"\n}), /*#__PURE__*/React.createElement(\"feBlend\", {\n mode: \"normal\",\n in2: \"BackgroundImageFix\",\n result: \"effect1_dropShadow\"\n}), /*#__PURE__*/React.createElement(\"feBlend\", {\n mode: \"normal\",\n in: \"SourceGraphic\",\n in2: \"effect1_dropShadow\",\n result: \"shape\"\n})), /*#__PURE__*/React.createElement(\"linearGradient\", {\n id: \"paint0_linear\",\n x1: 9.92008,\n y1: 52.08,\n x2: 17.9409,\n y2: 68.6276,\n gradientUnits: \"userSpaceOnUse\"\n}, /*#__PURE__*/React.createElement(\"stop\", {\n stopColor: \"#FFB627\"\n}), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 0.630208,\n stopColor: \"#FFB627\"\n}), /*#__PURE__*/React.createElement(\"stop\", {\n offset: 1,\n stopColor: \"#E2EDFF\"\n})), /*#__PURE__*/React.createElement(\"clipPath\", {\n id: \"clip0\"\n}, /*#__PURE__*/React.createElement(\"rect\", {\n width: 62,\n height: 62,\n fill: \"white\"\n})));\n\nvar SvgLogoSmall = function SvgLogoSmall(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 62,\n height: 62,\n viewBox: \"0 0 62 62\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2, _ref3);\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgLogoSmall, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/logo-small.82295d94.svg\";\nexport { ForwardRef as ReactComponent };","import React, { Suspense, useEffect, useState } from \"react\";\r\nimport { mainUiActions, useUiDispatch, useUiState } from \"../../../reducers/mainui.reducer\";\r\nimport classNames from \"classnames\";\r\nimport GoogleLogin, { useGoogleLogout } from \"react-google-login\";\r\nimport FacebookLogin from \"react-facebook-login\";\r\nimport { Spinner } from \"@blueprintjs/core\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\nimport { ReactComponent as LogoSmallSVG } from \"./logo-small.svg\";\r\nimport { sendSignIn } from \"../../../api/appProvider\";\r\nimport { ismobileAndTabletCheck } from \"../../../utils/utils\";\r\nimport AlertWarning from \"../../organisms/AlertWarning\";\r\nimport GoogleLogin1 from \"./../LoginApi/GoogleLogin\";\r\nimport AtDialog from \"../../molecules/AtDialog\";\r\nimport Carousel from \"./Carousel\";\r\nimport AtIcon from \"../../atoms/AtIcon\";\r\nimport { usePrevious, useWindowSize } from \"../../../hooks\";\r\nimport axios from \"axios\";\r\n// import SketchSpinner from \"../../atoms/AtSpinner/SketchSpinner\";\r\n\r\nconst staticAssetsPath = \"https://cdn.virtualrugstudio.com/OnlineVPS/\";\r\n\r\nconst bgImage = \"previews/background-landing-light.jpg\";\r\nconst logoImage = \"InterfaceElements/logo-new.png\";\r\nwindow.logourl = `${staticAssetsPath}${logoImage}`;\r\n\r\nwindow.globalCarpetScale = ismobileAndTabletCheck() ? 2 : 4;\r\n\r\nconst sampleBaseUrl = \"https://cdn.virtualrugstudio.com/OnlineVPS/Previews/samples/\";\r\n\r\nconst samples = [\r\n sampleBaseUrl + \"1.jpg\",\r\n sampleBaseUrl + \"2.jpg\",\r\n sampleBaseUrl + \"3.jpg\",\r\n sampleBaseUrl + \"4.jpg\",\r\n sampleBaseUrl + \"5.jpg\",\r\n sampleBaseUrl + \"6.jpg\",\r\n sampleBaseUrl + \"7.jpg\",\r\n sampleBaseUrl + \"8.jpg\",\r\n sampleBaseUrl + \"9.jpg\",\r\n sampleBaseUrl + \"10.jpg\",\r\n sampleBaseUrl + \"11.jpg\",\r\n sampleBaseUrl + \"12.jpg\",\r\n sampleBaseUrl + \"13.jpg\",\r\n sampleBaseUrl + \"14.jpg\",\r\n sampleBaseUrl + \"15.jpg\",\r\n sampleBaseUrl + \"16.jpg\",\r\n sampleBaseUrl + \"17.jpg\",\r\n sampleBaseUrl + \"18.jpg\",\r\n sampleBaseUrl + \"19.jpg\",\r\n sampleBaseUrl + \"20.jpg\",\r\n sampleBaseUrl + \"21.jpg\",\r\n sampleBaseUrl + \"22.jpg\",\r\n sampleBaseUrl + \"23.jpg\",\r\n sampleBaseUrl + \"24.jpg\",\r\n sampleBaseUrl + \"25.jpg\",\r\n sampleBaseUrl + \"26.jpg\",\r\n sampleBaseUrl + \"27.jpg\",\r\n sampleBaseUrl + \"28.jpg\",\r\n sampleBaseUrl + \"29.jpg\",\r\n sampleBaseUrl + \"30.jpg\",\r\n sampleBaseUrl + \"31.jpg\",\r\n sampleBaseUrl + \"32.jpg\",\r\n sampleBaseUrl + \"33.jpg\",\r\n sampleBaseUrl + \"34.jpg\",\r\n sampleBaseUrl + \"35.jpg\",\r\n sampleBaseUrl + \"36.jpg\",\r\n sampleBaseUrl + \"37.jpg\"\r\n];\r\n\r\nconst VpsLanding = props => {\r\n const { onLoaded } = props;\r\n const uiState = useUiState();\r\n const dispatch = useUiDispatch();\r\n const [begin, setbegin] = useState(false);\r\n const [loadingPercent, setloadingPercent] = useState(0);\r\n const [signedIn, setsignedIn] = useState(false);\r\n const [showMobileWarning, setshowMobileWarning] = useState(false);\r\n const [activeSampleNode, setactiveSampleNode] = useState(2);\r\n const [prevactiveSampleNode, setprevactiveSampleNode] = useState(-1);\r\n const [sampleIndex, setsampleIndex] = useState(-1);\r\n const [showSampleLoadSpinner, setshowSampleLoadSpinner] = useState(false);\r\n const [loadedSamples, setloadedSamples] = useState(new Array(samples.length).fill(false));\r\n\r\n const { signOut, loaded } = useGoogleLogout({\r\n clientId: \"347190499501-81i6k56m7ecihdlhj44j12i7u2m9j2gn.apps.googleusercontent.com\",\r\n // clientId: \"615600073809-05cev43iap6cb2u2e7hcbhint20rq9po.apps.googleusercontent.com\",\r\n cookiePolicy: \"single_host_origin\"\r\n });\r\n\r\n const beginHandler = () => {\r\n if (signedIn) {\r\n const enterReady = window.enter && window.enter();\r\n if (enterReady) {\r\n setbegin(true);\r\n } else {\r\n setTimeout(() => {\r\n beginHandler();\r\n }, 100);\r\n }\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n const script = document.createElement(\"script\");\r\n const script1 = document.createElement(\"script\");\r\n const script2 = document.createElement(\"script\");\r\n\r\n script.src =\r\n \"https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js\";\r\n script2.src = \"https://accounts.google.com/gsi/client\";\r\n script.async = true;\r\n script2.async = true;\r\n\r\n document.body.appendChild(script);\r\n document.body.appendChild(script2);\r\n\r\n setTimeout(() => {\r\n script1.innerHTML = `AppleID.auth.init({\r\n clientId: \"com.explorug.login\",\r\n scope: \"name email\",\r\n usePopup: true,\r\n redirectURI: \"https://virtualrugstudio.com/\"\r\n });\r\n \r\n function decodeJwtResponse(data) {\r\n var tokens = data.split(\".\");\r\n return JSON.parse(atob(tokens[1]));\r\n }\r\n `;\r\n document.body.appendChild(script1);\r\n }, [2000]);\r\n }, []);\r\n useEffect(() => {\r\n if (!!begin) {\r\n return;\r\n }\r\n let interval = loadingPercent < uiState.loadingOverlayPercent ? 20 : 300;\r\n setTimeout(() => {\r\n if (loadingPercent < uiState.loadingOverlayPercent) {\r\n setloadingPercent(loadingPercent => loadingPercent + 2);\r\n } else if (loadingPercent < uiState.loadingOverlayPercent + 10) {\r\n setloadingPercent(loadingPercent => loadingPercent + 0.5);\r\n }\r\n }, interval);\r\n }, [loadingPercent]);\r\n\r\n useEffect(() => {\r\n if (signedIn) {\r\n onLoaded();\r\n beginHandler();\r\n }\r\n }, [signedIn]);\r\n\r\n const responseGoogle = response => {\r\n const profileObj = response.profileObj;\r\n sendSignIn({ type: \"g\", email: profileObj.email, name: profileObj.name });\r\n setsignedIn(true);\r\n signOut();\r\n\r\n // if (!response.tokenId) {\r\n // console.error(\"Unable to get tokenId from Google\", response)\r\n // return;\r\n // }\r\n\r\n // const tokenBlob = new Blob([JSON.stringify({ tokenId: response.tokenId }, null, 2)], { type: 'application/json' });\r\n // const options = {\r\n // method: 'POST',\r\n // body: tokenBlob,\r\n // mode: 'cors',\r\n // cache: 'default'\r\n // };\r\n // fetch(googleConfig.GOOGLE_AUTH_CALLBACK_URL, options)\r\n // .then(r => {\r\n // r.json().then(user => {\r\n // const token = user.token;\r\n // console.log(user);\r\n // // sendSignIn({ type: \"g\", email: profileObj.email, name: profileObj.name });\r\n // setsignedIn(true);\r\n // signOut();\r\n // });\r\n // })\r\n };\r\n\r\n const responseGoogleFail = response => {\r\n console.log(response);\r\n signOut();\r\n };\r\n\r\n const postUsageLog = (name, email, type) => {\r\n const formdata = new FormData();\r\n formdata.append(\"product\", \"vrs\");\r\n formdata.append(\"name\", name);\r\n formdata.append(\"email\", email);\r\n formdata.append(\"type\", type);\r\n axios.post(\"https://explorug.com/archanastools/Utilities/WebsiteLog.aspx\", formdata);\r\n };\r\n\r\n const responseFacebook = response => {\r\n sendSignIn({ type: \"f\", email: response.email, name: response.name });\r\n setsignedIn(true);\r\n postUsageLog(response.name, response.email, \"Facebook\");\r\n };\r\n const responseFacebookFail = response => {\r\n console.log(response);\r\n };\r\n useEffect(() => {\r\n window.handleSuccessGoogle = function(response) {\r\n const responsePayload = decodeJwtResponse(response.credential);\r\n sendSignIn({ type: \"g\", email: responsePayload.email, name: responsePayload.name });\r\n setsignedIn(true);\r\n postUsageLog(responsePayload.name, responsePayload.email, \"Gmail\");\r\n signOut();\r\n };\r\n\r\n function decodeJwtResponse(data) {\r\n var tokens = data.split(\".\");\r\n return JSON.parse(atob(tokens[1]));\r\n }\r\n\r\n document.addEventListener(\r\n \"AppleIDSignInOnSuccess\",\r\n event => {\r\n // Handle successful response.\r\n console.log(\"apple login success\");\r\n console.log(event.detail.authorization.id_token);\r\n const responsePayload = window.decodeJwtResponse(event.detail.authorization.id_token);\r\n console.log(responsePayload);\r\n var name = \"AppleUser\";\r\n if (event.detail.user) {\r\n name = event.detail.user.name.firstName + \" \" + event.detail.user.name.lastName;\r\n }\r\n var email = responsePayload.email;\r\n sendSignIn({ type: \"f\", email: email, name: name });\r\n setsignedIn(true);\r\n postUsageLog(name, email, \"Apple\");\r\n },\r\n { once: true }\r\n );\r\n\r\n // Listen for authorization failures.\r\n document.addEventListener(\r\n \"AppleIDSignInOnFailure\",\r\n event => {\r\n // Handle error.\r\n console.log(\"apple login failed\");\r\n console.log(event.detail.error);\r\n },\r\n { once: true }\r\n );\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (ismobileAndTabletCheck()) {\r\n setshowMobileWarning(true);\r\n }\r\n // onLoaded();\r\n\r\n const images = [bgImage];\r\n let loaded = 0;\r\n images.forEach((image, index) => {\r\n let img = new Image();\r\n img.onload = () => {\r\n loaded++;\r\n if (loaded === images.length) {\r\n // onLoaded();\r\n }\r\n };\r\n img.src = `${staticAssetsPath}${image}`;\r\n });\r\n }, []);\r\n\r\n useEffect(() => {\r\n console.log(sampleIndex);\r\n let la = true;\r\n if (loadedSamples[sampleIndex]) {\r\n setshowSampleLoadSpinner(false);\r\n return;\r\n }\r\n setTimeout(() => {\r\n if (la) {\r\n setshowSampleLoadSpinner(true);\r\n }\r\n }, 1000);\r\n\r\n return () => {\r\n la = false;\r\n };\r\n }, [sampleIndex, loadedSamples]);\r\n\r\n const nextSample = () => {\r\n let newSampleIndex = sampleIndex + 1;\r\n if (newSampleIndex >= samples.length) newSampleIndex = 0;\r\n setsampleIndex(newSampleIndex);\r\n if (activeSampleNode === 3) {\r\n setactiveSampleNode(1);\r\n } else {\r\n setactiveSampleNode(activeSampleNode + 1);\r\n }\r\n setprevactiveSampleNode(activeSampleNode);\r\n };\r\n\r\n const prevSample = () => {\r\n let newSampleIndex = sampleIndex - 1;\r\n if (newSampleIndex < 0) newSampleIndex = samples.length - 1;\r\n setsampleIndex(newSampleIndex);\r\n if (activeSampleNode === 1) {\r\n setactiveSampleNode(3);\r\n } else {\r\n setactiveSampleNode(activeSampleNode - 1);\r\n }\r\n setprevactiveSampleNode(activeSampleNode);\r\n };\r\n\r\n const onSampleImageLoad = ind => {\r\n let temp = [...loadedSamples];\r\n temp[ind] = true;\r\n setloadedSamples([...temp]);\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n {\r\n setsampleIndex(0);\r\n }}\r\n />\r\n \r\n {process.env.NODE_ENV === \"development\" && (\r\n {\r\n setsignedIn(true);\r\n }}\r\n >\r\n pass\r\n \r\n )}\r\n
\r\n\r\n {/* \r\n */}\r\n {/* \r\n {/*
\r\n */}\r\n \r\n
\r\n \r\n {/* 
\r\n
\r\n \r\n Capture studio quality photos of your rugs
\r\n without having to produce them\r\n
\r\n \r\n without having to produce them\r\n
\r\n
\r\n Sign in to try our early access demo
\r\n {/* */}\r\n \r\n {/*
\r\n \r\n
\r\n }\r\n \r\n onSampleImageLoad(index)}\r\n />\r\n );\r\n })}\r\n
\r\n \r\n \r\n );\r\n\r\n // return (\r\n
\r\n \r\n {/* */}\r\n {(gridDisplayLevel === 0) &&
\r\n Please choose the color to match your sample
}\r\n {(gridDisplayLevel === 1) &&Please select the color closest to your sample
}\r\n {(gridDisplayLevel === 2) &&Please click on color to fine tune
}\r\n\r\n\r\n {/* {scenesData &&\r\n scenesData.map((category, i) => {\r\n return ( */}\r\n
\r\n \r\n \r\n )\r\n\r\n return (\r\n \r\n {/*
\r\n {/* );\r\n })} */}\r\n \r\n
*/}\r\n\r\n \r\n Royal Mosa\r\n \r\n The floor tiles in this collection are created with the courtesy of{\" \"}\r\n \r\n Royal Mosa\r\n \r\n \r\n
\r\n \r\n {designColors && designColors.map((colorobj, index) => {\r\n return (\r\n
\r\n\r\n handleColorClick(e, index, colorobj)}>
\r\n )\r\n })}\r\n \r\n {colorGridInfo && colorGridInfo.centers.map((eachCenter, i) => {\r\n return (\r\n
\r\n\r\n showColorCirclesWrapper(colorGridInfo.colorList[i])}>\r\n
\r\n )\r\n })}\r\n \r\n \r\n {/* {counter !== 2 ?\r\n <> */}\r\n
\r\n\r\n {(gridDisplayLevel === 2) && getGrid(2)}>
\r\n getGrid(2)}>\r\n ![\"texture]()
\r\n
\r\n {/* \r\n :\r\n <>\r\n \r\n \r\n ![\"texture]()
\r\n
\r\n \r\n } */}\r\n\r\n \r\n
}\r\n\r\n {/* {i < scenesData.length - 1 && */}\r\n {/* */}\r\n\r\n {/* } */}\r\n \r\n
*/}\r\n \r\n
\r\n }\r\n Click on the color to match your sample
\r\n \r\n {designColors && designColors.map((colorobj, index) => {\r\n return (\r\n
\r\n\r\n handleColorClick(e, index, colorobj)}>
\r\n )\r\n })}\r\n 0) ? 'flex' : 'none' }}>\r\n
\r\n \r\n
\r\n Back
\r\n \r\n {colorGridInfo && colorGridInfo.centers.map((eachCenter, i) => {\r\n return (\r\n
\r\n showColorCirclesWrapper(colorGridInfo.colorList[i])}>\r\n
\r\n )\r\n })}\r\n \r\n \r\n \r\n
\r\n {(gridDisplayLevel === 2) && \r\n ![\"texture]()
\r\n
\r\n \r\n {counter !== 2 &&
}\r\n\r\n \r\n getGrid(2)}> \r\n
}\r\n \r\n {\r\n setshowIllustrationModal(false);\r\n }}\r\n className=\" illustration-dialog\"\r\n overlayClassName={\r\n showIllustrationModal ? \"illustration-dialog-open\" : \"illustration-dialog-close\"\r\n }\r\n size=\"lg\"\r\n // portalContainerId=\"vps-main\"\r\n >\r\n
\r\n \r\n {\r\n setshowIllustrationModal(false);\r\n }}\r\n />\r\n
\r\n\r\n \r\n {/* */}\r\n
\r\n Please choose your shot
\r\n\r\n {scenesData &&\r\n scenesData.map((category, i) => (\r\n setcurrentCatIllustration(i)}\r\n >\r\n {category.label}\r\n
\r\n ))}\r\n \r\n {scenesData &&\r\n scenesData.map((category, i) => {\r\n return (\r\n
\r\n \r\n \r\n {/*
\r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n {category.showName ? category.showName : category.label}\r\n {category.icon && category.icon}\r\n \r\n \r\n {category.story.map(story => {\r\n return (\r\n \r\n {story.text}\r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n {category.options &&\r\n category.options.length > 0 &&\r\n category.options.map((item, itemIndex) => {\r\n return (\r\n \r\n debouncedThumbnailClick(category.label, itemIndex)\r\n }\r\n />\r\n );\r\n })}\r\n
\r\n\r\n {i < scenesData.length - 1 && }\r\n \r\n }>\r\n setisReady(true)} />\r\n \r\n
\r\n \r\n {title &&
\r\n );\r\n};\r\nconst ErrorPage = props => {\r\n const { errorType } = props;\r\n switch (errorType) {\r\n case errorTypes.INTERFACE_ERROR:\r\n return (\r\n {title}
}\r\n {content && {content}}\r\n {buttonText &&Please check again soon.\r\n \r\n }\r\n buttonText=\"Try Again\"\r\n />\r\n );\r\n case errorTypes.INVALID_LINK:\r\n return (\r\n