\r\n {children} \r\n
\r\n \r\n );\r\n};\r\nCustomCollapse.propTypes = {\r\n title: PropTypes.string,\r\n isOpenByDefault: PropTypes.bool\r\n};\r\nCustomCollapse.defaultProps = {\r\n isOpenByDefault: true\r\n};\r\nexport default CustomCollapse;\r\n","import React, { useEffect, useState } from \"react\";\r\n\r\nconst Fade = ({ show, children, className }) => {\r\n const [render, setRender] = useState(show);\r\n\r\n useEffect(() => {\r\n if (show) setRender(true);\r\n }, [show]);\r\n\r\n const onAnimationEnd = () => {\r\n if (!show) setRender(false);\r\n };\r\n\r\n return (\r\n render && (\r\n \r\n {showRugPopup && ( //this is for modal content to be shown in loginPage if required.\r\n
\r\n );\r\n};\r\nexport default ReactDelayRender({ delay: 0 })(LoginPage);\r\n","/* eslint-disable react-hooks/exhaustive-deps */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport { useUiState, useUiDispatch, mainUiActions } from \"../../../reducers/mainui.reducer\";\r\nimport AtDialog from \"../../molecules/AtDialog\";\r\nimport { H5, FormGroup, InputGroup, Button } from \"@blueprintjs/core\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\nimport { useDesignDetailState } from \"../../../reducers/designdetails.reducer\";\r\nimport AtIcon from \"../../atoms/AtIcon\";\r\nimport strings from \"../../../strings\";\r\n\r\nconst FavoritesDialog = props => {\r\n const { handleFavorite, favorites } = props;\r\n const uiState = useUiState();\r\n const dispatchUiState = useUiDispatch();\r\n const designDetailState = useDesignDetailState();\r\n const [val, setVal] = useState(\r\n `${designDetailState.designName} (${new Date().toLocaleString()})`\r\n );\r\n const [canbeadded, setCanbeadded] = useState(true);\r\n const [message, setMessage] = useState(null);\r\n useEffect(() => {\r\n setVal(`${designDetailState.designName} (${new Date().toLocaleString()})`);\r\n }, [designDetailState.designName]);\r\n const handleCloseDialog = () => {\r\n dispatchUiState({ type: mainUiActions.SET_SHOW_FAV_DIALOG, payload: false });\r\n };\r\n const handleSave = () => {\r\n if (!canbeadded) return;\r\n handleFavorite({ newName: val });\r\n handleCloseDialog();\r\n };\r\n useEffect(() => {\r\n if (!uiState.showFavoritesDialog) return;\r\n const favDes = favorites.filter(item => item.fullPath === designDetailState.fullpath);\r\n let shouldAdd = false;\r\n if (designDetailState.customizationFlag) {\r\n shouldAdd = true;\r\n }\r\n const notCustomized = favDes.find(item => !item.customizationFlag);\r\n if (!notCustomized) shouldAdd = true;\r\n if (shouldAdd) {\r\n setCanbeadded(true);\r\n setMessage(strings.favorite.dialogText);\r\n } else {\r\n setCanbeadded(false);\r\n setMessage(strings.favorite.designExistsTxt);\r\n }\r\n }, [uiState.showFavoritesDialog, designDetailState.customizationFlag]);\r\n return (\r\n \r\n
\r\n )}\r\n \r\n setShowRugPopup(false)}>\r\n ×\r\n \r\n\r\n
\r\n \r\n \r\n
\r\n \r\n Discover our diverse 3D environments\r\n and find the perfect room for your rug.\r\n
\r\n \r\n
\r\n\r\n - \r\n {images.map((image, index) => {\r\n let className = \"hide\";\r\n if (index === currentIndex) {\r\n className = \"act\";\r\n } else if (index === (currentIndex - 2 + image.length) % image.length) {\r\n className = \"prev old-prev\";\r\n } else if (index === (currentIndex - 1 + images.length) % images.length) {\r\n className = \"prev\";\r\n } else if (index === (currentIndex + 1) % images.length) {\r\n className = \"next\";\r\n } else if (index === (currentIndex + 2) % images.length) {\r\n className = \"next new-next\";\r\n }\r\n\r\n return (\r\n
- \r\n
\r\n
\r\n );\r\n })}\r\n
\r\n {\r\n setCurrentIndex(prevIndex => (prevIndex + 1) % images.length);\r\n clearInterval(intervalId);\r\n }}\r\n >\r\n \r\n {\r\n setCurrentIndex(prevIndex => (prevIndex - 1 + images.length) % images.length);\r\n clearInterval(intervalId);\r\n }}\r\n >\r\n \r\n
\r\n \r\n {images[currentIndex].title}\r\n
\r\n \r\n Upgrade your exploRUG with more rooms\r\n
\r\n \r\n \r\n\r\n
\r\n \r\n For any details, contact us at{\" \"}\r\n (window.location = \"mailto:info@explorug.net\")}>\r\n info@explorug.net\r\n \r\n
\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 Privacy Policy\r\n \r\n \r\n Terms of Use\r\n \r\n
\r\n \r\n }\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default FavoritesDialog;\r\n","import React from \"react\";\r\nimport AtDialog from \"../../molecules/AtDialog\";\r\nimport { useUiState, useUiDispatch, mainUiActions } from \"../../../reducers/mainui.reducer\";\r\nimport { Button, H5 } from \"@blueprintjs/core\";\r\nimport AtIcon from \"../../atoms/AtIcon\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\nimport strings from \"../../../strings\";\r\n\r\nconst VrDialog = () => {\r\n const uiState = useUiState();\r\n const dispatchUiState = useUiDispatch();\r\n const handleCloseDialog = () => {\r\n dispatchUiState({ type: mainUiActions.SET_SHOW_VR_DIALOG, payload: false });\r\n };\r\n const handleViewinBrowser = () => {};\r\n const handleEmailLink = () => {};\r\n return (\r\n {strings.favorite.saveAsFavorite}
\r\n\r\n \r\n {\r\n e.target.select();\r\n }}\r\n value={val}\r\n onChange={e => {\r\n setVal(e.target.value);\r\n setCanbeadded(true);\r\n setMessage(strings.favorite.dialogText);\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\nexport default VrDialog;\r\n","import React, { useState, useRef, useEffect } from \"react\";\r\nimport AtDialog from \"../../molecules/AtDialog\";\r\nimport { useUiState, useUiDispatch, mainUiActions } from \"../../../reducers/mainui.reducer\";\r\nimport { Button, H5, Tooltip } from \"@blueprintjs/core\";\r\nimport AtIcon from \"../../atoms/AtIcon\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\nimport strings from \"../../../strings\";\r\nimport { useDesignDetailState } from \"../../../reducers/designdetails.reducer\";\r\nimport { useVisualizationState, visViewModes } from \"../../../reducers/visualizations.reducer\";\r\nimport AppProvider from \"../../../api/appProvider\";\r\nimport classNames from \"classnames\";\r\nconst QuickLinkDialog = () => {\r\n const input = useRef(null);\r\n const [quickLinkData, setQuickLinkData] = useState();\r\n const [linkCopied, setLinkCopied] = useState(false);\r\n const uiState = useUiState();\r\n\r\n const designDetailState = useDesignDetailState();\r\n const visualizationState = useVisualizationState();\r\n const dispatchUiState = useUiDispatch();\r\n const handleCloseDialog = () => {\r\n dispatchUiState({ type: mainUiActions.SET_SHOW_QUICKLINK_DIALOG, payload: false });\r\n };\r\n useEffect(() => {\r\n if (!uiState.showQuickLinkDialog) {\r\n return;\r\n }\r\n setQuickLinkData(null);\r\n AppProvider.getInstanceUrl({\r\n file: designDetailState.fullpath,\r\n props: designDetailState.designDetails,\r\n view:\r\n visualizationState.viewMode === visViewModes.ROOM_VIEW\r\n ? visualizationState.activeNode.FullPath\r\n : \"\"\r\n }).then(response => {\r\n const { dataurl, url } = response;\r\n const imgData = `data:image/png;base64,${dataurl}`;\r\n setQuickLinkData({ url, imgData });\r\n });\r\n }, [uiState.showQuickLinkDialog]); //eslint-disable-line\r\n const handleCopytoClipboard = () => {\r\n if (!quickLinkData) return;\r\n input.current.select();\r\n document.execCommand(\"copy\");\r\n setLinkCopied(true);\r\n };\r\n return (\r\n {strings.vr.viewInVRDevice}
\r\n\r\n \r\n
\r\n {strings.vr.qrDesc}
\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 QuickLinkDialog;\r\n","import React, { useState, useEffect } from \"react\";\r\nimport AtDialog from \"../../molecules/AtDialog\";\r\nimport { useUiState, useUiDispatch, mainUiActions } from \"../../../reducers/mainui.reducer\";\r\nimport { Button, H5, InputGroup, FormGroup } from \"@blueprintjs/core\";\r\nimport AtIcon from \"../../atoms/AtIcon\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\nimport AppProvider from \"../../../api/appProvider\";\r\nimport { useDesignDetailState } from \"../../../reducers/designdetails.reducer\";\r\nimport { AtSpinner } from \"../../atoms/AtSpinner\";\r\nimport Fade from \"../../higher-order-components/Fade\";\r\nimport strings from \"../../../strings\";\r\n//TODO: similar designs\r\nconst RenameDialog = () => {\r\n const designDetailState = useDesignDetailState();\r\n const [designName, setDesignName] = useState(designDetailState.designName);\r\n const [isSaving, setIsSaving] = useState(false);\r\n const [isError, setIsError] = useState(false);\r\n const uiState = useUiState();\r\n\r\n const dispatchUiState = useUiDispatch();\r\n const handleCloseDialog = () => {\r\n dispatchUiState({ type: mainUiActions.SET_SHOW_RENAME_DIALOG, payload: false });\r\n };\r\n useEffect(() => {\r\n setDesignName(designDetailState.designName);\r\n }, [designDetailState.designName]);\r\n const handleSave = e => {\r\n e.preventDefault();\r\n const { fullpath, designDetails } = designDetailState;\r\n setIsSaving(true);\r\n\r\n AppProvider.saveOnServer({\r\n file: fullpath,\r\n props: designDetails,\r\n name: designName\r\n })\r\n .then(() => {\r\n setIsSaving(false);\r\n handleCloseDialog();\r\n setTimeout(() => {\r\n dispatchUiState({\r\n type: mainUiActions.SET_TOAST_PROPS,\r\n payload: {\r\n message: strings.tools.designSaveSuccess,\r\n intent: \"success\"\r\n }\r\n });\r\n }, 500);\r\n })\r\n .catch(err => {\r\n setIsError(true);\r\n setIsSaving(false);\r\n });\r\n };\r\n return (\r\n {strings.tools.quicklinkTitle}
\r\n\r\n setLinkCopied(false)}\r\n >\r\n \r\n {}}\r\n readOnly\r\n />\r\n
\r\n \r\n {strings.tools.quicklinkText}
\r\n \r\n }\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default RenameDialog;\r\n","import React from \"react\";\r\nimport { useUiDispatch, mainUiActions } from \"../../../reducers/mainui.reducer\";\r\nimport AtDialog from \"../../molecules/AtDialog\";\r\nimport { H5, Button } from \"@blueprintjs/core\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\nimport AtIcon from \"../../atoms/AtIcon\";\r\nimport strings from \"../../../strings\";\r\nconst ConfirmationDialog = props => {\r\n const {\r\n isOpen,\r\n dialogTitle = strings.tools.saveAndReplaceOnserver,\r\n question = \"Are you sure?\",\r\n confirmText = \"Confirm\",\r\n cancelText = \"Cancel\",\r\n handleConfirm,\r\n handleCancel\r\n } = props;\r\n\r\n const dispatchUiState = useUiDispatch();\r\n\r\n const handleCloseDialog = () => {\r\n dispatchUiState({ type: mainUiActions.SET_CONFIRMATION_DIALOG, payload: false });\r\n };\r\n const handleSecondaryClick = () => {\r\n handleCloseDialog();\r\n if (handleCancel) handleCancel();\r\n };\r\n const handlePrimaryClick = () => {\r\n if (handleConfirm) handleConfirm();\r\n handleCloseDialog();\r\n };\r\n return (\r\n {strings.tools.renameDesign}
\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 ConfirmationDialog;\r\n","import React from \"react\";\r\nimport { errorTypes } from \"../../../utils/utils\";\r\nimport { H1 } from \"@blueprintjs/core\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\nimport strings from \"../../../strings\";\r\nconst ErrorTem = props => {\r\n const { title, content, buttonText, onButtonClick, ...otherProps } = props;\r\n return (\r\n {dialogTitle}
\r\n\r\n
\r\n {question}
\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 && (\r\nPlease check again soon.\r\n \r\n }\r\n buttonText=\"Try Again\"\r\n onButtonClick={() => window.location.reload()}\r\n />\r\n );\r\n case errorTypes.INVALID_LINK:\r\n return (\r\n
\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default MapColorsDialog;\r\n","import { useEffect } from \"react\";\r\nimport { useUiDispatch, mainUiActions } from \"../../../reducers/mainui.reducer\";\r\nimport {\r\n useDispatchDesignList,\r\n designListActions,\r\n useDesignListState\r\n} from \"../../../reducers/designlist.reducer\";\r\nimport AppProvider from \"../../../api/appProvider\";\r\nimport { useDispatchColorList, colorListActions } from \"../../../reducers/colors.reducer\";\r\nimport {\r\n designDetailActions,\r\n useDesignDetailState,\r\n useDispatchDesignDetail\r\n} from \"../../../reducers/designdetails.reducer\";\r\nimport {\r\n arrangeTree,\r\n findInTree,\r\n getDesignName,\r\n getPathOffile,\r\n searchExactFileinTree\r\n} from \"../../../utils/treeutils\";\r\nimport { decodeColorsFromString, errorTypes, getExtension } from \"../../../utils/utils\";\r\nimport uuid from \"uuid\";\r\nimport {\r\n useVisualizationState,\r\n useDispatchVisualization,\r\n visualizationsActions,\r\n visViewModes\r\n} from \"../../../reducers/visualizations.reducer\";\r\nimport { getFromSessionStorage } from \"../../../utils/domUtils\";\r\nimport { processDesignPath } from \"../../../utils/treeutils\";\r\nimport strings from \"../../../strings\";\r\n\r\nexport const useHomeMount = () => {\r\n const dispatchUiState = useUiDispatch();\r\n const designListState = useDesignListState();\r\n const dispatchDesignList = useDispatchDesignList();\r\n const dispatchColorListState = useDispatchColorList();\r\n const visState = useVisualizationState();\r\n const dispatchVisState = useDispatchVisualization();\r\n const designDetailState = useDesignDetailState();\r\n const dispatchDesignDetails = useDispatchDesignDetail();\r\n let {\r\n initDesignPath,\r\n eCatalogDetails,\r\n initRoomPath,\r\n initDesignFolder,\r\n triggeredDesign,\r\n borderDesignWid,\r\n borderDesignHgt,\r\n unit,\r\n designWidth,\r\n designHeight,\r\n props\r\n } = window.initialData;\r\n const showAllRooms = window.flags.visualizations.showAllRoomFiles;\r\n useEffect(() => {\r\n var url =\r\n window.location !== window.parent.location ? document.referrer : document.location.href;\r\n\r\n // console.log(window.location !== window.parent.location, url, document.referrer);\r\n\r\n AppProvider.fetchColorList({}).then(colors => {\r\n if (colors && colors.length) {\r\n if (\r\n window.flags.colorSelectionBox.showColorPomsImages ||\r\n window.flags.colorAreaSwatch.showColorPomsImages\r\n ) {\r\n var colorListStr = \"\";\r\n colors.forEach(colorList => {\r\n const colorRows = colorList.ColorRows;\r\n const colorHexList = colorRows.map(colorRow => colorRow.Color);\r\n for (let i = 0; i < colorHexList.length; i++) {\r\n colorListStr += colorHexList[i].replace(\"#\", \"\") + \"|\";\r\n }\r\n });\r\n colorListStr = colorListStr.slice(0, -1);\r\n AppProvider.createColorPoms(colorListStr).then(response => {});\r\n }\r\n }\r\n dispatchColorListState({ type: colorListActions.SET_COLORS, payload: colors });\r\n });\r\n const { TextureOptions } = window;\r\n const texArr = [];\r\n TextureOptions.DefaultTextureVisible.forEach((tex, i) => {\r\n if (tex) texArr.push(i);\r\n });\r\n TextureOptions.AdditionalTextureNames.forEach((item, i) => {\r\n texArr.push(4 + i);\r\n });\r\n TextureOptions.CustomTextureIndices.forEach(item => {\r\n texArr.push(item);\r\n });\r\n AppProvider.readTextureImages(texArr).then(colorTextures => {\r\n dispatchColorListState({ type: colorListActions.SET_COLOR_TEXTURES, payload: colorTextures });\r\n });\r\n if (eCatalogDetails && initDesignPath) {\r\n const p = initDesignPath.split(\"/\").filter(item => item && item !== \"\");\r\n const designNamewithExt = p[p.length - 1];\r\n const designNamewithExtArr = designNamewithExt.split(\".\");\r\n let designName = designNamewithExtArr.slice(0, designNamewithExtArr.length - 1).join(\".\");\r\n\r\n // const name = initDesignPath.split(\"/\").find(item => item.substr(0, 1) === \".\");\r\n // if (name && !window.flags.designVariations.appendDesignName) {\r\n // designName = `${name.substr(1)} ${designName}`;\r\n // }\r\n\r\n p.pop();\r\n const path = \"/\" + p.join(\"/\");\r\n AppProvider.fetchDesignList({ struct: true }).then(nestedDesignList => {\r\n const initDesignName = window.flags.initDesignNameInUrl\r\n ? getDesignName(initDesignPath)\r\n : \"\";\r\n const initDesignPathInTree = findInTree({\r\n rawTree: nestedDesignList,\r\n initDesignPath,\r\n initDesignFolder,\r\n initDesignName\r\n });\r\n\r\n const designPath = window.flags.initDesignNameInUrl ? initDesignPathInTree : initDesignPath;\r\n const { copiedNode: tree, selectedFile, selectedFolder } = arrangeTree({\r\n tree: nestedDesignList,\r\n initDesignPath: designPath\r\n });\r\n\r\n AppProvider.getDesignThumbnails({ designs: [{ fullPath: designPath }] })\r\n .then(thum => {\r\n const thumbnail = thum[0];\r\n const { thumbUrl, designProps, fullPath } = thumbnail;\r\n if (!thumbUrl || !designProps) {\r\n dispatchUiState({ type: mainUiActions.SET_ERROR, payload: errorTypes.INVALID_LINK });\r\n return;\r\n }\r\n let designDetails = designProps;\r\n\r\n if (fullPath.toLowerCase() === designPath.toLowerCase()) {\r\n dispatchDesignList({\r\n type: designListActions.SET_TREE,\r\n payload: {\r\n tree,\r\n selectedFile: {\r\n id: uuid.v4(),\r\n name: designName,\r\n location: path,\r\n type: \"file\",\r\n fullPath,\r\n thumbUrl,\r\n designProps: designDetails\r\n },\r\n selectedFolder\r\n }\r\n });\r\n if (!selectedFile) {\r\n dispatchDesignList({\r\n type: designListActions.SELECT_DESIGN,\r\n payload: {\r\n id: uuid.v4(),\r\n name: designName,\r\n location: path,\r\n type: \"file\",\r\n fullPath,\r\n thumbUrl,\r\n designProps: designDetails\r\n }\r\n });\r\n }\r\n //postmessage\r\n if (window.flags.postToParentWhenLoaded)\r\n window.parent.postMessage(\"explorug loaded\", \"*\");\r\n }\r\n })\r\n .catch(error => {\r\n dispatchUiState({ type: mainUiActions.SET_ERROR, payload: errorTypes.INVALID_LINK });\r\n });\r\n });\r\n }\r\n // if (customDesignUrl && initRoomPath) {\r\n // const loadRoom = async () => {\r\n // const room = { FullPath: initRoomPath };\r\n // const thumbs = await AppProvider.getRoomThumbnails({ rooms: [room] });\r\n // const roomWithThumb = { ...thumbs[0], id: uuid.v4() };\r\n // if (!roomWithThumb.Thumb) return;\r\n // dispatchVisState({\r\n // type: visualizationsActions.SET_ACTIVE_NODE,\r\n // payload: roomWithThumb\r\n // });\r\n // dispatchVisState({\r\n // type: visualizationsActions.SET_VIEW_MODE,\r\n // payload: visViewModes.ROOM_VIEW\r\n // });\r\n // };\r\n // loadRoom();\r\n // }\r\n\r\n // document.addEventListener('keydown', function(event){\r\n\r\n // console.log(`Key: ${event.key} with keycode ${event.keyCode} has been pressed`);\r\n // if(event.key ==='w'){\r\n // triggeredDesign = window.initialData.triggeredDesign;// 'Designs/Internal/Fillpattern/Scamet Hoph.ctf';\r\n // //window.initialData.triggeredDesign = 'Designs/Internal/Fillpattern/Scamet Hoph.ctf';\r\n // console.log(\"document.addEventListener -> triggeredDesign\", triggeredDesign)\r\n\r\n // }\r\n // }, false )\r\n\r\n // return () => {\r\n // window.removeEventListener(\"storage\");\r\n // };\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (!triggeredDesign || triggeredDesign === \"\") return;\r\n let designPath = processDesignPath(triggeredDesign);\r\n if (!initDesignFolder) {\r\n const sp = designPath.split(\".\").filter(item => item && item !== \"\");\r\n const ext = sp[sp.length - 1];\r\n if (ext.toLowerCase() !== \"ctf\" && ext.toLowerCase() !== \"jpg\") {\r\n designPath = `${designPath}.${window.InterfaceElements.IsJpeg ? \"jpg\" : \"ctf\"}`;\r\n }\r\n }\r\n\r\n if (!designListState || !designListState.tree) return;\r\n\r\n const searchResults = searchExactFileinTree(designListState.tree, designPath);\r\n\r\n if (designListState.selectedFile?.fullPath === designPath) return;\r\n //if (searchResults && searchResults.length) {\r\n AppProvider.getDesignThumbnails({ designs: [{ fullPath: designPath }] })\r\n .then(thum => {\r\n const thumbnail = thum[0];\r\n const { thumbUrl, designProps, fullPath } = thumbnail;\r\n if (!thumbUrl || !designProps) {\r\n dispatchUiState({ type: mainUiActions.SET_ERROR, payload: errorTypes.INVALID_LINK });\r\n return;\r\n }\r\n let resetUI = getFromSessionStorage(\"resetUI\");\r\n resetUI = resetUI !== undefined || resetUI !== null ? resetUI : true;\r\n if (fullPath.toLowerCase() === designPath.toLowerCase()) {\r\n const triggeredVariation = window.initialData.initDesignVariation;\r\n let str = getFromSessionStorage(\"props\");\r\n\r\n if (\r\n !triggeredVariation ||\r\n triggeredVariation === \"\" ||\r\n triggeredVariation === \"original\"\r\n ) {\r\n let designToOpen;\r\n if (searchResults && searchResults.length) {\r\n designToOpen = { ...searchResults[0], thumbUrl, designProps };\r\n } else {\r\n const p = fullPath.split(\"/\").filter(item => item && item !== \"\");\r\n p.pop();\r\n const path = \"/\" + p.join(\"/\");\r\n\r\n designToOpen = {\r\n id: uuid.v4(),\r\n name: getDesignName(fullPath),\r\n location: path,\r\n type: \"file\",\r\n fullPath,\r\n thumbUrl,\r\n designProps\r\n };\r\n }\r\n dispatchDesignList({\r\n type: designListActions.SELECT_DESIGN,\r\n payload: { selectedFile: designToOpen, activeVariation: {}, activeColorScheme: {} }\r\n });\r\n } else {\r\n console.log(\r\n \"triggeredDesign\",\r\n triggeredDesign,\r\n \"-> triggeredVariation\",\r\n triggeredVariation\r\n );\r\n }\r\n\r\n const isRoomviewTriggered = initRoomPath && initRoomPath !== \"\";\r\n if (resetUI) {\r\n dispatchUiState({ type: mainUiActions.SET_MAINUIRESET, payload: true });\r\n if (!isRoomviewTriggered || isRoomviewTriggered === \"\") {\r\n if (resetUI === 2) {\r\n // if resetui ===2, show triggered design in current room view\r\n const isRoomView = visState.activeNode && visState.activeNode.id !== \"0\";\r\n if (!isRoomView) {\r\n dispatchVisState({\r\n type: visualizationsActions.SET_VIEW_MODE,\r\n payload: visViewModes.DESIGN_VIEW_DEEPZOOM\r\n });\r\n }\r\n } else {\r\n dispatchVisState({\r\n type: visualizationsActions.SET_VIEW_MODE,\r\n payload: visViewModes.DESIGN_VIEW_DEEPZOOM\r\n });\r\n }\r\n\r\n // if (!isRoomviewTriggered || isRoomviewTriggered === \"\") {\r\n // if(resetUI === 2){ // if resetui ===2, show triggered design in current room view\r\n // const isRoomView = visState.activeNode && visState.activeNode.id !== \"0\";\r\n // if(!isRoomView){\r\n // dispatchVisState({\r\n // type: visualizationsActions.SET_VIEW_MODE,\r\n // payload: visViewModes.DESIGN_VIEW_DEEPZOOM\r\n // });\r\n // }\r\n // else{\r\n // dispatchVisState({\r\n // type: visualizationsActions.SET_VIEW_MODE,\r\n // payload: visViewModes.DESIGN_VIEW_DEEPZOOM\r\n // });\r\n // setTimeout(() => {\r\n // dispatchVisState({\r\n // type: visualizationsActions.SET_VIEW_MODE,\r\n // payload: visViewModes.ROOM_VIEW\r\n // });\r\n // }, 500);\r\n // }\r\n // }\r\n // else{\r\n // dispatchVisState({\r\n // type: visualizationsActions.SET_VIEW_MODE,\r\n // payload: visViewModes.DESIGN_VIEW_DEEPZOOM\r\n // });\r\n\r\n // }\r\n }\r\n }\r\n // if (str && str !== \"\") {\r\n // str = decodeURIComponent(str);\r\n // const triggeredDesignColors = str ? decodeColorsFromString(str) : null;\r\n\r\n // if (triggeredDesignColors !== designDetailState.designDetails.DesignColors) {\r\n // if (triggeredDesignColors) {\r\n // dispatchDesignDetails({\r\n // type: designDetailActions.SET_DESIGNCOLORS,\r\n // payload: triggeredDesignColors\r\n // });\r\n // }\r\n // }\r\n // }\r\n if (\r\n borderDesignWid &&\r\n borderDesignHgt &&\r\n (borderDesignWid !== designDetailState.designDetails.PhysicalWidth ||\r\n borderDesignHgt !== designDetailState.designDetails.PhysicalHeight)\r\n ) {\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_RUG_PHYSICAL_SIZE,\r\n payload: {\r\n PhysicalHeight: parseFloat(borderDesignHgt),\r\n PhysicalWidth: parseFloat(borderDesignWid)\r\n }\r\n });\r\n }\r\n if (\r\n designWidth &&\r\n designHeight &&\r\n (designWidth !== designDetailState.designDetails.PhysicalWidth ||\r\n designHeight !== designDetailState.designDetails.PhysicalHeight)\r\n ) {\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_RUG_PHYSICAL_SIZE,\r\n payload: {\r\n PhysicalHeight: parseFloat(designWidth),\r\n PhysicalWidth: parseFloat(designHeight),\r\n Unit: unit\r\n }\r\n });\r\n }\r\n }\r\n })\r\n .catch(error => {\r\n console.log(designPath, \"is not found\");\r\n let designName = designPath;\r\n if (designPath && designPath !== \"\" && designPath[designPath.length - 1] === \"/\") {\r\n designPath = designPath.substring(0, designPath.length - 1);\r\n designName = designPath.split(\"/\").pop();\r\n }\r\n dispatchUiState({\r\n type: mainUiActions.SET_TOAST_PROPS,\r\n payload: {\r\n message: `The design ${designName} could not be found in the specified location.`,\r\n intent: \"warning\"\r\n }\r\n });\r\n });\r\n }, [triggeredDesign]);\r\n\r\n useEffect(() => {\r\n if (!props) return;\r\n if (!designListState || !designListState.tree) return;\r\n let str = props; //getFromSessionStorage(\"props\");\r\n\r\n if (str && str !== \"\") {\r\n str = decodeURIComponent(str);\r\n const triggeredDesignColors = str ? decodeColorsFromString(str) : null;\r\n if (!triggeredDesignColors) {\r\n console.log(\"props is invalid\");\r\n return;\r\n }\r\n const currentDesignColors = designDetailState.designDetails.DesignColors;\r\n console.log(\r\n \"useEffect -> currentDesignColors\",\r\n currentDesignColors,\r\n \"triggeredDesignColors\",\r\n triggeredDesignColors\r\n );\r\n if (\r\n JSON.stringify(triggeredDesignColors) !== JSON.stringify(currentDesignColors) &&\r\n triggeredDesignColors.length === currentDesignColors.length\r\n ) {\r\n if (triggeredDesignColors) {\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_DESIGNCOLORS,\r\n payload: triggeredDesignColors\r\n });\r\n }\r\n } else {\r\n console.log(\"passed props str does not match for the current design\");\r\n }\r\n }\r\n }, [props]);\r\n\r\n const getSelectedRoomFromRoomList = (illustrations, initRoomPath) => {\r\n var roomWithThumb = null;\r\n const roomsWithThumbs = illustrations;\r\n let ind = 0;\r\n if (initRoomPath && roomsWithThumbs) {\r\n ind = roomsWithThumbs.findIndex(\r\n item => item.FullPath.toLowerCase() === initRoomPath.toLowerCase()\r\n );\r\n if (ind < 0) {\r\n dispatchUiState({\r\n type: mainUiActions.SET_TOAST_PROPS,\r\n payload: {\r\n message: strings.toastMessages.triggeredRoomNotFound,\r\n intent: \"warning\",\r\n timeout: 7000\r\n }\r\n });\r\n ind = 0;\r\n }\r\n roomWithThumb = roomsWithThumbs[ind];\r\n }\r\n return roomWithThumb;\r\n };\r\n const setRoomList = async () => {\r\n var roomList = null;\r\n const rooms = await AppProvider.fetchRoomList({});\r\n if (!rooms || !rooms.length) return null;\r\n const roomsControl = window.flags.roomsControl || [];\r\n if (roomsControl.length) {\r\n dispatchVisState({\r\n type: visualizationsActions.SET_ROOMS_CONTROL,\r\n payload: roomsControl\r\n });\r\n }\r\n var filteredRooms;\r\n if (showAllRooms) {\r\n filteredRooms = rooms.filter(\r\n item => item.Type === \"file\" && getExtension(item.FullPath) === \"crf3d\"\r\n );\r\n } else {\r\n filteredRooms = rooms.filter(\r\n item =>\r\n item.Type === \"file\" &&\r\n getExtension(item.FullPath) === \"crf3d\" &&\r\n getPathOffile(item.FullPath) === \"Rooms\"\r\n );\r\n }\r\n if (filteredRooms.length) {\r\n roomList = filteredRooms.map(item => ({ ...item, label: item.Name }));\r\n\r\n dispatchVisState({\r\n type: visualizationsActions.SET_ILLUSTRATIONS,\r\n payload: roomList\r\n });\r\n }\r\n return roomList;\r\n };\r\n const loadRoom = async () => {\r\n var roomWithThumb = getSelectedRoomFromRoomList(visState.illustrations, initRoomPath);\r\n if (!roomWithThumb) {\r\n const room = { FullPath: initRoomPath };\r\n const thumbs = await AppProvider.getRoomThumbnails({ rooms: [room] });\r\n roomWithThumb = { ...thumbs[0], id: uuid.v4() };\r\n if (!roomWithThumb.Thumb) {\r\n const roomlist = setRoomList();\r\n if (roomlist) {\r\n roomWithThumb = getSelectedRoomFromRoomList(roomlist, initRoomPath);\r\n } else {\r\n dispatchUiState({\r\n type: mainUiActions.SET_TOAST_PROPS,\r\n payload: {\r\n message: strings.toastMessages.noRoomShowdesign,\r\n intent: \"warning\",\r\n timeout: 7000\r\n }\r\n });\r\n dispatchVisState({\r\n type: visualizationsActions.SET_VIEW_MODE,\r\n payload: visViewModes.DESIGN_VIEW_DEEPZOOM\r\n });\r\n return;\r\n }\r\n }\r\n }\r\n\r\n dispatchVisState({\r\n type: visualizationsActions.SET_ACTIVE_NODE,\r\n payload: roomWithThumb\r\n });\r\n dispatchVisState({\r\n type: visualizationsActions.SET_VIEW_MODE,\r\n payload: visViewModes.ROOM_VIEW\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (initRoomPath && initRoomPath !== \"\") {\r\n if (visState.activeNode && visState.activeNode.id === \"0\") return;\r\n if (initRoomPath === \"myroom\") {\r\n dispatchVisState({\r\n type: visualizationsActions.SET_VIEW_MODE,\r\n payload: visViewModes.MY_ROOM\r\n });\r\n } else if (initRoomPath === \"perspectiveview\") {\r\n if (\r\n window.flags.visualizations.designViews.includes(visViewModes.DESIGN_VIEW_PERSPECTIVE)\r\n ) {\r\n window.flags.visualizations.defaultView = visViewModes.DESIGN_VIEW_PERSPECTIVE;\r\n dispatchVisState({\r\n type: visualizationsActions.SET_VIEW_MODE,\r\n payload: window.flags.visualizations.defaultView\r\n });\r\n }\r\n } else if (initRoomPath === \"foldedbackview\") {\r\n if (window.flags.visualizations.designViews.includes(visViewModes.DESIGN_VIEW_FOLDEDBACK)) {\r\n window.flags.visualizations.defaultView = visViewModes.DESIGN_VIEW_FOLDEDBACK;\r\n dispatchVisState({\r\n type: visualizationsActions.SET_VIEW_MODE,\r\n payload: window.flags.visualizations.defaultView\r\n });\r\n }\r\n } else {\r\n loadRoom();\r\n }\r\n } else if (initRoomPath === \"\") {\r\n dispatchVisState({\r\n type: visualizationsActions.SET_VIEW_MODE,\r\n payload: visViewModes.DESIGN_VIEW_DEEPZOOM\r\n });\r\n }\r\n }, [initRoomPath]);\r\n};\r\n","import * as THREE from \"three\";\r\nimport { OrbitControls } from \"./OrbitControls\";\r\nimport { FBXLoader } from \"three/examples/jsm/loaders/FBXLoader\";\r\nimport {\r\n convertArrIntoRad,\r\n areaOfellipse,\r\n createVector,\r\n resizeKeepingAspect\r\n} from \"../../../utils/utils\";\r\nimport { readImage } from \"../../../utils/domUtils\";\r\nimport { clearCanvas, canvasToBlobPromise, createCanvas } from \"../../../utils/canvasutils\";\r\nimport { convertUnit } from \"../../../utils/utils\";\r\nimport AppProvider from \"../../../api/appProvider\";\r\nimport { Box3 } from \"three\";\r\nconst raycaster = new THREE.Raycaster();\r\nconst fbxLoader = new FBXLoader();\r\n\r\nexport default class MyRoomHelper {\r\n constructor() {\r\n this.scene = new THREE.Scene();\r\n this.textureLoader = new THREE.TextureLoader();\r\n this.offset = new THREE.Vector3();\r\n this.fbxLoaded = false;\r\n this.surfaceName = \"Box002\";\r\n this.scene = new THREE.Scene();\r\n\r\n this.zoomCarpetStep = 0.05;\r\n this.maxZoom = 2;\r\n this.minZoom = 0.5;\r\n // this.carpetRatio = 1;\r\n this.carpetRatio = { w: 1, h: 1 };\r\n this.origCarpetDims = { w: 10, h: 10 };\r\n this.scaleFactor = { x: 0, y: 0 };\r\n this.pileHeight = 0.25;\r\n this.myRoomPointsOBJ = {\r\n floorpoints: [],\r\n notfloorpoints: [],\r\n carpetpoints: []\r\n };\r\n //window.myRoomPointsOBJ = this.myRoomPointsOBJ;\r\n\r\n this.pointsHistory = {\r\n floorpoints: \"\",\r\n notfloorpoints: \"\",\r\n inputSelected: \"\"\r\n };\r\n this.pointsHistoryArray = [];\r\n\r\n this.constraints = window.constraints = {\r\n audio: false,\r\n video: true\r\n };\r\n this.initCarpetPos = null;\r\n this.initCarpetRot = null;\r\n this.initCarpetScale = null;\r\n this.designDetails = null;\r\n this.designPath = null;\r\n this.canvasInitiated = false;\r\n }\r\n initCanvas({ bgCanvas, rendererCanvas, maskCanvas, gizmoCanvas, inputCanvas }) {\r\n this.canvasInitiated = true;\r\n this.designPath = null;\r\n this.bgCanvas = bgCanvas;\r\n this.rendererCanvas = rendererCanvas;\r\n this.maskCanvas = maskCanvas;\r\n this.gizmoCanvas = gizmoCanvas;\r\n this.inputCanvas = inputCanvas;\r\n }\r\n updateBackground({ bgImage, width, height }) {\r\n this.bgImage = bgImage;\r\n const bgCtx = this.bgCanvas.getContext(\"2d\");\r\n this.bgCanvas.width = width;\r\n this.bgCanvas.height = height;\r\n this.origWid = width;\r\n this.origHgt = height;\r\n\r\n this.scaleFactor = { x: 0, y: 0 };\r\n\r\n clearCanvas(this.bgCanvas, width, height);\r\n bgCtx.drawImage(bgImage, 0, 0, width, height);\r\n }\r\n initScene({ dims, sceneConfig }) {\r\n this.dims = dims;\r\n const { width, height } = this.dims;\r\n this.renderer = new THREE.WebGLRenderer({\r\n canvas: this.rendererCanvas,\r\n preserveDrawingBuffer: true,\r\n alpha: true,\r\n antialias: false\r\n });\r\n this.renderer.setPixelRatio(devicePixelRatio);\r\n this.renderer.setSize(width, height);\r\n this.camera = new THREE.PerspectiveCamera(40, width / height, 0.1, 10000);\r\n this.camera.position.set(0, 160, 386);\r\n\r\n let target = [0, 0, 0];\r\n this.orbit = new OrbitControls(this.camera, this.renderer.domElement);\r\n this.orbit.screenSpacePanning = true;\r\n this.orbit.enabled = true;\r\n this.orbit.minPolarAngle = -0.3490658503988659;\r\n this.orbit.maxPolarAngle = 1.7453292519943295;\r\n // this.orbit.object.position.set(0, 160, 400)\r\n this.orbit.target = new THREE.Vector3(...target);\r\n this.orbit.addEventListener(\"change\", () => {\r\n this.render();\r\n });\r\n return Promise.resolve();\r\n }\r\n render() {\r\n this.renderer.render(this.scene, this.camera);\r\n }\r\n setupCarpet(fbxUrl, shouldSetPosition) {}\r\n setCarpetVisibility(visible) {\r\n if (this.carpetMesh) this.carpetMesh.visible = visible;\r\n this.render();\r\n }\r\n loadDesignCanvas({\r\n designCanvas,\r\n fbxUrl,\r\n designDetails,\r\n designPath,\r\n customWid,\r\n customHgt,\r\n unit\r\n }) {\r\n const shouldResetPosRot = this.designDetails === null;\r\n const shouldResetScale = this.designPath !== designPath || (customWid && customHgt);\r\n this.designDetails = designDetails;\r\n this.designPath = designPath;\r\n return new Promise((resolve, reject) => {\r\n const designTexture = new THREE.CanvasTexture(designCanvas);\r\n designTexture.anisotropy = this.renderer.capabilities.getMaxAnisotropy();\r\n // designTexture.needsUpdate = true;\r\n designTexture.colorSpace = THREE.SRGBColorSpace;\r\n let position = [0, 0, 0],\r\n rotation = [-90, 0, 90];\r\n\r\n let repeat = [1, 1];\r\n if (window.InterfaceElements.IsWallToWall) {\r\n const walltowalldims = [50, 50];\r\n if (this.designDetails.Unit != \"ft\") {\r\n //if in cm change it to ft, done for endlessknot\r\n const convertedUnitWidth = convertUnit(\r\n this.designDetails.Unit,\r\n \"ft\",\r\n this.designDetails.PhysicalWidth,\r\n 2\r\n );\r\n const convertedUnitHeight = convertUnit(\r\n this.designDetails.Unit,\r\n \"ft\",\r\n this.designDetails.PhysicalHeight,\r\n 2\r\n );\r\n repeat = [\r\n walltowalldims[0] / convertedUnitWidth,\r\n walltowalldims[1] / convertedUnitHeight\r\n ];\r\n } else {\r\n repeat = [\r\n walltowalldims[0] / this.designDetails.PhysicalWidth,\r\n walltowalldims[1] / this.designDetails.PhysicalHeight\r\n ];\r\n }\r\n let offsetX = 0;\r\n let offsetY = 0;\r\n if (window.flags.visualizations?.wallToWallCenterRepeat?.x) {\r\n let halfRepeatX = repeat[0] / 2;\r\n offsetX = 0.5 - (halfRepeatX - Math.floor(halfRepeatX)); //offset to center the tile center as canvas center horizontally\r\n }\r\n if (window.flags.visualizations?.wallToWallCenterRepeat?.y) {\r\n let halfRepeatY = repeat[0] / 2;\r\n offsetY = 0.5 - (halfRepeatY - Math.floor(halfRepeatY)); //offset to center the tile center as canvas center vertically\r\n }\r\n designTexture.offset.fromArray([offsetX, offsetY]);\r\n designTexture.wrapS = designTexture.wrapT = THREE.RepeatWrapping;\r\n designTexture.repeat.fromArray([repeat[0], repeat[1]]);\r\n designTexture.colorSpace = THREE.SRGBColorSpace;\r\n //take it from props/parameteres\r\n const z =\r\n (1.25 *\r\n 107.6 *\r\n 10 *\r\n convertUnit(this.designDetails.Unit, \"ft\", this.designDetails.PhysicalHeight) *\r\n (1 + this.scaleFactor.y)) /\r\n walltowalldims[1]; //107.6 = half of the rug.fbx which is 215 units (check in blender) (215 units = 1 ft)\r\n const x =\r\n (1.25 *\r\n 107.6 *\r\n 10 *\r\n convertUnit(this.designDetails.Unit, \"ft\", this.designDetails.PhysicalWidth) *\r\n (1 + this.scaleFactor.x)) /\r\n walltowalldims[0];\r\n let fac = 1;\r\n const min = new THREE.Vector3(\r\n (position[0] - x) / fac,\r\n position[1] - 30,\r\n (position[2] - z) / fac\r\n );\r\n const max = new THREE.Vector3(\r\n (position[0] + x) / fac,\r\n position[1] + 30,\r\n (position[2] + z) / fac\r\n );\r\n this.bounds = new Box3(min, max);\r\n }\r\n\r\n this.material = new THREE.MeshBasicMaterial({\r\n map: designTexture,\r\n transparent: true,\r\n needsUpdate: true\r\n });\r\n let IsIrregular;\r\n if (this.designDetails) {\r\n const PhysicalWidth =\r\n convertUnit(this.designDetails.Unit, \"ft\", this.designDetails.PhysicalWidth) * repeat[0];\r\n const PhysicalHeight =\r\n convertUnit(this.designDetails.Unit, \"ft\", this.designDetails.PhysicalHeight) * repeat[1];\r\n IsIrregular = this.designDetails.IsIrregular;\r\n\r\n if (\r\n this.fbxLoaded &&\r\n (this.origCarpetDims.w !== PhysicalWidth || this.origCarpetDims.h !== PhysicalHeight)\r\n ) {\r\n // if (this.fbxLoaded && (this.carpetRatio !== (PhysicalWidth / PhysicalHeight))) {\r\n // this.carpetRatioNew = PhysicalWidth / PhysicalHeight;\r\n this.carpetRatioNew = {\r\n w: PhysicalWidth / this.origCarpetDims.w,\r\n h: PhysicalHeight / this.origCarpetDims.h\r\n };\r\n if (!shouldResetScale) {\r\n this.initCarpetScale = [\r\n this.carpetRatioNew.w + this.scaleFactor.x * this.carpetRatioNew.w,\r\n this.carpetRatioNew.h + this.scaleFactor.y * this.carpetRatioNew.h,\r\n IsIrregular ? 0.1 : this.pileHeight\r\n ];\r\n this.carpetMesh.scale.set(...this.initCarpetScale);\r\n }\r\n }\r\n this.carpetRatio = {\r\n w: PhysicalWidth / this.origCarpetDims.w,\r\n h: PhysicalHeight / this.origCarpetDims.h\r\n };\r\n }\r\n const setup = () => {\r\n if (shouldResetPosRot) {\r\n this.initCarpetPos = position;\r\n this.initCarpetRot = rotation;\r\n this.carpetMesh.position.fromArray(position);\r\n this.carpetMesh.rotation.fromArray(convertArrIntoRad(rotation));\r\n }\r\n if (shouldResetScale) {\r\n this.initCarpetScale = [\r\n this.carpetRatio.w + this.scaleFactor.x * this.carpetRatio.w,\r\n this.carpetRatio.h + this.scaleFactor.y * this.carpetRatio.h,\r\n IsIrregular ? 0.1 : this.pileHeight\r\n ];\r\n\r\n if (customWid && customHgt) {\r\n customWid = convertUnit(unit, \"ft\", customWid);\r\n customHgt = convertUnit(unit, \"ft\", customHgt);\r\n this.carpetMesh.scale.set(\r\n customWid / 10,\r\n customHgt / 10,\r\n IsIrregular ? 0.1 : this.pileHeight\r\n );\r\n } else {\r\n this.carpetMesh.scale.set(...this.initCarpetScale);\r\n }\r\n }\r\n var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });\r\n this.carpetMesh.material = material;\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.fbxLoaded = true;\r\n this.render();\r\n resolve();\r\n };\r\n if (!this.fbxLoaded)\r\n fbxLoader.load(\r\n fbxUrl,\r\n obj => {\r\n this.carpetMesh = obj.getObjectByName(this.surfaceName);\r\n this.scene.add(this.carpetMesh);\r\n this.setCarpetVisibility(false);\r\n setup();\r\n },\r\n undefined,\r\n console.error\r\n );\r\n else setup();\r\n });\r\n }\r\n updateMap() {\r\n this.carpetMesh.material.map.needsUpdate = true;\r\n this.render();\r\n }\r\n uploadRoom({ bgCanvas }) {\r\n return canvasToBlobPromise(bgCanvas).then(bgBlob => {\r\n return AppProvider.uploadMyRoom(bgBlob).then(roomId => {\r\n if (roomId === \"\" || roomId === \"maxsize\") {\r\n //TODO:handle error in room id\r\n return roomId;\r\n }\r\n return { roomId };\r\n });\r\n });\r\n }\r\n updateMask = async ({ maskUrl, maskImage, maskCanvas, bgCanvas, width, height }) => {\r\n const maskRoomImage = maskUrl ? await readImage(maskUrl) : maskImage;\r\n width = width || maskCanvas.width;\r\n height = height || maskCanvas.height;\r\n maskCanvas.width = width;\r\n maskCanvas.height = height;\r\n clearCanvas(maskCanvas, width, height);\r\n const tmpCanvas = createCanvas(width, height);\r\n tmpCanvas.getContext(\"2d\").drawImage(bgCanvas, 0, 0, width, height);\r\n this.makeMask(tmpCanvas, width, height, maskRoomImage);\r\n maskCanvas.getContext(\"2d\").drawImage(tmpCanvas, 0, 0, width, height);\r\n };\r\n makeMask(canvas, w, h, maskImg, flag = false) {\r\n const tCanvas = createCanvas(w, h);\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] = 255 - maskData.data[i];\r\n }\r\n }\r\n shCtx.putImageData(imgData, 0, 0);\r\n this.roomdataurl = canvas.toDataURL(\"image/png\");\r\n return maskData;\r\n }\r\n async uploadMask({ maskUrl, roomId }) {\r\n if (!maskUrl || !roomId) return;\r\n return new Promise((resolve, reject) => {\r\n readImage(maskUrl).then(maskImage512 => {\r\n const tmpCanvas = createCanvas(maskImage512.width, maskImage512.height);\r\n\r\n tmpCanvas.getContext(\"2d\").drawImage(maskImage512, 0, 0);\r\n canvasToBlobPromise(tmpCanvas).then(mask512Blob => {\r\n AppProvider.uploadMyRoomMask({ maskUrl: mask512Blob, roomId }).then(() => {\r\n resolve();\r\n });\r\n });\r\n });\r\n });\r\n }\r\n resetCarpetTransform() {\r\n if (!this.carpetMesh || !this.initCarpetPos) return;\r\n this.carpetMesh.position.fromArray(this.initCarpetPos);\r\n this.carpetMesh.rotation.fromArray(convertArrIntoRad(this.initCarpetRot));\r\n this.carpetMesh.scale.set(...this.initCarpetScale);\r\n this.render();\r\n }\r\n rotateCarpet(angleinDeg) {\r\n this.carpetMesh.rotation.z += (angleinDeg * Math.PI) / 180;\r\n this.render();\r\n }\r\n scaleUpCarpet() {\r\n const step = this.zoomCarpetStep;\r\n this.scaleCarpet(step);\r\n }\r\n scaleDownCarpet() {\r\n const step = -this.zoomCarpetStep;\r\n this.scaleCarpet(step);\r\n }\r\n scaleCarpet(step) {\r\n const newValue = (this.carpetMesh.scale.x + step * this.carpetRatio.w) / this.carpetRatio.w;\r\n if (this.maxZoom >= newValue && newValue >= this.minZoom) {\r\n this.carpetMesh.scale.x += step * this.carpetRatio.w;\r\n this.carpetMesh.scale.y += step * this.carpetRatio.h;\r\n this.scaleFactor.x += step;\r\n this.scaleFactor.y += step;\r\n // this.roomData.scale_factor.x += step;\r\n // this.roomData.scale_factor.y += step;\r\n this.render();\r\n }\r\n }\r\n adjustPlaneHeight(increaseBool, step = 5) {\r\n const deltaY = !increaseBool ? +step : -step;\r\n this.orbit.pan(0, deltaY);\r\n this.orbit.update();\r\n }\r\n adjustCameraAngle(increaseBool, step = 2) {\r\n var delta = increaseBool ? +step : -step;\r\n delta *= Math.PI / 180;\r\n this.orbit.rotateUp(delta);\r\n this.orbit.update();\r\n }\r\n mouseDownTouchStart(e) {\r\n if (!this.carpetMesh) return;\r\n this.intersectsGizmo = this.findGizmoIntersection(e);\r\n this.prev = { ...e };\r\n if (!this.intersectsGizmo) {\r\n const intersect = this.raycastMouseOnObject(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 this.render();\r\n }\r\n }\r\n mouseTouchMove(e, translateCarpetMode) {\r\n if (!this.carpetMesh) return;\r\n if (translateCarpetMode) {\r\n if (!this.intersectsGizmo) {\r\n const intersect = this.raycastMouseOnObject(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) {\r\n this.bounds.clampPoint(sub, subClamped);\r\n }\r\n this.carpetMesh.position.copy(subClamped);\r\n this.render();\r\n this.updateGizmo();\r\n } else {\r\n const difference = this.prev.x - e.x;\r\n //console.log(difference)\r\n this.carpetMesh.rotation.z -= (difference * Math.PI) / 180;\r\n this.prev = { ...e };\r\n this.render();\r\n }\r\n } else {\r\n const difference = this.prev.y - e.y;\r\n this.adjustCameraAngle(false, difference);\r\n this.prev = { ...e };\r\n }\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 raycastMouseOnObject(e) {\r\n const mouse = this.convMouseCord(e);\r\n raycaster.setFromCamera(mouse, this.camera);\r\n var intersects = raycaster.intersectObject(this.carpetMesh);\r\n return intersects[0];\r\n }\r\n convMouseCord(e) {\r\n const vec = new THREE.Vector2();\r\n this.renderer.getSize(vec);\r\n const { x, y } = vec;\r\n // const { offsetX, offsetY } = this.getRendererOffset();\r\n const mouseX = (e.x / x) * 2 - 1;\r\n const mouseY = -(e.y / y) * 2 + 1;\r\n return new THREE.Vector2(mouseX, mouseY);\r\n }\r\n getCarpetPositions() {\r\n this.carpetMesh.geometry.computeBoundingBox();\r\n const box = this.carpetMesh.geometry.boundingBox;\r\n const vertex1 = box.min.clone();\r\n const vertex2 = box.max.clone();\r\n const max =\r\n vertex2.x - vertex1.x > vertex2.y - vertex1.y ? vertex2.x - vertex1.x : vertex2.y - vertex1.y;\r\n const invi = new THREE.PlaneGeometry(max, max);\r\n const invMat = new THREE.MeshBasicMaterial();\r\n const invMesh = new THREE.Mesh(invi, invMat);\r\n invMesh.geometry.verticesNeedUpdate = true;\r\n invMesh.position.copy(this.carpetMesh.position);\r\n invMesh.rotation.copy(this.carpetMesh.rotation);\r\n\r\n if (this.carpetRatio.w < 1.25) {\r\n // if (this.carpetRatio < 1.25) {\r\n invMesh.scale.y = this.carpetMesh.scale.x / 0.8;\r\n invMesh.scale.x = this.carpetMesh.scale.x;\r\n } else {\r\n invMesh.scale.x = this.carpetMesh.scale.y * 0.8;\r\n invMesh.scale.y = this.carpetMesh.scale.y;\r\n }\r\n\r\n invMesh.updateMatrix();\r\n invMesh.updateMatrixWorld();\r\n // var vertices = invMesh.geometry.vertices;\r\n const position = invMesh.geometry.attributes.position;\r\n const vector = new THREE.Vector3();\r\n const size = new THREE.Vector2();\r\n const temparray = [];\r\n for (let i = 0, l = position.count; i < l; i++) {\r\n vector.fromBufferAttribute(position, i);\r\n vector.applyMatrix4(invMesh.matrixWorld);\r\n const canvasVertex = createVector(\r\n vector,\r\n this.camera,\r\n this.renderer.getSize(size).width,\r\n this.renderer.getSize(size).height\r\n );\r\n temparray.push({\r\n x: this.getResizedImageCoordinatesX(canvasVertex.x),\r\n y: this.getResizedImageCoordinatesY(canvasVertex.y)\r\n });\r\n }\r\n // console.log(vertices);\r\n // vertices = [vertices[0], vertices[1], vertices[3], vertices[2]];\r\n // const temparray = [];\r\n // vertices.forEach(vertex => {\r\n // vertex.applyMatrix4(invMesh.matrixWorld);\r\n // const canvasVertex = createVector(\r\n // vertex,\r\n // this.camera,\r\n // this.renderer.getSize().width,\r\n // this.renderer.getSize().height\r\n // );\r\n // temparray.push({\r\n // x: this.getResizedImageCoordinatesX(canvasVertex.x),\r\n // y: this.getResizedImageCoordinatesY(canvasVertex.y)\r\n // });\r\n // });\r\n this.myRoomPointsOBJ.carpetpoints = temparray;\r\n }\r\n\r\n updateGizmo(options = {}) {\r\n const { show = true } = options;\r\n if (!this.gizmoCanvas || !this.carpetMesh) return;\r\n const context = this.gizmoCanvas.getContext(\"2d\");\r\n const { width, height } = this.gizmoCanvas;\r\n if (!show) {\r\n clearCanvas(this.gizmoCanvas, width, height);\r\n return;\r\n }\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\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 );\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 diamondHeight = 10;\r\n const canvasCenter = createVector(carpetCenter, this.camera, width, height);\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 = \"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(canvasCenter.x, canvasCenter.y, radiusX, radiusY, 0, 0, 2 * Math.PI);\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 findGizmoIntersection(e) {\r\n const { x, y } = e;\r\n if (!this.gizmoCanvas) return;\r\n var imgData = this.gizmoCanvas.getContext(\"2d\").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 autoLevel(bgCanvas, maskCanvas) {\r\n this.origBG = bgCanvas.toDataURL();\r\n const { width, height } = this.renderer.getSize();\r\n\r\n const canvas = createCanvas(width, height);\r\n var ctx = canvas.getContext(\"2d\");\r\n ctx.drawImage(bgCanvas, 0, 0, width, height);\r\n var imgData = ctx.getImageData(0, 0, width, height);\r\n var pixelNum = imgData.data.length;\r\n\r\n //initialize brightness for levels\r\n var redMax = 0;\r\n var redMin = 255;\r\n var greenMax = 0;\r\n var greenMin = 255;\r\n var blueMax = 0;\r\n var blueMin = 255;\r\n\r\n for (var i = 0; i < pixelNum; i += 4) {\r\n //set min and max values for each color\r\n if (imgData.data[i] > redMax) {\r\n redMax = imgData.data[i];\r\n }\r\n if (imgData.data[i] < redMin) {\r\n redMin = imgData.data[i];\r\n }\r\n if (imgData.data[i + 1] > greenMax) {\r\n greenMax = imgData.data[i + 1];\r\n }\r\n if (imgData.data[i + 1] < greenMin) {\r\n greenMin = imgData.data[i + 1];\r\n }\r\n if (imgData.data[i + 2] > blueMax) {\r\n blueMax = imgData.data[i + 2];\r\n }\r\n if (imgData.data[i + 2] < blueMin) {\r\n blueMin = imgData.data[i + 2];\r\n }\r\n }\r\n\r\n for (var j = 0; j < pixelNum; j += 4) {\r\n //map colors to 0 - 255 range\r\n imgData.data[j] = (imgData.data[j] - redMin) * (255 / (redMax - redMin));\r\n imgData.data[j + 1] = (imgData.data[j + 1] - greenMin) * (255 / (greenMax - greenMin));\r\n imgData.data[j + 2] = (imgData.data[j + 2] - blueMin) * (255 / (blueMax - blueMin));\r\n }\r\n ctx.putImageData(imgData, 0, 0);\r\n bgCanvas.getContext(\"2d\").drawImage(canvas, 0, 0);\r\n var imgDataCopy = imgData.valueOf();\r\n\r\n var maskCanvas1 = createCanvas(width, height);\r\n var maskContext = maskCanvas1.getContext(\"2d\");\r\n readImage(this.roomdataurl).then(image => {\r\n maskContext.drawImage(image, 0, 0, width, height);\r\n var maskData = maskContext.getImageData(0, 0, width, height);\r\n for (var k = 0; k < maskData.data.length; k += 4) {\r\n imgDataCopy.data[k + 3] = maskData.data[k + 3];\r\n }\r\n maskContext.putImageData(imgDataCopy, 0, 0);\r\n //maskUrl = maskCanvas.toDataURL();\r\n maskCanvas.width = width;\r\n maskCanvas.height = height;\r\n maskCanvas.getContext(\"2d\").drawImage(maskCanvas1, 0, 0, width, height);\r\n });\r\n }\r\n\r\n undoAutoLevel(bgCanvas, maskCanvas) {\r\n readImage(this.origBG).then(origImage => {\r\n bgCanvas.getContext(\"2d\").drawImage(origImage, 0, 0);\r\n });\r\n\r\n const { width, height } = this.renderer.getSize();\r\n var maskContext = maskCanvas.getContext(\"2d\");\r\n readImage(this.roomdataurl).then(image => {\r\n maskCanvas.width = width;\r\n maskCanvas.height = height;\r\n clearCanvas(maskCanvas, width, height);\r\n maskContext.drawImage(image, 0, 0, width, height);\r\n });\r\n }\r\n markFF(x, y, inputCanvas, inputSelected) {\r\n if (inputSelected === \"eraser\") {\r\n this.removePoint(inputCanvas, x, y);\r\n } else {\r\n var markingColor = inputSelected === \"floor\" ? \"#FF0000\" : \"#00FF00\";\r\n this.markWithColor(inputCanvas, markingColor, x, y);\r\n\r\n inputSelected === \"floor\" ? this.pushFloorPoints(x, y) : this.pushFurniPoints(x, y);\r\n }\r\n }\r\n\r\n markWithColor(inputCanvas, MarkingColor, x, y) {\r\n var contextInputMarks = inputCanvas.getContext(\"2d\");\r\n contextInputMarks.moveTo(x, y);\r\n contextInputMarks.fillStyle = MarkingColor;\r\n contextInputMarks.beginPath();\r\n contextInputMarks.arc(x, y, 2, 0, 2 * Math.PI, false);\r\n contextInputMarks.fill();\r\n contextInputMarks.closePath();\r\n }\r\n isLastPoint(pointsList, ptX, ptY) {\r\n //var pointsList = myroomInputSelected === \"floor\" ? myRoomPointsOBJ.floorpoints : myRoomPointsOBJ.notfloorpoints;\r\n\r\n if (pointsList.length) {\r\n var lastPt = pointsList[pointsList.length - 1];\r\n if (lastPt.x !== ptX || lastPt.y !== ptY) {\r\n return false;\r\n } else return true;\r\n } else return false;\r\n }\r\n\r\n pushFloorPoints(x, y) {\r\n x = this.getResizedImageCoordinatesX(x);\r\n y = this.getResizedImageCoordinatesY(y);\r\n const pointsList = this.myRoomPointsOBJ.floorpoints;\r\n if (!this.isLastPoint(pointsList, x, y)) {\r\n this.myRoomPointsOBJ.floorpoints.push({\r\n x: x,\r\n y: y\r\n });\r\n }\r\n }\r\n\r\n pushFurniPoints(x, y) {\r\n x = this.getResizedImageCoordinatesX(x);\r\n y = this.getResizedImageCoordinatesY(y);\r\n const pointsList = this.myRoomPointsOBJ.notfloorpoints;\r\n if (!this.isLastPoint(pointsList, x, y)) {\r\n this.myRoomPointsOBJ.notfloorpoints.push({\r\n x: x,\r\n y: y\r\n });\r\n }\r\n }\r\n\r\n removePoint(inputCanvas, x, y) {\r\n x = this.getResizedImageCoordinatesX(x);\r\n y = this.getResizedImageCoordinatesY(y);\r\n function isFarEnough(point) {\r\n const a = x - point.x;\r\n const b = y - point.y;\r\n const dist = Math.sqrt(a * a + b * b);\r\n return dist >= 30;\r\n }\r\n this.myRoomPointsOBJ.notfloorpoints = this.myRoomPointsOBJ.notfloorpoints.filter(isFarEnough);\r\n this.myRoomPointsOBJ.floorpoints = this.myRoomPointsOBJ.floorpoints.filter(isFarEnough);\r\n this.drawFFPoints(inputCanvas);\r\n }\r\n drawFFPoints(inputCanvas) {\r\n var contextInputMarks = inputCanvas.getContext(\"2d\");\r\n contextInputMarks.clearRect(0, 0, inputCanvas.width, inputCanvas.height);\r\n\r\n this.colorPoints(inputCanvas, this.myRoomPointsOBJ.floorpoints, \"#FF0000\");\r\n this.colorPoints(inputCanvas, this.myRoomPointsOBJ.notfloorpoints, \"#00FF00\");\r\n }\r\n colorPoints(inputCanvas, points, markingColor) {\r\n for (var i = 0; i < points.length; i++) {\r\n this.markWithColor(\r\n inputCanvas,\r\n markingColor,\r\n this.getInputCanvasCoordinatesX(points[i].x),\r\n this.getInputCanvasCoordinatesY(points[i].y)\r\n );\r\n }\r\n }\r\n updatePointHistory() {\r\n this.pointsHistory.floorpoints = this.myRoomPointsOBJ.floorpoints;\r\n this.pointsHistory.notfloorpoints = this.myRoomPointsOBJ.notfloorpoints;\r\n this.pointsHistory.inputSelected = this.myroomInputSelected;\r\n this.pointsHistoryArray.push(JSON.stringify(this.pointsHistory));\r\n }\r\n pointsHistoryReset() {\r\n this.myRoomPointsOBJ.floorpoints = [];\r\n this.myRoomPointsOBJ.notfloorpoints = [];\r\n this.pointsHistoryArray = [];\r\n }\r\n undoPoints(inputCanvas) {\r\n if (this.pointsHistoryArray.length > 0) {\r\n this.pointsHistoryArray.pop();\r\n if (this.pointsHistoryArray.length === 0) {\r\n //unselect floor,furniture and select floor\r\n this.myRoomPointsOBJ.floorpoints = [];\r\n this.myRoomPointsOBJ.notfloorpoints = [];\r\n this.drawFFPoints(inputCanvas);\r\n //getOutputMask();\r\n return;\r\n } else {\r\n this.pointsHistory = JSON.parse(\r\n this.pointsHistoryArray[this.pointsHistoryArray.length - 1]\r\n );\r\n this.myRoomPointsOBJ.floorpoints = this.pointsHistory.floorpoints;\r\n this.myRoomPointsOBJ.notfloorpoints = this.pointsHistory.notfloorpoints;\r\n this.drawFFPoints(inputCanvas);\r\n //getOutputMask\r\n }\r\n } else {\r\n }\r\n }\r\n resetPoints(inputCanvas) {\r\n this.pointsHistoryReset();\r\n this.drawFFPoints(inputCanvas);\r\n clearCanvas(inputCanvas, inputCanvas.width, inputCanvas.height);\r\n //upload white mask\r\n }\r\n getResizedImageCoordinatesX(x) {\r\n return Math.round(x * this.ratioWid);\r\n }\r\n\r\n getResizedImageCoordinatesY(y) {\r\n return Math.round(y * this.ratioHgt);\r\n }\r\n\r\n getInputCanvasCoordinatesX(x) {\r\n return Math.round(x / this.ratioWid);\r\n }\r\n\r\n getInputCanvasCoordinatesY(y) {\r\n return Math.round(y / this.ratioHgt);\r\n }\r\n resize(windowSize) {\r\n if (!this.canvasInitiated) return;\r\n const rendererSize = new THREE.Vector2();\r\n this.renderer.getSize(rendererSize);\r\n const { width, height } = resizeKeepingAspect(this.bgImage, windowSize);\r\n\r\n this.bgCanvas.style.width = `${width}px`;\r\n this.bgCanvas.style.height = `${height}px`;\r\n\r\n this.maskCanvas.style.width = `${width}px`;\r\n this.maskCanvas.style.height = `${height}px`;\r\n\r\n this.inputCanvas.width = width;\r\n this.inputCanvas.height = height;\r\n\r\n this.gizmoCanvas.width = width;\r\n this.gizmoCanvas.height = height;\r\n this.resizeRenderer(width, height);\r\n this.updateGizmo();\r\n }\r\n resizeRenderer(width, height) {\r\n if (this.camera) {\r\n this.camera.aspect = width / height;\r\n this.camera.updateProjectionMatrix();\r\n }\r\n this.renderer.setSize(width, height);\r\n this.ratioWid = this.origWid / width;\r\n this.ratioHgt = this.origHgt / height;\r\n }\r\n calculateCarpetSize() {\r\n this.carpetMesh.geometry.computeBoundingBox();\r\n const carpetSize = new THREE.Vector3();\r\n this.carpetMesh.geometry.boundingBox.getSize(carpetSize);\r\n return carpetSize;\r\n }\r\n\r\n calculateCameraWidth() {\r\n const carpetSize = this.calculateCarpetSize();\r\n const siz = new THREE.Vector2();\r\n this.renderer.getSize(siz);\r\n const { x: width, y: height } = siz;\r\n const carpetWid = carpetSize.x > carpetSize.y ? carpetSize.x : carpetSize.y;\r\n if (width >= height) {\r\n return carpetWid * 1.1;\r\n } else {\r\n return carpetWid * 1.2;\r\n }\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 calculateVerticalHeight() {\r\n const carpetSize = this.calculateCarpetSize();\r\n const x = carpetSize.x,\r\n y = carpetSize.y;\r\n const vertex1 = new THREE.Vector3(-x / 2, 0, 0);\r\n const vertex2 = new THREE.Vector3(x / 2, 0, 0);\r\n const vertex3 = new THREE.Vector3(0, 0, y / 2);\r\n const vertex4 = new THREE.Vector3(0, 0, -y / 2);\r\n const h1 = this.distbetween2Vertices(vertex1, vertex2);\r\n const h2 = this.distbetween2Vertices(vertex3, vertex4);\r\n const height = h1.yDist > h2.yDist ? h1.yDist : h2.yDist;\r\n return height;\r\n }\r\n angleBetween2Vertices(vertex1, vertex2) {\r\n const { camera } = this;\r\n const size = new THREE.Vector2();\r\n this.renderer.getSize(size);\r\n const v1 = createVector(vertex1, camera, size.width, size.height);\r\n const v2 = createVector(vertex2, camera, size.width, size.height);\r\n const slope = (v2.y - v1.y) / (v2.x - v1.x);\r\n return (Math.atan(slope) * 180) / Math.PI;\r\n }\r\n changeCameraDist(width, fovDeg) {\r\n var fovrad = (fovDeg * Math.PI) / 180;\r\n const distance = width / (2 * Math.tan(fovrad / 2));\r\n const { camera, orbit } = this;\r\n let x1 = camera.position.x;\r\n let y1 = camera.position.y;\r\n let z1 = camera.position.z;\r\n const cur_dist = Math.sqrt(\r\n camera.position.x * camera.position.x +\r\n camera.position.y * camera.position.y +\r\n camera.position.z * camera.position.z\r\n );\r\n const dist = distance; // + $('#renderer-canvas').width()/2;\r\n const dist_ratio = dist / cur_dist;\r\n let x2 = dist_ratio * x1;\r\n let y2 = dist_ratio * y1;\r\n let z2 = dist_ratio * z1;\r\n orbit.object.position.set(x2, y2, z2);\r\n orbit.update();\r\n this.render();\r\n }\r\n calculateAngle1() {\r\n const vertex1 = new THREE.Vector3(0, 0, -500);\r\n const vertex2 = new THREE.Vector3(0, 0, 500);\r\n return this.angleBetween2Vertices(vertex1, vertex2);\r\n }\r\n calculateAngle2() {\r\n const vertex1 = new THREE.Vector3(400, 0, 0);\r\n const vertex2 = new THREE.Vector3(-400, 0, 0);\r\n const angle2deg = this.angleBetween2Vertices(vertex1, vertex2);\r\n let angle2act = 180 - Math.abs(angle2deg);\r\n return angle2act;\r\n }\r\n resetOrbit(x = 0, y = 0) {\r\n const { orbit, camera } = this;\r\n orbit.reset();\r\n\r\n const width = this.calculateCameraWidth();\r\n this.changeCameraDist(width, camera.fov);\r\n orbit.pan(x, y);\r\n orbit.update();\r\n }\r\n setinitialOrientation(res) {\r\n this.orbit.reset();\r\n this.camera.position.set(0, 0, 720);\r\n this.orbit.update();\r\n\r\n let fov = parseFloat(res.fov);\r\n if (fov < 30) fov = 30;\r\n if (fov > 60) fov = 60;\r\n\r\n this.camera.fov = fov;\r\n this.camera.updateProjectionMatrix();\r\n this.render();\r\n\r\n const width = this.calculateCameraWidth();\r\n this.changeCameraDist(width, fov);\r\n\r\n const hor_rot = ((90 - res.orientation.hor) * Math.PI) / 180;\r\n this.orbit.rotateLeft(-hor_rot);\r\n this.orbit.update();\r\n const vert_rot = (10 * Math.PI) / 180;\r\n this.orbit.rotateUp(vert_rot);\r\n this.orbit.update();\r\n this.orbit.pan(res.floor_center.x, res.floor_center.y);\r\n this.orbit.update(); // orbit.pan( // res.floor_center.x * resizeRatio.w, // res.floor_center.y * resizeRatio.h // ); // orbit.update();\r\n\r\n const angle1pred = Math.abs(res.orientation.hor);\r\n const angle2pred = Math.abs(res.orientation.vert);\r\n\r\n const global_iter_limit = 100;\r\n const iter_limit = 50;\r\n var index = 0;\r\n\r\n if (res.orientation.exception) {\r\n if (!res.orientation.flag) {\r\n this.orbit.rotateLeft(Math.PI / 2);\r\n this.orbit.update();\r\n }\r\n } else {\r\n var vertical_error = calcError(this.calculateAngle2(), angle2pred);\r\n var horizontal_error = calcError(this.calculateAngle1(), angle1pred);\r\n var hor_angle_per_step = 1;\r\n var vert_angle_per_step = 1;\r\n const decay_rate = 0.5;\r\n const optimizeVertically = vert_angle_per_step => {\r\n let index1 = 0;\r\n let index2 = 0;\r\n\r\n let angle2 = Math.abs(this.calculateAngle2());\r\n let vert_angle;\r\n if (angle2 < 90) {\r\n vert_angle = -vert_angle_per_step.valueOf();\r\n } else {\r\n vert_angle = vert_angle_per_step.valueOf();\r\n }\r\n while (angle2 > angle2pred) {\r\n this.orbit.rotateUp(THREE.MathUtils.degToRad(vert_angle));\r\n this.orbit.update();\r\n\r\n angle2 = Math.abs(this.calculateAngle2());\r\n index1++;\r\n if (index1 === iter_limit) break;\r\n }\r\n while (angle2 < angle2pred) {\r\n this.orbit.rotateUp(THREE.MathUtils.degToRad(-vert_angle));\r\n this.orbit.update();\r\n\r\n angle2 = Math.abs(this.calculateAngle2());\r\n\r\n index2++;\r\n if (index2 === iter_limit) break;\r\n }\r\n };\r\n\r\n const optimizeHorizontally = hor_angle_per_step => {\r\n let angle1 = Math.abs(this.calculateAngle1());\r\n\r\n let index1 = 0;\r\n let index2 = 0;\r\n while (angle1 < angle1pred) {\r\n this.orbit.rotateLeft(THREE.MathUtils.degToRad(hor_angle_per_step));\r\n this.orbit.update();\r\n angle1 = Math.abs(this.calculateAngle1());\r\n index1++;\r\n if (index1 === iter_limit) break;\r\n }\r\n while (angle1 > angle1pred) {\r\n this.orbit.rotateLeft(THREE.MathUtils.degToRad(-hor_angle_per_step));\r\n this.orbit.update();\r\n angle1 = Math.abs(this.calculateAngle1());\r\n index2++;\r\n if (index2 === iter_limit) break;\r\n }\r\n };\r\n while (vertical_error > 0.1 || horizontal_error > 2) {\r\n optimizeHorizontally(hor_angle_per_step);\r\n optimizeVertically(vert_angle_per_step);\r\n\r\n vertical_error = calcError(this.calculateAngle2(), angle2pred);\r\n horizontal_error = calcError(this.calculateAngle1(), angle1pred);\r\n index++;\r\n\r\n hor_angle_per_step = hor_angle_per_step * decay_rate;\r\n vert_angle_per_step = vert_angle_per_step * decay_rate;\r\n if (index === global_iter_limit) {\r\n break;\r\n }\r\n }\r\n this.orbit.update();\r\n if (!res.orientation.flag) {\r\n this.orbit.rotateLeft(Math.PI / 2);\r\n this.orbit.update();\r\n }\r\n var size = new THREE.Vector2();\r\n this.renderer.getSize(size);\r\n\r\n var verticalHeight = this.calculateVerticalHeight();\r\n while (verticalHeight < 0.15 * size.height) {\r\n this.orbit.rotateUp((0.5 * Math.PI) / 180);\r\n this.orbit.update();\r\n verticalHeight = this.calculateVerticalHeight();\r\n }\r\n\r\n function calcError(predicted, actual) {\r\n return (Math.abs(Math.abs(predicted) - actual) / actual) * 100;\r\n }\r\n\r\n this.orbit.update();\r\n }\r\n this.render();\r\n // const width = ;\r\n this.changeCameraDist(this.calculateCameraWidth(), fov);\r\n this.render();\r\n // addRotationGizmo();\r\n }\r\n\r\n removemeshes() {\r\n this.carpetMesh.material.opacity = 1;\r\n this.render();\r\n }\r\n saveAsRoom({ mode, roomId, file, props }) {\r\n this.getCarpetPositions();\r\n const carpetpoints = this.myRoomPointsOBJ.carpetpoints;\r\n const floorpoints = this.myRoomPointsOBJ.floorpoints;\r\n const notfloorpoints = this.myRoomPointsOBJ.notfloorpoints;\r\n return AppProvider.saveAsRoom({\r\n mode,\r\n roomId,\r\n file,\r\n props,\r\n floorpoints,\r\n notfloorpoints,\r\n carpetpoints\r\n }).then(response => {\r\n return { response };\r\n });\r\n }\r\n\r\n downloadImage(downloadBLob, filename) {\r\n return new Promise((resolve, reject) => {\r\n var url = window.URL || window.webkitURL;\r\n const imageSrc = url.createObjectURL(downloadBLob);\r\n var strData = imageSrc; // window.URL.createObjectURL(downloadBLob);\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\", filename);\r\n link.href = strData;\r\n if (navigator.msSaveOrOpenBlob) {\r\n navigator.msSaveOrOpenBlob(downloadBLob, filename);\r\n } else {\r\n link.click();\r\n }\r\n document.body.removeChild(link); //remove the link when done\r\n resolve(strData);\r\n });\r\n }\r\n saveAsImage = async ({ bgCanvas, maskCanvas, designPath }) => {\r\n this.carpetMesh.material.opacity = 1;\r\n this.removemeshes();\r\n var strMime = \"image/png\";\r\n let imgData = this.renderer.domElement.toDataURL(strMime);\r\n\r\n readImage(imgData).then(rendererImage => {\r\n var downloadCanvas = createCanvas(rendererImage.width, rendererImage.height);\r\n var downloadContext = downloadCanvas.getContext(\"2d\");\r\n downloadContext.drawImage(bgCanvas, 0, 0, rendererImage.width, rendererImage.height);\r\n downloadContext.drawImage(rendererImage, 0, 0, rendererImage.width, rendererImage.height);\r\n downloadContext.drawImage(maskCanvas, 0, 0, rendererImage.width, rendererImage.height);\r\n\r\n if (window.flags.inhouseChanges.saveFunctionForFlutter) {\r\n window.getByteData = downloadCanvas.toDataURL(\"image/jpeg\", 0.95);\r\n return;\r\n }\r\n\r\n canvasToBlobPromise(downloadCanvas).then(downloadBLob => {\r\n var name = \"customdesign\";\r\n if (!window.initialData.customDesignUrl) {\r\n const filenames = designPath.split(\"/\");\r\n const filename = filenames.pop();\r\n const shorts = filename.split(\".\");\r\n name = shorts[0];\r\n }\r\n this.downloadImage(downloadBLob, name + \"-myroom.jpg\").then(dataurl => {\r\n //if (globalMode === \"marking\") {carpetMesh.material.opacity = 0.5;}\r\n this.carpetMesh.material.opacity = 1;\r\n this.render();\r\n });\r\n });\r\n });\r\n };\r\n\r\n // handleSuccess = (stream) =>{\r\n // //$(\"#MyRoomTakePhotoArea\").show();\r\n // const myroomVideo = document.getElementById('MyRoomvideo');\r\n // const videoTracks = stream.getVideoTracks();\r\n // window.stream = stream; // make variable available to browser console\r\n // myroomVideo.srcObject = stream;\r\n // localVideoStream =stream;\r\n // myroomVideo.play();\r\n // myroomVideoPlaying = true;\r\n // }\r\n // handleError = (error) => {\r\n // if (error.name === 'ConstraintNotSatisfiedError') {\r\n // var v = this.constraints.video;\r\n // this.errorMsg(\"The resolution \".concat(v.width.exact, \"x\").concat(v.height.exact, \" px is not supported by your device.\"));\r\n // } else if (error.name === 'PermissionDeniedError') {\r\n // this.errorMsg('Permissions have not been granted to use your camera and ' + 'microphone, you need to allow the page access to your devices in ' + 'order for the demo to work.');\r\n // }\r\n // this.errorMsg(\"getUserMedia error: \".concat(error.name), error);\r\n // }\r\n // errorMsg = (msg, error)=> {\r\n // //const errorElement = document.querySelector('#errorMsg');\r\n // //errorElement.innerHTML += `{strings.tools.mapColorHeading}
\r\n {/* found some designs
*/}\r\n ${msg}
`;\r\n // //if (typeof error !== 'undefined') {\r\n // console.error(msg);\r\n // //}\r\n // }\r\n\r\n // initCam =(e)=> {\r\n // // Older browsers might not implement mediaDevices at all, so we set an empty object first\r\n // if (navigator.mediaDevices === undefined) {\r\n // navigator.mediaDevices = {};\r\n // }\r\n // // Some browsers partially implement mediaDevices. We can't just assign an object\r\n // // with getUserMedia as it would overwrite existing properties.\r\n // // Here, we will just add the getUserMedia property if it's missing.\r\n // if (navigator.mediaDevices.getUserMedia === undefined) {\r\n // navigator.mediaDevices.getUserMedia = function(constraints) {\r\n // // First get ahold of the legacy getUserMedia, if present\r\n // var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;\r\n // // Some browsers just don't implement it - return a rejected promise with an error\r\n // // to keep a consistent interface\r\n // if (!getUserMedia) {\r\n // return Promise.reject(new Error('getUserMedia is not implemented in this browser'));\r\n // }\r\n // // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise\r\n // return new Promise(function(resolve, reject) {\r\n // getUserMedia.call(navigator, constraints, resolve, reject);\r\n // });\r\n // }\r\n // }\r\n // navigator.mediaDevices.getUserMedia(constraints)\r\n // .then(function(stream) {\r\n // handleSuccess(stream);\r\n // })\r\n // .catch(function(err) {\r\n // handleError(err);\r\n // });\r\n // }\r\n}\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 if(mouseDown){\r\n setMouseDown(false);\r\n const location = getlocation(e, ref.current.getBoundingClientRect());\r\n if (!location) return;\r\n if (onEnd) onEnd(location);\r\n }\r\n \r\n };\r\n function getlocation(event, rect) {\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 />\r\n
\r\n {strings.myRoom.saveroom}
\r\n\r\n \r\n {\r\n e.target.select();\r\n }}\r\n value={roomName}\r\n onChange={e => setRoomName(e.target.value)}\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\n};\r\n\r\nexport default MyroomWebcam;\r\n","/* eslint-disable no-useless-escape */\r\n/* eslint-disable react-hooks/exhaustive-deps */\r\nimport React, { useEffect, useRef, useState } from \"react\";\r\nimport MyRoomHelper from \"./myroomhelper\";\r\nimport { getCroppedSize, resizeKeepingAspect } from \"../../../utils/utils\";\r\n\r\nimport { readImage } from \"../../../utils/domUtils\";\r\nimport { useWindowSize } from \"react-use\";\r\nimport InputCanvas from \"../../atoms/InputCanvas\";\r\nimport classNames from \"classnames\";\r\nimport {\r\n useMyroomState,\r\n useMyroomDispatch,\r\n controlModes,\r\n myRoomActions\r\n} from \"../../../reducers/myroom.reducer\";\r\nimport { useUiDispatch, mainUiActions, pageViews } from \"../../../reducers/mainui.reducer\";\r\n\r\nimport {\r\n useDispatchDesignDetail,\r\n designDetailActions,\r\n useDesignDetailState\r\n} from \"../../../reducers/designdetails.reducer\";\r\nimport TileCanvas from \"../../../tilecanvasnew\";\r\nimport { Portal, ButtonGroup, Toaster, Toast } from \"@blueprintjs/core\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\nimport AppProvider, { CDN_domain } from \"../../../api/appProvider\";\r\nimport loadImage from \"blueimp-load-image\";\r\nimport { isMobileDevice } from \"../../../utils/utils\";\r\nimport {\r\n clearCanvas,\r\n canvasToBlobPromise,\r\n createCanvas,\r\n cropStitchCanvas\r\n} from \"../../../utils/canvasutils\";\r\n\r\nimport AtIcon from \"../../atoms/AtIcon\";\r\nimport \"./myroom.scss\";\r\nimport SaveroomDialog from \"./SaveroomDialog\";\r\nimport InputButton from \"../../atoms/AtButton/InputButton\";\r\nimport MyroomWebcam from \"./MyroomWebcam\";\r\nimport MyRoomIceBreaker from \"./MyRoomIceBreaker\";\r\nimport strings from \"../../../strings\";\r\nconst myRoomHelper = new MyRoomHelper();\r\nconst zoom = 1;\r\nconst tileCanvas = new TileCanvas();\r\n\r\n// let myroomImageSrc = \"myroom/images/JustMarried.jpg\";\r\n// let defaultRoomImage = ;\r\n// let defaultmyRoomMask = \"myroom/images/myroomMask.png\";\r\n// let defaultMask512 = \"myroom/images/bnwMask512.png\";\r\n// // let defaultWMask512 = \"myroom/images/wMask512.png\";\r\n// let fbxUrl = \"myroom/images/Binding.FBX\";\r\nlet carpetInitialPositionX, carpetInitialPositionY;\r\nconst baseUrl = CDN_domain + \"v3assets/myroom/images\";\r\nconst myRoomConfig = {\r\n bgImageUrl: `${baseUrl}/MyRoom.jpg`,\r\n maskUrl: `${baseUrl}/myroomMask.png`,\r\n mask512Url: `${baseUrl}/bnwMask512.png`,\r\n fbxUrl: `${baseUrl}/Binding.FBX`\r\n};\r\nconst MyRoom = () => {\r\n const dispatchUiState = useUiDispatch();\r\n const containerRef = useRef();\r\n const rendererRef = useRef();\r\n const bgCanvasRef = useRef();\r\n const maskCanvasRef = useRef();\r\n const inputCanvasRef = useRef();\r\n const gizmoCanvasRef = useRef();\r\n const inputRef = useRef(null);\r\n\r\n const { width: windowWidth, height: windowHeight } = useWindowSize();\r\n\r\n const [toastProps, setToastProps] = useState(null);\r\n const [roomId, setroomId] = useState(null);\r\n const [isAutoLeveled, setIsAutoLeveled] = useState(false);\r\n const [myroomInputSelected, setMyroomInputSelected] = useState(\"floor\");\r\n const [origMaskUrl, setOrigMaskUrl] = useState(null);\r\n const [origMask512, setOrigMask512] = useState(null);\r\n const [openSaveDialog, setOpenSaveDialog] = useState(false);\r\n const [isRoomSaved, setIsRoomSaved] = useState(false);\r\n const [showCamOptions, setShowCamOptions] = useState(false);\r\n const [openCam, setOpenCam] = useState(false);\r\n const [loadIceBreaker, setLoadIceBreaker] = useState(\r\n window.flags.visualizations.showIcebreakerinMyroom &&\r\n (!sessionStorage.getItem(\"myroomimage\") ||\r\n sessionStorage.getItem(\"myroomimage\") === \"undefined\")\r\n );\r\n let AImaskLoaded = true;\r\n let DesignLoaded = false;\r\n\r\n const myRoomState = useMyroomState();\r\n const designDetailState = useDesignDetailState();\r\n const dispatchDesignDetails = useDispatchDesignDetail();\r\n const dispatchMyRoom = useMyroomDispatch();\r\n const { fullpath: designPath, designDetails, hash, designDimsOrig } = designDetailState;\r\n const windowSize = useWindowSize();\r\n const cameraButtonsInStage = window.flags.homeTemplate === pageViews.STEPPER;\r\n const myRoomControlsPortalID =\r\n window.flags.homeTemplate === pageViews.STEPPER || window.flags.homeTemplate === pageViews.HOME\r\n ? \"left-sidebar\"\r\n : \"room-view-container\";\r\n useEffect(() => {\r\n if (!loadIceBreaker) myRoomHelper.resize(windowSize);\r\n }, [windowSize]);\r\n useEffect(() => {\r\n if (loadIceBreaker) {\r\n //mainUi hide both the side panels\r\n dispatchUiState({\r\n type: mainUiActions.SET_SHOW_SIDEBAR,\r\n payload: { left: false, right: false }\r\n });\r\n }\r\n }, [loadIceBreaker]);\r\n useEffect(() => {\r\n setLoading(true);\r\n myRoomHelper.initCanvas({\r\n bgCanvas: bgCanvasRef.current,\r\n rendererCanvas: rendererRef.current,\r\n maskCanvas: maskCanvasRef.current,\r\n gizmoCanvas: gizmoCanvasRef.current,\r\n inputCanvas: inputCanvasRef.current\r\n });\r\n const myroomimage = sessionStorage.getItem(\"myroomimage\");\r\n const mode = sessionStorage.getItem(\"mode\");\r\n if (myroomimage && myroomimage !== \"\" && myroomimage !== \"undefined\" && mode === \"myroom\") {\r\n loadFromImageUrl(myroomimage);\r\n } else {\r\n load();\r\n }\r\n }, []);\r\n\r\n const load = async () => {\r\n if (loadIceBreaker) {\r\n return;\r\n }\r\n const bgImage = await readImage(myRoomConfig.bgImageUrl);\r\n const { width, height } = resizeKeepingAspect(bgImage, {\r\n width: windowWidth,\r\n height: windowHeight\r\n });\r\n myRoomHelper.updateBackground({ bgImage, width, height });\r\n myRoomHelper.initScene({ dims: { width, height }, config: myRoomConfig });\r\n\r\n setCanvasWidHgt(inputCanvasRef, width, height, gizmoCanvasRef);\r\n\r\n myRoomHelper.updateMask({\r\n maskUrl: myRoomConfig.maskUrl,\r\n maskCanvas: maskCanvasRef.current,\r\n bgCanvas: bgCanvasRef.current,\r\n width,\r\n height\r\n });\r\n myRoomHelper.resizeRenderer(width, height);\r\n setOrigMaskUrl(myRoomConfig.maskUrl);\r\n setOrigMask512(myRoomConfig.mask512Url);\r\n const roomId = await uploadRoom();\r\n await myRoomHelper.uploadMask({ maskUrl: myRoomConfig.mask512Url, roomId });\r\n loadDesignCanvas();\r\n };\r\n\r\n const onCameraCapture = src => {\r\n loadFromImageUrl(src);\r\n setOpenCam(false);\r\n };\r\n const loadFromImageUrl = async myroomImageSrc => {\r\n loadImage.parseMetaData(myroomImageSrc, data => {\r\n readImage(myroomImageSrc).then(\r\n async img => {\r\n const tmpCanvas = createCanvas(img.width, img.height);\r\n tmpCanvas.getContext(\"2d\").drawImage(img, 0, 0, img.width, img.height);\r\n loadMyRoomFromCanvas({ canvas: tmpCanvas, initScene: true });\r\n },\r\n error => {\r\n console.log(error);\r\n }\r\n );\r\n });\r\n };\r\n const onMyRoomLoadComplete = () => {\r\n setTimeout(() => {\r\n myRoomHelper.updateMap();\r\n setLoading(false);\r\n // this loads the myroom ui when myroomimage is loadded from session\r\n setTimeout(() => {\r\n if (!AImaskLoaded) setLoading(true);\r\n }, 100);\r\n }, 150);\r\n };\r\n\r\n const repeatDesignForOverSize = ({ designDetails, designCanvas, origCanvas, onComplete }) => {\r\n const width = designDetails.Width;\r\n const height = designDetails.Height;\r\n designCanvas.width = width;\r\n designCanvas.height = height;\r\n\r\n const img = new Image();\r\n\r\n const repeatImg = (canvas, img, width, height) => {\r\n var ctx = canvas.getContext(\"2d\");\r\n var pat = ctx.createPattern(img, \"repeat\");\r\n\r\n //find offset\r\n let repeat = [width / img.width, height / img.height];\r\n let offsetX = 0;\r\n let offsetY = 0;\r\n let halfRepeatX = repeat[0] / 2;\r\n offsetX = 0.5 - (halfRepeatX - Math.floor(halfRepeatX)); //offset to center the tile center as canvas center horizontally\r\n let halfRepeatY = repeat[1] / 2;\r\n offsetY = 0.5 - (halfRepeatY - Math.floor(halfRepeatY)); //offset to center the tile center as canvas center vertically\r\n let offsetXActual = Math.abs(offsetX * img.width);\r\n if (offsetX < 0) {\r\n offsetXActual = img.width - offsetXActual;\r\n }\r\n let offsetYActual = Math.abs(offsetY * img.height);\r\n if (offsetY < 0) {\r\n offsetYActual = img.height - offsetYActual;\r\n }\r\n\r\n ctx.save();\r\n ctx.translate(-offsetXActual, -offsetYActual);\r\n ctx.rect(0, 0, width + offsetXActual, height + offsetYActual);\r\n ctx.fillStyle = pat;\r\n ctx.fill();\r\n ctx.restore();\r\n };\r\n\r\n img.onload = () => {\r\n repeatImg(designCanvas, img, width, height);\r\n onComplete();\r\n };\r\n\r\n img.src = origCanvas.toDataURL();\r\n };\r\n\r\n const loadDesignCanvas = async shouldSetPosition => {\r\n const myroomDesignUrl = window.initialData.customDesignUrl || \"\";\r\n const loadMyroomDesignFromUrl =\r\n myroomDesignUrl !== \"\" && window.flags.visualizations.allowDesignFromUrlInMyroom;\r\n const { fbxUrl } = myRoomConfig;\r\n if (loadMyroomDesignFromUrl) {\r\n const { fbxUrl } = myRoomConfig;\r\n readImage(myroomDesignUrl).then(image => {\r\n let { width, height } = image;\r\n\r\n const phyWidth = window.initialData.designWidth,\r\n phyheight = window.initialData.designHeight,\r\n unit = window.initialData.unit;\r\n\r\n const designCanvas = createCanvas(width, height);\r\n const ctx = designCanvas.getContext(\"2d\");\r\n ctx.drawImage(image, 0, 0, width, height);\r\n\r\n myRoomHelper\r\n .loadDesignCanvas({\r\n designCanvas: designCanvas,\r\n fbxUrl,\r\n shouldSetPosition,\r\n designPath: myroomDesignUrl,\r\n customWid: phyWidth,\r\n customHgt: phyheight,\r\n unit\r\n })\r\n .then(() => {\r\n DesignLoaded = true;\r\n onMyRoomLoadComplete();\r\n });\r\n });\r\n } else {\r\n const desDetails = { ...designDetails, ...designDimsOrig };\r\n\r\n tileCanvas.init({ tileSize: 256, zoom, designDetails: desDetails });\r\n\r\n const designCanvasMod = createCanvas(tileCanvas.width, tileCanvas.height);\r\n\r\n await myRoomHelper.loadDesignCanvas({\r\n designCanvas: designCanvasMod,\r\n designDetails: designDetails,\r\n fbxUrl,\r\n shouldSetPosition,\r\n designPath\r\n });\r\n tileCanvas.drawVisTiles(\r\n {\r\n designPath,\r\n zoom,\r\n designDetails: desDetails,\r\n hash\r\n },\r\n () => {\r\n DesignLoaded = true;\r\n\r\n const isDimsOrig =\r\n designDimsOrig.Width === designDetails.Width &&\r\n designDimsOrig.Height === designDetails.Height;\r\n\r\n if (window.InterfaceElements.IsWallToWall) {\r\n designCanvasMod.getContext(\"2d\").drawImage(tileCanvas.canvasVis, 0, 0);\r\n onMyRoomLoadComplete();\r\n } else if (!isDimsOrig && window.flags.ordersheet.repeatRugInArea) {\r\n repeatDesignForOverSize({\r\n designDetails,\r\n designCanvas: designCanvasMod,\r\n origCanvas: tileCanvas.canvasVis,\r\n onComplete: () => {\r\n onMyRoomLoadComplete();\r\n }\r\n });\r\n } else {\r\n const cropPadding = 100;\r\n if (!isDimsOrig) {\r\n const { width, height } = getCroppedSize(designDimsOrig, designDetails, cropPadding);\r\n designCanvasMod.width = width;\r\n designCanvasMod.height = height;\r\n }\r\n cropStitchCanvas({ origCanvas: tileCanvas.canvasVis, canvas: designCanvasMod });\r\n onMyRoomLoadComplete();\r\n }\r\n }\r\n );\r\n }\r\n myRoomHelper.updateGizmo({ show: myRoomState.controlMode === controlModes.TRANSFORM });\r\n };\r\n\r\n useEffect(() => {\r\n if (!roomId) return;\r\n setLoading(true);\r\n loadDesignCanvas();\r\n }, [designDetails]);\r\n\r\n useEffect(() => {\r\n if (!roomId) return;\r\n setLoading(true);\r\n loadDesignCanvas();\r\n }, [\r\n window.initialData.customDesignUrl,\r\n window.initialData.designWidth,\r\n window.initialData.designHeight,\r\n window.initialData.unit\r\n ]);\r\n\r\n useEffect(() => {\r\n if (myRoomState.controlMode === controlModes.MARK) {\r\n myRoomHelper.drawFFPoints(inputCanvasRef.current);\r\n } else {\r\n clearCanvas(\r\n inputCanvasRef.current,\r\n inputCanvasRef.current.width,\r\n inputCanvasRef.current.height\r\n );\r\n }\r\n myRoomHelper.updateGizmo({ show: myRoomState.controlMode === controlModes.TRANSFORM });\r\n }, [myRoomState.controlMode]);\r\n\r\n const setLoading = loading => {\r\n dispatchDesignDetails({ type: designDetailActions.SET_LOADING, payload: loading });\r\n };\r\n const handleRoomImageUpload = (e, initScene, imageFromFlutter = \"\") => {\r\n var uploadedImage;\r\n if (imageFromFlutter == \"\") {\r\n uploadedImage = e.target.files[0];\r\n } else {\r\n uploadedImage = imageFromFlutter;\r\n }\r\n if (!uploadedImage) return;\r\n setLoading(true);\r\n\r\n loadImage.parseMetaData(uploadedImage, data => {\r\n let orientation = 0;\r\n if (data.exif) orientation = data.exif.get(\"Orientation\");\r\n //alert(\"handleRoomImageUpload -> orientation\", orientation)\r\n loadImage(\r\n uploadedImage,\r\n async canvas => {\r\n loadMyRoomFromCanvas({ canvas, initScene: true });\r\n },\r\n {\r\n canvas: true, // to activate auto fix orientation\r\n orientation: orientation,\r\n minWidth: 600,\r\n minHeight: 600\r\n }\r\n );\r\n });\r\n };\r\n const loadMyRoomFromCanvas = async ({ canvas, initScene }) => {\r\n // console.log(windowWidth, windowHeight);\r\n const maskCanvas = maskCanvasRef.current;\r\n const { width, height } = resizeKeepingAspect(canvas, {\r\n width: windowWidth,\r\n height: windowHeight\r\n });\r\n maskCanvas.width = width;\r\n maskCanvas.height = height;\r\n clearCanvas(maskCanvas, width, height);\r\n myRoomHelper.updateBackground({\r\n bgImage: canvas,\r\n width,\r\n height,\r\n bgCanvas: bgCanvasRef.current\r\n });\r\n if (initScene) {\r\n myRoomHelper.initScene({ dims: { width, height }, config: myRoomConfig });\r\n }\r\n const roomId = await uploadRoom();\r\n setCanvasWidHgt(inputCanvasRef, width, height, gizmoCanvasRef);\r\n\r\n myRoomHelper.resizeRenderer(width, height);\r\n const bgImageBlob = await canvasToBlobPromise(myRoomHelper.bgCanvas);\r\n // console.log(AImaskLoaded);\r\n\r\n if (initScene) {\r\n AImaskLoaded = false;\r\n DesignLoaded = false;\r\n await loadDesignCanvas();\r\n if (!AImaskLoaded) {\r\n setLoading(true);\r\n }\r\n }\r\n try {\r\n loadRoomMaskFromAI(bgImageBlob, width, height, roomId);\r\n } catch (error) {\r\n console.log(error);\r\n //TODO:Handle segmentation error\r\n }\r\n };\r\n const uploadRoom = async () => {\r\n const { roomId } = await myRoomHelper.uploadRoom({ bgCanvas: bgCanvasRef.current });\r\n setroomId(roomId);\r\n setIsRoomSaved(false);\r\n setLoadIceBreaker(false);\r\n return roomId;\r\n };\r\n const loadRoomMaskFromAI = async (bgImageBlob, width, height, roomId) => {\r\n setLoading(true);\r\n myRoomHelper.setCarpetVisibility(false);\r\n myRoomHelper.updateGizmo({ show: false });\r\n\r\n AppProvider.getRoomMask(bgImageBlob).then(\r\n async res => {\r\n let maskData = \"data:image/png;base64, \" + res.img;\r\n const mask512 = \"data:image/png;base64, \" + res.img_orig;\r\n setOrigMaskUrl(maskData);\r\n setOrigMask512(mask512);\r\n //console.log(width, height);\r\n width = width || maskCanvasRef.current.width;\r\n height = height || maskCanvasRef.current.height;\r\n\r\n myRoomHelper.updateMask({\r\n maskUrl: maskData,\r\n maskCanvas: maskCanvasRef.current,\r\n bgCanvas: bgCanvasRef.current,\r\n width,\r\n height\r\n });\r\n await myRoomHelper.uploadMask({ maskUrl: mask512, roomId });\r\n\r\n carpetInitialPositionX = res.floor_center.x;\r\n carpetInitialPositionY = res.floor_center.y;\r\n myRoomHelper.setinitialOrientation(res);\r\n\r\n AImaskLoaded = true;\r\n if (DesignLoaded) setLoading(false);\r\n myRoomHelper.setCarpetVisibility(true);\r\n myRoomHelper.updateGizmo({ show: myRoomState.controlMode === controlModes.TRANSFORM });\r\n },\r\n error => {\r\n console.log(error);\r\n AImaskLoaded = true;\r\n if (DesignLoaded) setLoading(false);\r\n myRoomHelper.setCarpetVisibility(true);\r\n myRoomHelper.updateGizmo({ show: myRoomState.controlMode === controlModes.TRANSFORM });\r\n }\r\n );\r\n\r\n // const res = await AppProvider.getRoomMask(bgImageBlob);\r\n // let maskData = \"data:image/png;base64, \" + res.img;\r\n // const mask512 = \"data:image/png;base64, \" + res.img_orig;\r\n // setOrigMaskUrl(maskData);\r\n // setOrigMask512(mask512);\r\n // //console.log(width, height);\r\n // width = width || maskCanvasRef.current.width;\r\n // height = height || maskCanvasRef.current.height;\r\n\r\n // myRoomHelper.updateMask({\r\n // maskUrl: maskData,\r\n // maskCanvas: maskCanvasRef.current,\r\n // bgCanvas: bgCanvasRef.current,\r\n // width,\r\n // height\r\n // });\r\n // await myRoomHelper.uploadMask({ maskUrl: mask512, roomId });\r\n\r\n // carpetInitialPositionX = res.floor_center.x;\r\n // carpetInitialPositionY = res.floor_center.y;\r\n // myRoomHelper.setinitialOrientation(res);\r\n // AImaskLoaded = true;\r\n // dispatchDesignDetails({ type: designDetailActions.SET_LOADING, payload: false });\r\n // myRoomHelper.setCarpetVisibility(true);\r\n // myRoomHelper.updateGizmo({ show: myRoomState.controlMode === controlModes.TRANSFORM });\r\n };\r\n const handleGizmoInputStart = e => {\r\n myRoomHelper.mouseDownTouchStart(e);\r\n };\r\n const handleGizmoInputMove = e => {\r\n myRoomHelper.mouseTouchMove(e, myRoomState.controlMode === controlModes.TRANSFORM);\r\n };\r\n const handleTranslateMode = () => {\r\n dispatchMyRoom({ type: myRoomActions.SET_CONTROL_MODE, payload: controlModes.TRANSFORM });\r\n };\r\n const handleMarkMode = () => {\r\n dispatchMyRoom({ type: myRoomActions.SET_CONTROL_MODE, payload: controlModes.MARK });\r\n };\r\n const handleAdjustPlaneMode = () => {\r\n dispatchMyRoom({ type: myRoomActions.SET_CONTROL_MODE, payload: controlModes.ADJUST_PLANE });\r\n };\r\n const handleAutoLevel = e => {\r\n isAutoLeveled\r\n ? myRoomHelper.undoAutoLevel(bgCanvasRef.current, maskCanvasRef.current)\r\n : myRoomHelper.autoLevel(bgCanvasRef.current, maskCanvasRef.current);\r\n setIsAutoLeveled(!isAutoLeveled);\r\n };\r\n const handleRotation = deg => {\r\n myRoomHelper.rotateCarpet(deg);\r\n };\r\n const handleScaleUp = e => {\r\n e.stopPropagation();\r\n myRoomHelper.scaleUpCarpet();\r\n //viewer.panCamera(10, 10);\r\n };\r\n\r\n const handleScaleDown = e => {\r\n e.stopPropagation();\r\n myRoomHelper.scaleDownCarpet();\r\n };\r\n const handleReset = () => {\r\n switch (myRoomState.controlMode) {\r\n case controlModes.MARK:\r\n handleResetPoints();\r\n break;\r\n case controlModes.TRANSFORM:\r\n myRoomHelper.resetCarpetTransform();\r\n break;\r\n case controlModes.ADJUST_PLANE:\r\n myRoomHelper.resetOrbit(carpetInitialPositionX, carpetInitialPositionY);\r\n break;\r\n\r\n default:\r\n break;\r\n }\r\n };\r\n const CancelSaveRoom = () => {\r\n setOpenSaveDialog(false);\r\n };\r\n const handleIncPlaneHgt = e => {\r\n myRoomHelper.adjustPlaneHeight(true);\r\n };\r\n const handleDecPlaneHgt = e => {\r\n myRoomHelper.adjustPlaneHeight(false);\r\n };\r\n const handleMoveCameraUp = e => {\r\n myRoomHelper.adjustCameraAngle(true);\r\n };\r\n const handleMoveCameraDown = e => {\r\n myRoomHelper.adjustCameraAngle(false);\r\n };\r\n const handleInputStart = e => {\r\n const x = e.x,\r\n y = e.y;\r\n handleInputMark(x, y);\r\n };\r\n const handleInputMove = e => {\r\n const x = e.x,\r\n y = e.y;\r\n handleInputMark(x, y);\r\n };\r\n const handleInputEnd = () => {\r\n myRoomHelper.updatePointHistory();\r\n getOutputMask();\r\n };\r\n const handleInputMark = (x, y) => {\r\n myRoomHelper.markFF(x, y, inputCanvasRef.current, myroomInputSelected);\r\n };\r\n const handleResetPoints = () => {\r\n myRoomHelper.resetPoints(inputCanvasRef.current);\r\n clearCanvas(maskCanvasRef.current, maskCanvasRef.current.width, maskCanvasRef.current.height);\r\n //uploadMask({ maskUrl: defaultWMask512, roomId });\r\n myRoomHelper.uploadMask({ maskUrl: origMask512, roomId });\r\n myRoomHelper.updateMask({\r\n maskUrl: origMaskUrl,\r\n maskCanvas: maskCanvasRef.current,\r\n bgCanvas: bgCanvasRef.current\r\n });\r\n };\r\n\r\n const handleUndoPoints = () => {\r\n myRoomHelper.undoPoints(inputCanvasRef.current);\r\n getOutputMask();\r\n };\r\n const getOutputMask = () => {\r\n setLoading(true);\r\n\r\n //const roomId = roomId;\r\n myRoomHelper.getCarpetPositions();\r\n const carpetpoints = myRoomHelper.myRoomPointsOBJ.carpetpoints;\r\n const floorpoints = myRoomHelper.myRoomPointsOBJ.floorpoints;\r\n const notfloorpoints = myRoomHelper.myRoomPointsOBJ.notfloorpoints;\r\n\r\n AppProvider.getProcessedRoomMask({\r\n roomId,\r\n file: designPath,\r\n props: designDetails,\r\n floorpoints,\r\n notfloorpoints,\r\n carpetpoints\r\n }).then(response => {\r\n var url = window.URL || window.webkitURL;\r\n const imageSrc = url.createObjectURL(response);\r\n\r\n readImage(imageSrc).then(\r\n image => {\r\n myRoomHelper.updateMask({\r\n maskImage: image,\r\n maskCanvas: maskCanvasRef.current,\r\n bgCanvas: bgCanvasRef.current\r\n });\r\n setLoading(false);\r\n },\r\n error => {\r\n //console.log(error);\r\n }\r\n );\r\n });\r\n };\r\n const handleBtnAI = async () => {\r\n myRoomHelper.resetPoints(inputCanvasRef.current);\r\n myRoomHelper.uploadMask({ maskUrl: origMask512, roomId });\r\n myRoomHelper.updateMask({\r\n maskUrl: origMaskUrl,\r\n maskCanvas: maskCanvasRef.current,\r\n bgCanvas: bgCanvasRef.current\r\n });\r\n };\r\n const handleMyroomCamera = () => {\r\n // if(isMobileDevice){\r\n // inputRef.current.click();\r\n // }\r\n // else{\r\n // setShowCamOptions(!showCamOptions);\r\n // }\r\n setShowCamOptions(!showCamOptions);\r\n };\r\n const openMyroomInput = () => {\r\n inputRef.current.click();\r\n };\r\n const handleOpenMyroomCamera = () => {\r\n if (!openCam) {\r\n setOpenCam(true);\r\n setShowCamOptions(false);\r\n }\r\n };\r\n const changeInputSelected = inputToSelect => {\r\n setMyroomInputSelected(inputToSelect);\r\n };\r\n const SaveRoom = roomName => {\r\n let mode = isAutoLeveled ? \"saveab\" : \"save\";\r\n const bgUrl = bgCanvasRef.current.toDataURL();\r\n const roomProps = {\r\n Thumb: bgUrl,\r\n label: roomName,\r\n id: roomId,\r\n fullpath: `Rooms/my room/${roomId}.crf`\r\n };\r\n myRoomHelper\r\n .saveAsRoom({\r\n mode,\r\n roomId,\r\n file: designPath,\r\n props: designDetails\r\n })\r\n .then(response => {\r\n dispatchMyRoom({\r\n type: myRoomActions.SAVE_ROOM,\r\n payload: roomProps\r\n });\r\n setIsRoomSaved(true);\r\n setOpenSaveDialog(false);\r\n });\r\n };\r\n\r\n window.SaveAsImage = async () => {\r\n myRoomHelper.saveAsImage({\r\n bgCanvas: bgCanvasRef.current,\r\n maskCanvas: maskCanvasRef.current,\r\n designPath\r\n });\r\n };\r\n\r\n return (\r\n <>\r\n {/* \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default MyRoom;\r\nfunction setCanvasWidHgt(inputCanvasRef, width, height, gizmoCanvasRef) {\r\n inputCanvasRef.current.width = width;\r\n inputCanvasRef.current.height = height;\r\n gizmoCanvasRef.current.width = width;\r\n gizmoCanvasRef.current.height = height;\r\n}\r\n","import React from \"react\";\r\nconst SET_FLOOR_OPTIONS = \"SET_FLOOR_OPTIONS\";\r\nconst SET_ACTIVE_FLOOR_OPTION = \"SET_ACTIVE_FLOOR_OPTION\";\r\nconst SET_SHOW_FLOOR_OPTION = \"SET_SHOW_FLOOR_OPTION\";\r\nconst SET_CARPET_OPTION = \"SET_CARPET_OPTION\";\r\nconst SET_ROOM_OPTIONS = \"SET_ROOM_OPTIONS\";\r\nconst StateContext = React.createContext();\r\nconst DispatchContext = React.createContext();\r\n\r\nconst roomViewActions = {\r\n SET_ACTIVE_FLOOR_OPTION,\r\n SET_SHOW_FLOOR_OPTION,\r\n SET_FLOOR_OPTIONS,\r\n SET_CARPET_OPTION,\r\n SET_ROOM_OPTIONS\r\n};\r\n\r\nconst roomViewState = {\r\n floorOptions: {\r\n show: false,\r\n floors: [],\r\n activeFloor: {}\r\n },\r\n carpetOptions: {\r\n rotation: null,\r\n position: null\r\n }\r\n};\r\n\r\nconst visualizationReducer = (state, action) => {\r\n const { payload } = action;\r\n switch (action.type) {\r\n case SET_FLOOR_OPTIONS:\r\n return setFloorOptions(state, payload);\r\n case SET_ACTIVE_FLOOR_OPTION:\r\n return { ...state, floorOptions: { ...state.floorOptions, activeFloor: payload } };\r\n case SET_SHOW_FLOOR_OPTION:\r\n return { ...state, floorOptions: { ...state.floorOptions, show: !!payload } };\r\n case SET_CARPET_OPTION:\r\n return { ...state, carpetOptions: payload };\r\n case SET_ROOM_OPTIONS:\r\n return { ...state, ...payload }\r\n\r\n default:\r\n return state;\r\n }\r\n};\r\nconst setFloorOptions = (state, payload) => {\r\n const { floorOptions } = state;\r\n const {\r\n floors = floorOptions.floors,\r\n activeFloor = floorOptions.activeFloor,\r\n show = floorOptions.show\r\n } = payload;\r\n return { ...state, floorOptions: { ...state.floorOptions, floors, activeFloor, show } };\r\n};\r\nfunction RoomviewStateProvider({ children }) {\r\n const { visualizations } = window.flags;\r\n const initState = { ...roomViewState, viewMode: visualizations.defaultView };\r\n const [state, dispatch] = React.useReducer(visualizationReducer, initState);\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {toastProps && (\r\n setToastProps(null)}\r\n />\r\n )}\r\n \r\n \r\n\r\n \r\n {!loadIceBreaker && (\r\n <>\r\n \r\n window.SaveAsImage()}\r\n />\r\n \r\n\r\n e.stopPropagation()}\r\n className=\"myroom-controls bottomBar\"\r\n >\r\n {myRoomState.controlMode === \"TRANSFORM\" && (\r\n \r\n {openCam && (\r\n setOpenCam(false)}\r\n onCapture={onCameraCapture}\r\n >\r\n )}\r\n \r\n\r\n \r\n {!loadIceBreaker && (\r\n <>\r\n \r\n \r\n\r\n \r\n Upload an Image\r\n \r\n \r\n\r\n \r\n
\r\n \r\n handleRotation(15)}\r\n />\r\n handleRotation(-45)}\r\n />\r\n handleRotation(-15)}\r\n />\r\n\r\n
\r\n )}\r\n {myRoomState.controlMode === controlModes.ADJUST_PLANE && (\r\n \r\n
\r\n )}\r\n {myRoomState.controlMode === controlModes.MARK && (\r\n \r\n changeInputSelected(\"floor\")}\r\n className={myroomInputSelected === \"floor\" ? \"at-active\" : null}\r\n />\r\n changeInputSelected(\"furni\")}\r\n className={myroomInputSelected === \"furni\" ? \"at-active\" : null}\r\n />\r\n changeInputSelected(\"eraser\")}\r\n className={myroomInputSelected === \"eraser\" ? \"at-active\" : null}\r\n />\r\n
\r\n )}\r\n\r\n {/* */}\r\n {myRoomState.controlMode === controlModes.MARK && (\r\n \r\n \r\n
\r\n \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, readImage } from \"../../../utils/domUtils\";\r\nimport { getPomUrl } from \"../../../utils/colorutils\";\r\nconst ColorPreview = props => {\r\n const {\r\n style,\r\n colorName,\r\n color,\r\n material,\r\n colorTextures,\r\n renderTexturedPreview,\r\n colorTab,\r\n showColorPoms = false,\r\n colorPomsShape\r\n } = props;\r\n const canvasRef = useRef();\r\n useMount(() => {\r\n const ctx = canvasRef.current.getContext(\"2d\");\r\n ctx.fillStyle = color;\r\n ctx.fillRect(0, 0, 160, 160);\r\n\r\n // console.log(color, colorName);\r\n if (!renderTexturedPreview && !showColorPoms) return;\r\n const { tabs, baseUrl } = window.flags.colorSelectionBox.customColorPreviews;\r\n const imageurl = showColorPoms\r\n ? getPomUrl(color, material, colorPomsShape)\r\n : `${baseUrl}/${colorTab}/${colorName}.jpg`;\r\n //console.log(\"useMount -> colorTextures\", colorTextures);\r\n\r\n if (tabs.includes(colorTab) || showColorPoms) {\r\n readImage(imageurl)\r\n .then(colorImage => {\r\n ctx.drawImage(colorImage, 0, 0, 160, 160);\r\n })\r\n .catch(err => {});\r\n } else {\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 });\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 \r\n {getMaterialName(currentYarn.Material)}\r\n \r\n {shouldShowDropdown && (\r\n
\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\nimport { getPomUrl } from \"../../../utils/colorutils\";\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 {\r\n swatchSize,\r\n colorRow,\r\n onColorSwatchClick,\r\n active,\r\n handleHover,\r\n swatchSpace,\r\n showColorPoms = false,\r\n colorPomsShape\r\n } = 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 const [showColorSwatchBg, setShowColorSwatchBg] = useState(true);\r\n //const colorPomImgRef = useRef(null);\r\n\r\n // useEffect(() => {\r\n // loadPomUrl(colorRow.Color, 0).then(colorPomImageUrl => {\r\n // if (colorPomImageUrl && colorPomImgRef.current) colorPomImgRef.current.src = colorPomImageUrl;\r\n // });\r\n // }, [colorRow]);\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) {\r\n // ref.current.scrollIntoView(props)\r\n const areaSelectBox = document.getElementsByClassName(\"colorSwatchBox\")[0];\r\n const { offsetLeft } = ref.current;\r\n areaSelectBox.scrollLeft = offsetLeft - areaSelectBox.offsetWidth / 2;\r\n }\r\n }, [ref, active]);\r\n useEffect(() => {\r\n if (!ref.current || !handleHover) return;\r\n if (hover === true) handleHover(ref.current);\r\n if (hover === false) handleHover(null);\r\n }, [hover]); // eslint-disable-line\r\n\r\n return (\r\n {colorName}
\r\n \r\n
\r\n )\r\n );\r\n};\r\nexport default SimilarColors;\r\n","import React, { useEffect, useState, useRef } from \"react\";\r\nimport classNames from \"classnames\";\r\nimport { pomsUrlPrefixPaulig } from \"../../../api/appProvider\";\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 SwatchBoxPaulig = props => {\r\n const { swatchSize, colorRow, onColorSwatchClick, active } = props;\r\n const disabledSwatch = colorRow.ColorName.toLowerCase() === \"_blank\";\r\n const [showColorSwatchBg, setShowColorSwatchBg] = useState(true);\r\n\r\n return (\r\n {strings.color.similarColors}
\r\n\r\n {similarColors.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 showColorPoms={window.flags.colorSelectionBox.showColorPomsImages}\r\n colorPomsShape=\"round\"\r\n />\r\n ))}\r\n\r\n \r\n {hoveredBox && hoveredBox.elem && (\r\n \r\n
\r\n \r\n {\r\n if (onColorSwatchClick) onColorSwatchClick(e);\r\n }}\r\n className={classNames(\r\n \"color-swatch\",\r\n { \"no-background\": !showColorSwatchBg },\r\n {\r\n \"hide-color-pom\": showColorSwatchBg\r\n },\r\n { \"color-swatch--disabled\": disabledSwatch, active }\r\n )}\r\n src={`${pomsUrlPrefixPaulig}${colorRow.ColorName}.jpg`}\r\n />\r\n
\r\n );\r\n};\r\n\r\nexport default SwatchBoxPaulig;\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, previewMaterial } from \"../../../utils/colorutils\";\r\nimport { getcurrentCollectionFilter } from \"../../../utils/treeutils\";\r\nimport AtIcon from \"../../atoms/AtIcon\";\r\nimport SwatchBoxPaulig from \"./SwatchBoxPaulig\";\r\nimport { isMobileDevice } from \"../../../utils/utils\";\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 renderTexturedPreview = true,\r\n onClose,\r\n ...otherprops\r\n } = props;\r\n // console.log(\"selectionColor\", selectionColor)\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 { colorSelectionBox: CsbFlags } = window.flags;\r\n const {\r\n customColorOptions,\r\n collectionFilter,\r\n colorPaletteLabels,\r\n swatchSize,\r\n defaultColorDatabaseIndex\r\n } = CsbFlags;\r\n const [colorCollection, setColorCollection] = useState();\r\n const [hoveredBox, setHoveredBox] = useState(null);\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 if (defaultColorDatabaseIndex || defaultColorDatabaseIndex === 0) {\r\n setSelectedCustomColorOption(null);\r\n dispatch({\r\n type: colorListActions.SELECT_COLLECTION,\r\n payload: defaultColorDatabaseIndex\r\n });\r\n }\r\n }, []);\r\n useEffect(() => {\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 const collection = { ...filteredCollection, ColorRows: sortagain };\r\n setColorCollection(collection);\r\n }, [collectionIndex, sortingKey, sortingOrder, filteredCollection]);\r\n\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 if (CsbFlags.searchColorInAllLists) {\r\n dispatch({ type: colorListActions.SEARCH_COLOR_IN_ALL, payload: e.target.value });\r\n } else {\r\n dispatch({ type: colorListActions.SEARCH_COLOR, payload: e.target.value });\r\n }\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 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 collectionsToshow = getcurrentCollectionFilter(collectionFilter, fullpath);\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, labelTitle } = props;\r\n let labelTitle_translated = getCurrentLangString(labelTitle);\r\n labelTitle_translated = labelTitle_translated === \"\" ? \"Premounted\" : labelTitle_translated;\r\n return (\r\n {colorRow.ColorName}
\r\n\r\n
\r\n );\r\n };\r\n const getCurrentLangString = textObj => {\r\n const currentLang = strings.getLanguage();\r\n return textObj && textObj[currentLang] ? textObj[currentLang] : \"\";\r\n };\r\n const renderLabelTemplate = props => {\r\n const { templateName } = props;\r\n switch (templateName) {\r\n case \"flipo\":\r\n return {labelTitle_translated}
\r\n {label}
\r\n \r\n \r\n
\r\n )}\r\n {colorCollection && CsbFlags.showSimilarColors && (\r\n \r\n
\r\n )}\r\n {CsbFlags.showColorPaletteDropDown && (\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 window.flags.accountSpecific.isPaulig ? (\r\n {\r\n handleColorSwatchClick(colorRow, e);\r\n }}\r\n active={colorRow === activeColor}\r\n />\r\n ) : (\r\n {\r\n handleColorSwatchClick(colorRow, e);\r\n }}\r\n active={colorRow === activeColor}\r\n handleHover={elem => setHoveredBox({ elem, colorRow })}\r\n showColorPoms={window.flags.colorSelectionBox.showColorPomsImages}\r\n colorPomsShape=\"square\"\r\n />\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({\r\n templateName: colorPaletteLabels.labelTemplate || \"flipo\",\r\n label,\r\n labelTitle: colorPaletteLabels.labelTitle\r\n })}\r\n
\r\n ))}\r\n \r\n \r\n
\r\n \r\n ) : (\r\n \r\n {\" \"}\r\n {getCurrentLangString(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, { useState } from \"react\";\r\nimport {\r\n Popover,\r\n Menu,\r\n MenuItem,\r\n Icon,\r\n MenuDivider,\r\n PopoverInteractionKind\r\n} from \"@blueprintjs/core\";\r\nimport {\r\n designDetailActions,\r\n useDesignDetailState,\r\n useDispatchDesignDetail\r\n} from \"../../../reducers/designdetails.reducer\";\r\nimport ColorSelectionBox from \"../../organisms/ColorSelectionBox\";\r\nimport AtIcon from \"../../atoms/AtIcon\";\r\nimport CircularColorSVG from \"../../atoms/CircularColorSVG\";\r\nimport strings from \"../../../strings\";\r\nimport { flaginCurrentMode } from \"../../pages/EntryPage/defaultflags\";\r\nimport classNames from \"classnames\";\r\nimport { useColorListState } from \"../../../reducers/colors.reducer\";\r\nimport { useUiState } from \"../../../reducers/mainui.reducer\";\r\nimport { hextoLum } from \"../../../utils/colorutils\";\r\nimport { useDesignListState } from \"../../../reducers/designlist.reducer\";\r\n\r\nexport const getMaterialName = ind => {\r\n // let materialName;\r\n if (ind < 4)\r\n return getMatPileheightText({\r\n overwriteTextureNames: strings.color.defaultTextureNames,\r\n index: ind,\r\n defaultText: window.TextureOptions.DefaultTextureNames[ind]\r\n });\r\n if (ind <= 30)\r\n return getMatPileheightText({\r\n overwriteTextureNames: strings.color.additionalTextureNames,\r\n index: ind - 4,\r\n defaultText: window.TextureOptions.AdditionalTextureNames[ind - 4]\r\n });\r\n else {\r\n const custTexIndex = window.TextureOptions.CustomTextureIndices.findIndex(item => item === ind);\r\n return getMatPileheightText({\r\n overwriteTextureNames: strings.color.customTextureNames,\r\n index: custTexIndex,\r\n defaultText: window.TextureOptions.CustomTextureNames[custTexIndex]\r\n });\r\n }\r\n};\r\nexport const getPileheightText = ind => {\r\n var pileheightNamesToOverwrite = null;\r\n if (window.flags.colorAreaSwatch.setCustomPileHgtNameOnSelection) {\r\n pileheightNamesToOverwrite = strings.color?.customPileheightNameOnSelection;\r\n }\r\n const defaultPileheightNames =\r\n pileheightNamesToOverwrite?.defaultPileheightNames || strings.color.defaultPileheightNames;\r\n const customPileheightNames =\r\n pileheightNamesToOverwrite?.customPileheightNames || strings.color.customPileheightNames;\r\n if (ind <= 200) {\r\n let closest = window.TextureOptions.DefaultPileheightValues.reduce((prev, curr) =>\r\n Math.abs(curr - ind) < Math.abs(prev - ind) ? curr : prev\r\n );\r\n\r\n const index = window.TextureOptions.DefaultPileheightValues.findIndex(item => item === closest);\r\n return getMatPileheightText({\r\n overwriteTextureNames: defaultPileheightNames,\r\n index: index,\r\n defaultText: window.TextureOptions.DefaultPileheightNames[index]\r\n });\r\n } else {\r\n const index = window.TextureOptions.CustomPileheightIndices.findIndex(item => item === ind);\r\n return getMatPileheightText({\r\n overwriteTextureNames: customPileheightNames,\r\n index: index,\r\n defaultText: window.TextureOptions.CustomPileheightNames[index]\r\n });\r\n }\r\n};\r\nconst getMatPileheightText = ({ overwriteTextureNames, index, defaultText }) => {\r\n if (!overwriteTextureNames) return defaultText;\r\n let text = defaultText;\r\n if (hasOverwriteString(overwriteTextureNames, index)) text = overwriteTextureNames[index];\r\n return text;\r\n};\r\nconst getMaterialPrefix = ind => {\r\n const matName = getMaterialNamePart(ind, 0);\r\n\r\n return matName;\r\n};\r\nconst getMaterialSuffix = ind => {\r\n const matName = getMaterialNamePart(ind, 1);\r\n return matName;\r\n};\r\nconst getMaterialNamePart = (ind, index) => {\r\n const materialName = getMaterialName(ind);\r\n const partOfName = materialName\r\n .split(`${materialName.includes(\"-\") ? \"-\" : \" \"}`) //if wool loop ko satta standard wool loop yesto standard thapnaparema use \"-\" in texture file\r\n [index].toLowerCase();\r\n const matArray =\r\n index === 0\r\n ? window.flags.colorAreaSwatch.multipleMatDropdowns.first\r\n : window.flags.colorAreaSwatch.multipleMatDropdowns.second;\r\n const matName = matArray.filter(elem => elem.toLowerCase().lastIndexOf(partOfName) !== -1);\r\n return matName[0];\r\n};\r\nconst hasMaterialLangOptions = ({ language = window.flags.language, overwriteTextureNames }) => {\r\n var hasLangOptions =\r\n language.langOptions.length && language.langOptions[0] !== \"\" && overwriteTextureNames\r\n ? true\r\n : false;\r\n return hasLangOptions;\r\n};\r\nconst hasOverwriteString = (namesArray, index) => {\r\n //to check if the string that overwrites text exists and is not blank\r\n if (namesArray && namesArray[index] && namesArray[index] !== \"\") return true;\r\n else return false;\r\n};\r\nconst hasMultipleLangOptions = ({ language = window.flags.language, overwriteTextureNames }) => {\r\n let hasValidOptions =\r\n hasMaterialLangOptions({ language, overwriteTextureNames }) &&\r\n overwriteTextureNames.length &&\r\n !overwriteTextureNames.includes(undefined) &&\r\n !overwriteTextureNames.includes(\"\");\r\n return hasValidOptions;\r\n};\r\nconst MaterialDropdownMultiple = props => {\r\n const {\r\n handleMultipleMaterialChange,\r\n matDropdownOptions,\r\n getMaterialNamePart,\r\n designColor\r\n } = props;\r\n\r\n const currentMatPart = getMaterialNamePart(designColor.YarnDetails[0].Material);\r\n const handleMatChange = ({ materialName }) => {\r\n handleMultipleMaterialChange({ materialName });\r\n };\r\n return (\r\n \r\n \r\n {matDropdownOptions && (\r\n <>\r\n {matDropdownOptions.map((textureName, i) => (\r\n {\r\n handleMatChange({ materialName: textureName });\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\nexport const AreaSwatch = React.forwardRef((props, ref) => {\r\n const {\r\n className,\r\n colorIndex,\r\n onColorSelectionClose,\r\n onColorSelectionOpen,\r\n handleClick,\r\n onColorPieClick,\r\n style,\r\n designColor,\r\n colorNumber,\r\n totalKnots,\r\n popoverPosition = \"left\",\r\n showPile = true,\r\n showColorSelection = true,\r\n showColorPercent,\r\n isOneActMainColor,\r\n handleOneActMainColorChange\r\n } = props;\r\n\r\n const dispatchDesignDetails = useDispatchDesignDetail();\r\n const designDetailState = useDesignDetailState();\r\n const colorListState = useColorListState();\r\n const state = useDesignListState();\r\n const { colorTextures, activeColor } = colorListState;\r\n const { designDetails, lockedColorIndexArray } = designDetailState;\r\n const { colorAreaSwatch: casFlags, colorSeparatedTexture, language } = window.flags;\r\n const showPlyDropdown = flaginCurrentMode(window.InterfaceElements.IsAdmin, casFlags.hasMixply); /// window.InterfaceElements.IsAdmin;\r\n const { mixPlyOptions } = casFlags;\r\n let colorPercentShown =\r\n showColorPercent === undefined ? casFlags.showColorPercent : showColorPercent;\r\n\r\n const [openCSB, setOpenCSB] = useState(false);\r\n const [colorLock, setColorLock] = useState(false);\r\n const uiState = useUiState();\r\n\r\n const {\r\n DefaultTextureVisible,\r\n AdditionalTextureVisible,\r\n CustomTextureIndices,\r\n CustomPileheightIndices,\r\n DefaultPileheightValues,\r\n DefaultPileheightVisible\r\n } = window.TextureOptions;\r\n\r\n let {\r\n DefaultTextureNames,\r\n AdditionalTextureNames,\r\n CustomTextureNames = [],\r\n CustomPileheightNames,\r\n DefaultPileheightNames\r\n } = window.TextureOptions;\r\n\r\n DefaultTextureNames = hasMultipleLangOptions({\r\n language,\r\n overwriteTextureNames: strings.color.defaultTextureNames\r\n })\r\n ? strings.color.defaultTextureNames\r\n : DefaultTextureNames;\r\n\r\n AdditionalTextureNames = hasMultipleLangOptions({\r\n language,\r\n overwriteTextureNames: strings.color.additionalTextureNames\r\n })\r\n ? strings.color.additionalTextureNames\r\n : AdditionalTextureNames;\r\n\r\n CustomTextureNames = hasMultipleLangOptions({\r\n language,\r\n overwriteTextureNames: strings.color.customTextureNames\r\n })\r\n ? strings.color.customTextureNames\r\n : CustomTextureNames;\r\n\r\n CustomPileheightNames = hasMultipleLangOptions({\r\n language,\r\n overwriteTextureNames: strings.color.customPileheightNames\r\n })\r\n ? strings.color.customPileheightNames\r\n : CustomPileheightNames;\r\n\r\n DefaultPileheightNames = hasMultipleLangOptions({\r\n language,\r\n overwriteTextureNames: strings.color.defaultPileheightNames\r\n })\r\n ? strings.color.defaultPileheightNames\r\n : DefaultPileheightNames;\r\n\r\n const origDesignColors = designDetailState.history.length\r\n ? designDetailState.history[0].designDetails.DesignColors\r\n : designDetails.DesignColors;\r\n\r\n const handleColorSwatchClick = (color, e) => {\r\n if (designColor.YarnDetails.length <= 1) {\r\n if (isOneActMainColor === true) {\r\n if (handleOneActMainColorChange) handleOneActMainColorChange(color);\r\n } else {\r\n dispatchDesignDetails({\r\n type: designDetailActions.CHANGE_COLOR,\r\n payload: color\r\n });\r\n }\r\n } else {\r\n dispatchDesignDetails({\r\n type: designDetailActions.CHANGE_YARN_COLOR,\r\n payload: color\r\n });\r\n }\r\n };\r\n\r\n const handleMultipleMaterialChange_first = ({ materialName }) => {\r\n const currentMatName = getMaterialName(designColor.YarnDetails[0].Material);\r\n const matSuffix = currentMatName.split(`${currentMatName.includes(\"-\") ? \"-\" : \" \"}`)[1];\r\n const newMatName =\r\n materialName +\r\n `${materialName.split(\" \").length === 1 && matSuffix.split(\" \").length === 1 ? \" \" : \"-\"}` +\r\n matSuffix;\r\n handleMultipleMaterialChange(newMatName);\r\n };\r\n const handleMultipleMaterialChange_second = ({ materialName }) => {\r\n const currentMatName = getMaterialName(designColor.YarnDetails[0].Material);\r\n const matPrefix = currentMatName.split(`${currentMatName.includes(\"-\") ? \"-\" : \" \"}`)[0];\r\n const newMatName =\r\n matPrefix +\r\n `${matPrefix.split(\" \").length === 1 && materialName.split(\" \").length === 1 ? \" \" : \"-\"}` +\r\n materialName;\r\n handleMultipleMaterialChange(newMatName);\r\n };\r\n const handleMultipleMaterialChange = newMatName => {\r\n const totalMatOptions = [\r\n ...window.TextureOptions.DefaultTextureNames,\r\n ...window.TextureOptions.AdditionalTextureNames\r\n ];\r\n const material = totalMatOptions.indexOf(newMatName);\r\n const materialName = newMatName;\r\n handleMaterialChange({ material, materialName });\r\n };\r\n\r\n const handleMaterialChange = ({ material, materialName }) => {\r\n const isMaterialSameForAll = casFlags.sameMaterialForAll;\r\n dispatchDesignDetails({\r\n type: designDetailActions.CHANGE_COLOR_TEXTURE,\r\n payload: { material, materialName, colorIndex, isMaterialSameForAll }\r\n });\r\n\r\n // if (designColor.YarnMaterials.length <= 1) {\r\n // dispatchDesignDetails({\r\n // type: designDetailActions.CHANGE_COLOR_TEXTURE,\r\n // payload: { material, materialName, colorIndex }\r\n // });\r\n // } else {\r\n // dispatchDesignDetails({\r\n // type: designDetailActions.CHANGE_YARN_MATERIAL,\r\n // payload: { material, materialName, colorIndex }\r\n // });\r\n // }\r\n };\r\n const selectYarn = yarnIndex => {\r\n if (designColor.YarnDetails.length <= 1) {\r\n dispatchDesignDetails({\r\n type: designDetailActions.SELECT_DESIGN_COLOR,\r\n payload: colorIndex\r\n });\r\n if (onColorPieClick) onColorPieClick(designColor);\r\n } else {\r\n dispatchDesignDetails({\r\n type: designDetailActions.SELECT_YARN,\r\n payload: { colorIndex, yarnIndex }\r\n });\r\n if (onColorPieClick) onColorPieClick(designColor.YarnDetails[yarnIndex]);\r\n }\r\n };\r\n const handleYarnClick = (e, yarnIndex) => {\r\n selectYarn(yarnIndex);\r\n };\r\n const handleMixPly = plyNumber => {\r\n dispatchDesignDetails({\r\n type: designDetailActions.MIX_PLY,\r\n payload: { colorIndex, plyNumber }\r\n });\r\n };\r\n const colorTitle =\r\n designColor.YarnDetails.length <= 1\r\n ? designColor.YarnDetails[0].ColorName\r\n : strings.color.mixedColors;\r\n const shouldShowDropDown = () => {\r\n const materials = designColor.YarnDetails.map(item => item.Material);\r\n return materials.every(item => item === materials[0]);\r\n };\r\n const allMaterialOptionsHidden = () => {\r\n return DefaultTextureVisible.every(item => item === false);\r\n };\r\n\r\n const checkExclusiveMaterial = i => {\r\n var exclusiveMaterials = casFlags.exclusiveMatArr;\r\n if (casFlags.donotShowMatArr.length != 0) {\r\n exclusiveMaterials = !flaginCurrentMode(\r\n window.InterfaceElements.IsAdmin,\r\n casFlags.exclusiveMatArrMode\r\n )\r\n ? casFlags.exclusiveMatArr\r\n : [];\r\n }\r\n\r\n const origColorMaterial = origDesignColors[colorIndex].YarnDetails[0].Material;\r\n let associatedYarnMaterial = parseFloat(designColor.YarnDetails[0].AssociatedMat);\r\n\r\n associatedYarnMaterial =\r\n associatedYarnMaterial || associatedYarnMaterial === 0\r\n ? associatedYarnMaterial\r\n : origColorMaterial;\r\n let showThisMat =\r\n associatedYarnMaterial === i || //show this mat if it is associated material of the color\r\n !isAnExclusiveMat(exclusiveMaterials, i) || // hide if it is in exclusive mat array list\r\n isExclusiveWithinArr(exclusiveMaterials, associatedYarnMaterial, i) //show if current mat should appear with another exclusive mat eg: for exclusivematArr = [[1,2], 3], mat 2 should appear with mat 1. if i ==2 (i.e current mat), and 1 is associatedMat then, it should appear\r\n ? true\r\n : false;\r\n return showThisMat;\r\n };\r\n\r\n const checkspecificMaterialIndexForSpecificFolder = i => {\r\n const specificMaterialForSpecificFolder = casFlags.specificMaterialForSpecificFolder;\r\n var isPresent = true;\r\n if (specificMaterialForSpecificFolder.length == 0) {\r\n isPresent = true;\r\n return isPresent;\r\n } else {\r\n const currentFolder = state.selectedFile.location.split(\"/\").pop();\r\n const currentArray = specificMaterialForSpecificFolder.filter(\r\n item => item[0] === currentFolder\r\n );\r\n if (currentArray.length == 0) isPresent = true;\r\n else {\r\n if (!currentArray[0][1].includes(i)) isPresent = false;\r\n }\r\n }\r\n return isPresent;\r\n };\r\n const isAnExclusiveMat = (exclusiveMaterials, matOption) => {\r\n let isExclusive = exclusiveMaterials.indexOf(matOption) !== -1 ? true : false;\r\n exclusiveMaterials.forEach(element => {\r\n if (Array.isArray(element) && element.indexOf(matOption) !== -1) {\r\n isExclusive = true;\r\n }\r\n });\r\n if (\r\n casFlags.donotShowMatArr.length > 0 &&\r\n !flaginCurrentMode(window.InterfaceElements.IsAdmin, casFlags.exclusiveMatArrMode) //show in multiple only, done for adnc\r\n ) {\r\n let associatedYarnMaterial = designColor.YarnDetails[0].Material;\r\n if (!casFlags.donotShowMatArr.includes(associatedYarnMaterial)) {\r\n isExclusive = true;\r\n }\r\n }\r\n return isExclusive;\r\n };\r\n\r\n const isExclusiveWithinArr = (exclusiveMaterials, designColorMaterial, matOption) => {\r\n var showThisMat = false;\r\n for (var i = 0; i < exclusiveMaterials.length; i++) {\r\n if (Array.isArray(exclusiveMaterials[i])) {\r\n if (\r\n exclusiveMaterials[i].indexOf(designColorMaterial) !== -1 &&\r\n exclusiveMaterials[i].indexOf(matOption) !== -1\r\n ) {\r\n showThisMat = true;\r\n }\r\n }\r\n }\r\n return showThisMat;\r\n };\r\n const checkAdditionalTextureVisible = i => {\r\n let showThis = true;\r\n if (AdditionalTextureVisible && AdditionalTextureVisible.length) {\r\n showThis = AdditionalTextureVisible[i];\r\n }\r\n return showThis;\r\n };\r\n const materialDropdown = (\r\n \r\n <>\r\n {currentMatPart}\r\n {
\r\n \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(\r\n (textureName, i) =>\r\n checkAdditionalTextureVisible(i) &&\r\n checkExclusiveMaterial(4 + 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\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\r\n const multipleMaterialDropdown = (\r\n <>\r\n \r\n {shouldShowDropDown() ? (\r\n <>\r\n \r\n {getMaterialName(designColor.YarnDetails[0].Material)}\r\n \r\n {!allMaterialOptionsHidden() && (\r\n
\r\n \r\n handleLockIconClick(colorIndex)} style={{ cursor: \"pointer\" }}>\r\n
\r\n )}\r\n \r\n \r\n )}\r\n \r\n Click to select colors
}\r\n minimal\r\n position=\"top\"\r\n portalContainer={document.getElementById(\"app-main\")}\r\n boundary=\"viewport\"\r\n disabled={!casFlags.toolTipOnColorBoxHover}\r\n >\r\n \r\n \r\n {casFlags.colorNamePrefix}\r\n {colorTitle}\r\n \r\n {designColor.Carving && (\r\n
\r\n \r\n )}\r\n\r\n {colorSeparatedTexture && (\r\n <>\r\n {casFlags.showMultipleMatDropdowns ? multipleMaterialDropdown : 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 );\r\n});\r\n","window.gifScript = false;\r\nexport default class GifHelper {\r\n constructor() {\r\n this.gif = null;\r\n this.totalFrames = 3;\r\n this.renderGif = false;\r\n this.frameDuration = 1;\r\n }\r\n\r\n async init(options = {}) {\r\n const { totalFrames, frameDuration } = options;\r\n if (totalFrames) {\r\n this.totalFrames = totalFrames;\r\n }\r\n if (frameDuration) {\r\n this.frameDuration = frameDuration;\r\n }\r\n return new Promise((resolve, reject) => {\r\n if (!this.gif) {\r\n const createWorkers = () => {\r\n this.gif = new window.GIF({\r\n workers: 8,\r\n quality: 2,\r\n workerScript: \"gifScripts/gif.worker.js\"\r\n });\r\n resolve();\r\n }\r\n if (!window.gifScript) {\r\n const script = document.createElement('script');\r\n script.src = \"gifScripts/gif.js\";\r\n document.body.appendChild(script);\r\n script.onload = () => {\r\n window.gifScript = true;\r\n createWorkers()\r\n };\r\n }\r\n else {\r\n createWorkers()\r\n }\r\n }\r\n else {\r\n resolve();\r\n }\r\n });\r\n\r\n }\r\n\r\n canaddFrame() {\r\n return ((!this.gif || this.gif.frames.length < this.totalFrames) && this.renderGif);\r\n }\r\n\r\n async addFrame(frame) {\r\n if (!frame || (this.gif && this.gif.frames.length >= this.totalFrames)) return;\r\n if (!this.gif)\r\n await this.init();\r\n const frameDelay = this.frameDuration * 1000;\r\n if (Array.isArray(frame)) {\r\n for (let index = 0; index < frame.length; index++) {\r\n await this.gif.addFrame(frame[index], { delay: frameDelay });\r\n }\r\n }\r\n else {\r\n this.gif.addFrame(frame, { delay: frameDelay });\r\n }\r\n\r\n }\r\n\r\n render(options = {}) {\r\n const { download = true, totalFrames, frameDuration } = options;\r\n this.init({ totalFrames, frameDuration });\r\n this.renderGif = true;\r\n return new Promise(async (resolve, reject) => {\r\n while (!this.gif || this.gif.frames.length < this.totalFrames) {\r\n await (new Promise(resolve => setTimeout(resolve, 1000)));\r\n }\r\n this.renderGif = false;\r\n this.gif.on('finished', (function (blob) {\r\n this.clear();\r\n if (download) {\r\n const downloadLink = document.createElement('a');\r\n downloadLink.href = window.URL.createObjectURL(blob);\r\n downloadLink.setAttribute('download', 'test.gif');\r\n document.body.appendChild(downloadLink);\r\n downloadLink.click();\r\n downloadLink.remove();\r\n resolve();\r\n }\r\n else {\r\n resolve(URL.createObjectURL(blob));\r\n }\r\n }).bind(this));\r\n this.gif.render();\r\n })\r\n }\r\n\r\n clear() {\r\n if (this.gif) {\r\n this.gif.freeWorkers.forEach(w => w.terminate());\r\n this.gif.abort();\r\n this.gif.frames = [];\r\n delete this.gif.imageParts;\r\n delete this.gif.finishedFrames;\r\n delete this.gif.nextFrame;\r\n this.gif = null;\r\n }\r\n }\r\n}","/* eslint-disable react-hooks/exhaustive-deps */\r\n\r\nimport React, { useRef, useEffect, useState } from \"react\";\r\nimport styled from \"styled-components\";\r\nimport RoomViewHelper from \"./roomviewhelper\";\r\nimport { useMount, useWindowSize } from \"react-use\";\r\nimport InputCanvas from \"../../atoms/InputCanvas\";\r\nimport classNames from \"classnames\";\r\nimport { useFullscreen, useToggle } from \"react-use\";\r\nimport {\r\n useDesignDetailState,\r\n useDispatchDesignDetail,\r\n designDetailActions\r\n} from \"../../../reducers/designdetails.reducer\";\r\nimport { canvasToBlobPromise, createCanvas, downloadImageData } from \"../../../utils/canvasutils\";\r\nimport { makeid } from \"../../../utils/utils\";\r\nimport AppProvider, { myrugStudioSaveUrl } from \"../../../api/appProvider\";\r\nimport {\r\n roomViewActions,\r\n useDispatchRoomView,\r\n useRoomViewState\r\n} from \"../../../reducers/roomview.reducer\";\r\nimport { AreaSwatch } from \"../../molecules/AreaSwatch\";\r\nimport { colorListActions, useDispatchColorList } from \"../../../reducers/colors.reducer\";\r\nimport AtIcon from \"../../atoms/AtIcon\";\r\nimport {\r\n mainUiActions,\r\n pageViews,\r\n useUiDispatch,\r\n useUiState\r\n} from \"../../../reducers/mainui.reducer\";\r\nimport { convertUnit } from \"../../../utils/utils\";\r\nimport GifHelper from \"./gifHelper\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\nimport {\r\n designListActions,\r\n useDesignListState,\r\n useDispatchDesignList\r\n} from \"../../../reducers/designlist.reducer\";\r\nimport { MD5 } from \"../../../utils/md5\";\r\nimport {\r\n useDispatchVisualization,\r\n useVisualizationState,\r\n visualizationsActions\r\n} from \"../../../reducers/visualizations.reducer\";\r\nlet roomViewHelper = new RoomViewHelper();\r\nlet gifHelper = new GifHelper();\r\nlet designRendered = false;\r\nlet designRendering = false;\r\nlet sizeAnimationLoop;\r\nconst Container = styled.div`\r\n width: 100%;\r\n height: 100%;\r\n & > * {\r\n position: absolute;\r\n margin: auto;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n /* width: inherit !important;\r\n height: auto !important; */\r\n }\r\n`;\r\nconst Canvas = styled.canvas`\r\n z-index: ${props => props.zIndex};\r\n pointer-events: ${props => (props.pointerEvent ? \"all\" : \"none\")};\r\n`;\r\nconst BgVideo = styled.video`\r\n z-index: ${props => props.zIndex};\r\n pointer-events: ${props => (props.pointerEvent ? \"all\" : \"none\")};\r\n opacity: ${props => (props.show ? 1 : 0)};\r\n -webkit-mask-position: center;\r\n mask-position: center;\r\n -webkit-mask-size: contain;\r\n mask-size: contain;\r\n mask-image: none;\r\n`;\r\n\r\nfunction usePrevious(value) {\r\n const ref = useRef({});\r\n useEffect(() => {\r\n ref.current = value;\r\n }, [value]);\r\n return ref.current;\r\n}\r\nconst getDominantColor = designDetails => {\r\n if (!designDetails || !designDetails.DesignColors) return null;\r\n const smartKnot = designDetails.DesignColors.map(c => c.Knots).sort((a, b) => b - a);\r\n const smartIndex = smartKnot.length > 2 ? (smartKnot.length === 3 ? 1 : 2) : smartKnot.length - 1;\r\n const domC = designDetails.DesignColors.find(item => item.Knots === smartKnot[smartIndex]);\r\n if (domC) return domC.Color;\r\n else return null;\r\n};\r\nlet roomsIndex = 0;\r\nlet createCombinationRunning = false;\r\nlet totalFilesCount = 0;\r\nlet origFiles = [];\r\nlet tilesUpdating = false;\r\n\r\nlet carpetScale = [1, 1];\r\n\r\nconst RoomViewNew = props => {\r\n const {\r\n roomData,\r\n isIdle,\r\n handleActiveClick,\r\n activeColor,\r\n customDesignUrl,\r\n customDesignOutline,\r\n setFirstLoadingOnRender,\r\n onRenderingComplete,\r\n setScaledUpHeight,\r\n setScaledUpWidth,\r\n setIsFullScreen = () => {}\r\n } = props;\r\n const { Name: roomName, Files: files, config, baseUrl } = roomData;\r\n const [isRendering, setIsRendering] = useState(true);\r\n\r\n const containerRef = useRef(null);\r\n const fullScreenRef = useRef(null);\r\n const bgCanvasRef = useRef(null);\r\n const threeCanvasRef = useRef(null);\r\n const maskCanvasRef = useRef(null);\r\n const shadowCanvasRef = useRef(null);\r\n const inputCanvasRef = useRef(null);\r\n const transitionCanvasRef = useRef();\r\n const floatingOptionsRef = useRef();\r\n const videoRef = useRef();\r\n\r\n const uiState = useUiState();\r\n const dispatchUiState = useUiDispatch();\r\n\r\n const designListState = useDesignListState();\r\n const dispatchDesignList = useDispatchDesignList();\r\n\r\n const illustrationListState = useVisualizationState();\r\n const illustrationListDispatch = useDispatchVisualization();\r\n\r\n const designDetailState = useDesignDetailState();\r\n const prevDesignDetails = usePrevious(designDetailState.designDetails);\r\n const prevRoomDetails = usePrevious(roomData);\r\n const prevRoomType = usePrevious(config.roomType);\r\n const dispatchDesignDetails = useDispatchDesignDetail();\r\n const roomviewState = useRoomViewState();\r\n const dispatchRoomView = useDispatchRoomView();\r\n const dispatchColorList = useDispatchColorList();\r\n const [mouseDownPosition, setMouseDownPosition] = useState(null);\r\n const windowSize = useWindowSize();\r\n const {\r\n designDetails,\r\n updateDesignTiles,\r\n updateNormapTiles,\r\n hash,\r\n fullpath,\r\n designDimsOrig\r\n } = designDetailState;\r\n const { floorOptions, carpetOptions } = roomviewState;\r\n const { rotation: carpetRotation, position: carpetPosition } = carpetOptions;\r\n const { activeFloor } = floorOptions;\r\n const [isRoomviewInFullScreen, toggleIsRoomviewInFullScreen] = useToggle(false);\r\n const { similarDesignsFolder, selectedFile } = designListState;\r\n const [isPaused, setIsPaused] = useState(false);\r\n const [isActiveRoomValue, setIsActiveRoomValue] = useState(0);\r\n const isStudioTemplate = window.flags.homeTemplate === pageViews.STUDIOENTRY;\r\n\r\n useFullscreen(fullScreenRef, isRoomviewInFullScreen, {\r\n onClose: () => {\r\n toggleIsRoomviewInFullScreen(false);\r\n setIsPaused(false);\r\n }\r\n });\r\n const isBorderRugs =\r\n window.flags.visualizations.isBorderRugs && window.flags.ordersheet.repeatRugInArea;\r\n\r\n let designUnit = window.initialData.unit,\r\n centerDesignUrl = window.initialData.centerDesignUrl,\r\n borderSize = window.initialData.borderSize || 0,\r\n borderDesignWid = window.initialData.borderDesignWid,\r\n borderDesignHgt = window.initialData.borderDesignHgt,\r\n designWidth = window.initialData.designWidth,\r\n designHeight = window.initialData.designHeight;\r\n\r\n useMount(() => {\r\n const canvasConfig = {\r\n bgCanvas: bgCanvasRef.current,\r\n threeCanvas: threeCanvasRef.current,\r\n maskCanvas: maskCanvasRef.current,\r\n shadowCanvas: shadowCanvasRef.current,\r\n container: containerRef.current,\r\n inputCanvas: inputCanvasRef.current,\r\n transitionCanvas: transitionCanvasRef.current,\r\n floatingOptionsContainer: floatingOptionsRef.current,\r\n bgVideo: videoRef.current\r\n };\r\n roomViewHelper.initCanvas(canvasConfig);\r\n\r\n const onWindowMessage = async e => {\r\n if (e.origin === window.location.origin) return;\r\n const {\r\n runSizeAnimation,\r\n stopSizeAnimation,\r\n downloadGifNum,\r\n ratio,\r\n sizeArray,\r\n Unit,\r\n animationDuration\r\n } = e.data;\r\n if (downloadGifNum) {\r\n gifHelper.clear();\r\n await gifHelper\r\n .render({ download: true, totalFrames: downloadGifNum, frameDuration: animationDuration })\r\n .then(() => {\r\n if (window.flags.postToParentWhenLoaded)\r\n window.parent.postMessage(\"gif render success\", \"*\");\r\n })\r\n .catch(() => {\r\n if (window.flags.postToParentWhenLoaded)\r\n window.parent.postMessage(\"gif render fail\", \"*\");\r\n });\r\n return;\r\n }\r\n if (stopSizeAnimation) {\r\n startSizeAnimation({ stop: true });\r\n return;\r\n }\r\n if (!runSizeAnimation) return;\r\n startSizeAnimation({ ratio, sizeArray, Unit, animationDuration });\r\n };\r\n window.addEventListener(\"message\", onWindowMessage);\r\n\r\n return () => {\r\n window.removeEventListener(\"message\", onWindowMessage);\r\n };\r\n });\r\n\r\n useEffect(() => {\r\n roomViewHelper.resize(windowSize);\r\n }, [windowSize]);\r\n useEffect(() => {\r\n if (isRendering) return;\r\n if (!activeColor) return;\r\n roomViewHelper.updateBackground({ dominantColorHex: activeColor.Color });\r\n roomViewHelper.updateMask();\r\n roomViewHelper.updateShadow();\r\n }, [activeColor]);\r\n useEffect(() => {\r\n carpetScale = [1, 1];\r\n }, [illustrationListState.activeNode]);\r\n\r\n useEffect(() => {\r\n if (isRendering || !activeFloor || designDetailState.loading) return;\r\n\r\n const updateFloor = async () => {\r\n roomViewHelper.makeTransitionCanvas();\r\n setLoading(true);\r\n await roomViewHelper.renderFloor(activeFloor);\r\n await roomViewHelper.updateShadow();\r\n setLoading(false);\r\n };\r\n updateFloor();\r\n }, [activeFloor]);\r\n useEffect(() => {\r\n if (isRendering || designDetailState.loading || carpetRotation.length !== 3) return;\r\n roomViewHelper.updateCarpetRotation(carpetRotation);\r\n roomViewHelper.updateShadow();\r\n }, [carpetRotation]);\r\n useEffect(() => {\r\n if (isRendering || designDetailState.loading || carpetPosition.length !== 3) return;\r\n roomViewHelper.updateCarpetPosition(carpetPosition);\r\n roomViewHelper.updateShadow();\r\n }, [carpetPosition]);\r\n\r\n const startSizeAnimation = async ({ stop, ratio, sizeArray, Unit, animationDuration }) => {\r\n const renderFloorInRoom = floorOptions => {\r\n if (!floorOptions) return Promise.resolve();\r\n const floor = activeFloor.path ? activeFloor : floorOptions.activeFloor;\r\n return roomViewHelper.renderFloor(floor);\r\n };\r\n if (!stop) {\r\n gifHelper.clear();\r\n sizeAnimationLoop = null;\r\n } else {\r\n return;\r\n }\r\n let index = 0;\r\n let thisloopid = makeid(5);\r\n sizeAnimationLoop = thisloopid;\r\n let loop = setInterval(async () => {\r\n if (sizeAnimationLoop !== thisloopid) {\r\n clearInterval(loop);\r\n }\r\n let { PhysicalWidth, PhysicalHeight } = sizeArray[index];\r\n if (!PhysicalWidth && !PhysicalHeight) return;\r\n if ((!PhysicalWidth || !PhysicalHeight) && !ratio) return;\r\n if (!PhysicalWidth) {\r\n PhysicalWidth = PhysicalHeight * ratio;\r\n }\r\n if (!PhysicalHeight) {\r\n PhysicalHeight = PhysicalWidth / ratio;\r\n }\r\n await roomViewHelper.changeRenderedDesignSize({ PhysicalWidth, PhysicalHeight, Unit });\r\n if (activeFloor) await renderFloorInRoom(config.floorOptions);\r\n await roomViewHelper.updateShadow();\r\n if (gifHelper.canaddFrame()) {\r\n const renderCanvas = await roomViewHelper.renderinCanvas({ width: 1920, height: 1080 });\r\n gifHelper.addFrame(renderCanvas);\r\n }\r\n if (index === sizeArray.length - 1) index = 0;\r\n else ++index;\r\n }, animationDuration * 1000);\r\n };\r\n\r\n const generateHash = (details, fullpath = \"\") => {\r\n const des = JSON.stringify(details);\r\n return MD5(des + fullpath);\r\n };\r\n\r\n window.getDesigns = async ({ folder }) => {\r\n const nestedDesignList = await AppProvider.fetchDesignList({ struct: false });\r\n let origFiles = nestedDesignList\r\n .filter(file => file.Type === \"file\" && file.FullPath.indexOf(\"/.\") === -1)\r\n .map(file => {\r\n return { ...file, fullPath: file.FullPath, name: file.Name };\r\n });\r\n if (folder) {\r\n const foldername = folder.toLowerCase();\r\n origFiles = origFiles.filter(file => {\r\n if (file.FullPath.toLowerCase().indexOf(foldername) !== -1) return file;\r\n });\r\n }\r\n return origFiles;\r\n };\r\n window.changeDesign = async ({ folder }) => {\r\n let files;\r\n if (!origFiles.length) {\r\n files = await window.getDesigns({ folder }); //tree[0].files;\r\n } else {\r\n files = origFiles;\r\n }\r\n let newFile;\r\n if (totalFilesCount === 0) {\r\n let nextFileIndex = files.findIndex(file => file.FullPath === selectedFile.fullPath);\r\n totalFilesCount = nextFileIndex + 1;\r\n newFile = files[totalFilesCount];\r\n } else {\r\n ++totalFilesCount;\r\n newFile = files[totalFilesCount];\r\n }\r\n if (!newFile) {\r\n totalFilesCount = 0;\r\n alert(\"all designs complete\");\r\n return;\r\n }\r\n if (!newFile.designProps) {\r\n const designProps = await AppProvider.getDesignThumbnails({ designs: [newFile] });\r\n newFile = { ...newFile, ...designProps };\r\n\r\n dispatchDesignList({\r\n type: designListActions.SELECT_DESIGN,\r\n payload: { selectedFile: newFile, activeVariation: null }\r\n });\r\n } else {\r\n dispatchDesignList({\r\n type: designListActions.SELECT_DESIGN,\r\n payload: { selectedFile: newFile, activeVariation: null }\r\n });\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (selectedFile && createCombinationRunning) {\r\n window.createCombination({});\r\n }\r\n }, [selectedFile]);\r\n\r\n window.pauseCombinationCreation = () => {\r\n createCombinationRunning = false;\r\n };\r\n window.createCombination = async props => {\r\n const folder = props && props.folder ? props.folder : null;\r\n console.log(\"window.createCombination for -> folder\", folder);\r\n createCombinationRunning = false;\r\n const roomsList = illustrationListState.illustrations;\r\n console.log(\"window.createCombination= -> roomsList\", roomsList);\r\n const variationsList = [selectedFile, ...similarDesignsFolder.files];\r\n const variationsPropsList = await AppProvider.getDesignThumbnails({ designs: variationsList });\r\n console.log(\"selected file and variations List\", variationsPropsList);\r\n\r\n const renderFloorInRoom = floorOptions => {\r\n if (!floorOptions) return Promise.resolve();\r\n const floor = activeFloor.path ? activeFloor : floorOptions.activeFloor;\r\n return roomViewHelper.renderFloor(floor);\r\n };\r\n let index = 0;\r\n let thisloopid = makeid(5);\r\n const animationLoop = thisloopid;\r\n let loop = setInterval(async () => {\r\n if (animationLoop !== thisloopid) {\r\n clearInterval(loop);\r\n }\r\n console.log(\"tilesUpdating\", tilesUpdating);\r\n if (tilesUpdating) {\r\n return;\r\n }\r\n if (!variationsPropsList[index] || !variationsPropsList[index].designProps) return;\r\n\r\n tilesUpdating = true;\r\n if (roomViewHelper.patchImage) {\r\n roomViewHelper.selectedColorCode = null;\r\n const dominantColorHex = getDominantColor(variationsPropsList[index].designProps);\r\n roomViewHelper.updateBackground({ dominantColorHex });\r\n roomViewHelper.updateMask();\r\n }\r\n await roomViewHelper.renderDesign({\r\n designDetails: variationsPropsList[index].designProps,\r\n designPath: variationsPropsList[index].fullPath,\r\n hash: generateHash(\r\n variationsPropsList[index].designProps,\r\n variationsPropsList[index].fullPath\r\n ),\r\n designDimsOrig: {\r\n Width: variationsPropsList[index].designProps.Width,\r\n Height: variationsPropsList[index].designProps.Height\r\n }\r\n });\r\n if (activeFloor) await renderFloorInRoom(config.floorOptions);\r\n await roomViewHelper.updateShadow();\r\n const renderCanvas = await roomViewHelper.renderinCanvas({ width: 1920, height: 1080 });\r\n downloadImageData(renderCanvas, `${variationsPropsList[index].name}-${roomName}.jpg`, \"jpg\");\r\n tilesUpdating = false;\r\n if (index === variationsList.length - 1) {\r\n clearInterval(loop);\r\n const nextRoom = roomsList[++roomsIndex];\r\n createCombinationRunning = true;\r\n\r\n if (nextRoom) {\r\n illustrationListDispatch({\r\n type: visualizationsActions.SET_ACTIVE_NODE,\r\n payload: nextRoom\r\n });\r\n } else {\r\n roomsIndex = 0;\r\n window.changeDesign({ folder });\r\n }\r\n } else ++index;\r\n }, 2 * 1000);\r\n };\r\n useEffect(() => {\r\n if (!isRendering && createCombinationRunning) {\r\n window.createCombination({});\r\n }\r\n }, [isRendering]);\r\n\r\n useEffect(() => {\r\n if (isRendering) return;\r\n if (isStudioTemplate) {\r\n if (isRoomviewInFullScreen) return;\r\n if (isPaused) {\r\n roomViewHelper.container.style.animationPlayState = \"paused\";\r\n }\r\n const rightContainerWidth = document.getElementsByClassName(\"illustration-container\")[0]\r\n .clientWidth;\r\n const carpetCenter = roomViewHelper.threeView.getGizmoCordinates();\r\n const { width, height, xOffset, yOffset } = roomViewHelper.dimensionPixels;\r\n const pixelsToLeft = xOffset * 2 * (carpetCenter.canvasCenter.x / width);\r\n const pixelsToRight =\r\n parseFloat(roomViewHelper.container.clientWidth) - (parseFloat(pixelsToLeft) + width);\r\n const pixelsToTop = yOffset * 2 * (carpetCenter.canvasCenter.y / height);\r\n var newKeyframes = `\r\n 0% {\r\n left: 0px\r\n }\r\n 25% {\r\n left:${parseFloat(pixelsToLeft)}px;\r\n scale:1.2\r\n }\r\n 50% {\r\n left:-${parseFloat(width) - parseFloat(rightContainerWidth)}px;\r\n scale:1\r\n }\r\n 75% {\r\n left:${parseFloat(pixelsToLeft)}px;\r\n scale:1.2\r\n }\r\n 100% {\r\n left:0px;\r\n scale:1\r\n }\r\n `;\r\n roomViewHelper.container.style.position = \"absolute\";\r\n roomViewHelper.container.style.animation = \"run 36s infinite\";\r\n roomViewHelper.container.style.animationDirection = \"alternate\";\r\n const styleElement = document.createElement(\"style\");\r\n styleElement.textContent = `@keyframes run { ${newKeyframes} }`;\r\n styleElement.setAttribute(\"data-animation-name\", \"run\");\r\n document.head.appendChild(styleElement);\r\n roomViewHelper.container.style.setProperty(\"left\", `${parseFloat(pixelsToLeft)}px`);\r\n roomViewHelper.container.style.setProperty(\"top\", `${parseFloat(pixelsToTop)}px`);\r\n if (xOffset > -20) return;\r\n\r\n roomViewHelper.updateGizmo();\r\n }\r\n }, [roomViewHelper.dimensionPixels, isRendering, isRoomviewInFullScreen]);\r\n\r\n useEffect(() => {\r\n if (isRendering || designDetailState.loading) return;\r\n const renderFloorInRoom = floorOptions => {\r\n if (!floorOptions) return Promise.resolve();\r\n const floor = activeFloor.path ? activeFloor : floorOptions.activeFloor;\r\n return roomViewHelper.renderFloor(floor);\r\n };\r\n const load = async () => {\r\n if (customDesignUrl && customDesignUrl !== \"\") {\r\n roomViewHelper.makeTransitionCanvas();\r\n setLoading(true);\r\n try {\r\n await roomViewHelper.renderDesignFromCustomUrl({\r\n customUrl: customDesignUrl,\r\n customDesignOutline,\r\n physicalWidth: designWidth,\r\n physicalHeight: designHeight,\r\n unit: designUnit\r\n });\r\n if (activeFloor) await renderFloorInRoom(activeColor);\r\n await roomViewHelper.updateShadow();\r\n setIsRendering(false);\r\n setLoading(false);\r\n } catch (error) {\r\n console.log(\"load loading custom design -> error\", error);\r\n setIsRendering(false);\r\n setLoading(false);\r\n }\r\n if (window.flags.postToParentWhenLoaded) window.parent.postMessage(\"explorug loaded\", \"*\");\r\n } else if (designWidth && designHeight) {\r\n if (designUnit && designUnit !== designDetailState.designDetails.Unit) {\r\n designWidth = convertUnit(designUnit, designDetailState.designDetails.Unit, designWidth);\r\n designHeight = convertUnit(\r\n designUnit,\r\n designDetailState.designDetails.Unit,\r\n designHeight\r\n );\r\n }\r\n console.log(\"changePhysicalWidHgt -> \", designWidth, designHeight);\r\n\r\n changePhysicalWidHgt(parseFloat(designWidth), parseFloat(designHeight), designUnit);\r\n } else {\r\n if (window.flags.visualizations.changeCanvasSizeInCtf) {\r\n await roomViewHelper.renderDesign({\r\n designDetails,\r\n designPath: fullpath,\r\n hash,\r\n designDimsOrig\r\n });\r\n }\r\n }\r\n };\r\n load();\r\n }, [customDesignUrl, designWidth, designHeight, designDetails]);\r\n\r\n const renderFloorInRoom = floorOptions => {\r\n if (!floorOptions) return Promise.resolve();\r\n const floor = activeFloor.path ? activeFloor : floorOptions.activeFloor;\r\n return roomViewHelper.renderFloor(floor);\r\n };\r\n useEffect(() => {\r\n let la = true;\r\n resetScout();\r\n const setRoomTileDetails = async () => {\r\n try {\r\n const tileData = await AppProvider.fetchTileDetails({ file: fullpath });\r\n if (!la) return;\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_TILE_DETAILS,\r\n payload: tileData\r\n });\r\n roomViewHelper.setTileDetails(tileData);\r\n } catch (error) {}\r\n };\r\n const loadRoom = async () => {\r\n try {\r\n //if room has been changed\r\n const { floorOptions } = config;\r\n if (isStudioTemplate) {\r\n setIsPaused(false);\r\n roomViewHelper.container.style.animationPlayState = \"paused\";\r\n }\r\n if (prevRoomDetails !== roomData || isRendering) {\r\n setLoading(true);\r\n\r\n roomViewHelper.makeTransitionCanvas();\r\n setIsRendering(true);\r\n await Promise.all(roomViewHelper.initConfig({ baseUrl, config, files }));\r\n if (!la) return;\r\n const dominantColorHex = getDominantColor(designDetails);\r\n roomViewHelper.updateBackground({ dominantColorHex });\r\n roomViewHelper.updateShadow({ clear: true });\r\n roomViewHelper.updateMask();\r\n //if custom design url passed, render the design in room and return\r\n if (customDesignUrl) {\r\n await roomViewHelper.updatethreeCanvas();\r\n showLoadingAnimation(60);\r\n await roomViewHelper.renderDesignFromCustomUrl({\r\n customUrl: customDesignUrl,\r\n customDesignOutline,\r\n physicalWidth: designWidth,\r\n physicalHeight: designHeight,\r\n unit: designUnit\r\n });\r\n await renderFloorInRoom(floorOptions);\r\n await roomViewHelper.updateShadow();\r\n designRendered = true;\r\n setIsRendering(false);\r\n setLoading(false);\r\n setFirstLoadingOnRender(false);\r\n onRenderingComplete();\r\n if (window.flags.postToParentWhenLoaded)\r\n window.parent.postMessage(\"explorug loaded\", \"*\");\r\n return;\r\n }\r\n //if only room is changed\r\n if (prevDesignDetails === designDetails && !customDesignUrl) {\r\n const { designScale: designScalePrev } = prevRoomDetails.config[\r\n prevRoomDetails.config.scenes[0]\r\n ];\r\n const { designScale } = config[config.scenes[0]];\r\n let designScaleCheck = false;\r\n if (!designScale && !designScalePrev) {\r\n designScaleCheck = false;\r\n } else if (!designScale || !designScalePrev) {\r\n designScaleCheck = true;\r\n } else if (designScale != designScalePrev) {\r\n designScaleCheck = true;\r\n }\r\n await roomViewHelper.updatethreeCanvas();\r\n if (!la) return;\r\n if (\r\n (!designRendering && !designRendered) ||\r\n config.roomType === \"illustration\" ||\r\n prevRoomType !== config.roomType ||\r\n (!prevRoomType && !config.roomType) ||\r\n designScaleCheck\r\n ) {\r\n designRendering = true;\r\n if (!roomViewHelper.tileDetails) {\r\n await setRoomTileDetails();\r\n }\r\n await roomViewHelper.renderDesign({\r\n designDetails,\r\n designPath: fullpath,\r\n hash,\r\n designDimsOrig\r\n });\r\n designRendering = false;\r\n designRendered = true;\r\n onRenderingComplete();\r\n } else if (window.InterfaceElements.IsWallToWall) {\r\n await roomViewHelper.updateDesignWallToWall();\r\n }\r\n await renderFloorInRoom(floorOptions);\r\n if (!la) return;\r\n }\r\n }\r\n //if designdetails has been changed and room is same\r\n if (prevDesignDetails !== designDetails && !customDesignUrl) {\r\n roomViewHelper.makeTransitionCanvas();\r\n setIsRendering(true);\r\n carpetScale = [1, 1];\r\n setLoading(true);\r\n if (isBorderRugs) {\r\n if (\r\n designUnit &&\r\n designUnit !== designDetailState.designDetails.Unit &&\r\n borderDesignWid &&\r\n borderDesignHgt\r\n ) {\r\n borderDesignWid = convertUnit(\r\n designUnit,\r\n designDetailState.designDetails.Unit,\r\n borderDesignWid\r\n );\r\n borderDesignHgt = convertUnit(\r\n designUnit,\r\n designDetailState.designDetails.Unit,\r\n borderDesignHgt\r\n );\r\n }\r\n\r\n if (PhysicalSizeShouldChange(borderDesignWid, borderDesignHgt)) {\r\n changePhysicalWidHgt(borderDesignWid, borderDesignHgt, designUnit);\r\n return;\r\n }\r\n } else if (designWidth && designHeight) {\r\n if (designUnit && designUnit !== designDetailState.designDetails.Unit) {\r\n designWidth = convertUnit(\r\n designUnit,\r\n designDetailState.designDetails.Unit,\r\n designWidth\r\n );\r\n designHeight = convertUnit(\r\n designUnit,\r\n designDetailState.designDetails.Unit,\r\n designHeight\r\n );\r\n }\r\n\r\n if (PhysicalSizeShouldChange(designWidth, designHeight)) {\r\n console.log(\r\n \"change phy size \",\r\n designWidth,\r\n designHeight,\r\n designUnit,\r\n designDetailState.designDetails.Unit\r\n );\r\n changePhysicalWidHgt(designWidth, designHeight, designUnit);\r\n return;\r\n }\r\n }\r\n\r\n //update bg layers if room is smart/active\r\n if (roomViewHelper.patchImage) {\r\n roomViewHelper.selectedColorCode = null;\r\n const dominantColorHex = getDominantColor(designDetailState.designDetails);\r\n roomViewHelper.updateBackground({ dominantColorHex });\r\n roomViewHelper.updateMask();\r\n }\r\n designRendered = false;\r\n designRendering = false;\r\n if (\r\n roomViewHelper.designPath !== designDetailState.fullpath ||\r\n prevDesignDetails.PhysicalHeight !== designDetails.PhysicalHeight ||\r\n prevDesignDetails.PhysicalWidth !== designDetails.PhysicalWidth\r\n ) {\r\n await setRoomTileDetails();\r\n await roomViewHelper.updatethreeCanvas();\r\n if (!la) return;\r\n designRendering = true;\r\n await roomViewHelper.renderDesign({\r\n designDetails,\r\n designPath: fullpath,\r\n hash,\r\n designDimsOrig\r\n });\r\n await renderFloorInRoom(floorOptions);\r\n designRendered = true;\r\n designRendering = false;\r\n if (!la) return;\r\n } else {\r\n if (!window.flags.visualizations.changeCanvasSizeInCtf) {\r\n await roomViewHelper.updateTiles({\r\n designDetails,\r\n updateDesignTiles,\r\n updateNormapTiles,\r\n designDimsOrig,\r\n hash: hash\r\n });\r\n }\r\n }\r\n designRendered = true;\r\n }\r\n await roomViewHelper.updateShadow();\r\n // await roomViewHelper.makeTransitionCanvas({ clear: true });\r\n setIsRendering(false);\r\n if (isStudioTemplate) {\r\n roomViewHelper.container.style.animationPlayState = \"running\";\r\n }\r\n if (designRendered) {\r\n setLoading(false);\r\n if (window.flags.postToParentWhenLoaded) window.parent.postMessage(\"loadFinish\", \"*\");\r\n setFirstLoadingOnRender(false);\r\n }\r\n } catch (error) {\r\n console.error(error);\r\n return;\r\n }\r\n };\r\n loadRoom();\r\n return () => {\r\n la = false;\r\n };\r\n }, [roomData, designDetails]);\r\n useEffect(() => {\r\n if (!centerDesignUrl || centerDesignUrl === \"\") return;\r\n\r\n if (!designDetails || !prevDesignDetails.PhysicalWidth) return;\r\n //https://v3dev.explorug.com/build/explorug.html?page=borderrugs&initdesign=Designs/Border/Cotton Border.jpg&initview=Rooms/Bedroom.crf3d¢erDesignUrl=https://assets.explorug.com/6EA963515DE99CC94B3735E76C1E1F36/Designs/Center/Jute.thumb.jpg&borderDesignWid=8&borderDesignHgt=10&unit=ft\r\n const updateBorderRugTiles = async () => {\r\n await roomViewHelper.updateTiles({\r\n designDetails,\r\n updateDesignTiles,\r\n updateNormapTiles,\r\n designDimsOrig,\r\n hash: hash\r\n });\r\n await roomViewHelper.updateShadow();\r\n await roomViewHelper.makeTransitionCanvas({ clear: true });\r\n };\r\n updateBorderRugTiles();\r\n }, [centerDesignUrl, borderSize]);\r\n\r\n useEffect(() => {\r\n if (!isBorderRugs) return;\r\n if (\r\n !parseFloat(borderDesignWid) ||\r\n !parseFloat(borderDesignHgt) ||\r\n !prevDesignDetails.PhysicalWidth ||\r\n !prevDesignDetails.PhysicalHeight\r\n )\r\n return;\r\n\r\n if (!designDetails || !designDetails.PhysicalWidth) return;\r\n\r\n if (borderDesignHgt && borderDesignWid)\r\n changePhysicalWidHgt(parseFloat(borderDesignWid), parseFloat(borderDesignHgt), designUnit);\r\n }, [borderDesignWid, borderDesignHgt]);\r\n\r\n window.downloadRendered3dIll = async (returnCanvas = false) => {\r\n if (designDetailState.loading) return;\r\n const mime = \"jpg\";\r\n const name = customDesignUrl ? \"customDesign\" : `${designDetailState.designName}`;\r\n const downloadName = `${name} in ${roomName}.${mime}`;\r\n const { floorOptions } = config;\r\n const { width, height } = config.dims;\r\n const bgCanvas = createCanvas(width, height);\r\n const threeCanvas = createCanvas(width, height);\r\n const maskCanvas = createCanvas(width, height);\r\n const shadowCanvas = createCanvas(width, height);\r\n const container = { clientWidth: width, clientHeight: height };\r\n const inputCanvas = createCanvas(width, height);\r\n const transitionCanvas = createCanvas(width, height);\r\n const canvasConfig = {\r\n bgCanvas,\r\n threeCanvas,\r\n maskCanvas,\r\n shadowCanvas,\r\n container,\r\n inputCanvas,\r\n transitionCanvas\r\n };\r\n const rh = new RoomViewHelper();\r\n rh.initCanvas(canvasConfig);\r\n await Promise.all(rh.initConfig({ baseUrl, config, files, sizeFromConfig: true }));\r\n rh.updateBackground();\r\n if (roomViewHelper.currentActiveColors) {\r\n roomViewHelper.currentActiveColors.forEach(col => {\r\n const { dominantColorHex, annotationColor } = col;\r\n rh.selectedColorCode = annotationColor;\r\n rh.updateBackground({ dominantColorHex });\r\n });\r\n }\r\n\r\n rh.updateMask();\r\n await rh.updatethreeCanvas();\r\n if (customDesignUrl) {\r\n await rh.updatethreeCanvas();\r\n showLoadingAnimation(60);\r\n await rh.renderDesignFromCustomUrl({\r\n customUrl: customDesignUrl,\r\n customDesignOutline,\r\n physicalWidth: designWidth,\r\n physicalHeight: designHeight,\r\n unit: designUnit\r\n });\r\n await renderFloorInRoom(floorOptions);\r\n } else {\r\n rh.setTileDetails(designDetailState.tileDetails);\r\n await rh.renderDesign({\r\n designDetails,\r\n designPath: fullpath,\r\n hash,\r\n designDimsOrig\r\n });\r\n }\r\n const objectConfig = roomViewHelper.threeView.getObjectConfig();\r\n if (objectConfig) {\r\n rh.threeView.carpetMesh.position.copy(objectConfig.position);\r\n rh.threeView.carpetMesh.rotation.copy(objectConfig.rotation);\r\n rh.threeView.carpetMesh.scale.copy(objectConfig.scale);\r\n rh.threeView.render();\r\n }\r\n\r\n if (floorOptions) {\r\n const floor = activeFloor.path ? activeFloor : floorOptions.activeFloor;\r\n await rh.renderFloor(floor);\r\n }\r\n await rh.updateShadow();\r\n if (!returnCanvas) {\r\n rh.downloadRendering(downloadName, mime);\r\n return Promise.resolve();\r\n } else {\r\n const renderCanvas = rh.renderinCanvas();\r\n return Promise.resolve(renderCanvas);\r\n }\r\n };\r\n\r\n window.downloadPdfOrImageForRugStudio = async (\r\n roomName,\r\n description,\r\n qrurl,\r\n room,\r\n type,\r\n isWatermark,\r\n paypalName,\r\n paypalEmail,\r\n purchasedDate\r\n ) => {\r\n if (designDetailState.loading) return;\r\n const mime = \"jpg\";\r\n const name = customDesignUrl ? \"customDesign\" : `${designDetailState.designName}`;\r\n const downloadName = `${name} in ${roomName}.${mime}`;\r\n const { floorOptions } = config;\r\n const { width, height } = config.dims;\r\n const bgCanvas = createCanvas(width, height);\r\n const threeCanvas = createCanvas(width, height);\r\n const maskCanvas = createCanvas(width, height);\r\n const shadowCanvas = createCanvas(width, height);\r\n const container = { clientWidth: width, clientHeight: height };\r\n const inputCanvas = createCanvas(width, height);\r\n const transitionCanvas = createCanvas(width, height);\r\n const canvasConfig = {\r\n bgCanvas,\r\n threeCanvas,\r\n maskCanvas,\r\n shadowCanvas,\r\n container,\r\n inputCanvas,\r\n transitionCanvas\r\n };\r\n const rh = new RoomViewHelper();\r\n rh.initCanvas(canvasConfig);\r\n await Promise.all(rh.initConfig({ baseUrl, config, files, sizeFromConfig: true }));\r\n rh.updateBackground();\r\n if (roomViewHelper.currentActiveColors) {\r\n roomViewHelper.currentActiveColors.forEach(col => {\r\n const { dominantColorHex, annotationColor } = col;\r\n rh.selectedColorCode = annotationColor;\r\n rh.updateBackground({ dominantColorHex });\r\n });\r\n }\r\n\r\n rh.updateMask();\r\n await rh.updatethreeCanvas();\r\n if (customDesignUrl) {\r\n await rh.updatethreeCanvas();\r\n showLoadingAnimation(60);\r\n await rh.renderDesignFromCustomUrl({\r\n customUrl: customDesignUrl,\r\n customDesignOutline,\r\n physicalWidth: designWidth,\r\n physicalHeight: designHeight,\r\n unit: designUnit\r\n });\r\n await renderFloorInRoom(floorOptions);\r\n } else {\r\n rh.setTileDetails(designDetailState.tileDetails);\r\n await rh.renderDesign({\r\n designDetails,\r\n designPath: fullpath,\r\n hash,\r\n designDimsOrig\r\n });\r\n }\r\n const objectConfig = roomViewHelper.threeView.getObjectConfig();\r\n if (objectConfig) {\r\n rh.threeView.carpetMesh.position.copy(objectConfig.position);\r\n rh.threeView.carpetMesh.rotation.copy(objectConfig.rotation);\r\n rh.threeView.carpetMesh.scale.copy(objectConfig.scale);\r\n rh.threeView.render();\r\n }\r\n\r\n if (floorOptions) {\r\n const floor = activeFloor.path ? activeFloor : floorOptions.activeFloor;\r\n await rh.renderFloor(floor);\r\n }\r\n await rh.updateShadow();\r\n rh.downloadRenderingForRugStudio(\r\n downloadName,\r\n roomName,\r\n description,\r\n qrurl,\r\n room,\r\n type,\r\n isWatermark,\r\n paypalName,\r\n paypalEmail,\r\n purchasedDate\r\n );\r\n return Promise.resolve();\r\n };\r\n\r\n window.getRoomRenderingCanvas = async (inActualSize = false) => {\r\n return new Promise(async (resolve, reject) => {\r\n const downloadName = `${designDetailState.designName} in ${roomName}`;\r\n const renderCanvas = inActualSize\r\n ? await window.downloadRendered3dIll(true)\r\n : roomViewHelper.renderinCanvas();\r\n\r\n canvasToBlobPromise(renderCanvas)\r\n .then(roomCanvasBlob => {\r\n AppProvider.uploadRoomviewBlob({ blob: roomCanvasBlob, filename: downloadName }).then(\r\n response => {\r\n return resolve(response);\r\n }\r\n );\r\n })\r\n .catch(() => {\r\n console.log(\"error while getting room view canvas\");\r\n return reject(\"error\");\r\n });\r\n });\r\n };\r\n window.downloadCustomDesignRoomDirectly = async () => {\r\n //above getRoomRenderingCanvas passes to backend to save, this function doesn't\r\n return new Promise(async (resolve, reject) => {\r\n const downloadName = `customDesign in ${roomName}`;\r\n const renderCanvas = roomViewHelper.renderinCanvas();\r\n const link = document.createElement(\"a\");\r\n link.href = renderCanvas.toDataURL(\"image/jpeg\");\r\n link.download = downloadName;\r\n link.click();\r\n });\r\n };\r\n window.returnDataUrlForCurrentCanvas = async () => {\r\n //above getRoomRenderingCanvas passes to backend to save, this function doesn't\r\n return new Promise(async (resolve, reject) => {\r\n const renderCanvas = roomViewHelper.renderinCanvas();\r\n renderCanvas.toBlob(function(blob) {\r\n const canvasFile = new File([blob], \"canvas_image.jpg\", { type: \"image/jpeg\" });\r\n window.parent.postMessage({ imageFile: canvasFile }, \"*\");\r\n });\r\n });\r\n };\r\n window.downloadPdfOrImageForRugStudioCustomDesign = async (\r\n roomName,\r\n description,\r\n qrurl,\r\n room,\r\n type,\r\n isWatermark,\r\n paypalName,\r\n paypalEmail,\r\n purchasedDate\r\n ) => {\r\n roomViewHelper.downloadPdfOrImageForRugStudioCustomDesign(\r\n roomName,\r\n description,\r\n qrurl,\r\n room,\r\n type,\r\n isWatermark,\r\n paypalName,\r\n paypalEmail,\r\n purchasedDate\r\n );\r\n };\r\n const handleInputStart = e => {\r\n if (isStudioTemplate) return;\r\n if (isRendering) return;\r\n roomViewHelper.mouseDownTouchStart(e);\r\n setMouseDownPosition(e);\r\n };\r\n const handleinputMove = e => {\r\n if (isStudioTemplate) return;\r\n if (isRendering) return;\r\n\r\n roomViewHelper.mouseDownTouchMove(e);\r\n };\r\n const handleInputEnd = e => {\r\n if (isStudioTemplate) return;\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_CUSTOSCOUT_ID_TO_HIDE,\r\n payload: \"areaSwatchVisualization\"\r\n });\r\n if (isRendering) return;\r\n const opt = roomViewHelper.mouseDownTouchEnd(e);\r\n if (window.flags.homeTemplate == pageViews.STUDIOENTRY) return;\r\n const { showColorSelectionBox, rotation, position, texCoordinates, isActiveValue } = opt;\r\n if (isActiveValue == null) {\r\n setIsActiveRoomValue(0);\r\n } else {\r\n setIsActiveRoomValue(isActiveValue);\r\n }\r\n let option = carpetOptions;\r\n if (rotation) option = { ...option, rotation };\r\n if (position) option = { ...option, position };\r\n if (position || rotation)\r\n dispatchRoomView({\r\n type: roomViewActions.SET_CARPET_OPTION,\r\n payload: option\r\n });\r\n if (\r\n texCoordinates &&\r\n mouseDownPosition &&\r\n e.x === mouseDownPosition.x &&\r\n e.y === mouseDownPosition.y\r\n ) {\r\n if (window.flags.homeTemplate == pageViews.MYRUGSTUDIO) return;\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_CUSTOSCOUT_COORDS,\r\n payload: {\r\n containerPoint: e,\r\n designPoint: texCoordinates,\r\n clickedDivElement: inputCanvasRef.current.className\r\n }\r\n });\r\n } else if (mouseDownPosition) toggleScout(false);\r\n\r\n setMouseDownPosition(null);\r\n if (!showColorSelectionBox) return;\r\n else handleActiveClick && handleActiveClick();\r\n };\r\n useEffect(() => {\r\n if (window.flags.homeTemplate == pageViews.STUDIOENTRY) return;\r\n if (\r\n window.flags.homeTemplate == pageViews.CREATEYOURRUG &&\r\n designDetailState.custoScout.clickedDivElement == \"tile-container\"\r\n )\r\n return;\r\n const { designPoint } = designDetailState.custoScout;\r\n if (!designPoint) return;\r\n if (!designDetailState.designDetails || !designDetailState.designDetails.DesignColors.length)\r\n return;\r\n if (isActiveRoomValue != 0) return;\r\n toggleScout(false);\r\n AppProvider.getColorAt({\r\n file: designDetailState.fullpath,\r\n x:\r\n designPoint.x -\r\n (designDetailState.designDetails.Width - designDetailState.designDimsOrig.Width) / 2,\r\n y:\r\n designPoint.y -\r\n (designDetailState.designDetails.Height - designDetailState.designDimsOrig.Height) / 2,\r\n Width: designDetailState.designDimsOrig.Width,\r\n Height: designDetailState.designDimsOrig.Height\r\n }).then(color => {\r\n if (color === 255) return;\r\n dispatchDesignDetails({ type: designDetailActions.SELECT_DESIGN_COLOR, payload: color });\r\n toggleScout(true);\r\n });\r\n }, [designDetailState.custoScout.designPoint]);\r\n\r\n const toggleScout = value => {\r\n dispatchDesignDetails({ type: designDetailActions.TOOGLE_CUSTOSCOUT, payload: value });\r\n };\r\n const resetScout = () => {\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_CUSTOSCOUT_COORDS,\r\n payload: { show: false, designPoint: null, containerPoint: null }\r\n });\r\n };\r\n\r\n const PhysicalSizeShouldChange = (designWidth, designHeight) => {\r\n if (\r\n parseFloat(designWidth) &&\r\n parseFloat(designHeight) &&\r\n (parseFloat(designWidth) !== designDetails.PhysicalWidth ||\r\n parseFloat(designHeight) !== designDetails.PhysicalHeight)\r\n )\r\n return true;\r\n else return false;\r\n };\r\n const changePhysicalWidHgt = (designWidth, designHeight, designUnit) => {\r\n if (!designWidth || !designHeight) return;\r\n\r\n if (\r\n parseFloat(designWidth) &&\r\n parseFloat(designHeight) &&\r\n (parseFloat(designWidth) !== designDetailState.designDetails.PhysicalWidth ||\r\n parseFloat(designHeight) !== designDetailState.designDetails.PhysicalHeight)\r\n ) {\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_RUG_PHYSICAL_SIZE,\r\n payload: {\r\n PhysicalWidth: parseFloat(designWidth),\r\n PhysicalHeight: parseFloat(designHeight),\r\n Unit: designUnit ? designUnit : designDetailState.designDetails.Unit\r\n }\r\n });\r\n }\r\n };\r\n\r\n const setLoading = loading =>\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_LOADING,\r\n payload: loading\r\n });\r\n\r\n const showLoadingAnimation = (setPercent, timer = 2000) => {\r\n let percentValue = setPercent;\r\n\r\n if (uiState.showLoadingOverlay)\r\n dispatchUiState({ type: mainUiActions.SET_LOADING_OVERLAY_PERCENT, payload: percentValue });\r\n setTimeout(() => {\r\n percentValue = setPercent >= 90 ? setPercent : setPercent + 30;\r\n if (uiState.showLoadingOverlay)\r\n dispatchUiState({ type: mainUiActions.SET_LOADING_OVERLAY_PERCENT, payload: percentValue });\r\n }, timer);\r\n };\r\n\r\n const handlePause = () => {\r\n if (isPaused) {\r\n roomViewHelper.container.style.animationPlayState = \"running\";\r\n } else {\r\n roomViewHelper.container.style.animationPlayState = \"paused\";\r\n }\r\n setIsPaused(!isPaused);\r\n };\r\n\r\n window.changeCarpetSize = (width = 3, height = 3) => {\r\n const currentScale = roomViewHelper.threeView.carpetMesh.scale;\r\n roomViewHelper.threeView.carpetMesh.scale.set(width, height, currentScale.z);\r\n roomViewHelper.threeView.render();\r\n roomViewHelper.updateShadow();\r\n };\r\n\r\n window.scaleCarpet = (scaleUp = 1) => {\r\n const scaleStep = 0.2;\r\n const currentScale = roomViewHelper.threeView.carpetMesh.scale;\r\n const origScale = [currentScale.x / carpetScale[0], currentScale.y / carpetScale[1]];\r\n if (\r\n scaleUp == -1 &&\r\n (parseFloat(carpetScale[0]).toFixed(1) == scaleStep ||\r\n parseFloat(carpetScale[1]).toFixed(1) == scaleStep)\r\n )\r\n return;\r\n if (carpetScale[0] + scaleUp * scaleStep >= 4) return;\r\n carpetScale[0] += scaleUp * scaleStep;\r\n carpetScale[1] += scaleUp * scaleStep;\r\n if (scaleUp === 0) {\r\n carpetScale = [1, 1];\r\n }\r\n roomViewHelper.threeView.carpetMesh.scale.set(\r\n origScale[0] * carpetScale[0],\r\n origScale[1] * carpetScale[1],\r\n currentScale.z\r\n );\r\n setScaledUpWidth(parseFloat(origScale[0] * carpetScale[0]).toFixed(2));\r\n setScaledUpHeight(parseFloat(origScale[1] * carpetScale[1]).toFixed(2));\r\n roomViewHelper.threeView.render();\r\n roomViewHelper.updateShadow();\r\n };\r\n\r\n var eventClickPending = 0;\r\n const handleDoubleClick = () => {\r\n const tempRoomName = illustrationListState.activeNode.Name.split(\" \");\r\n tempRoomName.pop();\r\n const roomName = tempRoomName.join(\" \");\r\n const roomView = illustrationListState.activeNode.label;\r\n var fileName = \"\";\r\n var fileVarName = \"&variation=\";\r\n if (selectedFile.fullPath.includes(\"/\")) {\r\n const designName = selectedFile.fullPath.split(\"/\").pop();\r\n if (selectedFile.variations == null && selectedFile.location.includes(\"/\")) {\r\n fileVarName = fileVarName + designName.split(\".\")[0];\r\n fileName = selectedFile.location.split(\"/.\")[1];\r\n } else {\r\n fileName = designName.split(\".\")[0];\r\n fileVarName = \"\";\r\n }\r\n }\r\n window.open(\r\n `https://myrug.studio/studio?room=${roomName}&type=2D&rug=${fileName}&view=${roomView}${fileVarName}`,\r\n \"_blank\"\r\n );\r\n };\r\n const handleClick = event => {\r\n if (!isStudioTemplate) return;\r\n var EVENT_DOUBLE_CLICK_DELAY = 220; // Adjust max delay btw two clicks (ms)\r\n if (event.detail === 1 && eventClickPending == 0) {\r\n if (isRoomviewInFullScreen) return;\r\n eventClickPending = setTimeout(function() {\r\n eventClickPending = 0;\r\n if (\r\n roomViewHelper.container.style.animationPlayState == \"paused\" ||\r\n roomViewHelper.container.style.animationPlayState == \"\"\r\n ) {\r\n roomViewHelper.container.style.animationPlayState = \"running\";\r\n setIsPaused(false);\r\n } else {\r\n roomViewHelper.container.style.animationPlayState = \"paused\";\r\n setIsPaused(true);\r\n }\r\n }, EVENT_DOUBLE_CLICK_DELAY);\r\n } else if (event.detail == 2 && eventClickPending != 0) {\r\n clearTimeout(eventClickPending);\r\n eventClickPending = 0;\r\n handleDoubleClick();\r\n }\r\n };\r\n\r\n const handleFullScreen = () => {\r\n let fcDelay = 1000;\r\n if (!isRoomviewInFullScreen) {\r\n fcDelay = 0;\r\n }\r\n if (isRoomviewInFullScreen) {\r\n fcDelay = 0;\r\n }\r\n if (document.body.requestFullscreen) {\r\n setTimeout(() => {\r\n if (!isRoomviewInFullScreen) {\r\n if (window.orientation !== 0) {\r\n setIsPaused(true);\r\n handlePause();\r\n }\r\n roomViewHelper.container.style.animation = \"none\";\r\n roomViewHelper.container.style.left = \"0px\";\r\n setIsPaused(true);\r\n toggleIsRoomviewInFullScreen(true);\r\n setIsFullScreen(true);\r\n } else {\r\n roomViewHelper.container.style.animationPlayState = \"running\";\r\n setIsPaused(false);\r\n toggleIsRoomviewInFullScreen(false);\r\n setIsFullScreen(false);\r\n }\r\n }, fcDelay);\r\n } else {\r\n toggleIsRoomviewInFullScreen();\r\n }\r\n };\r\n\r\n return !isStudioTemplate ? (\r\n \r\n \r\n {getPileheightText(designColor.PileHeight)}\r\n \r\n
\r\n \r\n \r\n {videoRef?.current &&\r\n (videoRef.current.webkitAudioDecodedByteCount || videoRef.current.mozHasAudio) && (\r\n {\r\n if (videoRef) videoRef.current.muted = !videoRef.current.muted;\r\n }}\r\n text={\"Seashore sound by MRQZ\"}\r\n >\r\n )}\r\n {designDetailState.custoScout.show &&\r\n designDetailState.custoScout.containerPoint &&\r\n designDetailState.custoScout.custoScoutIdforCyr !== \"areaSwatchRoomView\" && (\r\n \r\n e.stopPropagation()}\r\n onColorPieClick={(color, e) => {\r\n dispatchColorList({ type: colorListActions.SELECT_COLOR, payload: color });\r\n }}\r\n />\r\n \r\n dispatchDesignDetails({\r\n type: designDetailActions.TOOGLE_CUSTOSCOUT,\r\n payload: false\r\n })\r\n }\r\n />\r\n
\r\n )}\r\n \r\n \r\n handleClick(event)}\r\n >\r\n \r\n
\r\n \r\n {/* done for studioEntry */}\r\n {!isRendering && isStudioTemplate && (\r\n \r\n {videoRef?.current &&\r\n (videoRef.current.webkitAudioDecodedByteCount || videoRef.current.mozHasAudio) && (\r\n {\r\n if (videoRef) videoRef.current.muted = !videoRef.current.muted;\r\n }}\r\n text={\"Seashore sound by MRQZ\"}\r\n >\r\n )}\r\n {designDetailState.custoScout.show &&\r\n designDetailState.custoScout.containerPoint &&\r\n designDetailState.custoScout.custoScoutIdforCyr !== \"areaSwatchRoomView\" && (\r\n \r\n e.stopPropagation()}\r\n onColorPieClick={(color, e) => {\r\n dispatchColorList({ type: colorListActions.SELECT_COLOR, payload: color });\r\n }}\r\n />\r\n \r\n dispatchDesignDetails({\r\n type: designDetailActions.TOOGLE_CUSTOSCOUT,\r\n payload: false\r\n })\r\n }\r\n />\r\n
\r\n )}\r\n \r\n {!isRoomviewInFullScreen && (\r\n \r\n )}\r\n \r\n \r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default RoomViewNew;\r\n","import classNames from \"classnames\";\r\nimport React, { useEffect, useState } from \"react\";\r\n\r\nconst AtRuler = props => {\r\n const {\r\n startingValues = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\r\n segments = 10,\r\n distancePixels,\r\n width = 650,\r\n height = 100,\r\n unit = \"cm\",\r\n font = \"0.875rem Arial\",\r\n color = \"#fff\",\r\n changeRulerUnit\r\n } = props;\r\n const [currentState, setCurrentState] = useState(unit);\r\n const [toggleSequence, setToggleSequence] = useState([\"cm\", \"ft\", \"\"]);\r\n\r\n useEffect(() => {\r\n if (unit === \"cm\") {\r\n setToggleSequence([\"cm\", \"ft\", \"\"]);\r\n } else {\r\n setToggleSequence([\"ft\", \"cm\", \"\"]);\r\n }\r\n }, []);\r\n const drawScale = (x, y) => {\r\n const canvas = document.getElementById(\"myRulerCanvas\");\r\n\r\n if (canvas) {\r\n let ctx = canvas.getContext(\"2d\");\r\n\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n ctx.fillStyle = color;\r\n ctx.beginPath();\r\n ctx.font = font;\r\n\r\n let linesInASegment = 10;\r\n let totalLinesNum = linesInASegment * segments;\r\n for (let i = 0; i <= totalLinesNum; i++) {\r\n const pos = i;\r\n ctx.moveTo(x, y);\r\n const longerLines = linesInASegment;\r\n if (pos % longerLines === 0) {\r\n ctx.lineTo(x, height * 0.5 + y);\r\n if (Math.abs(canvas.width - x) > 40) {\r\n const xPos = i === 0 ? x : x - 3;\r\n ctx.fillText(`${startingValues[pos / linesInASegment]}`, xPos, height);\r\n }\r\n } else if (pos % (longerLines / 2) === 0) ctx.lineTo(x, height * 0.4 + y);\r\n else if (pos % (longerLines / 10) === 0) ctx.lineTo(x, height * 0.2 + y);\r\n if (pos === totalLinesNum) {\r\n ctx.lineTo(x, 0);\r\n }\r\n const gap = distancePixels ? distancePixels / linesInASegment : 20;\r\n const getGap = window.flags.visualizations.maximizeGapInRulerForHighRes;\r\n x += gap * getGap;\r\n }\r\n const unitText = unit === \"ft\" ? \"inch\" : unit;\r\n ctx.fillText(`${unitText}`, canvas.width - 25, height);\r\n\r\n ctx.lineTo(0, 0);\r\n ctx.strokeStyle = color;\r\n ctx.stroke();\r\n\r\n if (unit === \"\") {\r\n const canvas = document.getElementById(\"myRulerCanvas\");\r\n let ctx = canvas.getContext(\"2d\");\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n }\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n drawScale(0, 0);\r\n }, [distancePixels, startingValues, width]);\r\n\r\n const handleRulerClick = () => {\r\n let index = toggleSequence.indexOf(currentState);\r\n index = index === -1 || index === toggleSequence.length - 1 ? 0 : index + 1;\r\n const newState = toggleSequence[index];\r\n setCurrentState(newState);\r\n if (newState !== \"\") {\r\n changeRulerUnit(newState);\r\n } else {\r\n const canvas = document.getElementById(\"myRulerCanvas\");\r\n let ctx = canvas.getContext(\"2d\");\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n changeRulerUnit(\"\");\r\n }\r\n };\r\n\r\n return (\r\n \r\n {\r\n if (changeRulerUnit) handleRulerClick();\r\n }}\r\n >\r\n
\r\n );\r\n};\r\n\r\nAtRuler.propTypes = {};\r\n\r\nexport default AtRuler;\r\n","/* eslint-disable react-hooks/exhaustive-deps */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport { Slider } from \"@blueprintjs/core\";\r\nimport classNames from \"classnames\";\r\nimport strings from \"../../../strings\";\r\nimport AtRuler from \"../../atoms/AtRuler/index\";\r\nimport { useDesignDetailState } from \"../../../reducers/designdetails.reducer\";\r\nimport { calculateKLratio, convertUnit } from \"../../../utils/utils\";\r\n\r\nconst AtSlider = props => {\r\n const {\r\n onValueChange,\r\n value,\r\n max = 100,\r\n min = 0,\r\n isIdle,\r\n zoomFactor,\r\n canvasInnerHeight,\r\n ...otherProps\r\n } = props;\r\n\r\n const designDetailState = useDesignDetailState();\r\n const { designDetails } = designDetailState;\r\n const [oneUnit, setOneUnit] = useState(null);\r\n const [startingValues, setStartingValues] = useState([1, 2, 3, 4, 5]);\r\n const [segments, setSegments] = useState(5);\r\n const [rulerUnit, setRulerUnit] = useState(null);\r\n useEffect(() => {\r\n document.getElementsByClassName(\"bp3-slider-handle\")[0].style.left = `${((value - min) /\r\n (max - min)) *\r\n 100}%`;\r\n }, [value]);\r\n const getSliderFullWidth = () => {\r\n const elemStyle = window.getComputedStyle(\r\n document.getElementsByClassName(\"sliderContainer\")[0]\r\n );\r\n let sliderWidth = parseFloat(elemStyle.width);\r\n const padding = elemStyle.padding.split(\"px\");\r\n const horizontalPadding = parseFloat(padding[1]) + parseFloat(padding[3]);\r\n sliderWidth = sliderWidth - horizontalPadding;\r\n return sliderWidth;\r\n };\r\n useEffect(() => {\r\n if (designDetails && window.flags.visualizations.showRuler) {\r\n let defaultUnit = designDetails.Unit;\r\n let rulerDefaultUnit = window.flags.visualizations.rulerDefaultUnit;\r\n if (\r\n (rulerDefaultUnit === \"cm\" || rulerDefaultUnit === \"ft\") &&\r\n defaultUnit !== rulerDefaultUnit\r\n ) {\r\n defaultUnit = rulerDefaultUnit;\r\n }\r\n const KLRatio = calculateKLratio({\r\n Height: designDetails.Height,\r\n PhysicalHeight: designDetails.PhysicalHeight,\r\n Width: designDetails.Width,\r\n PhysicalWidth: designDetails.PhysicalWidth\r\n });\r\n setRulerValues({\r\n width: designDetails.Width,\r\n PhysicalWidth: designDetails.PhysicalWidth,\r\n unit: rulerUnit || rulerUnit === \"\" ? rulerUnit : defaultUnit,\r\n zoomFactor,\r\n KLRatio: KLRatio,\r\n hideRuler: rulerDefaultUnit === \"\" && !rulerUnit\r\n });\r\n }\r\n }, [designDetails, zoomFactor, canvasInnerHeight]);\r\n\r\n const setRulerValues = ({\r\n width,\r\n PhysicalWidth,\r\n unit,\r\n zoomFactor = 1,\r\n hideRuler = false,\r\n\r\n KLRatio = 1\r\n }) => {\r\n if (unit === \"\") {\r\n setRulerUnit(\"\");\r\n return;\r\n }\r\n if (window.InterfaceElements.IsJpeg) {\r\n if (canvasInnerHeight) {\r\n zoomFactor = canvasInnerHeight / designDetails.Height;\r\n }\r\n } else {\r\n zoomFactor = zoomFactor ? zoomFactor : 1;\r\n }\r\n if (width) {\r\n const sliderWidth = getSliderFullWidth(); // parseFloat( window.getComputedStyle(document.getElementsByClassName('sliderContainer')[0]).width);\r\n let canvasWid = width * zoomFactor;\r\n canvasWid = window.InterfaceElements.IsWallToWall ? canvasWid / KLRatio : canvasWid;\r\n if (unit !== designDetails.Unit) {\r\n PhysicalWidth = convertUnit(designDetails.Unit, unit, PhysicalWidth);\r\n }\r\n let widPerUnit = canvasWid / PhysicalWidth;\r\n\r\n if (unit === \"ft\") {\r\n widPerUnit = widPerUnit / 12;\r\n }\r\n\r\n const markingsLimit = Math.floor(sliderWidth / widPerUnit) || 1;\r\n const multiplierValues = [\r\n { limit: 400, multiplier: 200 },\r\n { limit: 120, multiplier: 60 },\r\n { limit: 40, multiplier: 20 },\r\n { limit: 30, multiplier: 10 },\r\n { limit: 20, multiplier: 5 },\r\n { limit: 15, multiplier: 2 },\r\n { limit: 0, multiplier: 1 }\r\n ];\r\n const limit = multiplierValues.filter(elem => elem.limit < markingsLimit);\r\n let multiplier = limit[0].multiplier; //markingsLimit<12? 1:2;\r\n let markingsValues = [];\r\n for (var i = 0; i <= markingsLimit / multiplier; i++) {\r\n markingsValues.push(i * multiplier);\r\n }\r\n setRulerUnit(hideRuler ? \"\" : unit);\r\n setStartingValues(markingsValues);\r\n setSegments(markingsValues.length * multiplier);\r\n setOneUnit(widPerUnit * multiplier);\r\n }\r\n };\r\n\r\n const changeRulerUnit = unit => {\r\n if (designDetails) {\r\n const KLRatio = calculateKLratio({\r\n Height: designDetails.Height,\r\n PhysicalHeight: designDetails.PhysicalHeight,\r\n Width: designDetails.Width,\r\n PhysicalWidth: designDetails.PhysicalWidth\r\n });\r\n setRulerValues({\r\n width: designDetails.Width,\r\n PhysicalWidth: designDetails.PhysicalWidth,\r\n unit: unit,\r\n zoomFactor,\r\n KLRatio: KLRatio\r\n });\r\n }\r\n };\r\n return (\r\n \r\n {strings.visualization.visualization}\r\n \r\n {strings.visualization.photorealistic}\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport { AtSlider };\r\n","import { convertTilePointToName } from \"../../../utils/utils\";\r\n\r\nlet clickCounter = 0;\r\nexport function makeDoubleClick(doubleClickCallback, singleClickCallback) {\r\n clickCounter++;\r\n return function () {\r\n setTimeout(() => {\r\n if (clickCounter === 1) {\r\n singleClickCallback && singleClickCallback.apply(this, arguments);\r\n } else {\r\n doubleClickCallback && doubleClickCallback.apply(this, arguments);\r\n }\r\n clickCounter = 0;\r\n }, 300);\r\n };\r\n}\r\n\r\nexport const calculateZoomLevelFromZoom = (zoom, clampZoom) => {\r\n //zoom value 0.75 to 3\r\n //returns 1 2 or 4\r\n let zoomlevel;\r\n if (clampZoom) zoom = Math.ceil(zoom);\r\n if (zoom <= 1.25) {\r\n zoomlevel = 1\r\n } else if (zoom <= 2.25)\r\n zoomlevel = 2\r\n else\r\n zoomlevel = 4\r\n return zoomlevel\r\n\r\n}\r\nexport const getTileCenter = ({ Width, Height, KLRatio, heightRatio, tileSize, dpi }) => {\r\n const ratio = Width / Height;\r\n const canvasWidth = Width;\r\n const canvasHeight = canvasWidth / ratio;\r\n return {\r\n x: ((canvasWidth / 4) * heightRatio) / KLRatio / dpi,\r\n y: (canvasHeight * heightRatio) / 4 / dpi\r\n }\r\n}\r\nexport const getTilepoints = ({ Width, Height, KLRatio, heightRatio, tileSize, dpi }) => {\r\n let tilecenter;\r\n const getPoints = zoom => {\r\n const ratio = Width / Height;\r\n const canvasWidth = Width * zoom;\r\n const canvasHeight = canvasWidth / ratio;\r\n let xTotal = Math.floor((canvasWidth - 1) / tileSize) + 1;\r\n let yTotal = Math.floor((canvasHeight - 1) / tileSize) + 1;\r\n let tilePoints = [];\r\n if (zoom === 1) {\r\n tilecenter = {\r\n x: ((canvasWidth / 4) * heightRatio) / dpi,\r\n y: (canvasHeight * heightRatio * KLRatio) / 4 / dpi\r\n };\r\n }\r\n for (let x = 0; x < xTotal; x++) {\r\n for (let y = 0; y < yTotal; y++) {\r\n const width = x !== xTotal - 1 ? tileSize : canvasWidth - x * tileSize - 2\r\n const height = y !== yTotal - 1 ? tileSize : canvasHeight - y * tileSize - 2\r\n // console.log(height)\r\n tilePoints.push({ x, y, z: zoom, name: convertTilePointToName(x, y), size: { width, height }, });\r\n }\r\n }\r\n return tilePoints;\r\n };\r\n const tilepoint1 = getPoints(1);\r\n const tilepoint2 = getPoints(2);\r\n const tilepoint4 = getPoints(4);\r\n return { tilePoints: [...tilepoint1, ...tilepoint2, ...tilepoint4], tilecenter };\r\n};\r\n\r\nexport function debounce(func, wait, immediate) {\r\n var timeout;\r\n return function () {\r\n var context = this,\r\n args = arguments;\r\n var later = function () {\r\n timeout = null;\r\n if (!immediate) func.apply(context, args);\r\n };\r\n var callNow = immediate && !timeout;\r\n clearTimeout(timeout);\r\n timeout = setTimeout(later, wait);\r\n if (callNow) func.apply(context, args);\r\n };\r\n}\r\nexport const getWatermarkBounds = ({ tilecenter, offset, height, padding, width }) => {\r\n let x1 = -tilecenter.y * 2 * offset[0] - padding;\r\n let x2 = -tilecenter.y * 2 * offset[0] - padding;\r\n let y1 = tilecenter.x * 2 * offset[1] + padding;\r\n let y2 = tilecenter.x * 2 * offset[1] + padding;\r\n if (offset[0] === 0) {\r\n x2 = x2 - height;\r\n }\r\n if (offset[0] === 0.5) {\r\n x1 = x1 - height / 2 + padding;\r\n x2 = x2 + height / 2 + padding;\r\n }\r\n if (offset[0] === 1) {\r\n x1 = x1 + height + padding * 2;\r\n x2 = x2 + padding * 2;\r\n }\r\n if (offset[1] === 0) {\r\n y2 = y2 + width;\r\n }\r\n if (offset[1] === 0.5) {\r\n y1 = y1 - width / 2 - padding;\r\n y2 = y2 + width / 2 - padding;\r\n }\r\n if (offset[1] === 1) {\r\n y1 = y1 - width - padding * 2;\r\n y2 = y2 - padding * 2;\r\n }\r\n return [\r\n [x1, y1],\r\n [x2, y2]\r\n ]\r\n}","import AppProvider from \"../api/appProvider\";\r\nimport { findWhere } from \"../utils/arrayUtils\";\r\nimport { isMobileDevice } from \"../utils/utils\";\r\n\r\nexport const resolveZoomValue = () => {\r\n let zoom = window.flags.designView.defaultZoom;\r\n if (AppProvider.isStripedDesignMode || (isMobileDevice && window.flags.designView.zoomForMobile))\r\n zoom = 0.75;\r\n else if (window.InterfaceElements.IsJpeg) {\r\n zoom = window.flags.designView.defaultZoom <= window.flags.designView.maxZoomJpeg ? window.flags.designView.defaultZoom : 0.75;\r\n }\r\n return zoom;\r\n};\r\n\r\nconst isSmallerThan = (value, maxvalue) => {\r\n var x = value <= maxvalue ? value : maxvalue;\r\n return x;\r\n};\r\nconst isGreaterThan = (value, minvalue) => {\r\n var x = value >= minvalue ? value : minvalue;\r\n return x;\r\n};\r\nconst minZoomForJpeg = (minZoomByFlag, defaultZoom)=>{\r\n const zoom = isGreaterThan(minZoomByFlag, 0) && isSmallerThan(minZoomByFlag, defaultZoom) ? minZoomByFlag : 0;\r\n return zoom;\r\n}\r\n\r\nexport const getZoomParameters = () => {\r\n const isJpeg = window.InterfaceElements.IsJpeg;\r\n const w2w = window.InterfaceElements.IsWallToWall;\r\n const minZoom = window.flags.designView.minZoom;\r\n const maxZoom = window.flags.designView.maxZoom;\r\n const defaultZoom = window.flags.designView.defaultZoom;\r\n const minZoomJpeg = window.flags.designView.minZoomJpeg;\r\n const maxZoomJpeg = window.flags.designView.maxZoomJpeg;\r\n\r\n let zoomValues = {\r\n minZoom: isJpeg && w2w ? 0.5 : isJpeg ? minZoomForJpeg(minZoomJpeg, defaultZoom) : minZoom,\r\n maxZoom: window.InterfaceElements.IsJpeg ? maxZoomJpeg : maxZoom,\r\n step: window.InterfaceElements.IsJpeg ? 0.1 : 0.25\r\n };\r\n window.flags.designView.minZoom = zoomValues.minZoom;\r\n window.flags.designView.maxZoom = zoomValues.maxZoom;\r\n\r\n return zoomValues;\r\n};\r\n\r\nexport const getnewIconIfReplaceable = value => {\r\n const replaceableIconList = window.flags.interface?.iconsReplace;\r\n let newIcon = value;\r\n if (replaceableIconList && replaceableIconList.length) {\r\n const icon = findWhere(replaceableIconList, \"orig\", value);\r\n if (icon) {\r\n newIcon = icon.new;\r\n }\r\n }\r\n return newIcon;\r\n};","/* eslint-disable react-hooks/exhaustive-deps */\r\nimport React, { useRef, useEffect, useState } from \"react\";\r\nimport { AtSlider } from \"../../molecules/Slider\";\r\nimport { useMount } from \"react-use\";\r\nimport {\r\n useDesignDetailState,\r\n useDispatchDesignDetail,\r\n designDetailActions\r\n} from \"../../../reducers/designdetails.reducer\";\r\nimport AppProvider from \"../../../api/appProvider\";\r\n\r\nimport {\r\n calculateZoomLevelFromZoom,\r\n getWatermarkBounds,\r\n makeDoubleClick\r\n} from \"./visualizationutils\";\r\nimport { AreaSwatch } from \"../../molecules/AreaSwatch\";\r\nimport AtIcon from \"../../atoms/AtIcon\";\r\nimport { usePrevious } from \"../../../hooks\";\r\n\r\nimport { downloadImageData } from \"../../../utils/canvasutils\";\r\nimport { useDebouncedCallback } from \"use-debounce/lib\";\r\nimport {\r\n useUiState,\r\n useUiDispatch,\r\n mainUiActions,\r\n pageViews\r\n} from \"../../../reducers/mainui.reducer\";\r\nimport { getTilepoints } from \"./visualizationutils\";\r\nimport { convertNameToTilePoint, toastErrors } from \"../../../utils/utils\";\r\n\r\nimport { getFromSessionStorage, readImage } from \"../../../utils/domUtils\";\r\nimport { useDispatchColorList, colorListActions } from \"../../../reducers/colors.reducer\";\r\nimport { AtSpinner } from \"../../atoms/AtSpinner\";\r\nimport classNames from \"classnames\";\r\nimport { Portal, ButtonGroup } from \"@blueprintjs/core\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\nimport { useVisualizationState, visViewModes } from \"../../../reducers/visualizations.reducer\";\r\nimport { resolveZoomValue } from \"../../../middleware/visualization.middleware\";\r\n\r\nconst leaflet = window.L;\r\nlet map;\r\nlet tilePoints;\r\n\r\nconst options = {\r\n tileSize: 256\r\n};\r\nlet layer;\r\nlet needsPanning = true;\r\nfunction debounce(func, wait, immediate) {\r\n var timeout;\r\n return function() {\r\n var context = this,\r\n args = arguments;\r\n var later = function() {\r\n timeout = null;\r\n if (!immediate) func.apply(context, args);\r\n };\r\n var callNow = immediate && !timeout;\r\n clearTimeout(timeout);\r\n timeout = setTimeout(later, wait);\r\n if (callNow) func.apply(context, args);\r\n };\r\n}\r\n\r\nexport function initMap({ onDesignClick, onDesignloaded, onDrag, zoomStep = 0.25 }) {\r\n map = leaflet.map(\"map\", {\r\n crs: leaflet.CRS.Simple,\r\n doubleClickZoom: false,\r\n keyboard: false,\r\n scrollWheelZoom: false,\r\n touchZoom: true,\r\n fadeAnimation: false,\r\n bounceAtZoomLimits: false,\r\n zoomControl: false,\r\n attributionControl: false,\r\n wheelDebounceTime: 500,\r\n zoomSnap: zoomStep,\r\n zoomDelta: zoomStep,\r\n dragging:\r\n window.flags?.homeTemplate === pageViews.CREATEYOURRUG ? !leaflet.Browser.mobile : true,\r\n tap: window.flags?.homeTemplate === pageViews.CREATEYOURRUG ? !leaflet.Browser.mobile : true,\r\n maxBoundsViscosity: 0.5\r\n });\r\n map.on(\"drag\", onDrag);\r\n const handleClick = e => {\r\n const zoom = map.getZoom();\r\n let designPoint = e.layerPoint.add(map.getPixelOrigin());\r\n const zoomScale = map.getZoomScale(zoom, 1);\r\n const { heightRatio = 1, dpi } = layer.options;\r\n const zoomlevel = calculateZoomLevelFromZoom(zoom, layer.options.clampZoom);\r\n designPoint = {\r\n x: (designPoint.x / zoomScale / heightRatio) * dpi,\r\n y: (designPoint.y / zoomScale / heightRatio) * dpi\r\n };\r\n if (onDesignClick) onDesignClick({ designPoint, ...e, zoomlevel });\r\n };\r\n const handleDoubleClick = e => {};\r\n\r\n const stopTriggerClickOnDoubleClick = e => {\r\n var funcToRun = makeDoubleClick(handleDoubleClick, handleClick);\r\n funcToRun(e);\r\n };\r\n map.on(\"click\", stopTriggerClickOnDoubleClick);\r\n}\r\nif (leaflet)\r\n leaflet.GridLayer.Visualization = leaflet.GridLayer.extend({\r\n initialize: function(options) {\r\n leaflet.Util.setOptions(this, options);\r\n },\r\n options: {\r\n tileWidth: options.tileSize,\r\n tileHeight: options.tileSize,\r\n maxNativeZoom: 3,\r\n noWrap: true,\r\n clampZoom: options.clampZoom\r\n },\r\n getTileSize: function() {\r\n const { tileWidth, tileHeight, designDetails, heightRatio, dpi } = this.options;\r\n return new leaflet.Point(\r\n (tileWidth * heightRatio) / dpi,\r\n (tileHeight * heightRatio * designDetails.KLRatio) / dpi\r\n );\r\n },\r\n _setView: function(center, zoom, noPrune, noUpdate) {\r\n var tileZoom = this.getRoundedZoom(zoom);\r\n\r\n if (\r\n (this.options.maxZoom !== undefined && tileZoom > this.options.maxZoom) ||\r\n (this.options.minZoom !== undefined && tileZoom < this.options.minZoom)\r\n ) {\r\n tileZoom = undefined;\r\n } else {\r\n tileZoom = this._clampZoom(tileZoom);\r\n }\r\n\r\n var tileZoomChanged = this.options.updateWhenZooming && tileZoom !== this._tileZoom;\r\n\r\n if (!noUpdate || tileZoomChanged) {\r\n this._tileZoom = tileZoom;\r\n\r\n if (this._abortLoading) {\r\n this._abortLoading();\r\n }\r\n\r\n this._updateLevels();\r\n this._resetGrid();\r\n\r\n if (tileZoom !== undefined) {\r\n this._update(center);\r\n }\r\n\r\n if (!noPrune) {\r\n this._pruneTiles();\r\n }\r\n\r\n // Flag to prevent _updateOpacity from pruning tiles during\r\n // a zoom anim or a pinch gesture\r\n this._noPrune = !!noPrune;\r\n }\r\n\r\n this._setZoomTransforms(center, zoom);\r\n },\r\n _initTile: function(tile) {\r\n leaflet.DomUtil.addClass(tile, \"leaflet-tile\");\r\n tile.onselectstart = leaflet.Util.falseFn;\r\n tile.onmousemove = leaflet.Util.falseFn;\r\n\r\n // update opacity on tiles in IE7-8 because of filter inheritance problems\r\n if (leaflet.Browser.ielt9 && this.options.opacity < 1) {\r\n leaflet.DomUtil.setOpacity(tile, this.options.opacity);\r\n }\r\n\r\n if (leaflet.Browser.android && !leaflet.Browser.android23) {\r\n tile.style.WebkitBackfaceVisibility = \"hidden\";\r\n }\r\n },\r\n getRoundedZoom(zoom) {\r\n return this.options.clampZoom ? Math.ceil(zoom) : Math.round(zoom);\r\n },\r\n updateCurrentLevel: function(zoom) {\r\n let zoomlvltoupdate = this.getRoundedZoom(zoom);\r\n zoomlvltoupdate = zoomlvltoupdate > 3 ? 3 : zoomlvltoupdate;\r\n this._removeTilesAtZoom(zoomlvltoupdate);\r\n this._update();\r\n },\r\n removeCurrentlevel: function(zoom) {\r\n let zoomlvltoupdate = this.getRoundedZoom(zoom);\r\n zoomlvltoupdate = zoomlvltoupdate > 3 ? 3 : zoomlvltoupdate;\r\n this._removeTilesAtZoom(zoomlvltoupdate);\r\n },\r\n createTile: function(coords, done) {\r\n const tile = document.createElement(\"img\");\r\n tile.setAttribute(\"role\", \"presentation\");\r\n let point;\r\n let i;\r\n if (coords.z === 1) {\r\n i = tilePoints.findIndex(\r\n item => item.x === coords.x && item.y === coords.y && item.z === 1\r\n );\r\n }\r\n if (coords.z === 2) {\r\n i = tilePoints.findIndex(\r\n item => item.x === coords.x && item.y === coords.y && item.z === 2\r\n );\r\n }\r\n if (coords.z === 3) {\r\n i = tilePoints.findIndex(\r\n item => item.x === coords.x && item.y === coords.y && item.z === 4\r\n );\r\n }\r\n if (i !== -1) {\r\n point = tilePoints[i];\r\n if (point && point.src) {\r\n tile.src = \"\";\r\n\r\n setTimeout(() => {\r\n tile.src = point.src;\r\n tile.onload = () => {\r\n const { width, height } = tile;\r\n tile.style.width = `${(width * this.options.heightRatio) / this.options.dpi + 1}px`;\r\n tile.style.height = `${(height *\r\n this.options.heightRatio *\r\n this.options.designDetails.KLRatio) /\r\n this.options.dpi +\r\n 1}px`;\r\n done(null, tile);\r\n };\r\n tile.onerror = error => {\r\n done(error, tile);\r\n };\r\n }, 2);\r\n }\r\n }\r\n return tile;\r\n }\r\n });\r\nconst Visualization = () => {\r\n const minZoom = window.flags.designView.minZoom,\r\n maxZoom = window.flags.designView.maxZoom,\r\n step = 0.25;\r\n const clampZoom = window.flags.designView.clampZoom;\r\n const felt = window.flags.isFelt || 0;\r\n\r\n const containerRef = useRef(null);\r\n const canvasRef = useRef(null);\r\n const visState = useVisualizationState();\r\n const designDetailState = useDesignDetailState();\r\n const dispatchDesignDetails = useDispatchDesignDetail();\r\n const dispatchColorList = useDispatchColorList();\r\n const uiState = useUiState();\r\n const dispatchUiState = useUiDispatch();\r\n const {\r\n designDetails,\r\n fullpath,\r\n tileDetails,\r\n updateDesignTiles,\r\n updateNormapTiles,\r\n designName,\r\n designViewZoom,\r\n hash\r\n } = designDetailState;\r\n\r\n const zoomValue =\r\n window.flags.homeTemplate === pageViews.CREATEYOURRUG ? designViewZoom : resolveZoomValue();\r\n const [zoom, setZoom] = useState(zoomValue);\r\n const previousZoom = usePrevious(zoom);\r\n const previousFullpath = usePrevious(fullpath);\r\n const [customizing, setCustomizing] = useState(false);\r\n const dpi = window.flags.designView.dpi || 1;\r\n\r\n useEffect(() => {\r\n if (window.flags.homeTemplate === pageViews.CREATEYOURRUG) {\r\n if (visState.viewMode == visViewModes.DESIGN_VIEW_ZERO_ZOOM) {\r\n setZoom(window.flags.designView.minZoom);\r\n } else {\r\n setZoom(designViewZoom);\r\n }\r\n }\r\n }, [visState.viewMode]);\r\n const handleZoomChange = zoom => {\r\n if (zoom < minZoom || zoom > maxZoom) return;\r\n toggleScout(false);\r\n setZoom(zoom);\r\n };\r\n const toggleScout = value => {\r\n dispatchDesignDetails({ type: designDetailActions.TOOGLE_CUSTOSCOUT, payload: value });\r\n };\r\n const resetScout = () => {\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_CUSTOSCOUT_COORDS,\r\n payload: { show: false, designPoint: null, containerPoint: null }\r\n });\r\n };\r\n const setLoading = value => {\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_LOADING,\r\n payload: value\r\n });\r\n };\r\n const handleDownloadDesign = () => {\r\n const zoomlevel = calculateZoomLevelFromZoom(zoom, clampZoom);\r\n const watermarkOptions = {\r\n hasWatermark: window.flags.designView.hasDesignWaterMark,\r\n logoUrl: window.InterfaceElements.LogoUrl,\r\n ...window.flags.designView.watermarkOptions\r\n };\r\n return AppProvider.getRenderedDesign({\r\n designDetails,\r\n designName,\r\n fullpath,\r\n hash,\r\n felt,\r\n zoom: zoomlevel === 4 ? 2 : zoomlevel,\r\n watermarkOptions\r\n // logoUrl: window.flags.designView.hasDesignWaterMark ? window.InterfaceElements.LogoUrl : null\r\n }).then(canvas => {\r\n designDetails.IsIrregular\r\n ? downloadImageData(canvas, `${designName}.png`, \"png\")\r\n : downloadImageData(canvas, `${designName}.jpg`, \"jpg\");\r\n });\r\n };\r\n window.downloadRenderedDesign = handleDownloadDesign;\r\n const handleDesignClick = e => {\r\n const { containerPoint, designPoint } = e;\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_CUSTOSCOUT_COORDS,\r\n payload: {\r\n containerPoint,\r\n designPoint,\r\n clickedDivElement: containerRef.current.className\r\n }\r\n });\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_CUSTOSCOUT_ID_TO_HIDE,\r\n payload: \"areaSwatchRoomView\"\r\n });\r\n };\r\n const [debouncedDesignClick] = useDebouncedCallback(handleDesignClick, 300);\r\n useMount(() => {\r\n needsPanning = true;\r\n initMap({\r\n onDesignClick: debouncedDesignClick,\r\n onDrag: () => toggleScout(false),\r\n zoomStep: step\r\n });\r\n map.on(\"zoomend\", e => {\r\n handleZoomChange(map.getZoom());\r\n });\r\n });\r\n useEffect(() => {\r\n if (\r\n window.flags.homeTemplate == pageViews.CREATEYOURRUG &&\r\n designDetailState.custoScout.clickedDivElement == \"input-canvas\"\r\n )\r\n return;\r\n let la = true;\r\n const { fullpath, custoScout, designDetails } = designDetailState;\r\n if (!fullpath) return;\r\n const { designPoint } = custoScout;\r\n const { Width, Height, KLRatio } = designDetails;\r\n if (!designPoint || !Width) return;\r\n const { x, y } = designPoint;\r\n const desx = Math.round(x);\r\n const desy = Math.round(y / KLRatio);\r\n if (desx < 0 || desy < 0 || desx > Width || desy > Height) {\r\n toggleScout(false);\r\n return;\r\n }\r\n toggleScout(false);\r\n AppProvider.getColorAt({\r\n file: fullpath,\r\n x: desx,\r\n y: desy,\r\n Width,\r\n Height\r\n }).then(color => {\r\n if (!la || color === 255) return;\r\n dispatchDesignDetails({ type: designDetailActions.SELECT_DESIGN_COLOR, payload: color });\r\n toggleScout(true);\r\n });\r\n return () => {\r\n la = false;\r\n };\r\n }, [designDetailState.custoScout.designPoint]);\r\n const getFilteredTilePoints = () => {\r\n let zoomlevel = calculateZoomLevelFromZoom(zoom, clampZoom);\r\n let colorIndex;\r\n const filteredTilepoints = tilePoints.filter(item => item.z === zoomlevel);\r\n let tilePointstoUpdate = filteredTilepoints;\r\n if (updateDesignTiles) {\r\n // updateDesignTiles is changed when a color is changed. Need to update the tiles for room visualization\r\n colorIndex = updateDesignTiles.colorIndex;\r\n tilePointstoUpdate = filteredTilepoints.filter(\r\n item => item.updateDesignTiles !== updateDesignTiles || !item.src\r\n );\r\n }\r\n if (updateNormapTiles) {\r\n // updateNormapTiles is update when pile height is changed.. We don't use normaptiles and designtiles in design visualization but we need it for room visualization\r\n colorIndex = updateNormapTiles.colorIndex;\r\n tilePointstoUpdate = filteredTilepoints.filter(\r\n item => item.updateNormapTiles !== updateNormapTiles || !item.src\r\n );\r\n }\r\n let filteredColorTilepoints;\r\n if (colorIndex && colorIndex !== -1 && !window.flags.isFelt) {\r\n //need to update all the tiles for felt accounts\r\n const tileData = tileDetails[`colorTileData${zoomlevel}`];\r\n if (!tileData)\r\n throw new Error(\"Could not get tile data, ensure that tiledetails contains tiledata\");\r\n const colorTileData = tileData[colorIndex];\r\n if (!colorTileData) {\r\n throw new Error(\"tiledata does not contain color tile data for the selected index\");\r\n }\r\n const colorTilePoints = colorTileData.tiles.map(item => convertNameToTilePoint(item));\r\n filteredColorTilepoints = tilePointstoUpdate.filter(item =>\r\n colorTilePoints.some(pnt => pnt.x === item.x && pnt.y === item.y)\r\n );\r\n } else {\r\n filteredColorTilepoints = tilePointstoUpdate;\r\n }\r\n return filteredColorTilepoints;\r\n };\r\n const fetchVisualizationTiles = props => {\r\n return new Promise((resolve, reject) => {\r\n AppProvider.fetchVisualizationTiles(props)\r\n .then(resolve)\r\n .catch(error => {\r\n let err;\r\n if (error.response)\r\n err =\r\n error.response.status === 404 ? toastErrors.NO_CONNECTION : toastErrors.SERVER_ERROR;\r\n if (error.message === \"Network Error\") err = toastErrors.NO_CONNECTION;\r\n\r\n dispatchUiState({\r\n type: mainUiActions.SET_TOAST_PROPS,\r\n payload: {\r\n message: err.message,\r\n intent: \"warning\"\r\n }\r\n });\r\n reject(error);\r\n });\r\n });\r\n };\r\n useEffect(() => {\r\n let la = true;\r\n resetScout();\r\n const { designDetails, fullpath, hash, designDimsOrig } = designDetailState;\r\n if (!fullpath) return;\r\n const loadVisualization = async () => {\r\n let zoomlevel = calculateZoomLevelFromZoom(zoom, clampZoom);\r\n let prevZoomLevel = calculateZoomLevelFromZoom(previousZoom, clampZoom);\r\n const props = sessionStorage.getItem(\"props\") || \"\";\r\n if (previousFullpath !== fullpath || props !== \"\") {\r\n setLoading(true);\r\n const { Height, KLRatio } = designDetails;\r\n const { Width } = designDimsOrig;\r\n map.eachLayer(function(layer) {\r\n map.removeLayer(layer);\r\n });\r\n const zoomlevel = calculateZoomLevelFromZoom(zoom, clampZoom);\r\n let heightRatio = window.innerHeight / (Height * KLRatio);\r\n if (heightRatio > 1) heightRatio = 1;\r\n\r\n const tps = getTilepoints({\r\n Width,\r\n Height,\r\n KLRatio,\r\n heightRatio,\r\n tileSize: options.tileSize,\r\n dpi\r\n });\r\n tilePoints = tps.tilePoints;\r\n const tilecenter = tps.tilecenter;\r\n\r\n const designApiProps = {\r\n file: fullpath,\r\n zoom: zoomlevel,\r\n props: designDetails,\r\n felt\r\n };\r\n\r\n layer = new leaflet.GridLayer.Visualization({\r\n designDetails,\r\n heightRatio,\r\n dpi,\r\n maxNativeZoom: 3,\r\n minNativeZoom: 1,\r\n clampZoom: clampZoom,\r\n minZoom,\r\n maxZoom\r\n });\r\n layer.addTo(map);\r\n\r\n const points = tilePoints.filter(point => point.z === zoomlevel);\r\n if (!points.length) throw new Error(\"Points length should not be zero\");\r\n const pointNames = points.map(item => item.name);\r\n let baseDesignPath;\r\n try {\r\n baseDesignPath = await fetchVisualizationTiles({\r\n ...designApiProps,\r\n tiles: pointNames\r\n });\r\n } catch (error) {\r\n return;\r\n }\r\n if (!la) return;\r\n points.forEach(pnt => {\r\n const i = tilePoints.findIndex(\r\n item => item.x === pnt.x && item.y === pnt.y && item.z === pnt.z\r\n );\r\n let path = `${baseDesignPath}/${tilePoints[i].name}.rendered.jpg?t=${hash}`;\r\n tilePoints[i].src = path;\r\n tilePoints[i].hash = hash;\r\n });\r\n map.setZoom(zoom);\r\n layer.redraw();\r\n if (needsPanning || window.innerHeight / Height > 1) {\r\n needsPanning = false;\r\n panDesign(window.flags.designView.panTo, tilecenter);\r\n } else {\r\n const center = map.getCenter();\r\n map.panTo([center.lat, tilecenter.x], { animate: false });\r\n //map.panTo([-center.lat, -tilecenter.x], { animate: false });\r\n }\r\n let p1 = leaflet.latLng(10, tilecenter.x * 2 + 10),\r\n p2 = leaflet.latLng(-tilecenter.y * 2 - 10, -10),\r\n bounds = leaflet.latLngBounds(p1, p2);\r\n map.setMaxBounds(bounds);\r\n\r\n if (window.flags.designView.hasDesignWaterMark) {\r\n const opt = window.flags.designView.watermarkOptions;\r\n const overlayUrl = window.InterfaceElements.LogoUrl;\r\n readImage(overlayUrl).then(overlayImage => {\r\n const hgt = (overlayImage.height / overlayImage.width) * opt.width;\r\n let imageBounds = getWatermarkBounds({\r\n tilecenter,\r\n padding: 5,\r\n offset: opt.position,\r\n height: hgt,\r\n width: opt.width\r\n });\r\n let imageUrl = overlayUrl;\r\n leaflet.imageOverlay(imageUrl, imageBounds, { opacity: opt.opacity }).addTo(map);\r\n });\r\n }\r\n let tileData = null;\r\n try {\r\n tileData = await AppProvider.fetchTileDetails({\r\n file: designDetailState.fullpath\r\n });\r\n } catch (error) {\r\n console.log(\"error while calling tile details\", error);\r\n }\r\n\r\n if (!la) return;\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_TILE_DETAILS,\r\n payload: tileData\r\n });\r\n // map.panTo([-map.getSize().y / (4 * zoom), tilecenter.x]);\r\n layer.on(\"load\", () => {\r\n setLoading(false);\r\n });\r\n setLoading(false);\r\n } else {\r\n if (previousZoom !== zoom) {\r\n map.setZoom(zoom);\r\n if (prevZoomLevel !== zoomlevel) {\r\n const points = tilePoints.filter(point => point.z === zoomlevel && point.hash !== hash);\r\n if (points.length) {\r\n setCustomizing(true);\r\n points.forEach(pnt => {\r\n const i = tilePoints.findIndex(\r\n item => item.x === pnt.x && item.y === pnt.y && item.z === pnt.z\r\n );\r\n tilePoints[i].src = null;\r\n });\r\n layer.updateCurrentLevel(zoom);\r\n const pointNames = points.map(item => item.name);\r\n const baseDesignPath = await fetchVisualizationTiles({\r\n file: fullpath,\r\n props: designDetails,\r\n zoom: zoomlevel,\r\n tiles: pointNames,\r\n felt\r\n });\r\n if (la) {\r\n points.forEach(pnt => {\r\n const i = tilePoints.findIndex(\r\n item => item.x === pnt.x && item.y === pnt.y && item.z === pnt.z\r\n );\r\n tilePoints[\r\n i\r\n ].src = `${baseDesignPath}/${tilePoints[i].name}.rendered.jpg?t=${hash}`;\r\n tilePoints[i].hash = hash;\r\n });\r\n }\r\n\r\n layer.updateCurrentLevel(zoom);\r\n setTimeout(() => {\r\n setCustomizing(false);\r\n }, 1000);\r\n if (designDetailState.loading) setLoading(false);\r\n }\r\n }\r\n } else {\r\n setLoading(true);\r\n const filteredColorTilepoints = getFilteredTilePoints();\r\n if (filteredColorTilepoints.length) {\r\n layer.removeCurrentlevel(zoom);\r\n const filteredColorTilepointnames = filteredColorTilepoints.map(item => item.name);\r\n const baseDesignPath = await fetchVisualizationTiles({\r\n file: fullpath,\r\n zoom: zoomlevel,\r\n tiles: filteredColorTilepointnames,\r\n props: designDetails,\r\n felt\r\n });\r\n if (la) {\r\n filteredColorTilepoints.forEach(item => {\r\n const { x, y, name } = item;\r\n const index = tilePoints.findIndex(\r\n item => item.x === x && item.y === y && item.z === zoomlevel\r\n );\r\n if (index === -1) {\r\n console.error(\"index -1 for tile\", x, y);\r\n return;\r\n }\r\n tilePoints[index].src = `${baseDesignPath}/${name}.rendered.jpg?t=${hash}`;\r\n tilePoints[index].hash = hash;\r\n });\r\n }\r\n\r\n layer.updateCurrentLevel(zoom);\r\n }\r\n setLoading(false);\r\n }\r\n }\r\n };\r\n const debouncedLoad = debounce(() => {\r\n loadVisualization();\r\n const startMode = getFromSessionStorage(\"startmode\") || \"\";\r\n if (startMode.toLowerCase() === \"rugshare\") showRugshareDialog();\r\n }, 400);\r\n debouncedLoad();\r\n return () => {\r\n //using async await nonce function ( la becomes false when it's called second time)\r\n la = false;\r\n };\r\n }, [hash, zoom]);\r\n\r\n const panDesign = (direction, tilecenter) => {\r\n switch (direction) {\r\n case \"TOPLEFT\":\r\n map.panTo([0, 0], { animate: false });\r\n break;\r\n case \"TOPRIGHT\":\r\n map.panTo([0, tilecenter.x * 2], { animate: false });\r\n break;\r\n case \"BOTTOMLEFT\":\r\n map.panTo([-tilecenter.y * 2, 0], { animate: false });\r\n break;\r\n case \"BOTTOMRIGHT\":\r\n map.panTo([-tilecenter.y * 2, tilecenter.x * 2], { animate: false });\r\n break;\r\n default:\r\n map.panTo([-tilecenter.y, tilecenter.x], { animate: false });\r\n break;\r\n }\r\n };\r\n const showRugshareDialog = () => {\r\n const rugshareCondition = window.InterfaceElements.IsAdmin\r\n ? window.InterfaceElements.ShowRugshare\r\n : window.InterfaceElements.ShowRugshare && window.flags.hasRugshare;\r\n const startMode = getFromSessionStorage(\"startmode\") || \"\";\r\n if (rugshareCondition && startMode.toLowerCase() === \"rugshare\") {\r\n sessionStorage.setItem(\"startmode\", 0);\r\n dispatchUiState({ type: mainUiActions.SET_SHOW_RUGSHARE, payload: true });\r\n }\r\n };\r\n const getActualZoomFactor = () => {\r\n const zoomFactor =\r\n map && layer ? map.getZoomScale(map.getZoom(), 1) * layer.options.heightRatio * dpi : zoom;\r\n return zoomFactor;\r\n };\r\n return (\r\n \r\n
\r\n {/* {!uiState.showLoadingOverlay && (\r\n Updating design...
\r\n \r\n
\r\n\r\n Updating design...
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default CatalogView;\r\n","import React, { useRef, useEffect } from \"react\";\r\nimport ReactWordcloud from \"react-wordcloud\";\r\nimport \"tippy.js/dist/tippy.css\";\r\nimport \"tippy.js/animations/scale.css\";\r\nimport classNames from \"classnames\";\r\nimport { useMount } from \"react-use\";\r\nimport { designListActions, useDispatchDesignList } from \"../../../reducers/designlist.reducer\";\r\n\r\nconst size = [600, 400];\r\nconst options = {\r\n colors: [\r\n \"#1f77b4\",\r\n \"#ff7f0e\",\r\n \"cadetblue\",\r\n \"darkcyan\",\r\n \"darkmagenta\",\r\n \"#8c564b\",\r\n \"cadetblue\",\r\n \"blueviolet\",\r\n \"coral\"\r\n ],\r\n rotations: 2,\r\n rotationAngles: [0, 90],\r\n padding: 3,\r\n fontFamily: \"IBM Plex Sans\",\r\n fontSizes: [25, 60],\r\n fontWeight:\"bold\",\r\n deterministic: false, //same arrangement for any input\r\n maxWords: 120\r\n};\r\n\r\nconst WordCloud = props => {\r\n const { className, WordCloudData } = props;\r\n \r\n const dispatch = useDispatchDesignList();\r\n\r\n const wordCloudRef = useRef(null);\r\n\r\n // const handleClose = e => {\r\n // dispatchUiState({\r\n // type: mainUiActions.SET_SHOW_WORDCLOUD,\r\n // payload: false\r\n // });\r\n // };\r\n\r\n\r\n useMount(() => {\r\n console.log(\"wordcloud rendered\");\r\n });\r\n\r\n useEffect(() => {\r\n console.log(\"wordcloud useeffect\");\r\n }, []);\r\n \r\nconst callbacks = {\r\n getWordColor: function(word) {\r\n //console.log(\"word.color\", word.text, word.color)\r\n\r\n if (word.color && word.color !== \"\") return word.color;\r\n const wordColor =\r\n options.colors[Math.round(Math.random(options.colors.length) * options.colors.length)];\r\n return wordColor;\r\n },\r\n onWordClick: function(word){\r\n console.log(word);\r\n if(word && word.text && word.text!=='')\r\n dispatch({ type: designListActions.SET_TAG_FILTER, payload: word.text });\r\n \r\n },\r\n //onWordMouseOver: console.log,\r\n getWordTooltip: word => {\r\n return `${word.text} (${word.value})`;\r\n }\r\n};\r\n\r\n return (\r\n \r\n {/*
\r\n );\r\n};\r\n\r\nWordCloud.propTypes = {};\r\n\r\nexport default React.memo(WordCloud);\r\n","/* eslint-disable react-hooks/exhaustive-deps */\r\nimport React, { useRef, useEffect, useState } from \"react\";\r\nimport { AtSlider } from \"../../molecules/Slider\";\r\nimport { useMount } from \"react-use\";\r\nimport {\r\n useDesignDetailState,\r\n useDispatchDesignDetail,\r\n designDetailActions\r\n} from \"../../../reducers/designdetails.reducer\";\r\nimport AppProvider from \"../../../api/appProvider\";\r\n\r\nimport {\r\n calculateZoomLevelFromZoom,\r\n getWatermarkBounds,\r\n makeDoubleClick\r\n} from \"./visualizationutils\";\r\nimport { AreaSwatch } from \"../../molecules/AreaSwatch\";\r\nimport AtIcon from \"../../atoms/AtIcon\";\r\nimport { usePrevious } from \"../../../hooks\";\r\n\r\nimport { createCanvas, downloadImageData } from \"../../../utils/canvasutils\";\r\nimport { useDebouncedCallback } from \"use-debounce/lib\";\r\nimport {\r\n useUiState,\r\n useUiDispatch,\r\n mainUiActions,\r\n pageViews\r\n} from \"../../../reducers/mainui.reducer\";\r\nimport { getTilepoints } from \"./visualizationutils\";\r\nimport { convertNameToTilePoint, toastErrors } from \"../../../utils/utils\";\r\n\r\nimport { getFromSessionStorage, readImage } from \"../../../utils/domUtils\";\r\nimport { useDispatchColorList, colorListActions } from \"../../../reducers/colors.reducer\";\r\nimport { AtSpinner } from \"../../atoms/AtSpinner\";\r\nimport classNames from \"classnames\";\r\nimport { Portal, ButtonGroup } from \"@blueprintjs/core\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\nimport { useVisualizationState } from \"../../../reducers/visualizations.reducer\";\r\nimport { resolveZoomValue } from \"../../../middleware/visualization.middleware\";\r\n\r\nconst leaflet = window.L;\r\nlet map;\r\nlet tilePoints;\r\nlet tilePointsForTempCanvas;\r\nlet baseDesignPath;\r\nlet baseWidth;\r\nlet baseHeight;\r\n\r\nconst options = {\r\n tileSize: 256\r\n};\r\nlet layer;\r\nlet needsPanning = true;\r\nfunction debounce(func, wait, immediate) {\r\n var timeout;\r\n return function() {\r\n var context = this,\r\n args = arguments;\r\n var later = function() {\r\n timeout = null;\r\n if (!immediate) func.apply(context, args);\r\n };\r\n var callNow = immediate && !timeout;\r\n clearTimeout(timeout);\r\n timeout = setTimeout(later, wait);\r\n if (callNow) func.apply(context, args);\r\n };\r\n}\r\n\r\nexport function initMap({ onDesignClick, onDesignloaded, onDrag, zoomStep = 0.25 }) {\r\n map = leaflet.map(\"map\", {\r\n crs: leaflet.CRS.Simple,\r\n doubleClickZoom: false,\r\n keyboard: false,\r\n scrollWheelZoom: false,\r\n touchZoom: true,\r\n fadeAnimation: false,\r\n bounceAtZoomLimits: false,\r\n zoomControl: false,\r\n attributionControl: false,\r\n wheelDebounceTime: 500,\r\n zoomSnap: zoomStep,\r\n zoomDelta: zoomStep,\r\n dragging:\r\n window.flags?.homeTemplate === pageViews.CREATEYOURRUG ? !leaflet.Browser.mobile : true,\r\n tap: window.flags?.homeTemplate === pageViews.CREATEYOURRUG ? !leaflet.Browser.mobile : true,\r\n maxBoundsViscosity: 0.5\r\n });\r\n map.on(\"drag\", onDrag);\r\n const handleClick = e => {\r\n const zoom = map.getZoom();\r\n let designPoint = e.layerPoint.add(map.getPixelOrigin());\r\n const zoomScale = map.getZoomScale(zoom, 1);\r\n const { heightRatio = 1, dpi } = layer.options;\r\n const zoomlevel = calculateZoomLevelFromZoom(zoom, layer.options.clampZoom);\r\n designPoint = {\r\n x: (designPoint.x / zoomScale / heightRatio) * dpi,\r\n y: (designPoint.y / zoomScale / heightRatio) * dpi\r\n };\r\n if (onDesignClick) onDesignClick({ designPoint, ...e, zoomlevel });\r\n };\r\n const handleDoubleClick = e => {};\r\n\r\n const stopTriggerClickOnDoubleClick = e => {\r\n var funcToRun = makeDoubleClick(handleDoubleClick, handleClick);\r\n funcToRun(e);\r\n };\r\n map.on(\"click\", stopTriggerClickOnDoubleClick);\r\n}\r\nif (leaflet)\r\n leaflet.GridLayer.Visualization1 = leaflet.GridLayer.extend({\r\n initialize: function(options) {\r\n leaflet.Util.setOptions(this, options);\r\n },\r\n options: {\r\n tileWidth: options.tileSize,\r\n tileHeight: options.tileSize,\r\n maxNativeZoom: 3,\r\n noWrap: true,\r\n clampZoom: options.clampZoom\r\n },\r\n getTileSize: function() {\r\n const { tileWidth, tileHeight, designDetails, heightRatio, dpi } = this.options;\r\n return new leaflet.Point(\r\n (tileWidth * heightRatio) / dpi,\r\n (tileHeight * heightRatio * designDetails.KLRatio) / dpi\r\n );\r\n },\r\n _setView: function(center, zoom, noPrune, noUpdate) {\r\n var tileZoom = this.getRoundedZoom(zoom);\r\n\r\n if (\r\n (this.options.maxZoom !== undefined && tileZoom > this.options.maxZoom) ||\r\n (this.options.minZoom !== undefined && tileZoom < this.options.minZoom)\r\n ) {\r\n tileZoom = undefined;\r\n } else {\r\n tileZoom = this._clampZoom(tileZoom);\r\n }\r\n\r\n var tileZoomChanged = this.options.updateWhenZooming && tileZoom !== this._tileZoom;\r\n\r\n if (!noUpdate || tileZoomChanged) {\r\n this._tileZoom = tileZoom;\r\n\r\n if (this._abortLoading) {\r\n this._abortLoading();\r\n }\r\n\r\n this._updateLevels();\r\n this._resetGrid();\r\n\r\n if (tileZoom !== undefined) {\r\n this._update(center);\r\n }\r\n\r\n if (!noPrune) {\r\n this._pruneTiles();\r\n }\r\n\r\n // Flag to prevent _updateOpacity from pruning tiles during\r\n // a zoom anim or a pinch gesture\r\n this._noPrune = !!noPrune;\r\n }\r\n\r\n this._setZoomTransforms(center, zoom);\r\n },\r\n _initTile: function(tile) {\r\n leaflet.DomUtil.addClass(tile, \"leaflet-tile\");\r\n tile.onselectstart = leaflet.Util.falseFn;\r\n tile.onmousemove = leaflet.Util.falseFn;\r\n\r\n // update opacity on tiles in IE7-8 because of filter inheritance problems\r\n if (leaflet.Browser.ielt9 && this.options.opacity < 1) {\r\n leaflet.DomUtil.setOpacity(tile, this.options.opacity);\r\n }\r\n\r\n if (leaflet.Browser.android && !leaflet.Browser.android23) {\r\n tile.style.WebkitBackfaceVisibility = \"hidden\";\r\n }\r\n },\r\n getRoundedZoom(zoom) {\r\n return this.options.clampZoom ? Math.ceil(zoom) : Math.round(zoom);\r\n },\r\n updateCurrentLevel: function(zoom) {\r\n let zoomlvltoupdate = this.getRoundedZoom(zoom);\r\n zoomlvltoupdate = zoomlvltoupdate > 3 ? 3 : zoomlvltoupdate;\r\n this._removeTilesAtZoom(zoomlvltoupdate);\r\n this._update();\r\n },\r\n removeCurrentlevel: function(zoom) {\r\n let zoomlvltoupdate = this.getRoundedZoom(zoom);\r\n zoomlvltoupdate = zoomlvltoupdate > 3 ? 3 : zoomlvltoupdate;\r\n this._removeTilesAtZoom(zoomlvltoupdate);\r\n },\r\n createTile: function(coords, done) {\r\n const tile = document.createElement(\"img\");\r\n tile.setAttribute(\"role\", \"presentation\");\r\n let point;\r\n let i;\r\n if (coords.z === 1) {\r\n i = tilePoints.findIndex(\r\n item => item.x === coords.x && item.y === coords.y && item.z === 1\r\n );\r\n }\r\n if (coords.z === 2) {\r\n i = tilePoints.findIndex(\r\n item => item.x === coords.x && item.y === coords.y && item.z === 2\r\n );\r\n }\r\n if (coords.z === 3) {\r\n i = tilePoints.findIndex(\r\n item => item.x === coords.x && item.y === coords.y && item.z === 4\r\n );\r\n }\r\n if (i !== -1) {\r\n point = tilePoints[i];\r\n if (point && point.src) {\r\n tile.src = \"\";\r\n\r\n setTimeout(() => {\r\n tile.src = point.src;\r\n tile.onload = () => {\r\n const { width, height } = tile;\r\n tile.style.width = `${(width * this.options.heightRatio) / this.options.dpi + 1}px`;\r\n tile.style.height = `${(height *\r\n this.options.heightRatio *\r\n this.options.designDetails.KLRatio) /\r\n this.options.dpi +\r\n 1}px`;\r\n done(null, tile);\r\n };\r\n tile.onerror = error => {\r\n done(error, tile);\r\n };\r\n }, 2);\r\n }\r\n }\r\n return tile;\r\n }\r\n });\r\nconst VisualizationCtfResize = () => {\r\n const minZoom = window.flags.designView.minZoom,\r\n maxZoom = window.flags.designView.maxZoom,\r\n step = 0.25;\r\n const clampZoom = window.flags.designView.clampZoom;\r\n const felt = window.flags.isFelt || 0;\r\n\r\n const containerRef = useRef(null);\r\n const canvasRef = useRef(null);\r\n const visState = useVisualizationState();\r\n const designDetailState = useDesignDetailState();\r\n const dispatchDesignDetails = useDispatchDesignDetail();\r\n const dispatchColorList = useDispatchColorList();\r\n const uiState = useUiState();\r\n const dispatchUiState = useUiDispatch();\r\n const {\r\n designDetails,\r\n fullpath,\r\n tileDetails,\r\n updateDesignTiles,\r\n updateNormapTiles,\r\n designName,\r\n designViewZoom,\r\n hash\r\n } = designDetailState;\r\n\r\n const zoomValue =\r\n window.flags.homeTemplate === pageViews.CREATEYOURRUG ? designViewZoom : resolveZoomValue();\r\n const [zoom, setZoom] = useState(zoomValue);\r\n const [initialSetupFinish, setInitialSetupFinish] = useState(false);\r\n const [tilePointsOrg, setTilePointsOrg] = useState([]);\r\n const previousZoom = usePrevious(zoom);\r\n const previousFullpath = usePrevious(fullpath);\r\n const [customizing, setCustomizing] = useState(false);\r\n const dpi = window.flags.designView.dpi || 1;\r\n useEffect(() => {\r\n if (window.flags.homeTemplate === pageViews.CREATEYOURRUG) {\r\n setZoom(designViewZoom);\r\n }\r\n }, [visState.viewMode]);\r\n const handleZoomChange = zoom => {\r\n if (zoom < minZoom || zoom > maxZoom) return;\r\n toggleScout(false);\r\n setZoom(zoom);\r\n };\r\n const toggleScout = value => {\r\n dispatchDesignDetails({ type: designDetailActions.TOOGLE_CUSTOSCOUT, payload: value });\r\n };\r\n const resetScout = () => {\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_CUSTOSCOUT_COORDS,\r\n payload: { show: false, designPoint: null, containerPoint: null }\r\n });\r\n };\r\n const setLoading = value => {\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_LOADING,\r\n payload: value\r\n });\r\n };\r\n\r\n const handleDownloadDesign = () => {\r\n var link = document.createElement(\"a\");\r\n link.download = `${designName}.png`;\r\n link.href = document.getElementById(\"tempCanvas\").toDataURL();\r\n link.click();\r\n };\r\n window.downloadRenderedDesign = handleDownloadDesign;\r\n const handleDesignClick = e => {\r\n const { containerPoint, designPoint } = e;\r\n\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_CUSTOSCOUT_COORDS,\r\n payload: {\r\n containerPoint,\r\n designPoint\r\n }\r\n });\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_CUSTOSCOUT_ID_TO_HIDE,\r\n payload: \"areaSwatchRoomView\"\r\n });\r\n };\r\n const [debouncedDesignClick] = useDebouncedCallback(handleDesignClick, 300);\r\n useMount(() => {\r\n needsPanning = true;\r\n initMap({\r\n onDesignClick: debouncedDesignClick,\r\n onDrag: () => toggleScout(false),\r\n zoomStep: step\r\n });\r\n map.on(\"zoomend\", e => {\r\n handleZoomChange(map.getZoom());\r\n });\r\n });\r\n useEffect(() => {\r\n let la = true;\r\n const { fullpath, custoScout, designDetails, designDimsOrig } = designDetailState;\r\n if (!fullpath) return;\r\n const { designPoint } = custoScout;\r\n const { Width, Height, KLRatio } = designDetails;\r\n if (!designPoint || !Width) return;\r\n const { x, y } = designPoint;\r\n const desx = Math.round(x);\r\n const desy = Math.round(y / KLRatio);\r\n if (desx < 0 || desy < 0 || desx > Width || desy > Height) {\r\n toggleScout(false);\r\n return;\r\n }\r\n toggleScout(false);\r\n AppProvider.getColorAt({\r\n file: fullpath,\r\n x: desx,\r\n y: desy,\r\n Width: designDimsOrig.Width,\r\n Height: designDimsOrig.Height\r\n }).then(color => {\r\n if (!la || color === 255) return;\r\n dispatchDesignDetails({ type: designDetailActions.SELECT_DESIGN_COLOR, payload: color });\r\n toggleScout(true);\r\n });\r\n return () => {\r\n la = false;\r\n };\r\n }, [designDetailState.custoScout.designPoint]);\r\n const getFilteredTilePoints = () => {\r\n let zoomlevel = calculateZoomLevelFromZoom(zoom, clampZoom);\r\n let colorIndex;\r\n const filteredTilepoints = tilePoints.filter(item => item.z === zoomlevel);\r\n let tilePointstoUpdate = filteredTilepoints;\r\n if (updateDesignTiles) {\r\n // updateDesignTiles is changed when a color is changed. Need to update the tiles for room visualization\r\n colorIndex = updateDesignTiles.colorIndex;\r\n tilePointstoUpdate = filteredTilepoints.filter(\r\n item => item.updateDesignTiles !== updateDesignTiles || !item.src\r\n );\r\n }\r\n if (updateNormapTiles) {\r\n // updateNormapTiles is update when pile height is changed.. We don't use normaptiles and designtiles in design visualization but we need it for room visualization\r\n colorIndex = updateNormapTiles.colorIndex;\r\n tilePointstoUpdate = filteredTilepoints.filter(\r\n item => item.updateNormapTiles !== updateNormapTiles || !item.src\r\n );\r\n }\r\n let filteredColorTilepoints;\r\n if (colorIndex && colorIndex !== -1 && !window.flags.isFelt) {\r\n //need to update all the tiles for felt accounts\r\n const tileData = tileDetails[`colorTileData${zoomlevel}`];\r\n if (!tileData)\r\n throw new Error(\"Could not get tile data, ensure that tiledetails contains tiledata\");\r\n const colorTileData = tileData[colorIndex];\r\n if (!colorTileData) {\r\n throw new Error(\"tiledata does not contain color tile data for the selected index\");\r\n }\r\n const colorTilePoints = colorTileData.tiles.map(item => convertNameToTilePoint(item));\r\n filteredColorTilepoints = tilePointstoUpdate.filter(item =>\r\n colorTilePoints.some(pnt => pnt.x === item.x && pnt.y === item.y)\r\n );\r\n } else {\r\n filteredColorTilepoints = tilePointstoUpdate;\r\n }\r\n return filteredColorTilepoints;\r\n };\r\n const fetchVisualizationTiles = props => {\r\n return new Promise((resolve, reject) => {\r\n AppProvider.fetchVisualizationTiles(props)\r\n .then(resolve)\r\n .catch(error => {\r\n let err;\r\n if (error.response)\r\n err =\r\n error.response.status === 404 ? toastErrors.NO_CONNECTION : toastErrors.SERVER_ERROR;\r\n if (error.message === \"Network Error\") err = toastErrors.NO_CONNECTION;\r\n\r\n dispatchUiState({\r\n type: mainUiActions.SET_TOAST_PROPS,\r\n payload: {\r\n message: err.message,\r\n intent: \"warning\"\r\n }\r\n });\r\n reject(error);\r\n });\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (!designDetailState.designDimsOrig) return;\r\n const { KLRatio } = designDetails;\r\n const { Width, Height } = designDetailState.designDimsOrig;\r\n let heightRatio = window.innerHeight / (designDetails.Height * KLRatio);\r\n if (heightRatio > 1) heightRatio = 1;\r\n\r\n const tps = getTilepoints({\r\n Width,\r\n Height,\r\n KLRatio,\r\n heightRatio,\r\n tileSize: options.tileSize,\r\n dpi\r\n });\r\n setTilePointsOrg(tps.tilePoints);\r\n }, [designDetails]);\r\n\r\n useEffect(() => {\r\n if (!tilePointsOrg || !designDetailState.designDimsOrig) return;\r\n // setCustomizing(true);\r\n var canvas = document.getElementById(\"tempCanvas\");\r\n const tempCtx = canvas.getContext(\"2d\");\r\n const zoomlevel = calculateZoomLevelFromZoom(zoom, clampZoom);\r\n const { Width, Height } = designDetailState.designDimsOrig;\r\n const func = (i, pnt, j, k) => {\r\n var base_image = new Image();\r\n base_image.src = `${baseDesignPath}/${tilePointsOrg[i].name}.rendered.jpg?t=${hash}`;\r\n base_image.setAttribute(\"crossorigin\", \"anonymous\");\r\n base_image.onload = async function() {\r\n await tempCtx.drawImage(\r\n base_image,\r\n parseInt(tilePointsOrg[i].name.split(\"_\")[0]) * 256 + j * zoomlevel * Width,\r\n parseInt(tilePointsOrg[i].name.split(\"_\")[1]) * 256 + k * zoomlevel * Height\r\n );\r\n };\r\n };\r\n\r\n tempCtx.clearRect(0, 0, canvas.width, canvas.height);\r\n tempCtx.canvas.width = zoomlevel * designDetails.Width;\r\n tempCtx.canvas.height = zoomlevel * designDetails.Height;\r\n const points = tilePointsOrg.filter(point => point.z === zoomlevel);\r\n points.forEach(async (pnt, index) => {\r\n const i = tilePointsOrg.findIndex(\r\n item => item.x === pnt.x && item.y === pnt.y && item.z === pnt.z\r\n );\r\n for (var j = 0; j < Math.ceil(designDetails.Width / Width); j++) {\r\n for (var k = 0; k < Math.ceil(designDetails.Height / Height); k++) {\r\n await func(i, pnt, j, k);\r\n }\r\n }\r\n });\r\n canvas.style.display = \"none\";\r\n setInitialSetupFinish(true);\r\n }, [designDetails, baseDesignPath]);\r\n useEffect(() => {\r\n let la = true;\r\n resetScout();\r\n const { designDetails, fullpath, hash, designDimsOrig } = designDetailState;\r\n baseWidth = designDetails.Width;\r\n baseHeight = designDetails.Height;\r\n if (!fullpath) return;\r\n setCustomizing(true);\r\n const loadVisualization = async () => {\r\n let zoomlevel = calculateZoomLevelFromZoom(zoom, clampZoom);\r\n let prevZoomLevel = calculateZoomLevelFromZoom(previousZoom, clampZoom);\r\n const props = sessionStorage.getItem(\"props\") || \"\";\r\n\r\n setLoading(true);\r\n const { Height, KLRatio, Width } = designDetails;\r\n // const { Width } = designDimsOrig;\r\n\r\n map.eachLayer(function(layer) {\r\n map.removeLayer(layer);\r\n });\r\n let heightRatio = window.innerHeight / (Height * KLRatio);\r\n if (heightRatio > 1) heightRatio = 1;\r\n\r\n const tps = getTilepoints({\r\n Width,\r\n Height,\r\n KLRatio,\r\n heightRatio,\r\n tileSize: options.tileSize,\r\n dpi\r\n });\r\n tilePoints = tps.tilePoints;\r\n const tilecenter = tps.tilecenter;\r\n if (previousFullpath !== fullpath || props !== \"\") {\r\n tilePointsForTempCanvas = tps.tilePoints;\r\n }\r\n\r\n const designApiProps = {\r\n file: fullpath,\r\n zoom: zoomlevel,\r\n props: designDetails,\r\n felt\r\n };\r\n\r\n layer = new leaflet.GridLayer.Visualization1({\r\n designDetails,\r\n heightRatio,\r\n dpi,\r\n maxNativeZoom: 3,\r\n minNativeZoom: 1,\r\n clampZoom: clampZoom,\r\n minZoom,\r\n maxZoom\r\n });\r\n layer.addTo(map);\r\n\r\n const points = tilePoints.filter(point => point.z === zoomlevel);\r\n if (!points.length) throw new Error(\"Points length should not be zero\");\r\n const pointNames = points.map(item => item.name);\r\n try {\r\n baseDesignPath = await fetchVisualizationTiles({\r\n ...designApiProps,\r\n tiles: pointNames\r\n });\r\n } catch (error) {\r\n return;\r\n }\r\n if (!la) return;\r\n\r\n // points.forEach(pnt => {\r\n // const i = tilePoints.findIndex(\r\n // item => item.x === pnt.x && item.y === pnt.y && item.z === pnt.z\r\n // );\r\n // let path = `${baseDesignPath}/${tilePoints[i].name}.rendered.jpg?t=${hash}`;\r\n // tilePoints[i].src = path;\r\n // tilePoints[i].hash = hash;\r\n // });\r\n map.setZoom(zoom);\r\n layer.redraw();\r\n\r\n var crop = function(canvas, offsetX, offsetY, width, height) {\r\n // create an in-memory canvas\r\n var buffer = document.createElement(\"canvas\");\r\n var b_ctx = buffer.getContext(\"2d\");\r\n // set its width/height to the required ones\r\n buffer.width = width;\r\n buffer.height = height;\r\n // draw the main canvas on our buffer one\r\n // drawImage(source, source_X, source_Y, source_Width, source_Height,\r\n // dest_X, dest_Y, dest_Width, dest_Height)\r\n b_ctx.drawImage(canvas, offsetX, offsetY, width, height, 0, 0, buffer.width, buffer.height);\r\n // now call the callback with the dataURL of our buffer canvas\r\n return buffer.toDataURL();\r\n };\r\n const tilesPerWidth = Math.floor(parseInt((zoomlevel * designDetails.Width - 1) / 256) + 1);\r\n const tilesPerHeight = Math.floor(parseInt((zoomlevel * designDetails.Height - 1) / 256) + 1);\r\n var updatedTilePoints = tilePoints.filter(item => item.z == zoomlevel);\r\n setTimeout(() => {\r\n for (var i = 0; i < tilesPerWidth; i++) {\r\n for (var j = 0; j < tilesPerHeight; j++) {\r\n updatedTilePoints[j + i + i * (tilesPerHeight - 1)].src = crop(\r\n document.getElementById(\"tempCanvas\"),\r\n i * 256,\r\n j * 256,\r\n 256,\r\n 256\r\n );\r\n updatedTilePoints[i].hash = hash;\r\n }\r\n }\r\n map.setZoom(zoom);\r\n layer.redraw();\r\n // map.panTo([-222.5, 200], { animate: false });\r\n setCustomizing(false);\r\n map.panTo([-tilecenter.y, tilecenter.x], { animate: false });\r\n let p1 = leaflet.latLng(10, tilecenter.x * 2 + 10),\r\n p2 = leaflet.latLng(-tilecenter.y * 2 - 10, -10),\r\n bounds = leaflet.latLngBounds(p1, p2);\r\n map.setMaxBounds(bounds);\r\n }, [3000]);\r\n\r\n if (window.flags.designView.hasDesignWaterMark) {\r\n const opt = window.flags.designView.watermarkOptions;\r\n const overlayUrl = window.InterfaceElements.LogoUrl;\r\n readImage(overlayUrl).then(overlayImage => {\r\n const hgt = (overlayImage.height / overlayImage.width) * opt.width;\r\n let imageBounds = getWatermarkBounds({\r\n tilecenter,\r\n padding: 5,\r\n offset: opt.position,\r\n height: hgt,\r\n width: opt.width\r\n });\r\n let imageUrl = overlayUrl;\r\n leaflet.imageOverlay(imageUrl, imageBounds, { opacity: opt.opacity }).addTo(map);\r\n });\r\n }\r\n let tileData = null;\r\n try {\r\n tileData = await AppProvider.fetchTileDetails({\r\n file: designDetailState.fullpath\r\n });\r\n } catch (error) {\r\n console.log(\"error while calling tile details\", error);\r\n }\r\n\r\n if (!la) return;\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_TILE_DETAILS,\r\n payload: tileData\r\n });\r\n // map.panTo([-map.getSize().y / (4 * zoom), tilecenter.x]);\r\n layer.on(\"load\", () => {\r\n setLoading(false);\r\n });\r\n setLoading(false);\r\n\r\n // if (previousZoom !== zoom) {\r\n // map.setZoom(zoom);\r\n // if (prevZoomLevel !== zoomlevel) {\r\n // const points = tilePoints.filter(point => point.z === zoomlevel && point.hash !== hash);\r\n // if (points.length) {\r\n // setCustomizing(true);\r\n // points.forEach(pnt => {\r\n // const i = tilePoints.findIndex(\r\n // item => item.x === pnt.x && item.y === pnt.y && item.z === pnt.z\r\n // );\r\n // tilePoints[i].src = null;\r\n // });\r\n // layer.updateCurrentLevel(zoom);\r\n // const pointNames = points.map(item => item.name);\r\n // const baseDesignPath = await fetchVisualizationTiles({\r\n // file: fullpath,\r\n // props: designDetails,\r\n // zoom: zoomlevel,\r\n // tiles: pointNames,\r\n // felt\r\n // });\r\n // // if (la) {\r\n // // points.forEach(pnt => {\r\n // // const i = tilePoints.findIndex(\r\n // // item => item.x === pnt.x && item.y === pnt.y && item.z === pnt.z\r\n // // );\r\n // // tilePoints[\r\n // // i\r\n // // ].src = `${baseDesignPath}/${tilePoints[i].name}.rendered.jpg?t=${hash}`;\r\n // // tilePoints[i].hash = hash;\r\n // // });\r\n // // }\r\n\r\n // layer.updateCurrentLevel(zoom);\r\n // setTimeout(() => {\r\n // setCustomizing(false);\r\n // }, 1000);\r\n // if (designDetailState.loading) setLoading(false);\r\n // }\r\n // }\r\n // }\r\n //else {\r\n // setLoading(true);\r\n // const filteredColorTilepoints = getFilteredTilePoints();\r\n // if (filteredColorTilepoints.length) {\r\n // layer.removeCurrentlevel(zoom);\r\n // const filteredColorTilepointnames = filteredColorTilepoints.map(item => item.name);\r\n // // const baseDesignPath = await fetchVisualizationTiles({\r\n // // file: fullpath,\r\n // // zoom: zoomlevel,\r\n // // tiles: filteredColorTilepointnames,\r\n // // props: designDetails,\r\n // // felt\r\n // // });\r\n // // if (la) {\r\n // // filteredColorTilepoints.forEach(item => {\r\n // // const { x, y, name } = item;\r\n // // const index = tilePoints.findIndex(\r\n // // item => item.x === x && item.y === y && item.z === zoomlevel\r\n // // );\r\n // // if (index === -1) {\r\n // // console.error(\"index -1 for tile\", x, y);\r\n // // return;\r\n // // }\r\n // // tilePoints[index].src = `${baseDesignPath}/${name}.rendered.jpg?t=${hash}`;\r\n // // tilePoints[index].hash = hash;\r\n // // });\r\n // // }\r\n\r\n // layer.updateCurrentLevel(zoom);\r\n // }\r\n // setLoading(false);\r\n // }\r\n };\r\n const debouncedLoad = debounce(() => {\r\n loadVisualization();\r\n const startMode = getFromSessionStorage(\"startmode\") || \"\";\r\n if (startMode.toLowerCase() === \"rugshare\") showRugshareDialog();\r\n }, 400);\r\n debouncedLoad();\r\n return () => {\r\n //using async await nonce function ( la becomes false when it's called second time)\r\n la = false;\r\n };\r\n }, [hash, zoom, designDetails.DesignColors]);\r\n\r\n const panDesign = (direction, tilecenter) => {\r\n switch (direction) {\r\n case \"TOPLEFT\":\r\n map.panTo([0, 0], { animate: false });\r\n break;\r\n case \"TOPRIGHT\":\r\n map.panTo([0, tilecenter.x * 2], { animate: false });\r\n break;\r\n case \"BOTTOMLEFT\":\r\n map.panTo([-tilecenter.y * 2, 0], { animate: false });\r\n break;\r\n case \"BOTTOMRIGHT\":\r\n map.panTo([-tilecenter.y * 2, tilecenter.x * 2], { animate: false });\r\n break;\r\n default:\r\n map.panTo([-tilecenter.y, tilecenter.x], { animate: false });\r\n break;\r\n }\r\n };\r\n const showRugshareDialog = () => {\r\n const rugshareCondition = window.InterfaceElements.IsAdmin\r\n ? window.InterfaceElements.ShowRugshare\r\n : window.InterfaceElements.ShowRugshare && window.flags.hasRugshare;\r\n const startMode = getFromSessionStorage(\"startmode\") || \"\";\r\n if (rugshareCondition && startMode.toLowerCase() === \"rugshare\") {\r\n sessionStorage.setItem(\"startmode\", 0);\r\n dispatchUiState({ type: mainUiActions.SET_SHOW_RUGSHARE, payload: true });\r\n }\r\n };\r\n const getActualZoomFactor = () => {\r\n const zoomFactor =\r\n map && layer ? map.getZoomScale(map.getZoom(), 1) * layer.options.heightRatio * dpi : zoom;\r\n return zoomFactor;\r\n };\r\n return (\r\n <>\r\n Close
*/}\r\n {WordCloudData && (\r\n\r\n
\r\n {/* {!uiState.showLoadingOverlay && (\r\n Updating design...
\r\n \r\n Die generierten Grafiken entsprechen nicht den tatsächlichen Abmessungen und dienen\r\n lediglich zur Veranschaulichung.\r\n
\r\n )}\r\n\r\n {/* {renderView()} */}\r\n {!window.initialData.hideLoadingOverlay ? (\r\n \r\n {firstLoadingOnRender && window.flags.homeTemplate == pageViews.CREATEYOURRUG && (\r\n ![]()
}\r\n {roomData &&\r\n designDetailState &&\r\n (roomData.config.version > 2 ? (\r\n {\r\n setCsbProps({ show: true });\r\n }}\r\n onRenderingComplete={onRenderingComplete}\r\n roomData={roomData}\r\n handleAvailableSizesChange={handleAvailableSizesChange}\r\n selectedSize={designDetailState.illustrationSize}\r\n />\r\n ) : (\r\n {\r\n setCsbProps({ show: true });\r\n }}\r\n isIdle={uiState.isIdle}\r\n onRenderingComplete={onRenderingComplete}\r\n setFirstLoadingOnRender={setFirstLoadingOnRender}\r\n roomData={roomData}\r\n setScaledUpHeight={setScaledUpHeight}\r\n setScaledUpWidth={setScaledUpWidth}\r\n // activeFloor={floorOptions.activeFloor}\r\n // carpetRotation={carpetOptions.rotation}\r\n customDesignUrl={window.initialData.customDesignUrl}\r\n customDesignOutline={window.initialData.customDesignOutline}\r\n setIsFullScreen={props.setIsFullScreen}\r\n />\r\n ))}\r\n {csbProps.show && (\r\n {\r\n setCsbProps({ ...csbProps, show: false });\r\n }}\r\n >\r\n {\r\n e.stopPropagation();\r\n }}\r\n onClose={() => {\r\n setCsbProps({ ...csbProps, show: false });\r\n }}\r\n />\r\n
\r\n )}\r\n \r\n {\r\n dispatchRoomView({\r\n type: roomViewActions.SET_ACTIVE_FLOOR_OPTION,\r\n payload: floor\r\n });\r\n }}\r\n />\r\n ))}\r\n
\r\n \r\n {roomData && (\r\n {strings.visualization.selectFloor}
\r\n {floorOptions.floors.map((floor, i) => (\r\n\r\n {path ? (\r\n 
\r\n ) : (\r\n \r\n )}\r\n {strings.visualization.changeFloor}\r\n
\r\n );\r\n const scaleOptions = (\r\n \r\n {strings.visualization.scale}\r\n
\r\n );\r\n const rotationOptions = (\r\n \r\n {window.flags.visualizations.showScaleOptionDetails && (\r\n window.scaleCarpet(1)}\r\n />\r\n window.scaleCarpet(-1)}\r\n />\r\n window.scaleCarpet(0)}\r\n />\r\n
\r\n \r\n {\" \"}\r\n {scaledUpWidth}' X {scaledUpHeight}'\r\n
\r\n )}\r\n\r\n {strings.visualization.rotation}\r\n
\r\n );\r\n\r\n const container = document.getElementById(\"right-sidebar\")\r\n ? document.getElementById(\"right-sidebar\")\r\n : document.getElementById(\"stage_container\");\r\n\r\n const saveCustomDesignRoom = () => {\r\n window.downloadRendered3dIll();\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 {strings.design.showAllDesigns}
\r\n \r\n )}\r\n\r\n \r\n {toastProps && (\r\n setToastProps(false)}\r\n />\r\n )}\r\n \r\n
\r\n );\r\n};\r\n\r\nSelectSizeDropdown.propTypes = {};\r\n\r\nexport default SelectSizeDropdown;\r\n","/* eslint-disable react-hooks/exhaustive-deps */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport { CollapsibleSectionHeading } from \"../../molecules/CustomCollapse\";\r\nimport { Collapse, Popover } from \"@blueprintjs/core\";\r\nimport Thumbnail from \"../../molecules/Thumbnail\";\r\nimport strings from \"../../../strings\";\r\nimport {\r\n visViewModes,\r\n visualizationsActions,\r\n useVisualizationState,\r\n useDispatchVisualization\r\n} from \"../../../reducers/visualizations.reducer\";\r\nimport { useDesignListState } from \"../../../reducers/designlist.reducer\";\r\nimport classNames from \"classnames\";\r\nimport SelectSizeDropdown from \"../SelectSizeDropdown\";\r\nimport { pageViews } from \"../../../reducers/mainui.reducer\";\r\n\r\nconst Designviews = props => {\r\n const designListState = useDesignListState();\r\n const { selectedFile } = designListState;\r\n const visState = useVisualizationState();\r\n const dispatchVisState = useDispatchVisualization();\r\n const [isCollapsed, setIsCollapsed] = useState(false);\r\n const [viewModes, setviewModes] = useState([]);\r\n const pageView = window.flags.homeTemplate;\r\n\r\n const getviewModeText = mode => {\r\n const { designViews } = strings;\r\n switch (mode) {\r\n case visViewModes.DESIGN_VIEW_DEEPZOOM:\r\n return designViews.deepZoom;\r\n case visViewModes.DESIGN_VIEW_DEEPZOOM_RX:\r\n return designViews.deepZoomRx;\r\n case visViewModes.DESIGN_VIEW_PERSPECTIVE:\r\n return designViews.perspective;\r\n case visViewModes.DESIGN_VIEW_FOLDEDBACK:\r\n return designViews.foldedback;\r\n default:\r\n return null;\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (!selectedFile || !selectedFile.designProps) return;\r\n let { IsIrregular } = selectedFile.designProps;\r\n const filterCondition = designView => {\r\n if (window.InterfaceElements.IsJpeg) return true;\r\n return (\r\n //done to not show perspective for irregular\r\n // !IsIrregular ||\r\n // ![visViewModes.DESIGN_VIEW_PERSPECTIVE, visViewModes.DESIGN_VIEW_FOLDEDBACK].includes(\r\n // designView\r\n // )\r\n ![visViewModes.DESIGN_VIEW_FOLDEDBACK].includes(designView)\r\n );\r\n };\r\n if (pageView === pageViews.CONTROLLER && window.flags.controller.showTopViewOnly) {\r\n setviewModes([\"DESIGN_VIEW_DEEPZOOM\"]);\r\n } else {\r\n let views = window.flags.visualizations.designViews.filter(designView =>\r\n filterCondition(designView)\r\n );\r\n setviewModes([...views]);\r\n if (\r\n visState.viewMode === visViewModes.MY_ROOM ||\r\n visState.viewMode === visViewModes.ROOM_VIEW\r\n )\r\n return;\r\n if (!views.includes(visState.viewMode)) {\r\n dispatchVisState({\r\n type: visualizationsActions.SET_VIEW_MODE,\r\n payload: window.flags.visualizations.defaultView\r\n });\r\n }\r\n }\r\n }, [selectedFile]);\r\n\r\n return (\r\n <>\r\n \r\n {designSizeOptions && (\r\n handleSelectOptionChangeSize(designSizeOptions[i])}\r\n />\r\n )}\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nDesignviews.propTypes = {};\r\n\r\nexport default Designviews;\r\n","import React from 'react';\r\nimport { useDesignListState } from '../../../reducers/designlist.reducer';\r\nimport { useDispatchVisualization, useVisualizationState, visualizationsActions, visViewModes } from '../../../reducers/visualizations.reducer';\r\nimport strings from '../../../strings';\r\nimport Thumbnail from '../Thumbnail';\r\n\r\nconst DesignTopViewThumb = props => {\r\n const visState = useVisualizationState();\r\n const dispatchVisState = useDispatchVisualization();\r\n const designListState = useDesignListState();\r\n const { selectedFile } = designListState;\r\n\r\n return (\r\n \r\n {viewModes.map((mode, i) => (\r\n 1\r\n ? getviewModeText(mode)\r\n : null\r\n }}\r\n aspect=\"landscape\"\r\n active={visState.viewMode === mode}\r\n className={classNames(\r\n visViewModes.DESIGN_VIEW_PERSPECTIVE === mode ? \"at-perspective-thumb\" : \"\",\r\n visViewModes.DESIGN_VIEW_FOLDEDBACK === mode ? \"at-folded-back-thumb\" : \"\"\r\n )}\r\n doubleImage={visViewModes.DESIGN_VIEW_FOLDEDBACK === mode ? true : false}\r\n secondImageClass={\r\n visViewModes.DESIGN_VIEW_FOLDEDBACK === mode ? \"folded-back-part\" : \"\"\r\n }\r\n onThumbnailClick={() => {\r\n dispatchVisState({\r\n type: visualizationsActions.SET_VIEW_MODE,\r\n payload: mode\r\n });\r\n }}\r\n />\r\n ))}\r\n {sessionStorage.getItem(\"sizeoption\") &&\r\n sessionStorage.getItem(\"sizeoption\").indexOf(\"|\") !== -1 && (\r\n
\r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n
\r\n {window.flags.catalogViews && window.flags.catalogViews.length && (\r\n <>\r\n \r\n {visualizations.keepPerspectiveViewInRoomlist && (\r\n {\r\n const element = document.querySelector(`.thumb-title[title=\"Perspective View\"]`);\r\n if (element) {\r\n element.click();\r\n }\r\n }}\r\n />\r\n )}\r\n {visualizations.keepDesignTopViewInRoomlist && debouncedThumbnailClick(item, e)}\r\n />\r\n ))}\r\n {visualizations.myRoomEnabled && pageView !== pageViews.CONTROLLER && (\r\n handleMyRoomThumbnailClick(savedRoom)}\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 RoomList;\r\n","import React from \"react\";\r\nimport strings from \"../../strings\";\r\nimport classNames from \"classnames\";\r\nconst currentYear = new Date().getFullYear();\r\nconst CopyrightSection = props => {\r\n const { className } = props;\r\n const show = window.flags.showCopyright;\r\n \r\n const copyrightClick=()=>{\r\n // AppAnalytics.sendCopyrightClick().then().catch(error=>{\r\n // console.log(\" AppAnalytics CopyrightClick ~ error\", error)\r\n // });\r\n }\r\n return (\r\n \r\n {window.flags.catalogViews.map(item => (\r\n {\r\n dispatch({ type: visualizationsActions.SET_ACTIVE_NODE, payload: item });\r\n dispatch({\r\n type: visualizationsActions.SET_VIEW_MODE,\r\n payload: visViewModes.CATALOG_VIEW\r\n });\r\n }}\r\n />\r\n ))}\r\n
\r\n \r\n {show && ( //flags global\r\n \r\n )}\r\n {\"Explorug.com ©2010-\"+currentYear+' '}\r\n \r\n Alternative Technology\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default CopyrightSection;\r\n","import React from \"react\";\r\nimport { useDesignListState } from \"../../../reducers/designlist.reducer\";\r\n\r\nimport strings from \"../../../strings\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\n\r\nconst FavoriteButton = props => {\r\n const { handleFavorite, buttonID = \"at-des-details__title-favorite\" } = props;\r\n const { flags } = window;\r\n const designListState = useDesignListState();\r\n\r\n return (\r\n <>\r\n {window.sessionStorage.getItem(\"mode\") !== \"stripedesign\" && (\r\n {text}
\r\n \r\n );\r\n};\r\n\r\nexport default OrdersheetButton;\r\n","import React from \"react\";\r\nimport {\r\n useDesignDetailState,\r\n useDispatchDesignDetail,\r\n designDetailActions\r\n} from \"../../../reducers/designdetails.reducer\";\r\nimport { ButtonGroup, MenuItem, Menu, Popover } from \"@blueprintjs/core\";\r\nimport { getFromSessionStorage } from \"../../../utils/domUtils\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\nimport { useUiDispatch, mainUiActions } from \"../../../reducers/mainui.reducer\";\r\nimport AppProvider from \"../../../api/appProvider\";\r\nimport { useDispatchColorList, colorListActions } from \"../../../reducers/colors.reducer\";\r\nimport strings from \"../../../strings\";\r\nimport classNames from \"classnames\";\r\nimport { useDesignListState } from \"../../../reducers/designlist.reducer\";\r\nimport { getAllFiles } from \"../../../utils/treeutils\";\r\nimport FavoriteButton from \"./FavoriteButton\";\r\nimport DownloadImageButton from \"./DownloadImageButton\";\r\nimport OrdersheetButton from \"../../templates/OrderSheet/OrdersheetBtn\";\r\nimport { flaginCurrentMode } from \"../../pages/EntryPage/defaultflags\";\r\n\r\nconst clearCacheModes = {\r\n DESIGNS: \"designs\",\r\n ALLDESIGNS: \"alldesigns\",\r\n OTHER: \"other\",\r\n TEXTURE: \"texture\",\r\n COLOR: \"color\",\r\n ROOMS: \"rooms\",\r\n ALLROOMS: \"allrooms\"\r\n};\r\nconst DesignDetailControls = props => {\r\n const {\r\n handleRugShare,\r\n handleFavorite,\r\n handleDownloadImage,\r\n parentID = \"at-des-details__title\"\r\n } = props;\r\n const { flags, InterfaceElements } = window;\r\n const designDetailState = useDesignDetailState();\r\n const designListState = useDesignListState();\r\n const dispatchUiState = useUiDispatch();\r\n const dispatchColorListState = useDispatchColorList();\r\n const dispatchDesignDetailState = useDispatchDesignDetail();\r\n const { fullpath } = designDetailState;\r\n\r\n let langOptions = flags.language.langOptions;\r\n let langFromUrl = getFromSessionStorage(\"lang\");\r\n\r\n let defLang = langFromUrl && langFromUrl !== \"\" ? langFromUrl : \"en\";\r\n if (langOptions && langOptions.length) {\r\n defLang = langFromUrl && langFromUrl !== \"\" ? langFromUrl : langOptions[0].val || null;\r\n if (!defLang) {\r\n defLang = \"en\";\r\n langOptions = [];\r\n window.flags.language.langOptions = [];\r\n }\r\n }\r\n const rugshareCondition = InterfaceElements.IsAdmin\r\n ? InterfaceElements.ShowRugshare\r\n : InterfaceElements.ShowRugshare && flags.hasRugshare;\r\n\r\n const handleClearCache = mode => {\r\n let files;\r\n if (mode === clearCacheModes.DESIGNS) {\r\n files = [fullpath];\r\n const { similarDesignsFolder } = designListState;\r\n if (similarDesignsFolder.files.length) {\r\n const paths = similarDesignsFolder.files.map(item => item.fullPath);\r\n files.push(...paths);\r\n }\r\n if (similarDesignsFolder.children) {\r\n const similarFiles = getAllFiles(similarDesignsFolder.children) || [];\r\n files.push(...similarFiles.map(item => item.fullPath));\r\n }\r\n }\r\n //console.log(\"files\", files);\r\n AppProvider.clearCache({ mode, files }).then(async () => {\r\n switch (mode) {\r\n case clearCacheModes.COLOR:\r\n const colors = await AppProvider.fetchColorList({});\r\n dispatchColorListState({ type: colorListActions.SET_COLORS, payload: colors });\r\n break;\r\n case clearCacheModes.DESIGNS:\r\n const newDesignDetails = await AppProvider.getDesignThumbnails({\r\n designs: [{ fullPath: fullpath }]\r\n });\r\n dispatchDesignDetailState({\r\n type: designDetailActions.SET_DETAILS,\r\n payload: {\r\n ...newDesignDetails[0],\r\n label: designDetailState.designName,\r\n designDetails: newDesignDetails[0].designProps\r\n }\r\n });\r\n break;\r\n case clearCacheModes.TEXTURE:\r\n await AppProvider.clearCache({ mode: clearCacheModes.ALLDESIGNS });\r\n break;\r\n default:\r\n break;\r\n }\r\n dispatchUiState({\r\n type: mainUiActions.SET_TOAST_PROPS,\r\n payload: { message: `Cache Cleared for ${mode}`, intent: \"success\" }\r\n });\r\n });\r\n };\r\n const handleQuickShare = () => {\r\n dispatchUiState({ type: mainUiActions.SET_SHOW_QUICKLINK_DIALOG, payload: true });\r\n };\r\n const hasLangOptions = flags.language.langOptions.length && flags.language.langOptions[0] !== \"\";\r\n\r\n return (\r\n <>\r\n\r\n {showPrice && (\r\n <>\r\n {price.Value.lastIndexOf(\"%\") >= 0 ? (\r\n
\r\n );\r\n};\r\n\r\nPriceOrDimension.propTypes = {\r\n \r\n};\r\n\r\nexport default PriceOrDimension;","import React, { useState, useEffect } from \"react\";\r\nimport { useDesignListState } from \"../../../reducers/designlist.reducer\";\r\nimport draftToHtml from \"draftjs-to-html\";\r\n\r\nconst DesignStory = props => {\r\n const designListState = useDesignListState();\r\n const { similarDesignsFolder } = designListState;\r\n const [storyHtml, setStoryHtml] = useState(null);\r\n useEffect(() => {\r\n const rawStory = similarDesignsFolder.story;\r\n let html = \"\";\r\n if (rawStory) {\r\n html = draftToHtml(rawStory);\r\n }\r\n setStoryHtml(html);\r\n }, [similarDesignsFolder]);\r\n\r\n return (\r\n \r\n {price.Value} {strInPrice}\r\n
\r\n ) : (\r\n\r\n {price.Currency}\r\n {parseFloat(price.Value)}\r\n
\r\n )}\r\n \r\n )}\r\n {showPrice && showDesignDimensions ? (\r\n{designDimensionsStr}
\r\n )}\r\n\r\n \r\n
\r\n );\r\n};\r\n\r\nDesignStory.propTypes = {};\r\n\r\nexport default DesignStory;\r\n","import React, { useState } from \"react\";\r\nimport { useDesignDetailState } from \"../../../reducers/designdetails.reducer\";\r\nimport { H4, MenuItem, Menu, Popover, Icon, H6 } from \"@blueprintjs/core\";\r\nimport { getDesignDimensionsString, getDesignPathInTitle } from \"../../../utils/utils\";\r\n\r\nimport { getFromSessionStorage } from \"../../../utils/domUtils\";\r\nimport { useUiDispatch, mainUiActions } from \"../../../reducers/mainui.reducer\";\r\nimport strings from \"../../../strings\";\r\nimport DesignDetailControls from \"./DesignDetailControls\";\r\nimport PriceOrDimension from \"../../molecules/PriceOrDimension\";\r\nimport { renderDesignName } from \"../../../utils/stringUtils\";\r\nimport { getDesignName } from \"../../../utils/treeutils\";\r\nimport DesignStory from \"../../molecules/DesignStory\";\r\n\r\nconst DesignDetailSection = props => {\r\n const { price, handleRugShare, handleFavorite, handleDownloadImage } = props;\r\n const { flags, InterfaceElements } = window;\r\n const designDetailState = useDesignDetailState();\r\n const dispatchUiState = useUiDispatch();\r\n const { designDetails, designName, fullpath } = designDetailState;\r\n\r\n let langOptions = flags.language.langOptions;\r\n let langFromUrl = getFromSessionStorage(\"lang\");\r\n let defLang = langFromUrl && langFromUrl !== \"\" ? langFromUrl : \"en\";\r\n if (langOptions && langOptions.length) {\r\n defLang = langFromUrl && langFromUrl !== \"\" ? langFromUrl : strings.getLanguage() || null;\r\n if (!defLang) {\r\n defLang = \"en\";\r\n langOptions = [];\r\n window.flags.language.langOptions = [];\r\n }\r\n }\r\n const [currentLanguage, setCurrentLanguage] = useState(defLang);\r\n\r\n const renderTitleHeading = (\r\n replaceDesignNameTildeWithNextLine,\r\n showDesignPathInTitle,\r\n fullpath\r\n ) => {\r\n return replaceDesignNameTildeWithNextLine ? (\r\n \r\n
\r\n ) : (\r\n \r\n {designName?.includes(\"~\") ? designName?.split(\"~\")[0] : designName}\r\n
\r\n\r\n {designName?.includes(\"~\") ? designName?.split(\"~\")[1] : \"\"}\r\n
\r\n\r\n {showDesignPathInTitle ? getDesignPathInTitle(fullpath) : renderDesignName(designName)}\r\n
\r\n );\r\n };\r\n\r\n const showPrice =\r\n flags.hasOrderSheet &&\r\n (InterfaceElements.ShowPrice || window.flags.designDetailSection.showDesignExhibitionPrice) &&\r\n parseFloat(price.Value) > 0;\r\n const showDesignInfo = designDetails.DesignInfo && designDetails.DesignInfo !== \"\";\r\n const handleLanguageOptionChange = i => {\r\n const newLanguage = flags.language.langOptions[i].val;\r\n setCurrentLanguage(newLanguage);\r\n dispatchUiState({ type: mainUiActions.SET_LANGUAGE, payload: newLanguage });\r\n strings.setLanguage(newLanguage);\r\n if (langFromUrl && langFromUrl !== \"\") sessionStorage.setItem(\"lang\", newLanguage);\r\n };\r\n const hasLangOptions = flags.language.langOptions.length && flags.language.langOptions[0] !== \"\";\r\n\r\n const getCurrentLanguageText = () => {\r\n var index = flags.language.langOptions.findIndex(item => item.val === currentLanguage);\r\n const currentLanguageText = flags.language.langOptions[index].text;\r\n return currentLanguageText;\r\n };\r\n return (\r\n <>\r\n\r\n {renderTitleHeading(\r\n flags.designDetailSection.designNameTildeWithNextLine,\r\n flags.designDetailSection.showDesignPathInTitle,\r\n fullpath\r\n )}\r\n\r\n {hasLangOptions ? (\r\n \r\n {flags.accountSpecific.jaipurrugs.showCodeUnderDesignName && fullpath && (\r\n
\r\n\r\n {/* {!flags.colorSeparatedTexture &&\r\n InterfaceElements.IsAdmin &&\r\n designDetailState.designDetails.DesignColors && (\r\n \r\n {/* language.text)}\r\n defaultItemIndex={flags.language.langOptions.findIndex(\r\n item => item.val === currentLanguage\r\n )}\r\n onChange={i => handleLanguageChange(i)}\r\n /> */}\r\n \r\n {flags.language.langOptions.map((language, i) => (\r\n handleLanguageOptionChange(i)}\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 ) : null}\r\n\r\n \r\n {getCurrentLanguageText()}\r\n
\r\n \r\n \r\n {\" \"}\r\n CODE: \r\n {getDesignName(fullpath).split(\"~\")[0]}\r\n
\r\n )}\r\n\r\n item[1])}\r\n onChange={handleTextureChange}\r\n defaultItemIndex={designDetailState.designDetails.DesignColors[0].Material}\r\n />\r\n
\r\n )} */}\r\n {flags.interface.showStory.design && (\r\n <>\r\n View Design As
\r\n\r\n {renderTitleHeading(\r\n flags.designDetailSection.designNameTildeWithNextLine,\r\n flags.designDetailSection.showDesignPathInTitle,\r\n fullpath\r\n )}\r\n {/*
\r\n )}\r\n {showDesignInfo && (\r\n \r\n {flags.designDetailSection.showDesignPathInTitle\r\n ? getDesignPathInTitle(fullpath)\r\n : renderDesignName()}\r\n
*/}\r\n{designDetails.DesignInfo}
\r\n )}\r\n \r\n );\r\n};\r\nexport default DesignDetailSection;\r\n","import React, { useEffect, useState } from \"react\";\r\nimport AtRadio from \"../../atoms/AtRadio\";\r\nimport {\r\n useDispatchordersheetDetail,\r\n ordersheetDetailActions,\r\n useOrdersheetDetailState\r\n} from \"../../../reducers/ordersheetdetails.reducer\";\r\n\r\nconst AllInOneMatSelection = props => {\r\n const dispatchOrdersheetDetail = useDispatchordersheetDetail();\r\n const ordersheetDetailState = useOrdersheetDetailState();\r\n\r\n const { groupLabel = \"\", handleChange, selectedValue, radioLabels, radioValues, formFieldAssociated='' } = props;\r\n\r\n\r\n // const selectedAllinOneMat = ordersheetDetailState.accountSpecific.allInOneMaterialSelectionValue;\r\n \r\n const getValueFromFormField = ()=>{\r\n if(formFieldAssociated ==='') return '';\r\n if(ordersheetDetailState.formFields && ordersheetDetailState.formFields.fields&& ordersheetDetailState.formFields.fields.length>0){\r\n const formfield = ordersheetDetailState.formFields.fields.filter((formfield)=> formfield.fieldName.toLowerCase()=== formFieldAssociated.toLowerCase());\r\n return formfield[0].fieldValue ||'';\r\n }\r\n else return \"\";\r\n }\r\n const chosenVal = getValueFromFormField();\r\n let selectedAllinOneMat = chosenVal ===''? \r\n ordersheetDetailState.accountSpecific.allInOneMaterialSelectionValue: chosenVal;\r\n \r\n \r\n const [RugOption, setRugOption] = useState(\r\n selectedAllinOneMat === \"\" ? selectedValue || radioValues[0] : selectedAllinOneMat\r\n );\r\n\r\n const onChange = event => {\r\n setRugOption(event.currentTarget.value);\r\n dispatchOrdersheetDetail({\r\n type: ordersheetDetailActions.SET_MATERIAL_SELECTIONVALUE,\r\n payload: event.currentTarget.value\r\n });\r\n if (handleChange) handleChange(event.currentTarget.value);\r\n };\r\n useEffect(() => {\r\n if (!selectedAllinOneMat || selectedAllinOneMat === \"\")\r\n dispatchOrdersheetDetail({\r\n type: ordersheetDetailActions.SET_MATERIAL_SELECTIONVALUE,\r\n payload: selectedValue || radioValues[0]\r\n });\r\n }, [radioValues]);\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nAllInOneMatSelection.propTypes = {};\r\n\r\nexport default AllInOneMatSelection;\r\n","import { Icon, Menu, MenuItem, Popover } from \"@blueprintjs/core\";\r\nimport React from \"react\";\r\nimport strings from \"../../../strings\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\nimport { useDesignDetailState } from \"../../../reducers/designdetails.reducer\";\r\n\r\nconst AutoColor = props => {\r\n const {\r\n showAutoColorDropdown,\r\n handleAutoRecolor,\r\n autoColorOptions,\r\n onOptionClick,\r\n allowPaletteFromImage,\r\n handlePaletteFromFileInput\r\n } = props;\r\n const designDetailState = useDesignDetailState();\r\n const onPaletteFromFileClick = e => {\r\n if (handlePaletteFromFileInput) handlePaletteFromFileInput(e);\r\n };\r\n return (\r\n \r\n \r\n setIsCollapsed(!isCollapsed)}\r\n />\r\n )}\r\n\r\n {(window.flags.colorCustomizationTools.showColorCustomizationTools ||\r\n window.InterfaceElements.IsAdmin) && (\r\n \r\n {(window.flags.colorCustomizationTools.showMapColors ||\r\n window.InterfaceElements.IsAdmin) && (\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n {flaginCurrentMode(\r\n window.InterfaceElements.IsAdmin,\r\n window.flags.colorCustomizationTools.showColorCustomizationTools\r\n ) && (\r\n \r\n {window.flags.colorCustomizationTools.addShuffleColors && (\r\n \r\n )}\r\n
\r\n {!uiState.allowColorCustomization && (\r\n {strings.color.colorCustomization}
\r\n \r\n {casFlags.isCollapsible && (\r\n\r\n Please specify rugsize before color customization\r\n
\r\n )}\r\n {renderDesignColorOptions}\r\n {casFlags.hasAllInOneMaterialSelection && (\r\n\r\n \r\n
\r\n )}\r\n {window.flags.showMasterCarvingAsCheckbox && !isCollapsed ? (\r\n \r\n {designDetails.DesignColors &&\r\n designDetails.DesignColors.map((designColor, index) => (\r\n setColorSelectionVisible(false)}\r\n onColorSelectionOpen={() => setColorSelectionVisible(true)}\r\n onColorPieClick={handleColorPieClick}\r\n totalKnots={totalKnots}\r\n isOneActMainColor={isOneActMainColor(index)}\r\n showColorSelection={!(uiState.isOneActFolder && index === 3)}\r\n handleOneActMainColorChange={handleOneActMainColorChange}\r\n showColorPercent={showColorPercent}\r\n />\r\n ))}\r\n
\r\n \r\n \r\n \r\n );\r\n};\r\nexport default ColorAreaSwatch;\r\n","import React, { useEffect } from \"react\";\r\nimport AtButton from \"../AtButton\";\r\nconst AtSizeDropdown = ({ handleCustomSize, handleSizeChange, dropDownValue, designSizes }) => {\r\n const defaultUnit = window.flags.defaultUnit;\r\n const minmaxCm = window.flags.createYourRug.enableCustomSize.minMaxCustomSizeCm;\r\n const minmaxFt = window.flags.createYourRug.enableCustomSize.minMaxCustomSizeFt;\r\n\r\n useEffect(() => {\r\n const inputs = document.querySelectorAll(\".checkVal\");\r\n const inputsInch = document.querySelectorAll(\".checkValForInch\");\r\n\r\n inputs.forEach(input => {\r\n input.addEventListener(\"blur\", function() {\r\n const minValue = parseInt(this.min);\r\n const maxValue = parseInt(this.max);\r\n if (this.value < minValue) {\r\n this.value = minValue; // Reset to min if lower value is entered\r\n }\r\n if (this.value > maxValue) {\r\n this.value = maxValue; // Reset to max if higher value is entered\r\n }\r\n });\r\n });\r\n inputsInch.forEach(input => {\r\n input.addEventListener(\"blur\", function() {\r\n const minValue = parseInt(this.min);\r\n const maxValue = parseInt(this.max);\r\n if (this.value < minValue) {\r\n this.value = minValue; // Reset to min if lower value is entered\r\n }\r\n if (this.value > maxValue) {\r\n this.value = maxValue; // Reset to max if higher value is entered\r\n }\r\n });\r\n });\r\n }, []);\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AtSizeDropdown;\r\n","import React, { useEffect, useRef, useState } from \"react\";\r\nimport {\r\n useDesignListState,\r\n useDispatchDesignList,\r\n designListActions\r\n} from \"../../../reducers/designlist.reducer\";\r\nimport classNames from \"classnames\";\r\nimport ReactGA from \"react-ga\";\r\nimport Thumbnail from \"../../molecules/Thumbnail\";\r\nimport { SectionHeading } from \"../../molecules/CustomCollapse\";\r\nimport AppProvider from \"../../../api/appProvider\";\r\nimport {\r\n useDispatchDesignDetail,\r\n designDetailActions,\r\n useDesignDetailState\r\n} from \"../../../reducers/designdetails.reducer\";\r\nimport { doesStringMatch } from \"../../../utils/utils\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\nimport strings from \"../../../strings\";\r\nimport { processDesignPath, trimString } from \"../../../utils/treeutils\";\r\nimport {\r\n useDispatchVisualization,\r\n visualizationsActions\r\n} from \"../../../reducers/visualizations.reducer\";\r\nimport { pageViews, useUiState } from \"../../../reducers/mainui.reducer\";\r\nimport AtIcon from \"../../atoms/AtIcon\";\r\nimport AtSizeDropdown from \"../../atoms/AtSizeDropdown\";\r\n\r\nconst DesignVariations = props => {\r\n const {\r\n initDesignColors,\r\n initDesignPath,\r\n initDesignVariation,\r\n initShapeVariation,\r\n triggeredDesign\r\n } = window.initialData;\r\n const { scrollIntoView } = props;\r\n const designListState = useDesignListState();\r\n const dispatchDesignList = useDispatchDesignList();\r\n const dispatchDesignDetails = useDispatchDesignDetail();\r\n const designDetailsState = useDesignDetailState();\r\n const dispatchVisState = useDispatchVisualization();\r\n const uiState = useUiState();\r\n const thumbContainerRef = useRef(null);\r\n const {\r\n similarDesignsFolder,\r\n selectedFile,\r\n activeVariation,\r\n activeShape,\r\n activeColorScheme\r\n } = designListState;\r\n const cyrFlags = window.flags.createYourRug;\r\n const isCustomSizeEnabled = cyrFlags.enableCustomSize.customizeSizeAndColor;\r\n const designSizes = cyrFlags.enableCustomSize.availableDesignSizes;\r\n const minmaxFt = cyrFlags.enableCustomSize.minMaxCustomSizeFt;\r\n\r\n const [dropDownValue, setDropdownValue] = useState(designSizes[0]);\r\n const [shapesCollapsed, setShapesCollapsed] = useState(\r\n !window.flags.designVariations.expandShapeVariations &&\r\n uiState.pageView !== pageViews.CREATEYOURRUG\r\n );\r\n const [colorSchemesCollapsed, setColorSchemesCollapsed] = useState(\r\n !window.flags.designVariations.expandColorVariations &&\r\n uiState.pageView !== pageViews.CREATEYOURRUG\r\n );\r\n const [variationsCollapsed, setVariationsCollapsed] = useState(\r\n !window.flags.designVariations.expandVariations && uiState.pageView !== pageViews.CREATEYOURRUG\r\n );\r\n\r\n const [similarColors, setSimilarColors] = useState({ files: [], children: [] });\r\n const [similarShapes, setSimilarShapes] = useState({ files: [], children: [] });\r\n const [similarDesigns, setSimilarDesigns] = useState({ files: [], children: [] });\r\n const setActiveVariation = variation => {\r\n dispatchDesignList({ type: designListActions.SET_ACTIVE_VARIATION, payload: variation });\r\n };\r\n const setActiveColorScheme = colorScheme => {\r\n dispatchDesignList({ type: designListActions.SET_ACTIVE_COLOR_SCHEME, payload: colorScheme });\r\n };\r\n const setactiveShape = shape => {\r\n dispatchDesignList({ type: designListActions.SET_ACTIVE_SHAPE, payload: shape });\r\n };\r\n const {\r\n containsOriginalDesign,\r\n putOriginalFirst,\r\n useOriginalName\r\n } = window.flags.designVariations;\r\n const getDesProps = defaultVar => {\r\n if (initDesignColors)\r\n return {\r\n ...defaultVar,\r\n designProps: { ...defaultVar.designProps, DesignColors: initDesignColors }\r\n };\r\n else return defaultVar;\r\n };\r\n const showOriginalDesign = () => {\r\n if (!activeColorScheme.id) return;\r\n setActiveColorScheme({});\r\n const detProps = !activeShape.id ? selectedFile : activeShape;\r\n let name = detProps.name;\r\n if (!doesStringMatch(name, selectedFile.name)) {\r\n name = `${selectedFile.name} ${trimString(name)}`;\r\n }\r\n handleThumbClick({ ...detProps, name });\r\n\r\n const similarShapes = similarDesignsFolder.children.find(\r\n item => item.name.toLowerCase() === \"shapes\"\r\n ) || { files: [] };\r\n setSimilarShapes(similarShapes);\r\n };\r\n\r\n useEffect(() => {\r\n let la = true;\r\n const loadThumbnails = async () => {\r\n if (similarDesignsFolder.files.length) {\r\n let resVar = similarDesignsFolder.files;\r\n //since we are rearranging the files, name should be set to null initially\r\n setSimilarDesigns({\r\n ...similarDesigns,\r\n files: resVar.map(item => ({ ...item, name: null }))\r\n });\r\n if (resVar.find(item => !item.thumbUrl))\r\n resVar = await AppProvider.getDesignThumbnails({\r\n designs: similarDesignsFolder.files\r\n });\r\n\r\n if (!la) return;\r\n const selectedFilNode = {\r\n ...selectedFile,\r\n name: window.flags.designVariations.sayOriginal\r\n ? strings.design.original\r\n : selectedFile.name\r\n };\r\n if (containsOriginalDesign) {\r\n if (putOriginalFirst) {\r\n const filterCondition = (a, b) => JSON.stringify(a) === JSON.stringify(b);\r\n const current = resVar.find(item =>\r\n filterCondition(item.designProps, selectedFile.designProps)\r\n );\r\n if (current) {\r\n const filteredResvar = resVar.filter(\r\n item => !filterCondition(item.designProps, selectedFile.designProps)\r\n );\r\n resVar = [current, ...filteredResvar];\r\n similarDesignsFolder.files = resVar;\r\n } else {\r\n resVar = [selectedFilNode, ...resVar];\r\n }\r\n }\r\n } else {\r\n resVar = [selectedFilNode, ...resVar];\r\n }\r\n resVar = resVar.filter(item => item.name != \"Original\");\r\n setSimilarDesigns({ ...similarDesigns, files: resVar });\r\n let defaultVar = containsOriginalDesign\r\n ? \"name\" in designListState.activeVariation\r\n ? designListState.activeVariation\r\n : resVar[0]\r\n : selectedFile;\r\n\r\n if (initDesignVariation && initDesignVariation !== \"\" && !activeVariation.id) {\r\n const varWProps = resVar.find(a => {\r\n return a.name.trim().toLowerCase() === initDesignVariation.toLowerCase();\r\n });\r\n //console.log(\"loadThumbnails -> varWProps\", varWProps);\r\n if (varWProps) defaultVar = varWProps;\r\n if (!la) return;\r\n handleThumbClick(getDesProps(defaultVar));\r\n }\r\n\r\n if (window.flags.designVariations.preserveVariations && activeVariation.id) {\r\n const varWProps = resVar.find(a => a.fullPath === activeVariation.fullPath);\r\n if (varWProps) defaultVar = varWProps;\r\n }\r\n if (containsOriginalDesign) {\r\n handleThumbClick(getDesProps(defaultVar));\r\n }\r\n if (!resVar.find(file => file.fullPath === activeVariation.fullPath))\r\n setActiveVariation(defaultVar);\r\n } else {\r\n const similarColors = similarDesignsFolder.children.find(\r\n item => item.name.toLowerCase() === \"colors\"\r\n ) || { files: [] };\r\n let similarShapes = similarDesignsFolder.children.find(\r\n item => item.name.toLowerCase() === \"shapes\"\r\n ) || { files: [] };\r\n\r\n setSimilarColors({ ...similarColors, files: similarColors.files });\r\n setSimilarShapes({ ...similarShapes, files: similarShapes.files });\r\n let activeColorVariation = activeColorScheme;\r\n\r\n if (similarColors.files.length) {\r\n let resCol = similarColors.files;\r\n const ind = similarDesignsFolder.children.findIndex(\r\n item => item.name.toLowerCase() === \"colors\"\r\n );\r\n similarDesignsFolder.children[ind].files = resCol;\r\n if (similarColors.files.find(file => !file.thumbUrl))\r\n resCol = await AppProvider.getDesignThumbnails({ designs: similarColors.files });\r\n if (!la) return;\r\n similarDesignsFolder.children[ind].files = resCol;\r\n const similarColors_new = { ...similarColors, files: resCol };\r\n setSimilarColors(similarColors_new);\r\n let defaultVar = containsOriginalDesign ? resCol[0] : {};\r\n let activeVar = resCol.find(file => file.fullPath === activeColorVariation.fullPath);\r\n if (defaultVar.id) handleThumbClick(getDesProps(defaultVar));\r\n if (initDesignVariation) {\r\n let activeColorVar = resCol.find(\r\n file => file.name.toLowerCase() === initDesignVariation.toLowerCase()\r\n );\r\n if (activeColorVar) {\r\n activeVar = activeColorVar;\r\n activeColorVariation = activeColorVar;\r\n setActiveColorScheme(activeVar);\r\n handleThumbClick(getDesProps(activeVar));\r\n }\r\n }\r\n if (!activeVar) setActiveColorScheme(defaultVar);\r\n } else if (containsOriginalDesign && selectedFile.id) {\r\n handleThumbClick(getDesProps(selectedFile));\r\n }\r\n\r\n if (similarShapes.files.length) {\r\n if (activeColorVariation.id) {\r\n const actFolder = similarColors.children.find(\r\n item => item.name.substr(1).toLowerCase() === activeColorVariation.name.toLowerCase()\r\n );\r\n if (actFolder) similarShapes = { ...similarShapes, files: actFolder.files };\r\n }\r\n let resShap = similarShapes.files;\r\n\r\n const ind = similarDesignsFolder.children.findIndex(\r\n item => item.name.toLowerCase() === \"shapes\"\r\n );\r\n similarDesignsFolder.children[ind].files = resShap;\r\n if (similarShapes.files.find(file => !file.thumbUrl))\r\n resShap = await AppProvider.getDesignThumbnails({ designs: similarShapes.files });\r\n if (!la) return;\r\n similarDesignsFolder.children[ind].files = resShap;\r\n setSimilarShapes({ ...similarShapes, files: resShap });\r\n\r\n let defaultVar = containsOriginalDesign ? resShap[0] : {};\r\n let selectedShape = resShap.find(file => file.name === activeShape.name);\r\n\r\n if (initShapeVariation) {\r\n selectedShape = resShap.find(a => {\r\n return a.name.trim().toLowerCase() === initShapeVariation.toLowerCase();\r\n });\r\n if (selectedShape) {\r\n defaultVar = selectedShape;\r\n setactiveShape(defaultVar);\r\n }\r\n }\r\n\r\n setTimeout(() => {\r\n if (defaultVar.id) handleThumbClick(getDesProps(defaultVar));\r\n }, 1000);\r\n if (!selectedShape) setactiveShape(defaultVar);\r\n }\r\n }\r\n };\r\n loadThumbnails();\r\n return () => {\r\n la = false;\r\n };\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [similarDesignsFolder, initDesignVariation, initShapeVariation]);\r\n\r\n useEffect(() => {\r\n if (!similarColors.files.length && !similarDesigns.files.length) return;\r\n\r\n if (similarColors.files.length) {\r\n handleInitDesignVarChange({\r\n variationList: similarColors.files,\r\n onVariationClick: handleColorSchemeThumbClick,\r\n onOrigClick: showOriginalDesign,\r\n initDesignVariation,\r\n treatOrigDifferently: true\r\n });\r\n } else if (similarDesigns.files.length) {\r\n handleInitDesignVarChange({\r\n variationList: similarDesigns.files,\r\n onVariationClick: onSimilarDesignThumbClick,\r\n initDesignVariation,\r\n treatOrigDifferently: false\r\n });\r\n }\r\n }, [initDesignVariation]);\r\n\r\n const handleInitDesignVarChange = ({\r\n variationList,\r\n onVariationClick,\r\n onOrigClick,\r\n initDesignVariation,\r\n treatOrigDifferently = false\r\n }) => {\r\n if (variationList.length) {\r\n let isVariation = initDesignVariation && initDesignVariation !== \"\";\r\n isVariation = treatOrigDifferently\r\n ? isVariation && initDesignVariation !== \"original\"\r\n : isVariation;\r\n\r\n //console.log('variationList', variationList)\r\n if (isVariation) {\r\n const activeVar = variationList.find(a => {\r\n //console.log(a, initDesignVariation, getDesignPathInTitle(a.fullPath));\r\n\r\n return a.name && a.name.trim().toLowerCase() === initDesignVariation.toLowerCase();\r\n });\r\n if (activeVar) {\r\n onVariationClick(activeVar);\r\n }\r\n } else if (\r\n treatOrigDifferently &&\r\n initDesignVariation &&\r\n initDesignVariation.toLowerCase() === \"original\"\r\n ) {\r\n if (triggeredDesign && triggeredDesign !== \"\") {\r\n let designPath = processDesignPath(triggeredDesign);\r\n const sp = designPath.split(\".\").filter(item => item && item !== \"\");\r\n const ext = sp[sp.length - 1];\r\n if (ext.toLowerCase() !== \"ctf\" && ext.toLowerCase() !== \"jpg\") {\r\n designPath = `${designPath}.${window.InterfaceElements.IsJpeg ? \"jpg\" : \"ctf\"}`;\r\n }\r\n if (designPath.toLowerCase() === selectedFile.fullPath.toLowerCase()) {\r\n if (onOrigClick) onOrigClick();\r\n }\r\n }\r\n }\r\n }\r\n };\r\n const handleThumbClick = details => {\r\n const { selectedFile } = designListState;\r\n const { name: originalName } = designListState.selectedFile;\r\n const { designProps, name, fullPath } = details;\r\n if (isCustomSizeEnabled && window.flags.homeTemplate === pageViews.CREATEYOURRUG) {\r\n if (details.name.includes(\" x \")) {\r\n const regex = /(\\d+) x (\\d+)/;\r\n const match = details.name.match(regex);\r\n const dimensions = match ? [parseInt(match[1]), parseInt(match[2])] : null;\r\n setDropdownValue(dimensions[0] + \" x \" + dimensions[1]);\r\n if (window.flags.defaultUnit == \"cm\") {\r\n document.getElementById(\"customSizeWidthCm\").value = parseInt(dimensions[0]);\r\n document.getElementById(\"customSizeHeightCm\").value = parseInt(dimensions[1]);\r\n } else {\r\n document.getElementById(\"customSizeWidthFt\").value = parseInt(dimensions[0]);\r\n document.getElementById(\"customSizeHeightFt\").value = parseInt(dimensions[1]);\r\n }\r\n }\r\n }\r\n let designDetails;\r\n if (initDesignPath !== fullPath) {\r\n designDetails = designProps;\r\n } else {\r\n designDetails = getDesProps(details).designProps;\r\n }\r\n ReactGA.ga(\"send\", \"event\", {\r\n eventCategory: \"View\", //required\r\n eventAction: \"Clicked Design Variation\", //required\r\n eventLabel: `Clicked on ${fullPath}`\r\n });\r\n const useOrigName = fullPath === selectedFile.fullPath || useOriginalName;\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_DETAILS,\r\n payload: {\r\n designDetails,\r\n label: useOrigName ? originalName : name,\r\n fullpath: fullPath,\r\n originalName,\r\n setCustomConversion: window.flags.ordersheet.customConversion.setCustomConversion || false,\r\n customInToCmFactor: window.flags.ordersheet.customConversion.customInToCmFactor\r\n }\r\n });\r\n if (window.flags.roomsControl.length && window.flags.checkRoomsControlForVariations) {\r\n updateRoomsList(fullPath);\r\n }\r\n };\r\n const customHandleThumbClick = async details => {\r\n if (designDetailsState.customSize.x == 0 || designDetailsState.customSize.y == 0) {\r\n handleThumbClick(details);\r\n return;\r\n }\r\n const { name: originalName } = designListState.selectedFile;\r\n const { name, fullPath } = details;\r\n const { x, y, closestName } = designDetailsState.customSize;\r\n const newname = replaceLastDimension(\r\n name,\r\n `${convertToNameForServer(designDetailsState.customSize.x)} x ${convertToNameForServer(\r\n designDetailsState.customSize.y\r\n )}`\r\n );\r\n\r\n await AppProvider.fetchCustomSizedDesign({\r\n widthRatio: x / parseInt(closestName.match(/(\\d+)\\s*x/)),\r\n heightRatio: y / parseInt(closestName.split(\" x \")[1]),\r\n file: replaceLastDimension(fullPath, closestName.match(/\\d+\\s*x\\s*\\d+/)[0]),\r\n newname: newname\r\n }).then(async res => {\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_CUSTOM_SIZE,\r\n payload: { ...designDetailsState.customSize, currentCustomSizeFilename: res }\r\n });\r\n await AppProvider.getDesignThumbnails({\r\n designs: [{ fullPath: res }]\r\n }).then(async res => {\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_DETAILS,\r\n payload: {\r\n designDetails: res[0].designProps,\r\n label: details.name,\r\n fullpath: res[0].fullPath,\r\n originalName: originalName,\r\n setCustomConversion:\r\n window.flags.ordersheet.customConversion.setCustomConversion || false,\r\n customInToCmFactor: window.flags.ordersheet.customConversion.customInToCmFactor\r\n }\r\n });\r\n });\r\n });\r\n };\r\n const collapseButtonClassNames = length => {\r\n const compareLength = length;\r\n // window.flags.designVariations.containsOriginalDesign\r\n // ? length - 1\r\n // : length;\r\n return classNames(\"at-collapse-button\", {\r\n \"has-morethan-3-children\": compareLength > 3 && compareLength < 5,\r\n \"has-3-children\": compareLength <= 3\r\n });\r\n };\r\n\r\n const updateRoomsList = fullpath => {\r\n dispatchVisState({\r\n type: visualizationsActions.FILTER_ILLUSTRATIONS_FOR_DESIGN,\r\n payload: fullpath\r\n });\r\n };\r\n\r\n const handleColorSchemeThumbClick = (colorScheme, similarColorsArr) => {\r\n const similarColorsValues = similarColorsArr ? similarColorsArr : similarColors;\r\n if (activeColorScheme.fullpath === colorScheme.fullPath || !colorScheme.fullPath) return;\r\n const actFolder = similarColorsValues.children.find(\r\n item => item.name.substr(1).toLowerCase() === colorScheme.name.toLowerCase()\r\n );\r\n AppProvider.getDesignThumbnails({ designs: actFolder.files }).then(shapes => {\r\n setSimilarShapes({ ...similarShapes, files: shapes });\r\n const shape = shapes.find(item => item.name === activeShape.name);\r\n if (shape) setactiveShape(shape);\r\n });\r\n\r\n if (!activeShape.id) {\r\n let name = colorScheme.name;\r\n if (!doesStringMatch(name, selectedFile.name)) {\r\n name = `${selectedFile.name} ${trimString(name)}`;\r\n }\r\n handleThumbClick({ ...colorScheme, name });\r\n } else {\r\n if (actFolder) {\r\n const act = actFolder.files.find(item => item.name === activeShape.name);\r\n if (!act) return;\r\n AppProvider.getDesignThumbnails({ designs: [act] }).then(its => {\r\n const it = its[0];\r\n let colorSchemeName = colorScheme.name;\r\n if (!doesStringMatch(colorScheme.name, selectedFile.name)) {\r\n colorSchemeName = `${colorSchemeName} ${trimString(colorSchemeName)}`;\r\n }\r\n let name;\r\n let shapeSchemeName = activeShape.name;\r\n if (!doesStringMatch(shapeSchemeName, selectedFile.name)) {\r\n name = `${colorSchemeName} ${trimString(shapeSchemeName)}`;\r\n } else {\r\n name = trimString(shapeSchemeName.replace(selectedFile.name, colorSchemeName));\r\n }\r\n if (isCustomSizeEnabled) {\r\n customHandleThumbClick({ ...it, name });\r\n } else {\r\n handleThumbClick({ ...it, name });\r\n }\r\n });\r\n }\r\n }\r\n setActiveColorScheme(colorScheme);\r\n };\r\n const onSimilarDesignThumbClick = similarDesign => {\r\n if (!similarDesign.designProps || similarDesign.fullPath === activeVariation.fullPath) return;\r\n setActiveVariation(similarDesign);\r\n let name = similarDesign.name;\r\n if (!doesStringMatch(name, selectedFile.name)) {\r\n name = `${selectedFile.name} ${trimString(name)}`;\r\n }\r\n handleThumbClick({ ...similarDesign, name });\r\n };\r\n\r\n const checkForScrollInCYR = view => {\r\n if (window.flags.homeTemplate === pageViews.CREATEYOURRUG) {\r\n scrollIntoView(view);\r\n }\r\n };\r\n const replaceLastDimension = (filename, replace) => {\r\n // Match the last occurrence of digits followed by 'x' and more digits\r\n let regex = /(\\d+\\s*x\\s*\\d+)(?![\\s\\S]*\\1)/;\r\n return filename.replace(regex, replace);\r\n };\r\n\r\n const formatFloatValue = floatValue => {\r\n return floatValue % 1 === 0 ? floatValue.toFixed(0) : floatValue.toFixed(1);\r\n };\r\n\r\n const convertToNameForServer = floatValue => {\r\n const feet = Math.floor(floatValue);\r\n const inches = Math.round((floatValue - feet) * 12);\r\n if (inches === 0) {\r\n return `${feet}`;\r\n } else {\r\n return `${feet}-${inches}`;\r\n }\r\n };\r\n\r\n const handleSizeChange = event => {\r\n setDropdownValue(event.target.value);\r\n const getSelectedSize = document.querySelector(`.thumb-title[title=\"${event.target.value}\"]`);\r\n if (getSelectedSize) {\r\n getSelectedSize.click();\r\n }\r\n };\r\n\r\n const handleCustomSize = async () => {\r\n let rawInput1, rawInput2;\r\n if (window.flags.defaultUnit == \"cm\") {\r\n rawInput1 = parseInt(document.getElementById(\"customSizeWidthCm\").value);\r\n rawInput2 = parseInt(document.getElementById(\"customSizeHeightCm\").value);\r\n } else {\r\n let widthFt = document.getElementById(\"customSizeWidthFt\").value;\r\n let heightFt = document.getElementById(\"customSizeHeightFt\").value;\r\n let widthElem = document.getElementById(\"customSizeWidthIn\");\r\n let heightElem = document.getElementById(\"customSizeHeightIn\");\r\n let widthIn = widthElem.value;\r\n let heightIn = heightElem.value;\r\n rawInput1 = parseInt(widthFt) + widthIn / 12;\r\n rawInput2 = parseInt(heightFt) + heightIn / 12;\r\n if (rawInput1 > minmaxFt.width[1]) {\r\n rawInput1 = parseInt(rawInput1);\r\n widthElem.value = 0;\r\n }\r\n if (rawInput2 > minmaxFt.height[1]) {\r\n rawInput2 = parseInt(rawInput2);\r\n heightElem.value = 0;\r\n }\r\n }\r\n if (isNaN(rawInput1) || isNaN(rawInput2) || rawInput1 == 0 || rawInput2 == 0) return;\r\n const elements = document.querySelectorAll(\r\n `.thumb-title[title*=\"${rawInput1} x ${rawInput2}\"]`\r\n );\r\n if (elements.length !== 0) {\r\n elements[0].click();\r\n return;\r\n }\r\n checkForScrollInCYR(cyrFlags.scrollToDesignViewAfterSimilarShapesOnClick);\r\n // Calculate the closest area\r\n let closestDesign = null;\r\n let minDiff = Infinity;\r\n const filteredDesigns = similarShapes.files.filter(design => design.name.includes(\" x \"));\r\n filteredDesigns.forEach(design => {\r\n const sourceWidth = parseInt(design.name.split(\"x\")[0].match(/\\d+/g)[0]);\r\n const sourceHeight = parseInt(design.name.split(\"x\")[1]);\r\n if (rawInput1 <= sourceWidth && rawInput2 <= sourceHeight) {\r\n const diff = Math.abs(rawInput1 - sourceWidth) + Math.abs(rawInput2 - sourceHeight);\r\n if (diff < minDiff) {\r\n minDiff = diff;\r\n closestDesign = design;\r\n }\r\n }\r\n });\r\n\r\n const newname = replaceLastDimension(\r\n closestDesign.name,\r\n `${convertToNameForServer(rawInput1)} x ${convertToNameForServer(rawInput2)}`\r\n );\r\n await AppProvider.fetchCustomSizedDesign({\r\n widthRatio:\r\n parseFloat(rawInput1) / parseInt(closestDesign.name.split(\" x \")[0].match(/\\d+/g)[0]),\r\n heightRatio: parseFloat(rawInput2) / parseInt(closestDesign.name.split(\" x \")[1]),\r\n file: closestDesign.fullPath,\r\n newname: newname\r\n }).then(async res => {\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_CUSTOM_SIZE,\r\n payload: {\r\n x: rawInput1,\r\n y: rawInput2,\r\n closestName: closestDesign.name,\r\n currentCustomSizeFilename: res,\r\n newname: `${convertToNameForServer(rawInput1)} x ${convertToNameForServer(rawInput2)}`\r\n }\r\n });\r\n await AppProvider.getDesignThumbnails({\r\n designs: [{ fullPath: res }]\r\n }).then(async res => {\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_DETAILS,\r\n payload: {\r\n designDetails: res[0].designProps,\r\n label: closestDesign.name,\r\n fullpath: res[0].fullPath,\r\n originalName: selectedFile.name,\r\n setCustomConversion:\r\n window.flags.ordersheet.customConversion.setCustomConversion || false,\r\n customInToCmFactor: window.flags.ordersheet.customConversion.customInToCmFactor\r\n }\r\n });\r\n });\r\n });\r\n closestDesign = null;\r\n };\r\n\r\n return (\r\n <>\r\n {similarDesignsFolder.files.length ? (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n Confirm\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n Width
\r\n {defaultUnit == \"cm\" ? (\r\n\r\n
\r\n ) : (\r\n \r\n
\r\n cm
\r\n\r\n
\r\n )}\r\n \r\n
\r\n ft
\r\n\r\n
\r\n in
\r\n\r\n
\r\n Length
\r\n\r\n {defaultUnit == \"cm\" ? (\r\n\r\n
\r\n ) : (\r\n \r\n
\r\n cm
\r\n\r\n
\r\n )}\r\n \r\n
\r\n ft
\r\n\r\n
\r\n in
\r\nCustomize
\r\n \r\n\r\n setVariationsCollapsed(!variationsCollapsed)}\r\n />\r\n }\r\n />\r\n \r\n {similarDesigns.files.map((similarDesign, i) => (\r\n {\r\n checkForScrollInCYR(cyrFlags.scrollToDesignViewAfterVariationOnClick);\r\n onSimilarDesignThumbClick(similarDesign);\r\n }}\r\n />\r\n ))}\r\n
\r\n \r\n ) : similarDesignsFolder.children.length ? (\r\n \r\n {similarColors.files.length ? (\r\n <>\r\n setColorSchemesCollapsed(!colorSchemesCollapsed)}\r\n />\r\n }\r\n />\r\n \r\n {cyrFlags.enableCustomSize.customizeColorBox &&\r\n window.flags.homeTemplate === pageViews.CREATEYOURRUG && (\r\n
\r\n )}\r\n {!containsOriginalDesign && (\r\n \r\n checkForScrollInCYR(\".cyr-detailView\")}\r\n >\r\n
\r\n \r\n \r\n
\r\n Customize your own color
\r\nU 2
\r\n \r\n{title}
;\r\n const handleToggleSidebar = () => {\r\n dispatchuiState({ type: mainUiActions.SET_SHOW_SIDEBAR, payload: { left: !showLeftSidebar } });\r\n };\r\n const handleFavorite = () => {\r\n dispatchuiState({\r\n type: mainUiActions.SET_SHOW_FAV_DIALOG,\r\n payload: true\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n window.dispatchEvent(new Event(\"resize\"));\r\n }, [showLeftSidebar]);\r\n const ecatMode = window.initialData.eCatalogDetails;\r\n\r\n const step1 = (\r\n\r\n {stepHeading(\"1: Choose a Design\")}\r\n
\r\n );\r\n const step2 = (\r\n \r\n {stepHeading(`${!ecatMode ? 2 : 1}: Choose an Illustration`)}\r\n
\r\n );\r\n const step3 = (\r\n \r\n
\r\n \r\n {stepHeading(`${!ecatMode ? 3 : 2}: Customize & Order`)}\r\n {window.flags.hasOrderSheet && window.flags.ordersheet.panel === \"right\" && (\r\n }>\r\n \r\n )}\r\n {!uiState.showOrderSheet && (\r\n <>\r\n
\r\n );\r\n const defaultLayout = (\r\n <>\r\n {!window.initialData.eCatalogDetails && step1}\r\n {step2}\r\n {step3}\r\n \r\n );\r\n return (\r\n \r\n
\r\n \r\n )}\r\n \r\n {getFromSessionStorage(\"showlogo\") !== 0 && (\r\n
\r\n \r\n
\r\n )}\r\n {strings.tagline}
\r\n \r\n {isMobileDevice ?
\r\n \r\n
\r\n \r\n );\r\n};\r\nconst TabContent = props => {\r\n const { price } = props;\r\n const [selectedTab, setSelectedTab] = useState(0);\r\n const uiState = useUiState();\r\n return (\r\n <>\r\n {!!uiState.showOrderSheet && (\r\n \r\n \r\n {window.InterfaceElements.IsAdmin &&
\r\n )}\r\n {strings.design.designs}
}\r\n >\r\n\r\n
\r\n \r\n }\r\n onClickCapture={() => setSelectedTab(1)}\r\n title={{strings.visualization.illustrations}
}\r\n >\r\n\r\n
\r\n \r\n }\r\n onClickCapture={() => setSelectedTab(2)}\r\n title={{strings.color.customize}
}\r\n >\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default LeftSidebarStepper;\r\n","import React from \"react\";\r\nimport { ButtonGroup } from \"@blueprintjs/core\";\r\nimport { useUiState, useUiDispatch, mainUiActions } from \"../../reducers/mainui.reducer\";\r\nimport AtButton from \"../atoms/AtButton\";\r\nimport {\r\n useDispatchVisualization,\r\n useVisualizationState,\r\n visualizationsActions,\r\n visViewModes\r\n} from \"../../reducers/visualizations.reducer\";\r\nimport { ReactComponent as CinematicSvg } from \"../atoms/AtIcon/video.svg\";\r\nimport DesignDetailControls from \"./DesignDetailSection/DesignDetailControls\";\r\nimport strings from \"../../strings\";\r\n\r\nconst SidebarActionButtons = props => {\r\n const {\r\n isFullScreen,\r\n handleFullScreen,\r\n handleCinematic,\r\n handleFavorite,\r\n handleDownloadImage,\r\n handleRugShare\r\n } = props;\r\n const uiState = useUiState();\r\n const dispatchUiState = useUiDispatch();\r\n\r\n const visualizationState = useVisualizationState();\r\n const dispatchVisualization = useDispatchVisualization();\r\n // const handleMyroomHelp = () => {\r\n // //dispatchMyroom({ type: myRoomActions.SHOW_WALKTHROUGH, payload: true });\r\n // window.open(\r\n // \"https://alternativetechnology.zendesk.com/hc/en-us/articles/900000724783\",\r\n // \"_blank\"\r\n // );\r\n // };\r\n const handleCloseMyRoom = () => {\r\n dispatchVisualization({\r\n type: visualizationsActions.SWITCH_PREV_VIEW\r\n });\r\n };\r\n const backtoDesignView = ()=>{\r\n dispatchVisualization({\r\n type: visualizationsActions.SET_VIEW_MODE,\r\n payload:visViewModes.DESIGN_VIEW_DEEPZOOM\r\n });\r\n }\r\n const showBackToDesignBtn = ()=>{\r\n let show =visualizationState.viewMode === visViewModes.ROOM_VIEW && \r\n window.flags.visualizations.designViews.includes(visViewModes.DESIGN_VIEW_DEEPZOOM) && \r\n window.flags.visualizations.showBackToDesignViewInRoomView;\r\n return show; \r\n }\r\n return (\r\nPrice Estimate Pin
\r\n \r\n \r\n
\r\n {incorrectPinAlert && (\r\n \r\n Wrong Pin number!\r\n
\r\n )}\r\n \r\n }\r\n >\r\n \r\n
\r\n\r\n );\r\n};\r\n\r\nSendToApp.propTypes = {\r\n label: PropTypes.string,\r\n message:PropTypes.string, \r\n buttonText: PropTypes.string\r\n};\r\n\r\nexport default SendToApp;","import React, { useState } from \"react\";\r\nimport AppProvider from \"../../../api/appProvider\";\r\nimport PropTypes from \"prop-types\";\r\nimport { Toaster, Toast } from \"@blueprintjs/core\";\r\nimport { useDesignDetailState } from \"../../../reducers/designdetails.reducer\";\r\nimport strings from \"../../../strings\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\n\r\nconst TearSheet = props => {\r\n const { type = \"tertiary\" } = props;\r\n const designDetailState = useDesignDetailState();\r\n const [toastProps, setToastProps] = useState(false);\r\n const handleTearSheet = () => {\r\n setToastProps(true);\r\n AppProvider.fetchCatalog({\r\n props: designDetailState.designDetails,\r\n file: designDetailState.fullpath,\r\n catalogName: window.flags.ordersheet.defaultTearsheetIndex\r\n }).then(file => {\r\n AppProvider.downloadCatalog({ file });\r\n });\r\n };\r\n\r\n return (\r\n <>\r\n {label}
\r\n \r\n
\r\n {showWarningText && {message}
}\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nTearSheet.propTypes = {\r\n type: PropTypes.string\r\n};\r\nTearSheet.defaultProps = {\r\n type: \"tertiary\"\r\n};\r\n\r\nexport default TearSheet;\r\n","import React, { Suspense, useEffect, useState } from \"react\";\r\nimport SidePanel from \"../SidePanel\";\r\nimport { mainUiActions, useUiDispatch, useUiState } from \"../../../reducers/mainui.reducer\";\r\nimport DesignDetailSection from \"../../organisms/DesignDetailSection\";\r\nimport { usePriceCalculator } from \"../../../hooks\";\r\nimport {\r\n useDesignDetailState,\r\n useDispatchDesignDetail,\r\n designDetailActions\r\n} from \"../../../reducers/designdetails.reducer\";\r\nimport Divider from \"../../atoms/Divider\";\r\nimport ColorAreaSwatch from \"../../molecules/ColorAreaSwatch\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\nimport strings from \"../../../strings\";\r\nimport AppProvider from \"../../../api/appProvider\";\r\nimport uuid from \"uuid\";\r\nimport classNames from \"classnames\";\r\nimport { convertUnit_Arr, displayAreaInFt } from \"../../../utils/utils\";\r\nimport { getFromSessionStorage } from \"../../../utils/domUtils\";\r\nimport { getExplorugData, postDetailsToParent } from \"../../../middleware/ordersheet.middleware\";\r\nimport {\r\n ordersheetDetailActions,\r\n useDispatchordersheetDetail,\r\n useOrdersheetDetailState\r\n} from \"../../../reducers/ordersheetdetails.reducer\";\r\nimport {\r\n useDesignListState,\r\n useDispatchDesignList,\r\n designListActions\r\n} from \"../../../reducers/designlist.reducer\";\r\nimport DesignVariations from \"../../organisms/DesignVariations\";\r\nimport { useMount } from \"react-use\";\r\nimport BrandLogo from \"../../molecules/BrandLogo\";\r\nimport SidebarActionButtons from \"../../organisms/SidebarActionButtons\";\r\nimport OrdersheetButton from \"../OrderSheet/OrdersheetBtn\";\r\nimport PriceEstimationBtn from \"../OrderSheet/PriceEstimationBtn\";\r\nimport { RugTechniques } from \"../OrderSheet/Davisrugs/DavisRugsOptions\";\r\nimport SaveOnServer from \"../../organisms/SaveOnServer\";\r\nimport DesignDetailControls from \"../../organisms/DesignDetailSection/DesignDetailControls\";\r\nimport SendToApp from \"../../molecules/SendToApp\";\r\nimport { getDesignName } from \"../../../utils/treeutils\";\r\nimport TearSheet from \"../../molecules/TearSheet\";\r\nimport { showOrdersheetOutside } from \"../../../utils/flagUtils\";\r\nconst OrderSheet = React.lazy(() => import(\"../OrderSheet\"));\r\n\r\nconst RightSidebarTabbed = props => {\r\n const { handleDownloadImage, handleCinematic, isFullScreen, handleFullScreen } = props;\r\n\r\n const uiState = useUiState();\r\n const designDetailState = useDesignDetailState();\r\n const { customFields } = designDetailState;\r\n\r\n const designListState = useDesignListState();\r\n const dispatchUiState = useUiDispatch();\r\n const dispatchDesignList = useDispatchDesignList();\r\n const dispatchDesignDetails = useDispatchDesignDetail();\r\n const dispatchOrdersheetDetail = useDispatchordersheetDetail();\r\n\r\n const ordersheetDetailState = useOrdersheetDetailState();\r\n\r\n const { showRightSidebar, isIdle } = uiState;\r\n const price = usePriceCalculator({\r\n ...designDetailState,\r\n showPrice: window.InterfaceElements.ShowPrice && !window.initialData.customDesignUrl\r\n });\r\n\r\n const [designPrice, setDesignPrice] = useState(null);\r\n const [showBuyNowButton, setShowBuyNowButton] = useState(false);\r\n const { hasCustomizationSteps } = window.flags.accountSpecific;\r\n\r\n const {\r\n setCustomConversion = false,\r\n customInToCmFactor\r\n } = window.flags.ordersheet.customConversion;\r\n\r\n const [currentStep, setCurrentStep] = useState(\r\n hasCustomizationSteps.hasStepwiseButtons ? hasCustomizationSteps.defaultStepNum : 0\r\n ); //for jaipur-like setup (stepwise customization)\r\n\r\n useMount(() => {\r\n if (showOrdersheetOutside()) {\r\n if (customFields.fields) {\r\n setOpenOrderSheet(true);\r\n return;\r\n }\r\n setCustomFieldsLoading(true);\r\n AppProvider.fetchCustomFieldOrdersheet()\r\n .then(data => {\r\n setCustomFieldsLoading(false);\r\n setCustomFields(data);\r\n setOpenOrderSheet(true);\r\n })\r\n .catch(err => {})\r\n .finally(() => {\r\n setCustomFieldsLoading(false);\r\n });\r\n }\r\n\r\n if (hasCustomizationSteps && hasCustomizationSteps.hasStepwiseButtons) {\r\n const handleMessage = e => {\r\n const { priceDetails } = e.data;\r\n if (priceDetails) {\r\n dispatchOrdersheetDetail({\r\n type: ordersheetDetailActions.SET_PRICEDETAILS_JAIPUR,\r\n payload: priceDetails\r\n });\r\n }\r\n };\r\n window.addEventListener(\"message\", handleMessage);\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (window.flags.showBuyNow) {\r\n checkDesignAvailability();\r\n }\r\n }, [designDetailState.originalName]);\r\n\r\n useEffect(() => {\r\n if (hasCustomizationSteps && hasCustomizationSteps.hasStepwiseButtons) {\r\n setCurrentStep(1);\r\n }\r\n }, [designDetailState.fullpath]);\r\n\r\n const setCustomFieldsLoading = value => {\r\n dispatchDesignDetails({ type: designDetailActions.SET_CUSTOM_FIELDS_LOADING, payload: value });\r\n };\r\n const setCustomFields = fields => {\r\n dispatchDesignDetails({ type: designDetailActions.SET_CUSTOM_FIELDS, payload: fields });\r\n };\r\n const setOpenOrderSheet = show =>\r\n dispatchUiState({ type: mainUiActions.SET_SHOW_ORDERSHEET, payload: show });\r\n const setOpenRugShare = show => {\r\n dispatchUiState({ type: mainUiActions.SET_SHOW_RUGSHARE, payload: show });\r\n };\r\n\r\n const handleToggleSidebar = () => {\r\n dispatchUiState({\r\n type: mainUiActions.SET_SHOW_SIDEBAR,\r\n payload: { right: !showRightSidebar }\r\n });\r\n };\r\n\r\n const handleCreateStripeDesign = () => {\r\n dispatchDesignDetails({ type: designDetailActions.SET_LOADING, payload: true });\r\n AppProvider.getStripedDesign().then(initialDesignPath => {\r\n const p = initialDesignPath.split(\"/\").filter(item => item && item !== \"\");\r\n const designNamewithExt = p[p.length - 1];\r\n const darr = designNamewithExt.split(\".\");\r\n let designName = darr.slice(0, darr.length - 1).join(\".\");\r\n\r\n const name = initialDesignPath.split(\"/\").find(item => item.substr(0, 1) === \".\");\r\n if (name) {\r\n designName = `${name.substr(1)} ${designName}`;\r\n }\r\n\r\n p.pop();\r\n const path = p.join(\"/\");\r\n AppProvider.getDesignThumbnails({ designs: [{ fullPath: initialDesignPath }] }).then(thum => {\r\n const thumbnail = thum[0];\r\n if (thumbnail.fullPath === initialDesignPath) {\r\n dispatchDesignList({\r\n type: designListActions.SELECT_DESIGN,\r\n payload: {\r\n id: uuid.v4(),\r\n name: designName,\r\n fullPath: initialDesignPath,\r\n location: path,\r\n type: \"file\",\r\n thumbUrl: thumbnail.thumbUrl,\r\n designProps: thumbnail.designProps\r\n }\r\n });\r\n }\r\n });\r\n });\r\n };\r\n const handleCheckStockItem = () => {\r\n const designName = getDesignName(designDetailState.fullpath);\r\n const designCode = designName.split(\"~\")[0];\r\n callParent(\"check stock item - \" + designCode);\r\n };\r\n const handleAddtoCart = (text = \"\") => {\r\n const {\r\n passDesignNameAsDesignId,\r\n passQualityFromFolderName,\r\n sendOrigDesignColors,\r\n passTotalArea\r\n } = window.flags.explorugData;\r\n getExplorugData({\r\n designDetailState: designDetailState,\r\n ordersheetDetailState: ordersheetDetailState,\r\n showPrice: window.InterfaceElements.ShowPrice,\r\n price: price,\r\n passDesignNameAsDesignId: passDesignNameAsDesignId,\r\n passQualityFromFolderName: passQualityFromFolderName,\r\n sendOrigDesignColors: sendOrigDesignColors,\r\n passTotalArea: passTotalArea,\r\n origDesignColors: designDetailState.history[0]\r\n ? designDetailState.history[0].designDetails.DesignColors\r\n : designDetailState.designDetails.DesignColors\r\n }).then(data => {\r\n if (text !== \"\") {\r\n data = Object.assign({}, data, { text: text });\r\n }\r\n postDetailsToParent(data);\r\n });\r\n };\r\n const handlePaypalBuy = () => {\r\n window.open(\r\n \"http://ramrodesigns.com/virtual-exibition/designpurchase.php?name=\" +\r\n designDetailState.originalName.replace(/ /g, \"_\") +\r\n \"&key=\" +\r\n sessionStorage.getItem(\"apikey\") +\r\n \"&client=ramro&status=purchase\",\r\n \"_blank\"\r\n );\r\n };\r\n const checkDesignAvailability = () => {\r\n if (!designDetailState.originalName || designDetailState.originalName === \"\") return;\r\n AppProvider.checkBuyAvailable({\r\n name: designDetailState.originalName.replace(/ /g, \"_\"),\r\n key: sessionStorage.getItem(\"apikey\"),\r\n client: window.flags.designDetailSection.exhibitorName || \"ramrodesigns\",\r\n status: \"check\"\r\n }).then(data => {\r\n const designData = data.indexOf(\"|\") > -1 ? data.split(\"|\") : data;\r\n const status = designData[0] || designData;\r\n\r\n const designRate = designData[1] || \"\";\r\n if (designRate !== \"\") {\r\n const designPriceJson = {\r\n Currency: designRate.split(\" \")[0] || \"\",\r\n Value: designRate.split(\" \")[1] || \"\"\r\n };\r\n setDesignPrice(designPriceJson);\r\n }\r\n if (status === 0 || status === \"0\") {\r\n console.log(\"no such design\");\r\n setShowBuyNowButton(false);\r\n } else if (status.toLowerCase() === \"available\") {\r\n setShowBuyNowButton(true);\r\n } else {\r\n setShowBuyNowButton(false);\r\n }\r\n });\r\n };\r\n const renderDesignColorInfoText = () => {\r\n let showThis = false;\r\n if (window.flags.showWarningInfoInFooter) {\r\n if (designDetailState.designDetails.DesignColors) {\r\n const DesignColors = designDetailState.designDetails.DesignColors;\r\n const collection = DesignColors[0].ColorName.split(\"-\")[1]; //colorname examples: \"1181-200-1\"\r\n const colorRow = DesignColors[0].ColorName.split(\"-\")[2];\r\n const sameCollection = DesignColors.every(\r\n color => color.ColorName.split(\"-\")[1] === collection\r\n );\r\n const sameColorRow = DesignColors.every(\r\n color => color.ColorName.split(\"-\")[2] === colorRow\r\n );\r\n showThis = !sameCollection || !sameColorRow;\r\n }\r\n }\r\n return (\r\n \r\n {window.flags.infoInFooter !== \"\" && (\r\n
\r\n )}\r\n \r\n );\r\n };\r\n\r\n const openCustomborderTool = () => {\r\n let key = sessionStorage.getItem(\"apikey\");\r\n let mat = 0,\r\n KLRatio = 1,\r\n kpu = 1,\r\n lpu = 1;\r\n const [wid, hgt] = convertUnit_Arr(designDetailState.designDetails.Unit, \"ft\", [\r\n designDetailState.designDetails.PhysicalWidth,\r\n designDetailState.designDetails.PhysicalHeight\r\n ]);\r\n\r\n if (window.flags.designSpecific && window.flags.designSpecific.length) {\r\n mat = designDetailState.designDetails.DesignColors[0].Material || 0;\r\n KLRatio = designDetailState.designDetails.KLRatio || 1;\r\n const PhysicalWidth = designDetailState.designDetails.PhysicalWidth;\r\n const PhysicalHeight = designDetailState.designDetails.PhysicalHeight;\r\n\r\n const [w, h] = convertUnit_Arr(designDetailState.designDetails.Unit, \"cm\", [\r\n PhysicalWidth,\r\n PhysicalHeight\r\n ]);\r\n kpu = (designDetailState.designDetails.Width / w).toFixed(4);\r\n lpu = (designDetailState.designDetails.Height / h).toFixed(4);\r\n }\r\n let matParams = mat + \"|\" + mat + \"|\" + mat;\r\n const params =\r\n \"?key=\" +\r\n key +\r\n \"&page=linkoutdoor&mat=\" +\r\n matParams +\r\n \"&innerborder=false&klratio=\" +\r\n KLRatio +\r\n \"&lpu=\" +\r\n lpu +\r\n \"&w=\" +\r\n wid +\r\n \"&h=\" +\r\n hgt +\r\n \"&unit=ft\" +\r\n \"&kpu=\" +\r\n kpu +\r\n \"&origborderdesign=\" +\r\n designDetailState.originalName;\r\n const url = window.flags.customBorderUrl + params;\r\n console.log(url);\r\n window.open(url, \"_self\");\r\n };\r\n const handleHistoryBack = () => {\r\n if (getGoBackString() === strings.tools.close) {\r\n window.parent.postMessage(\"close\", \"*\");\r\n } else {\r\n window.parent.postMessage(\"goback\", \"*\");\r\n window.history.back();\r\n }\r\n };\r\n const showCustomBorderTool = () => {\r\n if (!window.flags.designSpecific || !window.flags.designSpecific.length) return false;\r\n let showBorderTool = false;\r\n if (!designDetailState.originalName) return showBorderTool;\r\n if (window.flags.designSpecific && window.flags.designSpecific.length) {\r\n let currentDesign = window.flags.designSpecific.filter(\r\n elem => elem.name.toLowerCase() === designDetailState.originalName.toLowerCase()\r\n );\r\n if (currentDesign && currentDesign.length) {\r\n showBorderTool = currentDesign[0].showBorder === true ? true : false;\r\n }\r\n }\r\n showBorderTool = showBorderTool || getFromSessionStorage(\"customborder\");\r\n return showBorderTool;\r\n };\r\n const checkForColorCustomizationForFolder = () => {\r\n if (window.flags.colorAreaSwatch.hideColorCustomizationForSpecificFolder.length != 0) {\r\n const shouldHideColorCustomization = window.flags.colorAreaSwatch.hideColorCustomizationForSpecificFolder.some(\r\n folder => designListState.selectedFile?.location?.includes(folder)\r\n );\r\n if (shouldHideColorCustomization) return false;\r\n }\r\n return true;\r\n };\r\n const getGoBackString = () => {\r\n let str = strings.tools.goback;\r\n let gobacktext = getFromSessionStorage(\"gobacktext\");\r\n if (gobacktext && gobacktext !== \"\") {\r\n str = gobacktext.toLowerCase() === \"close\" ? strings.tools.close : strings.tools.goback;\r\n }\r\n return str;\r\n };\r\n const handleFavorite = () => {\r\n dispatchUiState({\r\n type: mainUiActions.SET_SHOW_FAV_DIALOG,\r\n payload: true\r\n });\r\n };\r\n\r\n const handleSteps = (stepNum = 0) => {\r\n if (!allowNextStep()) return;\r\n if (stepNum === 3 && uiState.allowColorCustomization) {\r\n handleAddtoCart();\r\n }\r\n setCurrentStep(stepNum);\r\n };\r\n const callParent = (message = \"\") => {\r\n if (message !== \"\") window.parent.postMessage(message, \"*\");\r\n };\r\n const getShape = () => {\r\n let shapeText = \"\";\r\n if (!ordersheetDetailState.formFields || !ordersheetDetailState.formFields.fields) {\r\n return shapeText;\r\n } else {\r\n const formFields = ordersheetDetailState.formFields.fields;\r\n\r\n const field = formFields.find(field => {\r\n return field.fieldName === window.flags.ordersheet.hasShapeOptions.customFieldId;\r\n });\r\n if (field) {\r\n shapeText = field.fieldValue || \"\";\r\n }\r\n }\r\n return shapeText;\r\n };\r\n const getPriceFromSession = () => {\r\n let priceDetails = ordersheetDetailState.priceDetails_Jaipur || \"\"; //getFromSessionStorage(\"priceDetails\") || \"\";\r\n let hasPriceDetails = priceDetails !== \"\" ? true : false;\r\n if (!hasPriceDetails) return hasPriceDetails;\r\n else {\r\n if (typeof priceDetails === \"string\") {\r\n try {\r\n priceDetails = JSON.parse(priceDetails) || \"\";\r\n } catch {\r\n priceDetails = \"\";\r\n }\r\n }\r\n if (priceDetails !== \"\" && typeof priceDetails === \"object\") {\r\n let leadtime = priceDetails.LeadTime ? (\r\n \r\n
\r\n ) : (\r\n <>\r\n );\r\n let priceValue = priceDetails.Price ? (\r\n Lead time
{priceDetails.LeadTime}
\r\n \r\n
\r\n ) : (\r\n <>\r\n );\r\n return (\r\n <>\r\n {leadtime} {priceValue}\r\n \r\n );\r\n } else return \"\";\r\n }\r\n };\r\n const allowNextStep = () => {\r\n const valid =\r\n uiState.allowColorCustomization &&\r\n displayAreaInFt(\r\n ordersheetDetailState.ordersheetDetails,\r\n setCustomConversion,\r\n customInToCmFactor\r\n ) > window.flags.ordersheet.hasMinAreaCriteria;\r\n return valid;\r\n };\r\n const renderOrdersheet = (\r\n {priceDetails.Price}
{\" \"}\r\n (Inclusive of all taxes. Shipping Free)
{\" \"}\r\n \r\n setOpenRugShare(true)}\r\n handleFavorite={handleFavorite}\r\n handleDownloadImage={handleDownloadImage}\r\n />\r\n {window.flags.accountSpecific.priceEstimation_davisLandings.checkKeyForPrice && (\r\n \r\n {hasCustomizationSteps && hasCustomizationSteps.hasStepwiseButtons && (\r\n
\r\n )}\r\n\r\n {showCustomBorderTool() && (\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n {hasCustomizationSteps.steps &&\r\n hasCustomizationSteps.steps.map((step, index) => (\r\n handleSteps(index + 1)}\r\n >\r\n
\r\n ))}\r\n {hasCustomizationSteps.steps && \r\n {currentStep - 1 > index ? (\r\n \r\n \r\n )}\r\n
\r\n\r\n {index + 1}
\r\n{step.text}
\r\n \r\n A one-to-one personal service with our in-house design team, who are on hand to\r\n help find the best rug for your space.\r\n
\r\n\r\n \r\n
\r\n Size
\r\n \r\n
\r\n \r\n {strings.ordersheet.height}\r\n
\r\n \r\n {strings.ordersheet.width}\r\n
\r\n \r\n
\r\n )}\r\n {designListState.selectedFolder && designListState.selectedFile && (\r\n \r\n
\r\n )}\r\n \r\n \r\n \r\n {currentStep === 1 && (\r\n setOpenRugShare(true)}\r\n handleFavorite={handleFavorite}\r\n handleDownloadImage={handleDownloadImage}\r\n parentID=\"at-parentMessage-buttons\"\r\n >\r\n
\r\n\r\n \r\n handleSteps(2)}\r\n />\r\n
\r\n )}\r\n {currentStep === 2 && (\r\n \r\n handleSteps(3)}\r\n />\r\n
\r\n )}\r\n {currentStep === 3 && (\r\n \r\n handleAddtoCart(\"Add To Cart\")}\r\n />\r\n
\r\n )}\r\n \r\n handleCheckStockItem()}\r\n />\r\n
\r\n \r\n {renderDesignColorInfoText()}\r\n {renderInfoText()}\r\n {window.flags.accountSpecific.sendToApp && (\r\n \r\n )}\r\n {window.flags.showBuyNow && (\r\n \r\n )}\r\n {displayOrderSheetButton() &&\r\n window.flags.ordersheet.panel === \"right\" &&\r\n !window.flags.ordersheet.showOrdersheetInNavbar && \r\n )}\r\n {window.InterfaceElements.IsAdmin && \r\n {window.flags.accountSpecific.priceEstimation_davisLandings.checkKeyForPrice && (\r\n
\r\n \r\n )}\r\n \r\n
\r\n )}\r\n \r\n
\r\n {strings.tagline}
\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);\r\n }}\r\n active={thumb.id === activeId}\r\n />\r\n ) : (\r\n onRemoveClicked && onRemoveClicked(thumb, index)}\r\n onThumbnailClick={() => {\r\n if (!onThumbnailClick) return;\r\n onThumbnailClick(thumb, index);\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, { useState, useEffect } from \"react\";\r\nimport ThumbList from \"../../molecules/ThumbList\";\r\nimport AppProvider from \"../../../api/appProvider\";\r\nimport PropTypes from \"prop-types\";\r\nimport AtIcon from \"../../atoms/AtIcon\";\r\nimport strings from \"../../../strings\";\r\nimport { useMount } from \"react-use\";\r\nimport {\r\n useDesignListState,\r\n useDispatchDesignList,\r\n designListActions\r\n} from \"../../../reducers/designlist.reducer\";\r\nimport { mainUiActions, useUiDispatch } from \"../../../reducers/mainui.reducer\";\r\nconst FAVORITE_DESIGNS = \"favorite designs\";\r\nconst Favorites = () => {\r\n const { initDesignPath, eCatalogDetails } = window.initialData;\r\n\r\n const [favs, setFavs] = useState(null);\r\n const { selectedFile, favorites } = useDesignListState();\r\n const dispatchDesignList = useDispatchDesignList();\r\n const uiDispatch = useUiDispatch();\r\n // const { defaultQualityIndex } = window.flags;\r\n const { CurrentUserID } = window.InterfaceElements;\r\n useMount(() => {\r\n let favoriteDesigns = JSON.parse(localStorage.getItem(FAVORITE_DESIGNS)) || [];\r\n let getPageName = sessionStorage.getItem(\"page\");\r\n if (getPageName == \"undefined\") {\r\n getPageName = sessionStorage.getItem(\"username\");\r\n }\r\n let favoriteDesignsFromPage =\r\n JSON.parse(localStorage.getItem(FAVORITE_DESIGNS + \"-\" + getPageName)) || [];\r\n let favorites = [...favoriteDesigns, ...favoriteDesignsFromPage];\r\n favorites = favorites.filter(item => item.currentUserID === CurrentUserID);\r\n // *for backward compatibility;\r\n // old node:\r\n // const favNode = {\r\n // currentUserID: window.window.InterfaceElements.CurrentUserID,\r\n // label: newName,\r\n // id: uuid.v4(),\r\n // Thumb: null,\r\n // fullpath: designDetailState.fullpath,\r\n // designDetails: designDetailState.designDetails,\r\n // customizationFlag: designDetailState.customizationFlag,\r\n // hash: designDetailState.hash,\r\n // view: visState.activeNode.FullPath\r\n // };\r\n favorites = favorites.map(item => ({\r\n ...item,\r\n name: item.label || item.name,\r\n designProps: item.designDetails || item.designProps,\r\n fullPath: item.fullpath || item.fullPath\r\n }));\r\n if (eCatalogDetails && initDesignPath) {\r\n //TODO: remove tolowercase after backend issue is fixed\r\n favorites = favorites.filter(\r\n item => item.fullPath.toLowerCase() === initDesignPath.toLowerCase()\r\n );\r\n }\r\n dispatchDesignList({ type: designListActions.SET_FAVORITES, payload: favorites });\r\n });\r\n const handleThumbnailClick = fav => {\r\n const { name, designProps, fullPath, thumbUrl, id } = fav;\r\n if (!designProps) return;\r\n uiDispatch({ type: mainUiActions.SET_SHOW_WORDCLOUD, payload: false });\r\n dispatchDesignList({\r\n type: designListActions.SELECT_DESIGN,\r\n payload: { name, designProps, fullPath, thumbUrl, fav: true, id }\r\n });\r\n // dispathcDesignDetails({\r\n // type: designDetailActions.SET_DETAILS,\r\n // payload: {\r\n // designDetails: designProps,\r\n // customizationFlag,\r\n // label: name,\r\n // fullpath: fullPath,\r\n // defaultQualityIndex,\r\n // hash\r\n // }\r\n // });\r\n };\r\n const handleRemoveFavorite = fav => {\r\n let getPageName = sessionStorage.getItem(\"page\");\r\n if (getPageName == \"undefined\") {\r\n getPageName = sessionStorage.getItem(\"username\");\r\n }\r\n const toRemove = favorites.find(\r\n item => item.currentUserID === CurrentUserID && item.id === fav.id\r\n );\r\n const newList = favorites.filter(item => item !== toRemove);\r\n dispatchDesignList({ type: designListActions.SET_FAVORITES, payload: newList });\r\n localStorage.setItem(FAVORITE_DESIGNS + \"-\" + getPageName, JSON.stringify(newList));\r\n };\r\n useEffect(() => {\r\n const noUrlThumbs = favorites.filter(favs => favs.thumbUrl == null);\r\n const haveUrlThumbs = favorites.filter(favs => favs.thumbUrl != null);\r\n if (noUrlThumbs.length > 0) {\r\n AppProvider.getDesignThumbnails({ designs: noUrlThumbs }).then(thumblist => {\r\n const f = thumblist.map((item, index) => {\r\n return { ...item, designProps: favorites.find(f => f.id === item.id).designProps };\r\n });\r\n f.map(item => {\r\n haveUrlThumbs.unshift(item);\r\n });\r\n setFavs(haveUrlThumbs);\r\n });\r\n } else {\r\n setFavs(favorites);\r\n }\r\n }, [favorites, CurrentUserID]);\r\n return (\r\n favs && (\r\n <>\r\n \r\n {favs.length > 0 ? (\r\n handleThumbnailClick(favs[i], i)}\r\n >\r\n ) : (\r\n
\r\n \r\n )\r\n );\r\n};\r\n\r\nFavorites.propTypes = { activeNode: PropTypes.object };\r\nFavorites.defaultProps = {\r\n activeNode: {\r\n id: 0\r\n }\r\n};\r\nexport default Favorites;\r\n","import React, { useState, useEffect } from \"react\";\r\nimport ThumbList from \"../../molecules/ThumbList\";\r\nimport AppProvider from \"../../../api/appProvider\";\r\nimport { useDebouncedCallback } from \"use-debounce/lib\";\r\nimport {\r\n useVisualizationState,\r\n useDispatchVisualization,\r\n visualizationsActions\r\n} from \"../../../reducers/visualizations.reducer\";\r\nimport strings from \"../../../strings\";\r\nimport classNames from \"classnames\";\r\nimport {\r\n useDesignListState,\r\n useDispatchDesignList,\r\n designListActions\r\n} from \"../../../reducers/designlist.reducer\";\r\nimport { searchFileinTree } from \"../../../utils/treeutils\";\r\nimport { mainUiActions, useUiDispatch } from \"../../../reducers/mainui.reducer\";\r\n\r\nconst searchInList = (list, text) => {\r\n let results = [];\r\n results = list.filter(i => {\r\n return i.label.toLowerCase().indexOf(text.toLowerCase()) !== -1;\r\n });\r\n return results;\r\n};\r\n\r\nconst SearchResults = props => {\r\n const { textToSearch, type, handleThumbnailClick, id, hidden } = props; \r\n const designListState = useDesignListState();\r\n const dispatchDesignList = useDispatchDesignList();\r\n const { selectedFile } = designListState;\r\n const VisualizationState = useVisualizationState();\r\n const VisualizationDispatch = useDispatchVisualization();\r\n\r\n const uiDispatch = useUiDispatch();\r\n const [results, setResults] = useState([]);\r\n\r\n const [debouncedThumbnailClick] = useDebouncedCallback((node, e) => {\r\n if (!!handleThumbnailClick) handleThumbnailClick(node, e);\r\n }, 800);\r\n\r\n const onThumbnailClick = (node, e) => {\r\n const activeNode = isDesignSearch(type) ? selectedFile : VisualizationState.activeNode;\r\n \r\n if (activeNode)\r\n if (node.id === activeNode.id) {\r\n console.info(\"clicked in active node\");\r\n return;\r\n }\r\n uiDispatch({type: mainUiActions.SET_SHOW_WORDCLOUD, payload:false});\r\n dispatchActiveNode(node, type);\r\n debouncedThumbnailClick(node, e);\r\n };\r\n\r\n const dispatchActiveNode = (node, type) => {\r\n if (isDesignSearch(type)) {\r\n dispatchDesignList({\r\n type: designListActions.SELECT_DESIGN,\r\n payload: node\r\n });\r\n } else {\r\n VisualizationDispatch({\r\n type: visualizationsActions.SET_ACTIVE_NODE,\r\n payload: node\r\n });\r\n }\r\n };\r\n\r\n const isDesignSearch = () => {\r\n const isDesign = type === \"design\" ? true : false;\r\n return isDesign;\r\n };\r\n const startSearch = () => {\r\n if (textToSearch.length < 3) return;\r\n let searchResults;\r\n if (!isDesignSearch())\r\n searchResults = searchInList(VisualizationState.illustrations, textToSearch);\r\n else searchResults = searchFileinTree(designListState.tree, textToSearch);\r\n if (!searchResults.length) setResults(searchResults);\r\n else {\r\n if (isDesignSearch()) {\r\n setResults(searchResults);\r\n AppProvider.getDesignThumbnails({ designs: searchResults }).then(thumblist => {\r\n setResults(thumblist);\r\n });\r\n } else {\r\n setResults(searchResults);\r\n }\r\n }\r\n };\r\n useEffect(() => {\r\n startSearch(textToSearch);\r\n }, [textToSearch]);\r\n const getItemType = () => {\r\n const item = `${type}${results.length > 1 ? \"s\" : \"\"}`;\r\n return item;\r\n };\r\n const getNoResultText = () => {\r\n let txt =\r\n type === \"design\"\r\n ? `${strings.search.noDesignFound.firstLine} \r\n
\r\n {strings.favorite.emptyFavText2}\r\n
\r\n )}\r\n \r\n
\r\n {strings.favorite.emptyFavText1}\r\n \r\n {strings.favorite.emptyFavText2}\r\n
${strings.search.noDesignFound.secondLine}`\r\n : `${strings.search.noVisualizationFound.firstLine}
${strings.search.noVisualizationFound.secondLine}`;\r\n return txt;\r\n };\r\n return (\r\n
\r\n {results.length ? (\r\n <>\r\n \r\n {\" \"}\r\n {`${strings.search.found} ${results.length} ${\r\n isDesignSearch()\r\n ? strings.design[getItemType()]\r\n : strings.visualization[getItemType()]\r\n }`}\r\n \r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default SearchResults;\r\n","import React, { Fragment } from \"react\";\r\nimport SearchBar from \"../../molecules/SearchBar\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\nimport { Popover, Menu, MenuItem, Position, Tag } from \"@blueprintjs/core\";\r\nimport {\r\n useDispatchDesignList,\r\n designListActions,\r\n useDesignListState\r\n} from \"../../../reducers/designlist.reducer\";\r\nimport { useMount } from \"react-use\";\r\nimport AtCheckbox from \"../../atoms/AtCheckbox\";\r\nimport { mainUiActions, useUiDispatch, useUiState } from \"../../../reducers/mainui.reducer\";\r\nimport { CDN_domain } from \"../../../api/appProvider\";\r\nconst initialFilterOptions = [\r\n {\r\n PhysicalWidth: 70,\r\n PhysicalHeight: 120,\r\n Unit: \"cm\",\r\n thresHoldWidth: 70,\r\n thresHoldHeight: 120,\r\n text: \"Small\",\r\n selected: false\r\n },\r\n {\r\n PhysicalWidth: 180,\r\n PhysicalHeight: 270,\r\n Unit: \"cm\",\r\n thresHoldWidth: 40,\r\n thresHoldHeight: 30,\r\n text: \"Medium\",\r\n selected: false\r\n },\r\n {\r\n PhysicalWidth: 500,\r\n PhysicalHeight: 500,\r\n Unit: \"cm\",\r\n thresHoldWidth: 280,\r\n thresHoldHeight: 200,\r\n text: \"Large\",\r\n selected: false\r\n }\r\n];\r\n\r\nconst DesignSearchBar = props => {\r\n const { hasFilterBySize } = window.flags.designListTree;\r\n const { handleFilter, ...otherProps } = props;\r\n const designListState = useDesignListState();\r\n const { sizeFilter, tagFilter } = designListState;\r\n const uiState = useUiState();\r\n const uiDispatch = useUiDispatch();\r\n const dispatch = useDispatchDesignList();\r\n useMount(() => {\r\n if (!hasFilterBySize) return;\r\n dispatch({ type: designListActions.SET_SIZE_FILTER, payload: initialFilterOptions });\r\n });\r\n \r\n // var wordCloudTag = getFromSessionStorage(\"wordcloudtag\");\r\n // const [wordTag, setWordTag] = useState(getFromSessionStorage(\"wordcloudtag\") || \"\")\r\n\r\n // useEffect(()=>{\r\n // console.log('wordTag', wordCloudTag, ',', wordTag);\r\n\r\n // setWordTag(wordTag);\r\n // dispatch({\r\n // type: designListActions.SET_TAG_FILTER,\r\n // payload: wordTag\r\n // });\r\n\r\n // },[getFromSessionStorage(\"wordcloudtag\")]);\r\n\r\n return (\r\n \r\n {window.flags.showWordCloud && window.WordCloudData !== \"\" && (\r\n
\r\n );\r\n};\r\n\r\nexport default DesignSearchBar;\r\n","/* eslint-disable react-hooks/exhaustive-deps */\r\nimport React, { useState, useEffect } from \"react\";\r\nimport ThumbList from \"../../molecules/ThumbList\";\r\nimport AppProvider from \"../../../api/appProvider\";\r\nimport { useDebouncedCallback } from \"use-debounce/lib\";\r\nimport { useVisualizationState } from \"../../../reducers/visualizations.reducer\";\r\nimport strings from \"../../../strings\";\r\nimport classNames from \"classnames\";\r\nimport {\r\n useDesignListState,\r\n useDispatchDesignList,\r\n designListActions\r\n} from \"../../../reducers/designlist.reducer\";\r\nimport { searchFileinTree, filterTreeFilesBySize, searchByTags } from \"../../../utils/treeutils\";\r\nimport { doesStringMatch } from \"../../../utils/utils\";\r\nimport { AtSpinner } from \"../../atoms/AtSpinner\";\r\nimport { mainUiActions, useUiDispatch, useUiState } from \"../../../reducers/mainui.reducer\";\r\n\r\nconst DesignSearchResults = props => {\r\n const { textToSearch = \"\", tagToSearch = \"\", type, handleThumbnailClick, id, hidden } = props;\r\n const { hasFilterBySize, searchInFolder } = window.flags.designListTree;\r\n\r\n const uiState = useUiState();\r\n const uiDispatch = useUiDispatch();\r\n const designListState = useDesignListState();\r\n const dispatchDesignList = useDispatchDesignList();\r\n const { selectedFile } = designListState;\r\n const VisualizationState = useVisualizationState();\r\n\r\n const [results, setResults] = useState([]);\r\n\r\n const [debouncedThumbnailClick] = useDebouncedCallback((node, e) => {\r\n if (!!handleThumbnailClick) handleThumbnailClick(node, e);\r\n }, 800);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const onThumbnailClick = (node, e) => {\r\n if (!node.designProps) return;\r\n const activeNode = isDesignSearch(type) ? selectedFile : VisualizationState.activeNode;\r\n\r\n if (activeNode)\r\n if (node.id === activeNode.id) {\r\n console.info(\"clicked in active node\");\r\n return;\r\n }\r\n uiDispatch({ type: mainUiActions.SET_SHOW_WORDCLOUD, payload: false });\r\n dispatchActiveNode(node, type);\r\n debouncedThumbnailClick(node, e);\r\n };\r\n\r\n const dispatchActiveNode = (node, type) => {\r\n dispatchDesignList({\r\n type: designListActions.SELECT_DESIGN,\r\n payload: { selectedFile: node }\r\n });\r\n };\r\n\r\n const isDesignSearch = () => {\r\n const isDesign = type === \"design\" ? true : false;\r\n return isDesign;\r\n };\r\n\r\n const showSearchResults = (textToSearch, tagFilter) => {\r\n let nonce = true;\r\n const startSearch = async () => {\r\n //let searchResults = await getSearchResults(textToSearch, tagToSearch)\r\n\r\n const searchText = textToSearch.trim();\r\n const { tree, sizeFilter } = designListState;\r\n if (!tree || !tree.length) return;\r\n let filteredDesigns;\r\n const compNodes = sizeFilter.filter(item => !!item.selected);\r\n // console.log(\"startSearch -> compNodes\", compNodes, \" hasFilterBySize \", hasFilterBySize)\r\n\r\n if (compNodes.length && hasFilterBySize) {\r\n filteredDesigns = filterTreeFilesBySize(tree, compNodes);\r\n // console.log(\"startSearch -> filteredDesigns\", filteredDesigns)\r\n }\r\n const tagToSearch = tagFilter;\r\n\r\n if (tagToSearch !== \"\") {\r\n const tag_designs =\r\n window.WordCloudData && window.WordCloudData !== \"\"\r\n ? window.WordCloudData.Tag_Designs\r\n : \"\";\r\n\r\n if (tag_designs !== \"\") filteredDesigns = searchByTags(tree, tag_designs, tagToSearch);\r\n }\r\n\r\n let searchResults;\r\n if (filteredDesigns) {\r\n searchResults = filteredDesigns.filter(item => {\r\n const fstring = searchInFolder ? item.fullPath : item.name;\r\n const matchFolder = doesStringMatch(fstring, searchText);\r\n return matchFolder;\r\n });\r\n } else {\r\n if (searchText.length < 3) return;\r\n searchResults = searchFileinTree(tree, searchText, searchInFolder);\r\n }\r\n\r\n if (!searchResults.length) setResults(searchResults);\r\n else {\r\n setResults(searchResults);\r\n const filtered = searchResults.filter(item => !item.designProps);\r\n // console.log(\"startSearch -> filtered\", filtered)\r\n if (filtered.length) {\r\n if (window.flags.designListTree.consolidateSearch) setIsLoading(true);\r\n try {\r\n const thumblist = await AppProvider.getDesignThumbnails({\r\n designs: filtered\r\n });\r\n if (nonce)\r\n thumblist.forEach(thumb => {\r\n const i = searchResults.findIndex(item => item.fullPath === thumb.fullPath);\r\n if (i !== -1) {\r\n searchResults[i] = thumb;\r\n }\r\n });\r\n } catch (error) {}\r\n }\r\n if (window.flags.designListTree.consolidateSearch) {\r\n const uniqueThumblist = Array.from(\r\n new Set(searchResults.map(a => JSON.stringify(a.designProps)))\r\n ).map(propStr => {\r\n return searchResults.find(a => JSON.stringify(a.designProps) === propStr);\r\n });\r\n setResults(uniqueThumblist);\r\n } else {\r\n setResults(searchResults);\r\n }\r\n if (!uiState.showWordCloud && tagToSearch !== \"\") {\r\n dispatchActiveNode(searchResults[0]);\r\n }\r\n setIsLoading(false);\r\n }\r\n };\r\n startSearch();\r\n return () => {\r\n nonce = false;\r\n };\r\n };\r\n useEffect(() => {\r\n showSearchResults(textToSearch, tagToSearch);\r\n }, [textToSearch, designListState.sizeFilter, tagToSearch]);\r\n\r\n const getItemType = () => {\r\n const item = `${type}${results.length > 1 ? \"s\" : \"\"}`;\r\n // console.log(item, results.length, type);\r\n return item;\r\n };\r\n const getNoResultText = () => {\r\n let txt =\r\n type === \"design\"\r\n ? `${strings.search.noDesignFound.firstLine} \r\n {\r\n if (!uiState.showWordCloud)\r\n uiDispatch({\r\n type: mainUiActions.SET_SHOW_WORDCLOUD,\r\n payload: true\r\n });\r\n }}\r\n >\r\n
\r\n )}\r\n\r\n \r\n {\r\n const f = JSON.parse(JSON.stringify(sizeFilter));\r\n f[index].selected = false;\r\n dispatch({ type: designListActions.SET_SIZE_FILTER, payload: f });\r\n const filter = f.find(item => !!item.selected);\r\n handleFilter(filter, e);\r\n }}\r\n intent=\"primary\"\r\n round\r\n >\r\n {option.text}\r\n \r\n ) : (\r\n {\r\n dispatch({ type: designListActions.SET_TAG_FILTER, payload: \"\" });\r\n uiDispatch({ type: mainUiActions.SET_SHOW_WORDCLOUD, payload: false });\r\n }}\r\n intent=\"primary\"\r\n round\r\n >\r\n {tagFilter}\r\n \r\n )}\r\n {window.flags.showWordCloud && window.WordCloudData !== \"\" && (\r\n {\r\n if (!uiState.showWordCloud)\r\n uiDispatch({\r\n type: mainUiActions.SET_SHOW_WORDCLOUD,\r\n payload: true\r\n });\r\n }}\r\n >\r\n {tagFilter && tagFilter !== \"\" ? \"Replace Category\" : \"Sort by Category\"}\r\n \r\n )}\r\n
\r\n \r\n \r\n {sizeFilter.map((option, index) => (\r\n {\r\n const f = JSON.parse(JSON.stringify(sizeFilter));\r\n f[index].selected = !option.selected;\r\n dispatch({ type: designListActions.SET_SIZE_FILTER, payload: f });\r\n const filter = f.find(item => !!item.selected);\r\n handleFilter(filter, e);\r\n }}\r\n />\r\n }\r\n />\r\n ))}\r\n \r\n }\r\n minimal\r\n >\r\n
\r\n {sizeFilter.length && hasFilterBySize ? (\r\n sizeFilter.map((option, index) =>\r\n !!option.selected ? (\r\n ${strings.search.noDesignFound.secondLine}`\r\n : `${strings.search.noVisualizationFound.firstLine}
${strings.search.noVisualizationFound.secondLine}`;\r\n return txt;\r\n };\r\n return (\r\n
\r\n {isLoading ? (\r\n \r\n Searching designs...\r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default DesignSearchResults;\r\n","import React from \"react\";\r\nimport AppProvider from \"../../../api/appProvider\";\r\nimport DesignList from \"../DesignList\";\r\nimport Designviews from \"../Designviews\";\r\nimport RoomList from \"../RoomList\";\r\n\r\nconst IllustrationList = () => {\r\n return (\r\n <>\r\n {window.flags.visualizations &&\r\n window.flags.visualizations.renderDesignsInVisualizationTab &&\r\n !AppProvider.isEcatMode && \r\n {accountlinks.length &&\r\n accountlinks.map((accountLink, index) => (\r\n handleClick(accountLink.link)}\r\n >\r\n {accountLink.text}\r\n \r\n ))}\r\n
\r\n );\r\n};\r\n\r\nAccountLinks.propTypes = {};\r\n\r\nexport default AccountLinks;\r\n","/* eslint-disable react-hooks/exhaustive-deps */\r\nimport React, { useState, useEffect, Suspense } from \"react\";\r\nimport SidePanel from \"../SidePanel\";\r\nimport { Tabs, Tab, H5 } from \"@blueprintjs/core\";\r\nimport DesignList from \"../../organisms/DesignList\";\r\nimport Favorites from \"../../organisms/Favorites\";\r\nimport strings from \"../../../strings\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\nimport {\r\n useUiState,\r\n useUiDispatch,\r\n mainUiActions,\r\n pageViews\r\n} from \"../../../reducers/mainui.reducer\";\r\nimport { useVisualizationState, visViewModes } from \"../../../reducers/visualizations.reducer\";\r\nimport SearchResults from \"../../organisms/SearchResults\";\r\nimport SearchBar from \"../../molecules/SearchBar\";\r\nimport AtIcon from \"../../atoms/AtIcon\";\r\nimport { flaginCurrentMode } from \"../../pages/EntryPage/defaultflags\";\r\nimport DesignSearchBar from \"../../organisms/DesignSearch/DesignSearchBar\";\r\nimport DesignSearchResults from \"../../organisms/DesignSearch/DesignSearchResults\";\r\nimport { useDesignListState } from \"../../../reducers/designlist.reducer\";\r\nimport IllustrationList from \"../../organisms/IllustrationList\";\r\nimport BrandLogo from \"../../molecules/BrandLogo\";\r\nimport CopyrightSection from \"../../molecules/CopyrightSection\";\r\nimport OrdersheetButton from \"../OrderSheet/OrdersheetBtn\";\r\nimport AccountLinks from \"../../organisms/AccountLinks\";\r\nimport { getFromSessionStorage } from \"../../../utils/domUtils\";\r\nimport { getnewIconIfReplaceable } from \"../../../middleware/visualization.middleware\";\r\nimport { showOrdersheetOutside } from \"../../../utils/flagUtils\";\r\nconst OrderSheet = React.lazy(() => import(\"../OrderSheet\"));\r\n\r\nconst LeftSidebarTabed = props => {\r\n const { eCatalogDetails } = window.initialData;\r\n const defTab = window.flags.defaultSelectedTab || 0;\r\n const defaultSelectedTabInRoomView = window.flags.defaultSelectedTabInRoomView;\r\n const { collectionTab, artworkTab } = window.flags.leftSidebarTabs;\r\n const uiState = useUiState();\r\n const dispatchuiState = useUiDispatch();\r\n const visualizationState = useVisualizationState();\r\n const { showLeftSidebar, isIdle } = uiState;\r\n const [textToSearch, setTextToSearch] = useState(\"\");\r\n const [showSearchResults, setShowSearchResults] = useState(\"none\");\r\n const designListState = useDesignListState();\r\n const { sizeFilter, tagFilter } = designListState;\r\n\r\n const getSelectedTab = () => {\r\n let defaultTab = 0;\r\n if (\r\n eCatalogDetails ||\r\n visualizationState.viewMode === visViewModes.MY_ROOM ||\r\n visualizationState.viewMode === visViewModes.ROOM_VIEW\r\n ) {\r\n defaultTab = 1;\r\n if (\r\n window.flags.inhouseChanges.saveFunctionForFlutter &&\r\n visualizationState.viewMode === visViewModes.MY_ROOM\r\n ) {\r\n defaultTab = defaultSelectedTabInRoomView;\r\n }\r\n if (\r\n visualizationState.viewMode === visViewModes.ROOM_VIEW &&\r\n !eCatalogDetails &&\r\n defaultSelectedTabInRoomView !== defaultTab\r\n ) {\r\n defaultTab =\r\n defaultSelectedTabInRoomView !== undefined && defaultSelectedTabInRoomView !== null\r\n ? defaultSelectedTabInRoomView\r\n : defaultTab;\r\n }\r\n } else {\r\n defaultTab = defTab;\r\n }\r\n return defaultTab;\r\n };\r\n const [selectedTab, setSelectedTab] = useState(getSelectedTab());\r\n\r\n const handleToggleSidebar = () => {\r\n dispatchuiState({ type: mainUiActions.SET_SHOW_SIDEBAR, payload: { left: !showLeftSidebar } });\r\n };\r\n\r\n const handleSearch = (e, type) => {\r\n let text = e.target.value;\r\n setTextToSearch(text);\r\n if (text.length > 2) {\r\n setShowSearchResults(type);\r\n } else if (text === \"\") {\r\n if (type !== \"design\") {\r\n setShowSearchResults(\"none\");\r\n } else {\r\n if (!sizeFilter.find(item => !!item.selected)) setShowSearchResults(\"none\");\r\n //else if (tagFilter === \"\") setShowSearchResults(\"none\");\r\n else {\r\n setShowSearchResults(type);\r\n }\r\n }\r\n setTextToSearch(\"\");\r\n }\r\n };\r\n const handleCancel = () => {\r\n setTextToSearch(\"\");\r\n if (tagFilter === \"\") setShowSearchResults(\"none\");\r\n };\r\n useEffect(() => {\r\n let tabs = [\"design\", \"visualization\", \"none\"];\r\n if (tagFilter !== \"\") {\r\n if (selectedTab === 0) setShowSearchResults(tabs[selectedTab]);\r\n else setShowSearchResults(\"none\");\r\n } else if (showSearchResults !== \"none\") {\r\n setShowSearchResults(tabs[selectedTab]);\r\n } else {\r\n setTextToSearch(\"\");\r\n }\r\n // if (showSearchResults !== \"none\") {\r\n // setShowSearchResults(tabs[selectedTab]);\r\n // } else {\r\n // setTextToSearch(\"\");\r\n // }\r\n }, [selectedTab]);\r\n\r\n useEffect(() => {\r\n if (tagFilter === \"\") setShowSearchResults(\"none\");\r\n else if (selectedTab === 0 && tagFilter !== \"\") {\r\n setShowSearchResults(\"design\");\r\n }\r\n }, [tagFilter]);\r\n\r\n const handleExpandDesigns = () => {\r\n dispatchuiState({ type: mainUiActions.SET_PAGE_VIEW, payload: pageViews.FULL_PAGE_THUMB });\r\n };\r\n const handleFilterDesigns = (filter, e) => {\r\n if (!filter && textToSearch.length <= 2) {\r\n setShowSearchResults(\"none\");\r\n }\r\n if (showSearchResults !== \"design\") setShowSearchResults(\"design\");\r\n };\r\n\r\n return (\r\n \r\n
\r\n )}\r\n\r\n {window.flags.linksToOtherAccounts.length > 0 && (\r\n {strings.tagline}
\r\n \r\n \r\n {!eCatalogDetails && (\r\n \r\n \r\n {strings.design.designs}\r\n {flaginCurrentMode(\r\n window.InterfaceElements.IsAdmin,\r\n window.flags.fullPageThumb\r\n ) && (\r\n
\r\n \r\n }\r\n onClickCapture={() => setSelectedTab(0)}\r\n panel={\r\n {strings.design.collections}}\r\n onClickCapture={() => {\r\n setSelectedTab(3);\r\n }}\r\n panel={\r\n {strings.favorite.favorites}}\r\n onClickCapture={() => {\r\n setSelectedTab(4);\r\n }}\r\n panel={\r\n {strings.visualization.visualizations}}\r\n onClickCapture={() => setSelectedTab(1)}\r\n panel={\r\n
\r\n }\r\n />\r\n {window.sessionStorage.getItem(\"mode\") !== \"stripedesign\" && window.flags.hasFavorites && (\r\n \r\n {strings.design.designs}\r\n {flaginCurrentMode(\r\n window.InterfaceElements.IsAdmin,\r\n window.flags.fullPageThumb\r\n ) && (\r\n
\r\n \r\n }\r\n onClickCapture={() => setSelectedTab(0)}\r\n panel={\r\n \r\n handleSearch(e, \"design\")}\r\n placeholder={strings.design.searchDesigns}\r\n textToSearch={textToSearch}\r\n handleCancel={handleCancel}\r\n handleFilter={handleFilterDesigns}\r\n type=\"design\"\r\n />\r\n
\r\n }\r\n />\r\n )}\r\n {collectionTab && (\r\n \r\n handleSearch(e, \"design\")}\r\n placeholder={strings.design.searchDesigns}\r\n textToSearch={textToSearch}\r\n handleCancel={handleCancel}\r\n handleFilter={handleFilterDesigns}\r\n type=\"design\"\r\n />\r\n
\r\n }\r\n />\r\n )}\r\n\r\n {artworkTab && (\r\n \r\n handleSearch(e, \"design\")}\r\n placeholder={strings.design.searchDesigns}\r\n textToSearch={textToSearch}\r\n handleCancel={handleCancel}\r\n handleFilter={handleFilterDesigns}\r\n type=\"design\"\r\n />\r\n
\r\n }\r\n />\r\n )}\r\n \r\n handleSearch(e, \"visualization\")}\r\n placeholder={strings.visualization.searchVisualizations}\r\n textToSearch={textToSearch}\r\n handleCancel={handleCancel}\r\n type=\"visualization\"\r\n />\r\n \r\n
\r\n \r\n {window.flags.hasOrderSheet &&\r\n window.flags.ordersheet.panel === \"left\" &&\r\n !uiState.showOrderSheet &&
\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default FolderStoryDialog;\r\n","import React from \"react\";\r\nimport { useUiDispatch, mainUiActions } from \"../../../reducers/mainui.reducer\";\r\nimport AtDialog from \"../../molecules/AtDialog\";\r\nimport { H5, Button } from \"@blueprintjs/core\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\nimport AtIcon from \"../../atoms/AtIcon\";\r\nimport strings from \"../../../strings\";\r\nconst InfoDialog = props => {\r\n const {\r\n isOpen,\r\n dialogTitle = strings.tools.saveAndReplaceOnserver,\r\n infoText = \"Are you sure?\",\r\n confirmText = \"Confirm\",\r\n handleConfirm,\r\n handleClose\r\n } = props;\r\n\r\n const dispatchUiState = useUiDispatch();\r\n\r\n const handleCloseDialog = () => {\r\n dispatchUiState({ type: mainUiActions.SET_INFO_DIALOG, payload: false });\r\n if(handleClose) handleClose();\r\n };\r\n const handlePrimaryClick = () => {\r\n if (handleConfirm) handleConfirm();\r\n handleCloseDialog();\r\n };\r\n return (\r\n {strings.design.aboutTheCollection}
\r\n \r\n\r\n }\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default InfoDialog;\r\n","import classNames from 'classnames';\r\nimport React, { useState } from 'react';\r\n\r\nfunction preventDefaults(e) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n}\r\nconst ImageDropContainer = props => {\r\n const {onImageChange, html=''} = props;\r\n const [highlight, setHighlight] = useState(false);\r\n \r\n const handleDragEnter = (e)=>{\r\n preventDefaults(e);\r\n setHighlight(true)\r\n }\r\n const handleDragLeave = (e)=>{\r\n preventDefaults(e);\r\n setHighlight(false)\r\n }\r\n const handleDrop=(e)=>{\r\n preventDefaults(e);\r\n let dt = e.dataTransfer;\r\n let files = dt.files;\r\n onImageChange(files[0]);\r\n setHighlight(false)\r\n \r\n }\r\n const handleFileInput=(e)=>{\r\n if(e.target.files){\r\n onImageChange(e.target.files[0])\r\n }\r\n }\r\n return (\r\n <>\r\n \r\n\r\n \r\n );\r\n};\r\n\r\nImageDropContainer.propTypes = {\r\n \r\n};\r\n\r\nexport default ImageDropContainer;","import React, { useEffect, useState } from \"react\";\r\nimport AtDialog from \"../../molecules/AtDialog\";\r\nimport { useUiDispatch, mainUiActions, useUiState } from \"../../../reducers/mainui.reducer\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\nimport { H5, InputGroup, ProgressBar } from \"@blueprintjs/core\";\r\nimport ImageDropContainer from \"../ImageDropContainer\";\r\nimport ColorThief from \"colorthief\";\r\nimport { getPomUrl, rgbToHex, sortByKnots } from \"../../../utils/colorutils\";\r\nimport classNames from \"classnames\";\r\nimport { readImage } from \"../../../utils/domUtils\";\r\nimport AppProvider from \"../../../api/appProvider\";\r\nimport {\r\n useDesignDetailState,\r\n useDispatchDesignDetail,\r\n designDetailActions\r\n} from \"../../../reducers/designdetails.reducer\";\r\nimport { useColorListState } from \"../../../reducers/colors.reducer\";\r\n\r\nconst colorThief = new ColorThief();\r\nconst state = {\r\n Preload: 0,\r\n Loading: 1,\r\n AfterLoad: 2\r\n};\r\nconst ImageInputDialog = ({ portalContainerId = \"app-main\" }) => {\r\n const dispatchUiState = useUiDispatch();\r\n const designDetailsState = useDesignDetailState();\r\n const dispatchDesignDetails = useDispatchDesignDetail();\r\n const colorListState = useColorListState();\r\n const uiState = useUiState();\r\n const [isOpen, setIsOpen] = useState(uiState.showImageInputDialog);\r\n const [imageUrl, setImageUrl] = useState(\"\");\r\n const [currentState, setCurrentState] = useState(state.Preload);\r\n const [palette_hex, setPalette_hex] = useState([]);\r\n const [showColorSwatchBg, setShowColorSwatchBg] = useState(true);\r\n const [progressBarValue, setProgressBarValue] = useState(0.2);\r\n const [lastOpenedImage, setLastOpenedImage] = useState(null);\r\n const [newColorPalette, setNewColorPalette] = useState(null);\r\n\r\n const { designDetails } = designDetailsState;\r\n const { filteredCollection, collections } = colorListState;\r\n const handleCloseDialog = () => {\r\n setIsOpen(false);\r\n dispatchUiState({ type: mainUiActions.SET_SHOW_IMAGE_INPUT_DIALOG, payload: false });\r\n };\r\n\r\n useEffect(() => {\r\n setIsOpen(uiState.showImageInputDialog);\r\n if (!uiState.showImageInputDialog) return;\r\n if (lastOpenedImage) {\r\n loadImageGetPalette(lastOpenedImage);\r\n }\r\n }, [uiState.showImageInputDialog]);\r\n\r\n const applycolors = result => {\r\n if (!result) return;\r\n var colorPalette = sortByKnots(result, designDetails.DesignColors);\r\n console.log(\"colorPalette\", colorPalette);\r\n dispatchDesignDetails({\r\n type: designDetailActions.CHANGE_COLOR_PALETTE,\r\n payload: colorPalette\r\n });\r\n };\r\n const getColorsfromImage = myImage => {\r\n const colorsNum = designDetails.DesignColors?.length;\r\n const palette = colorThief.getPalette(myImage, colorsNum);\r\n console.log(palette);\r\n\r\n if (palette) {\r\n const unmapped_paletteHex = palette.map(color => rgbToHex([...color]));\r\n var pipeSeparatedColorsList = \"\";\r\n for (let i = 0; i < unmapped_paletteHex.length; i++) {\r\n pipeSeparatedColorsList += unmapped_paletteHex[i].replace(\"#\", \"\") + \"|\";\r\n }\r\n pipeSeparatedColorsList = pipeSeparatedColorsList.slice(0, -1);\r\n const colorTab = filteredCollection?.Name || collections[0]?.Name;\r\n AppProvider.mapColorsList({ pipeSeparatedColorsList, colorTab }).then(res => {\r\n if (res) {\r\n setNewColorPalette(res);\r\n const mapped_paletteHex = res.map(color => color.Value.replace(\"#\", \"\")); // res.split(\"|\");\r\n setPalette_hex(mapped_paletteHex);\r\n }\r\n });\r\n }\r\n };\r\n const loadImageGetPalette = url => {\r\n setProgressBarValue(0.5);\r\n\r\n readImage(url)\r\n .then(myImage => {\r\n setProgressBarValue(1);\r\n\r\n setCurrentState(state.AfterLoad);\r\n setLastOpenedImage(myImage.src);\r\n getColorsfromImage(myImage);\r\n })\r\n .catch(() => {});\r\n };\r\n const onImageChange = imageFile => {\r\n setProgressBarValue(0);\r\n\r\n if (!imageFile) return;\r\n setCurrentState(state.Loading);\r\n console.time();\r\n var reader = new FileReader();\r\n reader.readAsDataURL(imageFile);\r\n\r\n reader.onloadend = function(e) {\r\n loadImageGetPalette(e.target.result);\r\n };\r\n };\r\n const uploadImageFromUrl = () => {\r\n if (imageUrl) loadImageGetPalette(imageUrl);\r\n };\r\n return (\r\n {dialogTitle}
\r\n\r\n {infoText !== \"\" &&
\r\n {infoText}
}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default ImageInputDialog;\r\n","/* eslint-disable react-hooks/exhaustive-deps */\r\nimport React, { useState, useEffect, useRef, Suspense } from \"react\";\r\nimport AppProvider from \"../../../api/appProvider\";\r\nimport { useFullscreen, useToggle, useIdle, useKey, useMedia, useOrientation } from \"react-use\";\r\nimport { ReactComponent as Icons } from \"../../symbol-defs.svg\";\r\nimport {\r\n designDetailActions,\r\n useDesignDetailState,\r\n useDispatchDesignDetail\r\n} from \"../../../reducers/designdetails.reducer\";\r\nimport { Toast, Toaster } from \"@blueprintjs/core\";\r\nimport uuid from \"uuid\";\r\nimport {\r\n visualizationsActions,\r\n visViewModes,\r\n useVisualizationState,\r\n useDispatchVisualization\r\n} from \"../../../reducers/visualizations.reducer\";\r\nimport {\r\n useUiDispatch,\r\n useUiState,\r\n mainUiActions,\r\n pageViews\r\n} from \"../../../reducers/mainui.reducer\";\r\nimport FavoritesDialog from \"../../organisms/Favorites/FavoritesDialog\";\r\nimport VrDialog from \"../../organisms/VrDialog\";\r\nimport QuickLinkDialog from \"../../organisms/QuicklinkDialog\";\r\nimport RenameDialog from \"../../organisms/RenameDialog\";\r\nimport { isMobileDevice } from \"../../../utils/utils\";\r\nimport ConfirmationDialog from \"../../organisms/ConfirmationDialog\";\r\nimport strings from \"../../../strings\";\r\nimport ErrorPage from \"../ErrorPage\";\r\nimport {\r\n useDesignListState,\r\n useDispatchDesignList,\r\n designListActions\r\n} from \"../../../reducers/designlist.reducer\";\r\nimport MapColorsDialog from \"../../organisms/MapColorsDialog\";\r\nimport { useHomeMount } from \"./hooks\";\r\nimport LoadingOverlay from \"../LoadingOverlay\";\r\nimport AppContainerStepper from \"./AppContainerStepper\";\r\nimport AppContainerPaneled from \"./AppContainerPaneled\";\r\nimport Stage from \"../../organisms/StageNew\";\r\nimport EntryDialog from \"../../organisms/EntryDialog\";\r\nimport LeftSidebarTabed from \"../../templates/LeftSidebar/LeftSidebarTabed\";\r\nimport { getCustomClass, handleSwipeOnEdges } from \"../../../utils/domUtils\";\r\nimport classNames from \"classnames\";\r\nimport {\r\n fetchNewPropsAndPostToParent,\r\n getExplorugData,\r\n postDetailsToParent\r\n} from \"../../../middleware/ordersheet.middleware\";\r\nimport { useOrdersheetDetailState } from \"../../../reducers/ordersheetdetails.reducer\";\r\nimport { usePriceCalculator } from \"../../../hooks\";\r\nimport FolderStoryDialog from \"../../organisms/FolderStoryDialog\";\r\nimport InfoDialog from \"../../organisms/InfoDialog\";\r\nimport { useSwipeable } from \"react-swipeable\";\r\nimport ImageInputDialog from \"../../organisms/ImageInputDialog\";\r\nimport SelectSizeDropdown from \"../../organisms/SelectSizeDropdown\";\r\n\r\nconst Rugshare = React.lazy(() => import(\"../../templates/Rugshare\"));\r\nconst CinematicStager = React.lazy(() => import(\"./../../cinematic/CinematicStager\"));\r\nconst checkTargetNodeInput = e => {\r\n return e.target.nodeName === \"TEXTAREA\" || e.target.nodeName === \"INPUT\";\r\n};\r\nfunction usePrevious(value) {\r\n const ref = useRef({});\r\n useEffect(() => {\r\n ref.current = value;\r\n }, [value]);\r\n return ref.current;\r\n}\r\nconst Home = props => {\r\n const { template } = props;\r\n const { flags } = window;\r\n\r\n const { initDesignColors } = window.initialData;\r\n const uiState = useUiState();\r\n const dispatchUiState = useUiDispatch();\r\n const designListState = useDesignListState();\r\n const dispatchDesignList = useDispatchDesignList();\r\n const visState = useVisualizationState();\r\n const dispatchVisState = useDispatchVisualization();\r\n const designDetailState = useDesignDetailState();\r\n const dispatchDesignDetails = useDispatchDesignDetail();\r\n const [isFullScreen, toggleFullscreen] = useToggle(false);\r\n const orientation = useOrientation();\r\n const isIdle = useIdle(5e3, false, [\r\n \"mousemove\",\r\n \"mousedown\",\r\n \"resize\",\r\n \"keydown\",\r\n \"touchstart\",\r\n \"wheel\",\r\n uiState.showLoadingOverlay\r\n ]);\r\n const ordersheetDetailState = useOrdersheetDetailState();\r\n\r\n const { designDetails, fullpath } = designDetailState;\r\n const prevFullpath = usePrevious(fullpath);\r\n const prevDesignColors = usePrevious(designDetails?.DesignColors);\r\n\r\n const message = window.initialData.message;\r\n const price = usePriceCalculator({\r\n ...designDetailState,\r\n showPrice: window.InterfaceElements.ShowPrice && !window.initialData.customDesignUrl\r\n });\r\n\r\n const handlePageSwipe = data => {\r\n if (!data) return;\r\n const payload = handleSwipeOnEdges(data);\r\n if (payload) {\r\n dispatchUiState({\r\n type: mainUiActions.SET_SHOW_SIDEBAR,\r\n payload: payload\r\n });\r\n }\r\n };\r\n const handlers = useSwipeable({\r\n onSwipedLeft: e => handlePageSwipe(e),\r\n onSwipedRight: e => handlePageSwipe(e),\r\n preventDefaultTouchmoveEvent: true,\r\n trackTouch: true,\r\n trackMouse: true\r\n });\r\n\r\n const getExpDataAndPostToParent = () => {\r\n const {\r\n passDesignNameAsDesignId,\r\n passQualityFromFolderName,\r\n sendOrigDesignColors,\r\n passTotalArea\r\n } = window.flags.explorugData;\r\n getExplorugData({\r\n designDetailState: designDetailState,\r\n ordersheetDetailState: ordersheetDetailState,\r\n showPrice: window.InterfaceElements.ShowPrice,\r\n price: price,\r\n passDesignNameAsDesignId: passDesignNameAsDesignId,\r\n passQualityFromFolderName: passQualityFromFolderName,\r\n sendOrigDesignColors: sendOrigDesignColors,\r\n passTotalArea: passTotalArea,\r\n origDesignColors: designDetailState.history[0]\r\n ? designDetailState.history[0].designDetails.DesignColors\r\n : designDetailState.designDetails.DesignColors\r\n }).then(data => {\r\n postDetailsToParent(data);\r\n });\r\n };\r\n\r\n useEffect(() => {\r\n if (message && message.indexOf(\"explorug props\") !== -1) {\r\n console.log(\"message is changed\", message);\r\n fetchNewPropsAndPostToParent({ designDetailState: designDetailState });\r\n }\r\n if (message && message.indexOf(\"downloadimage\") !== -1) {\r\n console.log(\"message for image download \", message);\r\n handleDownloadImage();\r\n //download\r\n }\r\n }, [message]);\r\n\r\n useEffect(() => {\r\n if (window.flags.postToParentOnEveryColorChange && fullpath && fullpath === prevFullpath) {\r\n //console.log(\"prevFullpath\", prevFullpath, \"fullpath\", fullpath);\r\n if (\r\n designDetails?.DesignColors &&\r\n JSON.stringify(prevDesignColors) !== JSON.stringify(designDetails.DesignColors)\r\n ) {\r\n // console.log(\"prevDesignColors\", JSON.stringify(prevDesignColors), \" current: \",JSON.stringify(designDetails.DesignColors))\r\n fetchNewPropsAndPostToParent({ designDetailState: designDetailState });\r\n }\r\n }\r\n }, [designDetails]);\r\n\r\n useEffect(() => {\r\n dispatchUiState({ type: mainUiActions.SET_IS_IDLE, payload: isIdle });\r\n }, [isIdle]);\r\n const refHome = useRef(null);\r\n\r\n const [isCinematic, setisCinematic] = useState(sessionStorage.getItem(\"cinematic\") || false);\r\n const isDeviceSmall = useMedia(\"(max-width: 767px)\");\r\n useHomeMount();\r\n useFullscreen(refHome, isFullScreen, { onClose: () => toggleFullscreen(false) });\r\n\r\n useKey(\"ArrowUp\", e => {\r\n if (!checkTargetNodeInput(e))\r\n dispatchVisState({ type: visualizationsActions.SELECT_PREV_ILLUSTRATION });\r\n });\r\n useKey(\"ArrowDown\", e => {\r\n if (!checkTargetNodeInput(e))\r\n dispatchVisState({ type: visualizationsActions.SELECT_NEXT_ILLUSTRATION });\r\n });\r\n useKey(\"f\", e => {\r\n if (!checkTargetNodeInput(e)) handleFullScreen();\r\n });\r\n useKey(\"z\", e => {\r\n if (!checkTargetNodeInput(e))\r\n if (e.ctrlKey) dispatchDesignDetails({ type: designDetailActions.UNDO_COLOR_SELECTION });\r\n });\r\n useEffect(() => {\r\n const mode = sessionStorage.getItem(\"mode\");\r\n const initView = sessionStorage.getItem(\"initview\") || \"\";\r\n if (uiState.showLoadingOverlay === false && designDetailState.loading === false) {\r\n if (isDeviceSmall || mode === \"myroom\" || initView === \"myroom\") {\r\n dispatchUiState({\r\n type: mainUiActions.SET_SHOW_SIDEBAR,\r\n payload: { left: false, right: false }\r\n });\r\n } else {\r\n // if (\r\n // !window.flags.interface.showSidebarsByDefault.left ||\r\n // !window.flags.interface.showSidebarsByDefault.right\r\n // ) {\r\n dispatchUiState({\r\n type: mainUiActions.SET_SHOW_SIDEBAR,\r\n payload: {\r\n left: window.flags.interface.showSidebarsByDefault.left,\r\n right: window.flags.interface.showSidebarsByDefault.right\r\n }\r\n });\r\n // } else {\r\n // dispatchUiState({\r\n // type: mainUiActions.SET_SHOW_SIDEBAR,\r\n // payload: { left: true, right: true }\r\n // });\r\n // }\r\n }\r\n if (\r\n (window.flags.panelStateMobile && isMobileDevice) ||\r\n (window.flags.interface.showOnlyOneSideBarInMobile != \"\" && window.innerWidth < 850) //done for talisman mills, show rightbar only when width less than 850\r\n ) {\r\n dispatchUiState({\r\n type: mainUiActions.SET_SHOW_SIDEBAR,\r\n payload: {\r\n left: window.flags.interface.showOnlyOneSideBarInMobile == \"left\" ? true : false,\r\n right: window.flags.interface.showOnlyOneSideBarInMobile == \"right\" ? true : false\r\n }\r\n });\r\n }\r\n if (window.flags.showCustomDialogAtStart && window.flags.customDialogBoxContent !== \"\") {\r\n const shownAlready = localStorage.getItem(\"showedCustomDialogAtStart\") || \"\";\r\n if (shownAlready === \"\") {\r\n localStorage.setItem(\"showedCustomDialogAtStart\", 1);\r\n dispatchUiState({\r\n type: mainUiActions.SET_SHOW_ENTRY_DIALOG,\r\n payload: true\r\n });\r\n }\r\n }\r\n }\r\n }, [uiState.showLoadingOverlay]);\r\n useEffect(() => {\r\n if (isDeviceSmall && uiState.showLeftSidebar) {\r\n if (\r\n orientation.angle === 0 ||\r\n orientation.angle === 180 ||\r\n orientation.type === -\"portrait-primary\"\r\n )\r\n dispatchUiState({\r\n type: mainUiActions.SET_SHOW_SIDEBAR,\r\n payload: { right: false }\r\n });\r\n }\r\n }, [uiState.showLeftSidebar]);\r\n\r\n useEffect(() => {\r\n if (isDeviceSmall && uiState.showRightSidebar) {\r\n if (\r\n orientation.angle === 0 ||\r\n orientation.angle === 180 ||\r\n orientation.type === -\"portrait-primary\"\r\n )\r\n dispatchUiState({\r\n type: mainUiActions.SET_SHOW_SIDEBAR,\r\n payload: { left: false }\r\n });\r\n }\r\n }, [uiState.showRightSidebar]);\r\n\r\n useEffect(() => {\r\n if (!isMobileDevice) return;\r\n if (orientation.type === \"portrait-primary\") {\r\n dispatchUiState({\r\n type: mainUiActions.SET_SHOW_SIDEBAR,\r\n payload: { left: false, right: false }\r\n });\r\n return;\r\n }\r\n if (\r\n orientation.type === \"landscape-primary\" &&\r\n !uiState.showRightSidebar &&\r\n !uiState.showLeftSidebar\r\n ) {\r\n dispatchUiState({\r\n type: mainUiActions.SET_SHOW_SIDEBAR,\r\n payload: { left: true, right: true }\r\n });\r\n return;\r\n }\r\n }, [orientation]);\r\n\r\n useEffect(() => {\r\n const { selectedFile, activeVariation } = designListState;\r\n let {\r\n designProps: designDetails,\r\n name: designName,\r\n fullPath,\r\n customizationFlag\r\n } = selectedFile;\r\n if (!designDetails) return;\r\n if (window.flags.designVariations.preserveVariations || activeVariation.id) {\r\n if (activeVariation.designProps) designDetails = activeVariation.designProps;\r\n designName = activeVariation.name;\r\n fullPath = activeVariation.fullPath;\r\n }\r\n dispatchVisState({\r\n type: visualizationsActions.FILTER_ILLUSTRATIONS_FOR_DESIGN,\r\n payload: selectedFile.fullPath\r\n });\r\n if (initDesignColors && initDesignColors.length === designDetails.DesignColors.length) {\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_DETAILS,\r\n payload: {\r\n designDetails: { ...designDetails, DesignColors: initDesignColors },\r\n customizationFlag: true,\r\n label: designName,\r\n fullpath: fullPath,\r\n setCustomConversion:\r\n window.flags.ordersheet.customConversion.setCustomConversion || false,\r\n customInToCmFactor: window.flags.ordersheet.customConversion.customInToCmFactor\r\n }\r\n });\r\n } else {\r\n if (!window.flags.designVariations.containsOriginalDesign)\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_DETAILS,\r\n payload: {\r\n designDetails,\r\n label: designName,\r\n fullpath: fullPath,\r\n customizationFlag,\r\n setCustomConversion:\r\n window.flags.ordersheet.customConversion.setCustomConversion || false,\r\n customInToCmFactor: window.flags.ordersheet.customConversion.customInToCmFactor\r\n }\r\n });\r\n }\r\n showLoadingAnimation(50);\r\n }, [designListState.selectedFile.id]);\r\n // useEffect(() => {\r\n // if (!designDetailState.fullpath) return;\r\n // AppAnalytics.sendDesignDetails({\r\n // customize: designDetailState.customizationFlag,\r\n // designPath: designDetailState.fullpath\r\n // })\r\n // .then(status => {\r\n // //console.log(\"AppAnalytics.sendDesignDetails ~ status\", status);\r\n // })\r\n // .catch(error => {\r\n // console.log(\" AppAnalytics DesignDetails ~ error\", error);\r\n // });\r\n // }, [designDetailState.designDetails]);\r\n\r\n const setToastProps = props => {\r\n dispatchUiState({ type: mainUiActions.SET_TOAST_PROPS, payload: props });\r\n };\r\n const showLoadingAnimation = (setPercent, timer = 2000) => {\r\n let percentValue = setPercent;\r\n if (uiState.showLoadingOverlay)\r\n dispatchUiState({ type: mainUiActions.SET_LOADING_OVERLAY_PERCENT, payload: percentValue });\r\n setTimeout(() => {\r\n percentValue = percentValue >= 80 ? percentValue : percentValue + 20;\r\n if (uiState.showLoadingOverlay) {\r\n dispatchUiState({ type: mainUiActions.SET_LOADING_OVERLAY_PERCENT, payload: percentValue });\r\n }\r\n }, timer);\r\n };\r\n const handleFavorite = ({ node, newName }) => {\r\n setToastProps({\r\n message: \"Adding to Favorites...\",\r\n intent: \"warning\"\r\n });\r\n const felt = window.flags.isFelt || 0;\r\n var thumbUrl;\r\n const { designDetails, fullpath, hash } = designDetailState;\r\n const thumbnailWidth = 300;\r\n const thumbnailHeight = 400;\r\n AppProvider.getRenderedDesign({\r\n designDetails,\r\n fullpath,\r\n hash,\r\n felt\r\n }).then(canvas => {\r\n const thumbnailCanvas = document.createElement(\"canvas\");\r\n thumbnailCanvas.width = thumbnailWidth;\r\n thumbnailCanvas.height = thumbnailHeight;\r\n const thumbnailContext = thumbnailCanvas.getContext(\"2d\");\r\n thumbnailContext.drawImage(canvas, 0, 0, thumbnailWidth, thumbnailHeight);\r\n thumbUrl = thumbnailCanvas.toDataURL(\"image/jpeg\", 0.95);\r\n const favNode = {\r\n currentUserID: window.window.InterfaceElements.CurrentUserID,\r\n name: newName,\r\n thumbUrl: thumbUrl,\r\n fullPath: designDetailState.fullpath,\r\n designProps: designDetailState.designDetails,\r\n customizationFlag: designDetailState.customizationFlag,\r\n hash: designDetailState.hash,\r\n view: visState.activeNode.FullPath,\r\n id: uuid.v4()\r\n };\r\n dispatchDesignList({ type: designListActions.ADD_FAVORITE, payload: favNode });\r\n let getPageName = sessionStorage.getItem(\"page\");\r\n if (getPageName == \"undefined\") {\r\n getPageName = sessionStorage.getItem(\"username\");\r\n }\r\n localStorage.setItem(\r\n \"favorite designs\" + \"-\" + getPageName,\r\n JSON.stringify([...designListState.favorites, favNode])\r\n );\r\n setToastProps({\r\n message: \"Added to Favorites\",\r\n intent: \"success\"\r\n });\r\n });\r\n // AppAnalytics.sendFavorites({\r\n // designPath: designDetailState.fullpath\r\n // })\r\n // .then(status => {\r\n // //console.log(\"sendFavorites -> status\", status);\r\n // })\r\n // .catch(error => {\r\n // console.log(\" AppAnalytics Favorites ~ error\", error);\r\n // });\r\n };\r\n const replaceOriginal = () => {\r\n const { fullpath, designDetails } = designDetailState;\r\n dispatchUiState({ type: mainUiActions.SET_ISBUSY, payload: true });\r\n AppProvider.saveOnServer({ file: fullpath, props: designDetails }).then(result => {\r\n AppProvider.clearCache({ mode: \"designs\", files: [fullpath] }).then(() => {\r\n AppProvider.getDesignThumbnails({ designs: [{ fullPath: fullpath }] }).then(thumbs => {\r\n dispatchDesignList({\r\n type: designListActions.UPDATE_FILE_PROP,\r\n payload: { ...thumbs[0] }\r\n });\r\n });\r\n if (result) {\r\n dispatchUiState({\r\n type: mainUiActions.SET_TOAST_PROPS,\r\n payload: {\r\n message: strings.tools.designSaveSuccess,\r\n intent: \"success\"\r\n }\r\n });\r\n dispatchUiState({ type: mainUiActions.SET_ISBUSY, payload: false });\r\n } else {\r\n dispatchUiState({\r\n type: mainUiActions.SET_TOAST_PROPS,\r\n payload: {\r\n message: strings.tools.designSaveFail,\r\n intent: \"danger\"\r\n }\r\n });\r\n }\r\n });\r\n });\r\n };\r\n const handleFullScreen = () => {\r\n if (isDeviceSmall) {\r\n dispatchUiState({\r\n type: mainUiActions.SET_SHOW_SIDEBAR,\r\n payload: { left: false, right: false }\r\n });\r\n } else {\r\n dispatchUiState({\r\n type: mainUiActions.SET_SHOW_SIDEBAR,\r\n payload: { left: isFullScreen, right: isFullScreen }\r\n });\r\n }\r\n dispatchUiState({\r\n type: mainUiActions.SET_SHOW_SIDEBAR,\r\n payload: { left: isFullScreen, right: isFullScreen }\r\n });\r\n let fcDelay = 1000;\r\n if (!uiState.showLeftSidebar && !uiState.showRightSidebar && !isFullScreen) {\r\n fcDelay = 0;\r\n }\r\n if (uiState.showLeftSidebar && uiState.showRightSidebar && isFullScreen) {\r\n fcDelay = 0;\r\n }\r\n if (document.body.requestFullscreen) {\r\n setTimeout(() => {\r\n toggleFullscreen();\r\n }, fcDelay);\r\n } else {\r\n toggleFullscreen();\r\n }\r\n };\r\n const handleArp = () => {\r\n localStorage.setItem(\"designpath\", designDetailState.fullpath);\r\n localStorage.setItem(\"key\", sessionStorage.getItem(\"apikey\"));\r\n localStorage.setItem(\"domain\", AppProvider.domain);\r\n window.open(\"https://explorug.com/v3dev/arp/default.aspx\", \"_blank\");\r\n };\r\n\r\n const handleCinematic = () => {\r\n setisCinematic(true);\r\n };\r\n\r\n const handleDownloadImage = () => {\r\n if (window.flags.ordersheet.saveIconActAsOrdersheetSave) {\r\n const getSaveOrdersheetButton = document.getElementById(\"btnSaveOrdersheet\");\r\n if (getSaveOrdersheetButton) {\r\n getSaveOrdersheetButton.click();\r\n return;\r\n }\r\n }\r\n dispatchUiState({\r\n type: mainUiActions.SET_ISBUSY,\r\n payload: true\r\n });\r\n\r\n setToastProps({\r\n message: \"Saving image...\",\r\n intent: \"success\"\r\n });\r\n const download = async () => {\r\n switch (visState.viewMode) {\r\n case visViewModes.ROOM_VIEW:\r\n await window.downloadRendered3dIll();\r\n break;\r\n case visViewModes.MY_ROOM:\r\n await window.SaveAsImage();\r\n break;\r\n\r\n case visViewModes.DESIGN_VIEW_PERSPECTIVE:\r\n case visViewModes.DESIGN_VIEW_FOLDEDBACK:\r\n await window.downloadRenderedPerspectiveIll();\r\n break;\r\n\r\n case visViewModes.CATALOG_VIEW:\r\n await window.downloadRenderedCatalog();\r\n break;\r\n default:\r\n window.downloadRenderedDesign();\r\n break;\r\n }\r\n reset_isBusy();\r\n };\r\n download();\r\n // if (visState.viewMode === visViewModes.ROOM_VIEW) {\r\n // window.downloadRendered3dIll().then(() => {\r\n // reset_isBusy();\r\n // });\r\n // } else if (visState.viewMode === visViewModes.MY_ROOM) {\r\n // window.SaveAsImage().then(() => {\r\n // reset_isBusy();\r\n // });\r\n // } else if (visState.viewMode === visViewModes.DESIGN_VIEW_PERSPECTIVE) {\r\n // window.downloadRenderedPerspectiveIll().then(() => {\r\n // reset_isBusy();\r\n // });\r\n // } else {\r\n // window.downloadRenderedDesign().then(() => {\r\n // reset_isBusy();\r\n // });\r\n // }\r\n };\r\n window.downloadImageForFlutter = handleDownloadImage;\r\n\r\n useEffect(() => {\r\n window.addEventListener(\"message\", async event => {\r\n //done for iframe post on save image or room\r\n function handleToast() {\r\n dispatchUiState({\r\n type: mainUiActions.SET_ISBUSY,\r\n payload: true\r\n });\r\n setToastProps({\r\n message: \"Saving image...\",\r\n intent: \"success\"\r\n });\r\n }\r\n if (event.data == \"saveRoom\") {\r\n handleToast();\r\n await window.downloadRendered3dIll();\r\n }\r\n if (event.data == \"saveDesign\") {\r\n handleToast();\r\n await window.downloadRenderedDesign();\r\n }\r\n reset_isBusy();\r\n });\r\n }, []);\r\n\r\n const reset_isBusy = () => {\r\n setTimeout(() => {\r\n dispatchUiState({\r\n type: mainUiActions.SET_ISBUSY,\r\n payload: false\r\n });\r\n }, 2000);\r\n };\r\n useEffect(() => {\r\n if (isDeviceSmall) {\r\n if (designDetailState.loading) {\r\n dispatchUiState({\r\n type: mainUiActions.SET_SHOW_SIDEBAR,\r\n payload: { right: false, left: false }\r\n });\r\n }\r\n }\r\n }, [designDetailState.loading]);\r\n const setOpenRugShare = show => {\r\n dispatchUiState({ type: mainUiActions.SET_SHOW_RUGSHARE, payload: show });\r\n };\r\n\r\n const rugshareCondition = window.InterfaceElements.IsAdmin\r\n ? window.InterfaceElements.ShowRugshare\r\n : window.InterfaceElements.ShowRugshare && flags.hasRugshare;\r\n const renderTemplate = () => {\r\n if (window.initialData.customDesignUrl)\r\n return (\r\n {\"Extract colors from image\"}
\r\n\r\n {!currentState && (\r\n <>\r\n
Drag and Drop your image file here\"}\r\n />\r\n \r\n )}\r\n {currentState === 1 && (\r\n
\r\n )}\r\n \r\n \r\n {\r\n setImageUrl(e.target.value);\r\n }}\r\n />\r\n \r\n Upload\r\n \r\n
\r\n\r\n Drag and Drop your image file here\"}\r\n />\r\n \r\n )}\r\n {currentState === 1 && (\r\n
\r\n \r\n
\r\n )}\r\n\r\n {currentState === 2 && (\r\n \r\n
\r\n \r\n
\r\n \r\n {lastOpenedImage && 
}\r\n
\r\n \r\n
\r\n \r\n {palette_hex.length &&\r\n palette_hex.map((paletteColor, index) => (\r\n \r\n {\r\n setShowColorSwatchBg(true);\r\n }}\r\n onLoad={() => setShowColorSwatchBg(false)}\r\n />\r\n
\r\n ))}\r\n \r\n applycolors(newColorPalette)}>\r\n Apply\r\n \r\n setCurrentState(state.Preload)}>\r\n Load new image\r\n \r\n \r\n Cancel\r\n \r\n
\r\n \r\n \r\n
\r\n )}\r\n \r\n );\r\n switch (template) {\r\n case pageViews.HOME:\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nColorsPage.propTypes = {};\r\n\r\nexport default ColorsPage;\r\n","import { useMount } from \"react-use\";\r\nimport AppProvider from \"../api/appProvider\";\r\nimport { colorListActions, useDispatchColorList } from \"../reducers/colors.reducer\";\r\nimport {\r\n designDetailActions,\r\n useDispatchDesignDetail\r\n} from \"../reducers/designdetails.reducer\";\r\nimport {\r\n designListActions,\r\n useDesignListState,\r\n useDispatchDesignList\r\n} from \"../reducers/designlist.reducer\";\r\nimport { mainUiActions, useUiDispatch } from \"../reducers/mainui.reducer\";\r\nimport { arrangeTree, findInTree, getDesignName } from \"../utils/treeutils\";\r\nimport uuid from \"uuid\";\r\nimport { errorTypes } from \"../utils/utils\";\r\nimport { useEffect } from \"react\";\r\n\r\nexport const useInitSetupMount = () => {\r\n const designListState = useDesignListState();\r\n const dispatchDesignList = useDispatchDesignList();\r\n const dispatchDesignDetails = useDispatchDesignDetail();\r\n const dispatchColorListState = useDispatchColorList();\r\n const dispatchUiState = useUiDispatch();\r\n\r\n const { initDesignPath, initDesignFolder } = window.initialData;\r\n\r\n useMount(() => {\r\n if (designListState.tree) {\r\n return;\r\n }\r\n AppProvider.fetchColorList({}).then(colors => {\r\n if (colors && colors.length) {\r\n if (\r\n window.flags.colorSelectionBox.showColorPomsImages ||\r\n window.flags.colorAreaSwatch.showColorPomsImages\r\n ) {\r\n var colorListStr = \"\";\r\n colors.forEach((colorList, index) => {\r\n const colorRows = colorList.ColorRows;\r\n const colorHexList = colorRows.map(colorRow => colorRow.Color);\r\n for (let i = 0; i < colorHexList.length; i++) {\r\n colorListStr += colorHexList[i].replace(\"#\", \"\") + \"|\";\r\n }\r\n });\r\n colorListStr = colorListStr.slice(0, -1);\r\n AppProvider.createColorPoms(colorListStr).then(response => {});\r\n }\r\n }\r\n dispatchColorListState({ type: colorListActions.SET_COLORS, payload: colors });\r\n });\r\n\r\n \r\n const initDesignList = () => {\r\n const p = initDesignPath.split(\"/\").filter(item => item && item !== \"\");\r\n const designNamewithExt = p[p.length - 1];\r\n const designNamewithExtArr = designNamewithExt.split(\".\");\r\n let designName = designNamewithExtArr.slice(0, designNamewithExtArr.length - 1).join(\".\");\r\n\r\n p.pop();\r\n const path = \"/\" + p.join(\"/\");\r\n AppProvider.fetchDesignList({ struct: true }).then(nestedDesignList => {\r\n const initDesignName = window.flags.initDesignNameInUrl\r\n ? getDesignName(initDesignPath)\r\n : \"\";\r\n const initDesignPathInTree = findInTree({\r\n rawTree: nestedDesignList,\r\n initDesignPath,\r\n initDesignFolder,\r\n initDesignName\r\n });\r\n\r\n const designPath = window.flags.initDesignNameInUrl ? initDesignPathInTree : initDesignPath;\r\n const { copiedNode: tree, selectedFile, selectedFolder } = arrangeTree({\r\n tree: nestedDesignList,\r\n initDesignPath: designPath\r\n });\r\n\r\n AppProvider.getDesignThumbnails({ designs: [{ fullPath: designPath }] })\r\n .then(thum => {\r\n const thumbnail = thum[0];\r\n const { thumbUrl, designProps, fullPath } = thumbnail;\r\n if (!thumbUrl || !designProps) {\r\n dispatchUiState({ type: mainUiActions.SET_ERROR, payload: errorTypes.INVALID_LINK });\r\n return;\r\n }\r\n let designDetails = designProps;\r\n\r\n if (fullPath.toLowerCase() === designPath.toLowerCase()) {\r\n dispatchDesignList({\r\n type: designListActions.SET_TREE,\r\n payload: {\r\n tree,\r\n selectedFile: {\r\n id: uuid.v4(),\r\n name: designName,\r\n location: path,\r\n type: \"file\",\r\n fullPath,\r\n thumbUrl,\r\n designProps: designDetails\r\n },\r\n selectedFolder\r\n }\r\n });\r\n if (!selectedFile) {\r\n dispatchDesignList({\r\n type: designListActions.SELECT_DESIGN,\r\n payload: {\r\n id: uuid.v4(),\r\n name: designName,\r\n location: path,\r\n type: \"file\",\r\n fullPath,\r\n thumbUrl,\r\n designProps: designDetails\r\n }\r\n });\r\n }\r\n //postmessage\r\n if (window.flags.postToParentWhenLoaded)\r\n window.parent.postMessage(\"explorug loaded\", \"*\");\r\n }\r\n })\r\n .catch(error => {\r\n dispatchUiState({ type: mainUiActions.SET_ERROR, payload: errorTypes.INVALID_LINK });\r\n });\r\n });\r\n };\r\n initDesignList();\r\n });\r\n\r\n useEffect(() => {\r\n const { selectedFile, activeVariation } = designListState;\r\n let {\r\n designProps: designDetails,\r\n name: designName,\r\n fullPath,\r\n customizationFlag\r\n } = selectedFile;\r\n if (!designDetails) return;\r\n if (window.flags.designVariations.preserveVariations || activeVariation.id) {\r\n if (activeVariation.designProps) designDetails = activeVariation.designProps;\r\n designName = activeVariation.name;\r\n fullPath = activeVariation.fullPath;\r\n }\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_DETAILS,\r\n payload: {\r\n designDetails,\r\n label: designName,\r\n fullpath: fullPath,\r\n customizationFlag,\r\n setCustomConversion: window.flags.ordersheet.customConversion.setCustomConversion || false,\r\n customInToCmFactor: window.flags.ordersheet.customConversion.customInToCmFactor\r\n }\r\n });\r\n }, [designListState.selectedFile.id]);\r\n};\r\n","import { Classes } from \"@blueprintjs/core\";\r\nimport classNames from \"classnames\";\r\nimport React, { useEffect, useRef, useState } from \"react\";\r\nimport { handleNavigation } from \"../../../utils/domUtils\";\r\nimport AtIcon from \"../../atoms/AtIcon\";\r\nimport LazyThumbnail from \"../../pages/DesignBrowser/LazyThumbnail\";\r\nimport { thumbnailTemplates } from \"../../pages/EntryPage/defaultflags\";\r\nimport DesignSearchBar from \"../DesignSearch/DesignSearchBar\";\r\nimport { useDesignListState } from \"../../../reducers/designlist.reducer\";\r\nimport strings from \"../../../strings\";\r\nimport DesignSearchResults from \"../DesignSearch/DesignSearchResults\";\r\n\r\nconst Collection = props => {\r\n const {\r\n Tree,\r\n handleThumbnailClick,\r\n level = 0,\r\n defaultFolder,\r\n selectedFile,\r\n className = \"\",\r\n showNavigatorArrows = true\r\n } = props;\r\n const [nagivatorArrowsNeeded, setNagivatorArrowsNeeded] = useState(false);\r\n const thumbContainerRef = useRef(null);\r\n const designListState = useDesignListState();\r\n const { sizeFilter, tagFilter } = designListState;\r\n const Folders = Tree.children || [];\r\n const nodeItems = Folders.filter(\r\n node => node && (node.children.length || node.files.length) && node.name.charAt(0) !== \".\"\r\n );\r\n const [selectedFolder, setSelectedFolder] = useState(\r\n defaultFolder ? defaultFolder : nodeItems.length ? nodeItems[0] : null\r\n );\r\n const [textToSearch, setTextToSearch] = useState(\"\");\r\n const [showSearchResults, setShowSearchResults] = useState(\"none\");\r\n useEffect(() => {\r\n setTimeout(() => {\r\n let isNagivatorArrowsNeeded = false;\r\n const collectionContainer = document.querySelector(\r\n \".design-controller__thumbs-area__container\"\r\n );\r\n if (\r\n collectionContainer &&\r\n collectionContainer.clientWidth < collectionContainer.scrollWidth\r\n ) {\r\n isNagivatorArrowsNeeded = true;\r\n }\r\n setNagivatorArrowsNeeded(isNagivatorArrowsNeeded);\r\n }, 1000);\r\n\r\n const folderName = selectedFile?.location.split(\"/\").pop();\r\n const node = Folders.find(item => item.name === folderName);\r\n if (node) {\r\n setSelectedFolder(node);\r\n }\r\n }, []);\r\n const onFolderClick = node => {\r\n setSelectedFolder(node);\r\n };\r\n const handleNavigator = direction => {\r\n const elem = thumbContainerRef.current;\r\n handleNavigation({ elem, direction });\r\n };\r\n\r\n const handleSearch = e => {\r\n let text = e.target.value;\r\n setTextToSearch(text);\r\n if (text.length > 2) {\r\n setShowSearchResults(\"design\");\r\n } else if (text === \"\") {\r\n if (!sizeFilter.find(item => !!item.selected)) setShowSearchResults(\"none\");\r\n //else if (tagFilter === \"\") setShowSearchResults(\"none\");\r\n else {\r\n setShowSearchResults(\"design\");\r\n }\r\n setTextToSearch(\"\");\r\n }\r\n };\r\n\r\n const handleCancel = () => {\r\n setTextToSearch(\"\");\r\n if (tagFilter === \"\") setShowSearchResults(\"none\");\r\n };\r\n\r\n const handleFilterDesigns = (filter, e) => {\r\n if (!filter && textToSearch.length <= 2) {\r\n setShowSearchResults(\"none\");\r\n }\r\n if (showSearchResults !== \"design\") setShowSearchResults(\"design\");\r\n };\r\n\r\n return (\r\n <>\r\n \r\n }>{renderOrdersheet} }\r\n {window.flags.hasOrderSheet &&\r\n !showOrdersheetOutside() &&\r\n !uiState.showOrderSheet &&\r\n showOrdersheetBtnWithColors() &&
\r\n \r\n handleSearch(e)}\r\n placeholder={strings.design.searchDesigns}\r\n textToSearch={textToSearch}\r\n handleCancel={handleCancel}\r\n handleFilter={handleFilterDesigns}\r\n type=\"design\"\r\n />\r\n
\r\n \r\n {selectedFolder && (\r\n \r\n {selectedFolder.files.map((file, index) => (\r\n \r\n handleThumbnailClick && handleThumbnailClick(file, index)\r\n }\r\n key={index}\r\n node={file}\r\n className={classNames({ active: file.fullPath === selectedFile?.fullPath })}\r\n />\r\n ))}\r\n
\r\n )}\r\n {showNavigatorArrows && nagivatorArrowsNeeded && (\r\n \r\n handleNavigator(\"right\")}\r\n />\r\n handleNavigator(\"left\")}\r\n />\r\n
\r\n )}\r\n \r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nCollection.propTypes = {};\r\n\r\nexport default Collection;\r\n","import { useMount } from \"react-use\";\r\nimport AppProvider from \"../api/appProvider\";\r\nimport {\r\n designListActions,\r\n useDesignListState,\r\n useDispatchDesignList\r\n} from \"../reducers/designlist.reducer\";\r\nimport { mainUiActions, useUiDispatch } from \"../reducers/mainui.reducer\";\r\nimport { arrangeTree, findInTree, getDesignName, updateNodeProps } from \"../utils/treeutils\";\r\nimport { getAllFiles, updateFilesInEveryNode } from \"../utils/treeutils\";\r\nimport { getFromSessionStorage } from \"../utils/domUtils\";\r\nimport strings from \"../strings\";\r\nimport { useEffect } from \"react\";\r\nimport { designDetailActions, useDispatchDesignDetail } from \"../reducers/designdetails.reducer\";\r\n\r\nexport const useInitDesignMount = props => {\r\n const primaryList = props?.primaryList ? props.primaryList : true;\r\n //const { primaryList = true } = props;\r\n const designListState = useDesignListState();\r\n const dispatchDesignList = useDispatchDesignList();\r\n const dispatchDesignDetails = useDispatchDesignDetail();\r\n\r\n const dispatchUiState = useUiDispatch();\r\n\r\n const {\r\n expandSelectedFolderInit,\r\n hasFilterBySize,\r\n keepFoldersExpanded\r\n } = window.flags.designListTree;\r\n\r\n const { initDesignPath, initDesignFolder } = window.initialData;\r\n\r\n useMount(() => {\r\n if (designListState.tree || !primaryList) return;\r\n if (\r\n initDesignPath &&\r\n window.flags.accountSpecific.tamarian.enableCustomShare &&\r\n initDesignPath.includes(\"CustomSized\")\r\n )\r\n return;\r\n const initDesignList = async () => {\r\n const nestedDesignList = await AppProvider.fetchDesignList({ struct: true });\r\n const initDesignName = window.flags.initDesignNameInUrl ? getDesignName(initDesignPath) : \"\";\r\n\r\n const initDesignPathInTree = findInTree({\r\n rawTree: nestedDesignList,\r\n initDesignPath,\r\n initDesignFolder,\r\n initDesignName\r\n });\r\n\r\n //code to get rooms control list of specific folder in talisman. Need to use to update their roomscontrol.\r\n //do NOT remove.\r\n // const testtree= searchFoldersInTree(nestedDesignList[0].Children, \"sudhirkadam\");\r\n // console.log(\"initDesignList ->\", testtree);\r\n // let ctrlHtml = '[';\r\n // testtree[0].Children.forEach(element => {\r\n // console.log(\"initDesignList -> element.type\", element.Type)\r\n\r\n // if(element.Type==='file'){\r\n // const design = (element.FullPath.replace('Designs','').replace('.ctf',''));\r\n // ctrlHtml+='{ \"rooms\": [],\"design\": \"'+design+'\"},'\r\n // }\r\n // else{\r\n // if(element.Children.length){\r\n // element.Children.forEach(variationFile => {\r\n // if(variationFile.Type==='file'){\r\n // const design = (variationFile.FullPath.replace('Designs','').replace('.ctf',''));\r\n // ctrlHtml+='{ \"rooms\": [],\"design\": \"'+design+'\"},'\r\n // }\r\n // });\r\n // }\r\n // }\r\n // });\r\n // console.log(\"initDesignList -> ctrlHtml\", ctrlHtml)\r\n\r\n //expand the collection panels if present\r\n //keepFoldersExpanded overwrites expandSekectedFolderInit\r\n if (initDesignPath && initDesignPath !== \"\" && !initDesignPathInTree) {\r\n const message = strings.toastMessages.initDesignNotFound.replace(\r\n \"{initDesignPath}\",\r\n initDesignPath\r\n );\r\n dispatchUiState({\r\n type: mainUiActions.SET_TOAST_PROPS,\r\n payload: { message, intent: \"warning\", timeout: 7000 }\r\n });\r\n }\r\n\r\n const { copiedNode: tree, selectedFile, selectedFolder } = arrangeTree({\r\n tree: nestedDesignList,\r\n initDesignPath: initDesignPathInTree,\r\n expandSelectedFolder: expandSelectedFolderInit,\r\n designfromFolder: initDesignFolder,\r\n keepFoldersExpanded\r\n });\r\n window.getDesignTree = () => {\r\n console.log(\"initDesignList -> tree\", JSON.stringify(tree));\r\n };\r\n\r\n const { files } = selectedFolder;\r\n const items = await AppProvider.getDesignThumbnails({ designs: [selectedFile] });\r\n let updatedSelectedFile = selectedFile;\r\n const item = items[0];\r\n const index = files.findIndex(fileInNode => item.fullPath === fileInNode.fullPath);\r\n if (index !== -1) {\r\n files[index] = item;\r\n updatedSelectedFile = item;\r\n }\r\n const updatedSelectedFolder = { ...selectedFolder, files };\r\n let designTree;\r\n designTree = updateNodeProps(tree, updatedSelectedFolder, \"files\");\r\n if (hasFilterBySize) {\r\n const x = getAllFiles(designTree);\r\n const thumbs = await AppProvider.getDesignThumbnails({ designs: x });\r\n designTree = updateFilesInEveryNode(designTree, thumbs);\r\n }\r\n\r\n dispatchDesignList({\r\n type: designListActions.SET_TREE,\r\n payload: {\r\n tree: designTree,\r\n selectedFolder: updatedSelectedFolder,\r\n selectedFile: updatedSelectedFile\r\n }\r\n });\r\n\r\n var tagFromUrl = getFromSessionStorage(\"wordcloudtag\") || \"\";\r\n if (tagFromUrl !== \"\") {\r\n tagFromUrl = tagFromUrl.replace(/_/g, \"&\");\r\n dispatchDesignList({\r\n type: designListActions.SET_TAG_FILTER,\r\n payload: tagFromUrl\r\n });\r\n }\r\n };\r\n initDesignList();\r\n });\r\n\r\n useEffect(() => {\r\n const { selectedFile, activeVariation } = designListState;\r\n let {\r\n designProps: designDetails,\r\n name: designName,\r\n fullPath,\r\n customizationFlag\r\n } = selectedFile;\r\n if (!designDetails) return;\r\n if (window.flags.designVariations.preserveVariations || activeVariation.id) {\r\n if (activeVariation.designProps) designDetails = activeVariation.designProps;\r\n designName = activeVariation.name;\r\n fullPath = activeVariation.fullPath;\r\n }\r\n dispatchDesignDetails({\r\n type: designDetailActions.SET_DETAILS,\r\n payload: {\r\n designDetails,\r\n label: designName,\r\n fullpath: fullPath,\r\n customizationFlag,\r\n setCustomConversion: window.flags.ordersheet.customConversion.setCustomConversion || false,\r\n customInToCmFactor: window.flags.ordersheet.customConversion.customInToCmFactor\r\n }\r\n });\r\n }, [designListState.selectedFile.id]);\r\n};\r\n","import axios from \"axios\";\r\nimport React, { useEffect, useState } from \"react\";\r\nimport AppProvider, { getPageName } from \"../../../api/appProvider\";\r\nimport {\r\n designDetailActions,\r\n useDesignDetailState,\r\n useDispatchDesignDetail\r\n} from \"../../../reducers/designdetails.reducer\";\r\nimport { useDesignListState } from \"../../../reducers/designlist.reducer\";\r\nimport { useUiDispatch, mainUiActions } from \"../../../reducers/mainui.reducer\";\r\nimport { useVisualizationState } from \"../../../reducers/visualizations.reducer\";\r\nimport classNames from \"classnames\";\r\n\r\nimport AtIcon from \"../../atoms/AtIcon\";\r\nimport { Classes } from \"@blueprintjs/core\";\r\n\r\nconst sections = {\r\n messagePlatforms: [\r\n {\r\n title: \"Viber\",\r\n id: \"ViberPreview\",\r\n previewLink: false,\r\n themeColor: \"#4C33FF\",\r\n iconPath: \"viber\",\r\n link: url => `viber://forward?text=${url}`\r\n },\r\n {\r\n title: \"WhatsApp\",\r\n id: \"WhatsAppPreview\",\r\n previewLink: true,\r\n themeColor: \"#25D366\",\r\n iconPath: \"whatsapp\",\r\n link: url => `whatsapp://send?text=${url}`\r\n },\r\n // {\r\n // title: \"Skype\",\r\n // id: \"SkypePreview\",\r\n // previewLink: false,\r\n // themeColor: \"#28C5FF\",\r\n // iconPath: \"skype\",\r\n // link: url => url\r\n // },\r\n {\r\n title: \"Email\",\r\n id: \"EmailPreview\",\r\n previewLink: false,\r\n themeColor: \"#FF9E23\",\r\n iconPath: \"email\",\r\n link: url => `mailto:?subject=Customize My Rug&body= Please visit ${url} to customize my rug.`\r\n },\r\n {\r\n title: \"QR Code\",\r\n id: \"QRPreview\",\r\n previewLink: false,\r\n themeColor: \"#28C5FF\",\r\n iconPath: \"qr-code\",\r\n link: url => url\r\n }\r\n ],\r\n postPlatforms: [\r\n {\r\n title: \"Facebook\",\r\n id: \"FacebookPreview\",\r\n previewLink: true,\r\n themeColor: \"#4495FF\",\r\n iconPath: \"facebook\",\r\n link: url => `http://www.facebook.com/sharer.php?u=${url}`\r\n },\r\n {\r\n title: \"Twitter\",\r\n id: \"TwitterPreview\",\r\n previewLink: true,\r\n themeColor: \"#50BCFF\",\r\n iconPath: \"x\",\r\n link: url => `http://twitter.com/share?url=${url}`\r\n },\r\n {\r\n title: \"LinkedIn\",\r\n id: \"LinkedInPreview\",\r\n previewLink: false,\r\n themeColor: \"#5FA8FF\",\r\n iconPath: \"linkedin\",\r\n link: url => `http://www.linkedin.com/shareArticle?mini=true&url=${url}`\r\n },\r\n {\r\n title: \"Pinterest\",\r\n id: \"PinterestPreview\",\r\n previewLink: false,\r\n themeColor: \"#FF7388\",\r\n iconPath: \"pinterest\",\r\n link: url => `http://pinterest.com/pin/create/button/?url=${url}`\r\n }\r\n ]\r\n};\r\n\r\nconst isSkype = title => {\r\n return title === \"Skype\";\r\n};\r\nconst isFacebook = title => {\r\n return title === \"Facebook\";\r\n};\r\nconst SocialMediaShare = props => {\r\n const roomState = useVisualizationState();\r\n const dispatchUiState = useUiDispatch();\r\n const state = useDesignListState();\r\n const designDetailState = useDesignDetailState();\r\n const dispatchDesignState = useDispatchDesignDetail();\r\n const [catUrl, setCatUrl] = useState();\r\n\r\n useEffect(() => {\r\n const { selectedFile, activeColorScheme, activeShape, activeVariation } = state;\r\n const selectedFileFullPath = selectedFile?.fullPath;\r\n var activeColorSchemeFullPath = activeColorScheme.fullPath?.split(\"/\").pop();\r\n var activeShapeFullPath = activeShape.fullPath?.split(\"/\").pop();\r\n var activeVariationFullPath = activeVariation?.fullPath;\r\n\r\n var initview;\r\n var initvar = activeVariationFullPath ? activeVariationFullPath : activeColorSchemeFullPath;\r\n if (initvar) {\r\n const initvarParts = initvar.split(\".\");\r\n initvarParts.pop();\r\n initvar = initvarParts\r\n .join(\".\")\r\n .split(\"/\")\r\n .pop();\r\n }\r\n var initShapeVar = activeShapeFullPath || \"original\";\r\n if (initShapeVar) {\r\n const initShapeVarParts = initShapeVar.split(\".\");\r\n initShapeVarParts.pop();\r\n initShapeVar = initShapeVarParts.join(\".\");\r\n }\r\n // console.log(\"initvar\", initvar, \"initShapeVar\", initShapeVar);\r\n let url = `${window.location.href}/explorug.html?initdesign=${selectedFileFullPath}`;\r\n if (initvar) {\r\n url += `&initvar=${initvar}`;\r\n }\r\n if (initShapeVar) {\r\n url += `&initshapevar=${initShapeVar}`;\r\n }\r\n if (roomState.viewMode === \"MY_ROOM\") {\r\n initview = \"myroom\";\r\n } else {\r\n initview = roomState.activeNode.FullPath;\r\n }\r\n url += `&initview=${initview}`;\r\n url += \"&mode=ecat&pageview=createyourrug&page=\" + getPageName()?.page;\r\n // console.log(\"url\", url);\r\n url = encodeURIComponent(url);\r\n let selectedFileFullPathTemp = designDetailState.fullpath;\r\n if (\r\n window.flags.accountSpecific.tamarian.enableCustomShare &&\r\n designDetailState.customSize.x != 0\r\n ) {\r\n selectedFileFullPathTemp = designDetailState.customSize.currentCustomSizeFilename;\r\n }\r\n let data = new FormData();\r\n data.append(\"url\", url);\r\n axios.post(\"https://explorug.com/go/shortener.aspx\", data).then(res => {\r\n if (res && res.data) {\r\n AppProvider.publishDesign({\r\n file: selectedFileFullPathTemp,\r\n props: window.flags.rugshare.shareCustomizedDesign\r\n ? designDetailState.designDetails\r\n : null,\r\n view: initview,\r\n title: selectedFile.name,\r\n desc: window.flags.rugshare.socialMediaShareDescription,\r\n fullurl:\r\n window.flags.accountSpecific.tamarian.enableCustomShare &&\r\n designDetailState.customSize.x != 0\r\n ? \"\"\r\n : res.data,\r\n mode: \"CYR\"\r\n }).then(data => {\r\n setCatUrl(data.CatalogCache);\r\n // if (data.Url.includes(\"/\")) {\r\n // const getCid = data.Url.split(\"/\").pop();\r\n // const urlWithCid = url + \"&cid=\" + getCid;\r\n // let data1 = new FormData();\r\n // data1.append(\"url\", urlWithCid);\r\n // setCatUrl(urlWithCid);\r\n // // axios.post(\"https://explorug.com/go/shortener.aspx\", data1, {}).then(res => {\r\n // // if ((res && res.data) || window.flags.createYourRug.saveColorPropsinQr) {\r\n // // const shortenUrl = res.data;\r\n // // var shareurl = \"\";\r\n // // shareurl = platform.link(shortenUrl);\r\n // // console.log(shortenUrl);\r\n // // dispatchDesignState({ type: designDetailActions.SET_URL_QR, payload: shortenUrl });\r\n // // }\r\n // // });\r\n // }\r\n });\r\n }\r\n });\r\n }, []);\r\n\r\n const getCurrentSelectedSet = platform => {\r\n var shareurl = \"\";\r\n shareurl = platform.link(catUrl);\r\n dispatchDesignState({ type: designDetailActions.SET_URL_QR, payload: catUrl });\r\n if (platform.title === \"QR Code\") {\r\n dispatchUiState({ type: mainUiActions.SET_QR_DIALOG, payload: true });\r\n return;\r\n }\r\n window.open(shareurl, \"_blank\");\r\n\r\n if (isSkype(platform.title)) {\r\n const skypeShareButton = document.getElementById(\"skypeshare\");\r\n console.log(\"skypeShareButton\", skypeShareButton);\r\n skypeShareButton.setAttribute(\"data-href\", shareurl);\r\n skypeShareButton.click();\r\n }\r\n };\r\n return (\r\n \r\n
\r\n\r\n Share This View
\r\n\r\n \r\n {sections &&\r\n sections.messagePlatforms.length &&\r\n sections.messagePlatforms.map((platform, index) => (\r\n
\r\n ))}\r\n \r\n {platform.title === \"Skype\" && (\r\n <>\r\n
\r\n {setSkypeBtn()}\r\n \r\n )}\r\n getCurrentSelectedSet(platform)}>\r\n
\r\n \r\n
\r\n {platform.title}
\r\n \r\n Post to Social Media\r\n
\r\n\r\n \r\n {sections &&\r\n sections.postPlatforms.length &&\r\n sections.postPlatforms.map((platform, index) => (\r\n getCurrentSelectedSet(platform)}\r\n >\r\n
\r\n ))}\r\n \r\n \r\n );\r\n};\r\n\r\nSocialMediaShare.propTypes = {};\r\n\r\nexport default SocialMediaShare;\r\n\r\nfunction setSkypeBtn() {\r\n (function(r, d, s) {\r\n r.loadSkypeWebSdkAsync =\r\n r.loadSkypeWebSdkAsync ||\r\n function(p) {\r\n var js,\r\n sjs = d.getElementsByTagName(s)[0];\r\n if (d.getElementById(p.id)) {\r\n return;\r\n }\r\n js = d.createElement(s);\r\n js.id = p.id;\r\n js.src = p.scriptToLoad;\r\n js.onload = p.callback;\r\n sjs.parentNode.insertBefore(js, sjs);\r\n };\r\n var p = {\r\n scriptToLoad: \"https://swx.cdn.skype.com/shared/v/latest/skypewebsdk.js\",\r\n id: \"skype_web_sdk\"\r\n };\r\n r.loadSkypeWebSdkAsync(p);\r\n })(window, document, \"script\");\r\n}\r\n","//this component shows ordersheet or ordersheet button when necessary\r\nimport React, { Suspense, useEffect } from \"react\";\r\nimport OrderSheet from \".\";\r\nimport AppProvider from \"../../../api/appProvider\";\r\nimport {\r\n designDetailActions,\r\n useDesignDetailState,\r\n useDispatchDesignDetail\r\n} from \"../../../reducers/designdetails.reducer\";\r\nimport { mainUiActions, useUiDispatch, useUiState } from \"../../../reducers/mainui.reducer\";\r\nimport { showOrdersheetOutside } from \"../../../utils/flagUtils\";\r\nimport TearSheet from \"../../molecules/TearSheet\";\r\nimport OrdersheetButton from \"./OrdersheetBtn\";\r\nimport { getExplorugData, postDetailsToParent } from \"../../../middleware/ordersheet.middleware\";\r\nimport { useOrdersheetDetailState } from \"../../../reducers/ordersheetdetails.reducer\";\r\nimport { usePriceCalculator } from \"../../../hooks\";\r\n\r\nconst OrdersheetArea = props => {\r\n const { openOrdersheetBydefault } = props;\r\n const designDetailState = useDesignDetailState();\r\n const dispatchDesignDetails = useDispatchDesignDetail();\r\n const { customFields } = designDetailState;\r\n const dispatchUiState = useUiDispatch();\r\n const ordersheetDetailState = useOrdersheetDetailState();\r\n const uiState = useUiState();\r\n const setOpenOrderSheet = show =>\r\n dispatchUiState({ type: mainUiActions.SET_SHOW_ORDERSHEET, payload: show });\r\n const setCustomFieldsLoading = value => {\r\n dispatchDesignDetails({ type: designDetailActions.SET_CUSTOM_FIELDS_LOADING, payload: value });\r\n };\r\n const setCustomFields = fields => {\r\n dispatchDesignDetails({ type: designDetailActions.SET_CUSTOM_FIELDS, payload: fields });\r\n };\r\n\r\n const displayOrderSheetButton = () => {\r\n return (\r\n window.flags.hasOrderSheet &&\r\n !showOrdersheetOutside() &&\r\n !uiState.showOrderSheet &&\r\n window.flags.createYourRug.showOrdersheetBtnBelowColorsArea\r\n );\r\n };\r\n\r\n useEffect(() => {\r\n if (showOrdersheetOutside()) {\r\n if (customFields.fields) {\r\n setOpenOrderSheet(true);\r\n return;\r\n }\r\n setCustomFieldsLoading(true);\r\n AppProvider.fetchCustomFieldOrdersheet()\r\n .then(data => {\r\n setCustomFieldsLoading(false);\r\n setCustomFields(data);\r\n setOpenOrderSheet(true);\r\n })\r\n .catch(err => {})\r\n .finally(() => {\r\n setCustomFieldsLoading(false);\r\n });\r\n }\r\n }, []);\r\n\r\n const price = usePriceCalculator({\r\n ...designDetailState,\r\n showPrice: window.InterfaceElements.ShowPrice && !window.initialData.customDesignUrl\r\n });\r\n\r\n const handleAddtoCart = (text = \"\") => {\r\n const {\r\n passDesignNameAsDesignId,\r\n passQualityFromFolderName,\r\n sendOrigDesignColors,\r\n passTotalArea\r\n } = window.flags.explorugData;\r\n getExplorugData({\r\n designDetailState: designDetailState,\r\n ordersheetDetailState: ordersheetDetailState,\r\n showPrice: window.InterfaceElements.ShowPrice,\r\n price: price,\r\n passDesignNameAsDesignId: passDesignNameAsDesignId,\r\n passQualityFromFolderName: passQualityFromFolderName,\r\n sendOrigDesignColors: sendOrigDesignColors,\r\n passTotalArea: passTotalArea,\r\n origDesignColors: designDetailState.history[0]\r\n ? designDetailState.history[0].designDetails.DesignColors\r\n : designDetailState.designDetails.DesignColors\r\n }).then(data => {\r\n if (text !== \"\") {\r\n data = Object.assign({}, data, { text: text });\r\n }\r\n postDetailsToParent(data);\r\n });\r\n };\r\n\r\n return (\r\n \r\n
\r\n {platform.title}
\r\n \r\n {window.flags.hasOrderSheet &&\r\n (showOrdersheetOutside() || uiState.showOrderSheet) &&\r\n window.flags.createYourRug.showOrdersheetBtnBelowColorsArea && (\r\n }>\r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nOrdersheetArea.propTypes = {};\r\n\r\nexport default OrdersheetArea;\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport strings from \"../../../strings\";\r\nimport { SectionHeading } from \"../../molecules/CustomCollapse\";\r\nimport Thumbnail from \"../../molecules/Thumbnail\";\r\nimport {\r\n useDispatchVisualization,\r\n visViewModes,\r\n visualizationsActions\r\n} from \"../../../reducers/visualizations.reducer\";\r\nimport { useDesignListState } from \"../../../reducers/designlist.reducer\";\r\nimport classNames from \"classnames\";\r\nimport {\r\n useDispatchDesignDetail,\r\n designDetailActions\r\n} from \"../../../reducers/designdetails.reducer\";\r\nimport { resolveZoomValue } from \"../../../middleware/visualization.middleware\";\r\n\r\nconst DesignViewsCYR = props => {\r\n const { detailViewsOptions, currentDetailView, setCurrentDetailView, scrollIntoView } = props;\r\n const designListState = useDesignListState();\r\n const { selectedFile } = designListState;\r\n const dispatchVisState = useDispatchVisualization();\r\n const dispatchDesignState = useDispatchDesignDetail();\r\n\r\n const getviewModeText = mode => {\r\n const { designViews } = strings;\r\n switch (mode) {\r\n case visViewModes.DESIGN_VIEW_DEEPZOOM:\r\n return designViews.deepZoomCYR;\r\n case visViewModes.DESIGN_VIEW_PERSPECTIVE:\r\n return designViews.interactiveCYR;\r\n case visViewModes.DESIGN_VIEW_ZERO_ZOOM:\r\n return designViews.zeroZoomCYR;\r\n default:\r\n return null;\r\n }\r\n };\r\n return (\r\n \r\n {displayOrderSheetButton() && (\r\n
\r\n \r\n
\r\n )}\r\n {window.flags.ordersheet.showTearSheet && (\r\n \r\n
\r\n );\r\n};\r\n\r\nDesignViewsCYR.propTypes = {};\r\n\r\nexport default DesignViewsCYR;\r\n","import React, { useState } from \"react\";\r\nimport AtDialog from \"../../molecules/AtDialog\";\r\nimport { Button, Toast, Toaster } from \"@blueprintjs/core\";\r\nimport AtIcon from \"../../atoms/AtIcon\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\nimport strings from \"../../../strings\";\r\nimport { useUiDispatch, mainUiActions, useUiState } from \"../../../reducers/mainui.reducer\";\r\nimport { useDesignDetailState } from \"../../../reducers/designdetails.reducer\";\r\nimport { copyToClipboard } from \"../../../utils/domUtils\";\r\nvar QRCode = require(\"qrcode.react\");\r\nconst QRDialog = props => {\r\n const dispatchUiState = useUiDispatch();\r\n const uiState = useUiState();\r\n const designDetailState = useDesignDetailState();\r\n const [toastProps, setToastProps] = useState(false);\r\n const handleCloseDialog = () => {\r\n dispatchUiState({ type: mainUiActions.SET_QR_DIALOG, payload: false });\r\n setToastProps(false);\r\n };\r\n\r\n const handleClickQR = () => {\r\n copyToClipboard(designDetailState.encodedUrl);\r\n };\r\n\r\n const handleDownloadQR = () => {\r\n const canvas = document.getElementById(\"QRcodeCanvas\");\r\n canvas.toBlob(function(blob) {\r\n // Create a link to download the image\r\n var link = document.createElement(\"a\");\r\n link.href = URL.createObjectURL(blob);\r\n link.download = `${designDetailState.designName}-QR.png`; // You can change the file format here (e.g., 'captured_image.jpg')\r\n document.body.appendChild(link);\r\n link.click();\r\n document.body.removeChild(link);\r\n });\r\n };\r\n return (\r\n \r\n {detailViewsOptions.map((mode, i) => (\r\n {\r\n scrollIntoView(\".cyr-detailView\");\r\n setCurrentDetailView(i);\r\n dispatchVisState({\r\n type: visualizationsActions.SET_VIEW_MODE,\r\n payload: mode\r\n });\r\n if (mode === visViewModes.DESIGN_VIEW_ZERO_ZOOM) {\r\n dispatchDesignState({\r\n type: designDetailActions.SET_DESIGN_VIEW_ZOOM,\r\n payload: window.flags.designView.minZoom\r\n });\r\n {\r\n window.InterfaceElements.IsJpeg &&\r\n dispatchDesignState({\r\n type: designDetailActions.SET_DESIGN_VIEW_ZOOM_JPEG,\r\n payload: window.flags.designView.minZoomJpeg\r\n });\r\n }\r\n } else {\r\n dispatchDesignState({\r\n type: designDetailActions.SET_DESIGN_VIEW_ZOOM,\r\n payload: resolveZoomValue()\r\n });\r\n {\r\n window.InterfaceElements.IsJpeg &&\r\n dispatchDesignState({\r\n type: designDetailActions.SET_DESIGN_VIEW_ZOOM_JPEG,\r\n payload: resolveZoomValue()\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\nQRDialog.propTypes = {};\r\n\r\nexport default QRDialog;\r\n","import classNames from \"classnames\";\r\nimport React, { Suspense, useEffect, useRef, useState } from \"react\";\r\nimport { useFullscreen, useToggle } from \"react-use\";\r\nimport ReactGA from \"react-ga\";\r\nimport {\r\n designListActions,\r\n useDesignListState,\r\n useDispatchDesignList\r\n} from \"../../../reducers/designlist.reducer\";\r\nimport { getCustomClass, getFromSessionStorage, handleNavigation } from \"../../../utils/domUtils\";\r\nimport { useHomeMount } from \"../Home/hooks\";\r\nimport { ReactComponent as Icons } from \"../../symbol-defs.svg\";\r\nimport Stage from \"../../organisms/StageNew\";\r\nimport BrandLogo from \"../../molecules/BrandLogo\";\r\nimport strings from \"../../../strings\";\r\nimport RoomList from \"../../organisms/RoomList\";\r\nimport { mainUiActions, useUiDispatch, useUiState } from \"../../../reducers/mainui.reducer\";\r\nimport ColorAreaSwatch from \"../../molecules/ColorAreaSwatch\";\r\nimport Collection from \"../../organisms/CollectionSection\";\r\nimport CopyrightSection from \"../../molecules/CopyrightSection\";\r\nimport { useInitDesignMount } from \"../../../hooks/initDesignListHook\";\r\nimport { findSimilarDesigns } from \"../../../utils/treeutils\";\r\nimport {\r\n useDispatchVisualization,\r\n useVisualizationState,\r\n visualizationsActions,\r\n visViewModes\r\n} from \"../../../reducers/visualizations.reducer\";\r\nimport DesignVariations from \"../../organisms/DesignVariations\";\r\nimport AppProvider, { CDN_domain, getPageName } from \"../../../api/appProvider\";\r\nimport SocialMediaShare from \"../../organisms/SocialMediaShare\";\r\nimport AtButton from \"../../atoms/AtButton\";\r\nimport AtIcon from \"../../atoms/AtIcon\";\r\nimport OrdersheetArea from \"../../templates/OrderSheet/OrdersheetArea\";\r\nimport SidebarActionButtons from \"../../organisms/SidebarActionButtons\";\r\nimport {\r\n useDesignDetailState,\r\n useDispatchDesignDetail,\r\n designDetailActions\r\n} from \"../../../reducers/designdetails.reducer\";\r\nimport {\r\n convertUnits,\r\n getDesignDimensionsString,\r\n getDesignPathInTitle\r\n} from \"../../../utils/utils\";\r\nimport { renderDesignName } from \"../../../utils/stringUtils\";\r\nimport { showOrdersheetOutside } from \"../../../utils/flagUtils\";\r\nimport DesignViewsCYR from \"../../organisms/DesignViewsCYR\";\r\nimport { resolveZoomValue } from \"../../../middleware/visualization.middleware\";\r\nimport QRDialog from \"../../organisms/QRDialog\";\r\nimport LoadingOverlay from \"../LoadingOverlay/index\";\r\nimport { H4, Icon, Intent, Menu, MenuItem, Popover, Toast, Toaster } from \"@blueprintjs/core\";\r\nimport CinematicStager from \"../../cinematic/CinematicStager\";\r\n\r\nvar scrollBarsToggle = {\r\n illustrations: false\r\n};\r\nvar roomContainerClassName = \".at-vis-thumbs\";\r\nvar isInitialLoad = true;\r\nconst CreateYourRug = props => {\r\n const dispatchDesignList = useDispatchDesignList();\r\n const visualizationState = useVisualizationState();\r\n const visualizationDispatch = useDispatchVisualization();\r\n const designDetailsState = useDesignDetailState();\r\n const dispatchDesignState = useDispatchDesignDetail();\r\n const { designDetails, designName, fullpath } = designDetailsState;\r\n const uiState = useUiState();\r\n const dispatchUiState = useUiDispatch();\r\n const state = useDesignListState();\r\n const [showScrollBars, setShowScrollBars] = useState(scrollBarsToggle);\r\n const [hasVariations, setHasVariations] = useState(true);\r\n const refCreateYourRug = useRef(null);\r\n const [toastProps, setToastProps] = useState(null);\r\n const [detailViewsOptions, setDetailViewsOptions] = useState(\r\n window.flags.createYourRug.detailViewsOptions\r\n );\r\n const [currentDetailView, setCurrentDetailView] = useState(\r\n sessionStorage.getItem(\"defaultDesignView\") || window.flags.createYourRug.defaultDesignView //url link priority first,then flags\r\n );\r\n const [isRoomviewInFullScreen, toggleIsRoomviewInFullScreen] = useToggle(false);\r\n const refRoomViewContainer = useRef(null);\r\n const [hasInitialScrollDiv, setHasInitialScrollDiv] = useState(true);\r\n const [showRightColumn, setShowRightColumn] = useState(false);\r\n const [displayIcons, setDisplayIcons] = useState(true);\r\n const [dimensions, setDimensions] = useState(\"\");\r\n const {\r\n createYourRug: cyrFlags,\r\n language,\r\n designDetailSection,\r\n ordersheet: ordersheetFlags\r\n } = window.flags;\r\n const [customTamarianUpdate, setCustomTamarianUpdate] = useState(false);\r\n let langFromUrl = getFromSessionStorage(\"lang\");\r\n let defLang = langFromUrl && langFromUrl !== \"\" ? langFromUrl : \"en\";\r\n const hasLangOptions = language.langOptions.length && language.langOptions[0] !== \"\";\r\n const [currentLanguage, setCurrentLanguage] = useState(defLang);\r\n const [isCinematic, setisCinematic] = useState(sessionStorage.getItem(\"cinematic\") || false);\r\n const { initDesignColors } = window.initialData;\r\n useFullscreen(refRoomViewContainer, isRoomviewInFullScreen, {\r\n onClose: () => toggleIsRoomviewInFullScreen(false)\r\n });\r\n useHomeMount();\r\n useInitDesignMount();\r\n\r\n useEffect(() => {\r\n document.getElementsByTagName(\"body\")[0].className = \"create-your-rug\";\r\n dispatchUiState({ type: mainUiActions.SET_LOADING_OVERLAY_PERCENT, payload: 30 });\r\n\r\n if (window.TextureOptions?.AdditionalTextureNames?.indexOf(\"Back\") !== -1) {\r\n setDetailViewsOptions([\r\n visViewModes.DESIGN_VIEW_DEEPZOOM,\r\n visViewModes.DESIGN_VIEW_PERSPECTIVE,\r\n visViewModes.DESIGN_VIEW_FOLDEDBACK\r\n ]);\r\n }\r\n\r\n document.getElementsByTagName(\"body\")[0].className = \"create-your-rug\";\r\n let scrollTo = sessionStorage.getItem(\"scrollTo\") || \"\";\r\n if (scrollTo) setHasInitialScrollDiv(true);\r\n setTimeout(() => {\r\n let illustrations = scrollBarsToggle.illustrations;\r\n const elem = document.querySelector(roomContainerClassName);\r\n if (elem && elem.clientWidth < elem.scrollWidth) {\r\n illustrations = true;\r\n }\r\n setShowScrollBars({ ...showScrollBars, illustrations });\r\n const elemVariations = document.querySelector(\"#atDesignVariations\");\r\n //console.log(\"setTimeout -> elemVariations\", elemVariations)\r\n elemVariations ? setHasVariations(true) : setHasVariations(false);\r\n if (scrollTo !== \"\") {\r\n scrollIntoView(\"#\" + scrollTo);\r\n }\r\n setHasInitialScrollDiv(false);\r\n }, 3000);\r\n setTimeout(() => {\r\n dispatchUiState({ type: mainUiActions.SET_LOADING_OVERLAY_PERCENT, payload: 60 });\r\n }, 1500);\r\n dispatchDesignState({\r\n type: designDetailActions.SET_DESIGN_VIEW_ZOOM,\r\n payload: window.flags.designView.minZoom\r\n });\r\n }, []);\r\n\r\n useEffect(() => {\r\n let { designProps: designDetails, name: designName, fullPath } = state.selectedFile;\r\n if (!designDetails) return;\r\n if (initDesignColors && initDesignColors.length === designDetails.DesignColors.length) {\r\n dispatchDesignState({\r\n type: designDetailActions.SET_DETAILS,\r\n payload: {\r\n designDetails: { ...designDetails, DesignColors: initDesignColors },\r\n customizationFlag: true,\r\n label: designName,\r\n fullpath: fullPath\r\n }\r\n });\r\n }\r\n }, [state.selectedFile.id]);\r\n\r\n useEffect(() => {\r\n if (!state.selectedFile) return;\r\n if (state && state.selectedFile && state.selectedFile.variations) {\r\n setHasVariations(true);\r\n if (\r\n state.selectedFile.variations?.colors?.length === 0 &&\r\n state.selectedFile.variations?.shapes?.length === 0\r\n ) {\r\n setHasVariations(false);\r\n }\r\n } else {\r\n setHasVariations(false);\r\n }\r\n }, [state.selectedFile]);\r\n\r\n useEffect(() => {\r\n if (!designDetails) return;\r\n const isIrregular = designDetails.IsIrregular;\r\n if (\r\n isIrregular &&\r\n detailViewsOptions[currentDetailView] === visViewModes.DESIGN_VIEW_FOLDEDBACK\r\n ) {\r\n dispatchUiState({\r\n type: mainUiActions.SET_TOAST_PROPS,\r\n payload: {\r\n message: \"Sorry, folded view is unavailable for this design.\",\r\n intent: \"warning\"\r\n }\r\n });\r\n setCurrentDetailView(0);\r\n }\r\n }, [designDetails]);\r\n\r\n useEffect(() => {\r\n if (!visualizationState.activeNode) return;\r\n var thumb = document\r\n .querySelector(\".designThumb-template0.thumb-item.active\")\r\n ?.getBoundingClientRect();\r\n var container = document.querySelector(roomContainerClassName);\r\n if (thumb && container) {\r\n if (thumb.left > container?.clientWidth || thumb.left < 0) {\r\n container.scrollLeft = thumb.left;\r\n }\r\n }\r\n }, [visualizationState.activeNode]);\r\n\r\n useEffect(() => {\r\n if (visualizationState.viewMode == visViewModes.MY_ROOM) return;\r\n visualizationDispatch({\r\n type: visualizationsActions.SET_VIEW_MODE,\r\n payload: detailViewsOptions[currentDetailView]\r\n });\r\n }, [currentDetailView]);\r\n\r\n const handleFullScreen = () => {\r\n let fcDelay = 1000;\r\n if (!isRoomviewInFullScreen) {\r\n fcDelay = 0;\r\n }\r\n if (isRoomviewInFullScreen) {\r\n fcDelay = 0;\r\n }\r\n if (document.body.requestFullscreen) {\r\n setTimeout(() => {\r\n toggleIsRoomviewInFullScreen();\r\n }, fcDelay);\r\n } else {\r\n toggleIsRoomviewInFullScreen();\r\n }\r\n };\r\n\r\n const onThumbnailClick = (node, e) => {\r\n if (!node.designProps) return;\r\n if (state.selectedFile && node.id === state.selectedFile.id) {\r\n console.info(\"clicked in active design thumbnail\");\r\n return;\r\n }\r\n dispatchDesignState({\r\n type: designDetailActions.SET_CUSTOM_SIZE,\r\n payload: {\r\n x: 0,\r\n y: 0\r\n }\r\n });\r\n\r\n let requiredVariation = {};\r\n if (window.flags.designVariations.preserveVariations) {\r\n if (state.activeVariation.id) {\r\n const similarDesigns = findSimilarDesigns(state.tree, node);\r\n if (similarDesigns) {\r\n const va = state.activeVariation.name.replace(state.selectedFile.name, \"\");\r\n if (va)\r\n requiredVariation = similarDesigns.files.find(file => {\r\n if (file.name.includes(va)) return true;\r\n return false;\r\n });\r\n }\r\n }\r\n }\r\n\r\n dispatchDesignList({\r\n type: designListActions.SELECT_DESIGN,\r\n payload: { selectedFile: node, activeVariation: requiredVariation }\r\n });\r\n\r\n setTimeout(() => {\r\n scrollIntoView(cyrFlags.scrollToDesignViewAfterCollectionOnClick);\r\n }, 1000);\r\n };\r\n useEffect(() => {\r\n if (!hasInitialScrollDiv) {\r\n if (isInitialLoad) {\r\n //do not scroll to designview if it's initial load.\r\n isInitialLoad = false;\r\n return;\r\n }\r\n }\r\n }, [state.activeVariation]);\r\n\r\n const handleLanguageOptionChange = i => {\r\n const newLanguage = language.langOptions[i].val;\r\n setCurrentLanguage(newLanguage);\r\n dispatchUiState({ type: mainUiActions.SET_LANGUAGE, payload: newLanguage });\r\n strings.setLanguage(newLanguage);\r\n if (langFromUrl && langFromUrl !== \"\") sessionStorage.setItem(\"lang\", newLanguage);\r\n };\r\n\r\n const getCurrentLanguageText = () => {\r\n var index = language.langOptions.findIndex(item => item.val === currentLanguage);\r\n const currentLanguageText = language.langOptions[index].text;\r\n return currentLanguageText;\r\n };\r\n\r\n const handleOpenMyroom = () => {\r\n ReactGA.ga(\"send\", \"event\", {\r\n eventCategory: \"View\", //required\r\n eventAction: \"Clicked My Room\", //required\r\n eventLabel: \"Clicked on My Room\"\r\n });\r\n visualizationDispatch({\r\n type: visualizationsActions.SET_VIEW_MODE,\r\n payload: visViewModes.MY_ROOM\r\n });\r\n\r\n scrollIntoView(\"#room-view-container\");\r\n // var url = window.location + \"&initview=myroom\";\r\n // if (state.selectedFile) {\r\n // url = url + \"&initdesign=\" + state.selectedFile.fullPath;\r\n // }\r\n // window.open(url, \"_blank\");\r\n };\r\n\r\n const scrollIntoView = querySelector => {\r\n if (querySelector) {\r\n const elem = document.querySelector(querySelector);\r\n if (elem) {\r\n elem.scrollIntoView({ behavior: \"smooth\", block: \"start\", inline: \"nearest\" }); //block:center for center\r\n } else {\r\n console.log(querySelector, \" not found\");\r\n }\r\n }\r\n };\r\n const handleNavigator = ({ querySelector, direction }) => {\r\n if (!querySelector || !direction) return;\r\n const elem = document.querySelector(querySelector);\r\n handleNavigation({ elem, direction });\r\n };\r\n const convertToFeetAndInches = decimalValue => {\r\n const feet = Math.floor(decimalValue); // Extract the feet part\r\n const inches = Math.round((decimalValue - feet) * 12); // Calculate the inches part\r\n if (inches === 0) {\r\n return `${feet}'`;\r\n } else {\r\n return `${feet}'${inches}\"`;\r\n }\r\n };\r\n\r\n const changeViewIndex = (direction, currentDetailView, viewsOptions) => {\r\n let newcurrentDetailView =\r\n direction === \"right\" ? currentDetailView + 1 : currentDetailView - 1;\r\n newcurrentDetailView =\r\n newcurrentDetailView > viewsOptions.length - 1 ? 0 : newcurrentDetailView;\r\n newcurrentDetailView =\r\n newcurrentDetailView < 0 ? viewsOptions.length - 1 : newcurrentDetailView;\r\n return newcurrentDetailView;\r\n };\r\n\r\n const rugshareCondition = window.InterfaceElements.ShowRugshare && window.flags.hasRugshare;\r\n\r\n const openNextDetailView = ({ direction = \"right\" }) => {\r\n setDisplayIcons(false);\r\n var newcurrentDetailView = changeViewIndex(direction, currentDetailView, detailViewsOptions);\r\n const isIrregular =\r\n state.selectedFile?.designProps?.IsIrregular ||\r\n state.activeShape?.designProps?.IsIrregular ||\r\n state.activeVariation?.designProps?.IsIrregular;\r\n if (\r\n isIrregular &&\r\n detailViewsOptions[newcurrentDetailView] === visViewModes.DESIGN_VIEW_FOLDEDBACK\r\n )\r\n newcurrentDetailView = changeViewIndex(direction, newcurrentDetailView, detailViewsOptions);\r\n visualizationDispatch({\r\n type: visualizationsActions.SET_VIEW_MODE,\r\n payload: detailViewsOptions[newcurrentDetailView]\r\n });\r\n if (newcurrentDetailView === 0) {\r\n //incase of zerozoom\r\n dispatchDesignState({\r\n type: designDetailActions.SET_DESIGN_VIEW_ZOOM,\r\n payload: window.flags.designView.minZoom\r\n });\r\n {\r\n window.InterfaceElements.IsJpeg &&\r\n dispatchDesignState({\r\n type: designDetailActions.SET_DESIGN_VIEW_ZOOM_JPEG,\r\n payload: window.flags.designView.minZoomJpeg\r\n });\r\n }\r\n } else {\r\n dispatchDesignState({\r\n type: designDetailActions.SET_DESIGN_VIEW_ZOOM,\r\n payload: resolveZoomValue()\r\n });\r\n }\r\n setCurrentDetailView(newcurrentDetailView);\r\n setTimeout(() => {\r\n setDisplayIcons(true);\r\n }, 2000);\r\n };\r\n\r\n const showNextRoom = ({ direction }) => {\r\n const currentRoomIndex = visualizationState.illustrations.indexOf(\r\n visualizationState.activeNode\r\n );\r\n var newRoomViewIndex = changeViewIndex(\r\n direction,\r\n currentRoomIndex,\r\n visualizationState.illustrations\r\n );\r\n const newRoom = visualizationState.illustrations[newRoomViewIndex];\r\n visualizationDispatch({ type: visualizationsActions.SET_ACTIVE_NODE, payload: newRoom });\r\n visualizationDispatch({\r\n type: visualizationsActions.SET_VIEW_MODE,\r\n payload: visViewModes.ROOM_VIEW\r\n });\r\n };\r\n const handleToggleSidebar = () => {\r\n setShowRightColumn(!showRightColumn);\r\n };\r\n\r\n const handleCinematic = () => {\r\n setisCinematic(true);\r\n };\r\n\r\n useEffect(() => {\r\n if (Object.keys(designDetails).length === 0) return;\r\n setDimensions(\r\n getDesignDimensionsString({\r\n designDetails: designDetails,\r\n showDesignDimensions: designDetailSection.showDesignDimensions,\r\n showOneDimensionIfSquare: designDetailSection.showOneDimensionIfSquare,\r\n showDimensionInInches: designDetailSection.showDimensionInInches\r\n })\r\n );\r\n }, [designDetails]);\r\n\r\n useEffect(() => {\r\n if (window.innerWidth < 1320 && sessionStorage.getItem(\"page\") == \"tamariancustom\") {\r\n setCustomTamarianUpdate(true); //to show right sidebar in the detail view section\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 Scan QR code
\r\n\r\n
\r\n {strings.createYourRug.QRScanText}
\r\n\r\n
\r\n \r\n
*/}\r\n \r\n {cyrFlags?.showIFrame?.hasIFrame && cyrFlags?.showIFrame?.iFrameUrl !== \"\" && (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n handleNavigator({ querySelector: \".at-vis-thumbs\", direction: \"right\" })\r\n }\r\n />\r\n \r\n handleNavigator({ querySelector: \".at-vis-thumbs\", direction: \"left\" })\r\n }\r\n />\r\n
\r\n )}\r\n \r\n {getFromSessionStorage(\"showlogo\") !== 0 && (\r\n
\r\n \r\n
\r\n )}\r\n\r\n {strings.tagline}
\r\n \r\n
\r\n\r\n \r\n scrollIntoView(\"#cyr-collection\")}\r\n >\r\n\r\n scrollIntoView(\"#atDesignVariations\")}\r\n >\r\n
\r\n \r\n {(!uiState.showOrderSheet || showOrdersheetOutside()) &&\r\n !window.InterfaceElements.IsJpeg && (\r\n <>\r\n
\r\n\r\n \r\n \r\n
\r\n )}\r\n\r\n \r\n {isCinematic && window.flags.hasCinematic && state.tree != null ? (\r\n }>\r\n setisCinematic(false)}\r\n />\r\n \r\n ) : (\r\n <>\r\n
\r\n \r\n
\r\n\r\n \r\n showNextRoom({ direction: \"right\" })}\r\n />\r\n showNextRoom({ direction: \"left\" })}\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n handleNavigator({ querySelector: roomContainerClassName, direction: \"right\" })\r\n }\r\n />\r\n \r\n handleNavigator({ querySelector: roomContainerClassName, direction: \"left\" })\r\n }\r\n />\r\n
\r\n )}\r\n \r\n \r\n \r\n
\r\n \r\n \r\n {!window.InterfaceElements.IsWallToWall && (\r\n \r\n
\r\n \r\n
\r\n {getFromSessionStorage(\"showlogo\") !== 0 && (\r\n Detail View
\r\n \r\n {designDetailsState.customSize.x != 0 || designDetailsState.customSize.y != 0\r\n ? `${state?.activeColorScheme?.name +\r\n \" \" +\r\n designDetailsState.customSize.newname}`\r\n : window.flags.designDetailSection.showDesignPathInTitle\r\n ? getDesignPathInTitle(fullpath)\r\n : renderDesignName(designName)}\r\n
\r\n \r\n
\r\n )}\r\n {strings.tagline}
\r\n \r\n
\r\n\r\n {!window.InterfaceElements.IsJpeg && (\r\n \r\n openNextDetailView({ direction: \"right\" })}\r\n />\r\n openNextDetailView({ direction: \"left\" })}\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 {!AppProvider.isEcatMode && (\r\n <>\r\n scrollIntoView(\"#cyr-collection\")}\r\n >\r\n \r\n )}\r\n scrollIntoView(\"#atDesignVariations\")}\r\n >\r\n
\r\n {hasLangOptions && cyrFlags.showLanguageOptionsInCYR ? (\r\n \r\n {\r\n document.getElementById(\"btnSaveOrdersheet\").click();\r\n }}\r\n className=\"saveDesignOnlyIcon\"\r\n />\r\n ) : (\r\n
\r\n \r\n {designDetailsState.customSize.x != 0 || designDetailsState.customSize.y != 0\r\n ? `${state?.activeColorScheme?.name +\r\n \" \" +\r\n designDetailsState.customSize.newname}`\r\n : window.flags.designDetailSection.showDesignPathInTitle\r\n ? getDesignPathInTitle(fullpath)\r\n : renderDesignName(designName)}\r\n
\r\n |\r\n {ordersheetFlags.saveIconActAsOrdersheetSave ? (\r\n\r\n \r\n window.downloadRenderedDesign()}\r\n >\r\n window.downloadRendered3dIll()}\r\n >\r\n \r\n }\r\n >\r\n
\r\n )}\r\n {rugshareCondition && (\r\n <>\r\n |\r\n \r\n
\r\n \r\n )}\r\n \r\n
\r\n ) : null}\r\n \r\n {designDetailSection.showDesignPathInTitle\r\n ? getDesignPathInTitle(fullpath)\r\n : renderDesignName(designName)}\r\n
\r\n\r\n \r\n {language.langOptions.map((language, i) => (\r\n handleLanguageOptionChange(i)}\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 {getCurrentLanguageText()}\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n )}\r\n {state && state.tree && !AppProvider.isEcatMode && (\r\n \r\n
\r\n )}\r\n {strings.createYourRug.collections}
\r\n \r\n
\r\n \r\n \r\n \r\n\r\n {/* scrollIntoView(\".cyr-color-area\")}\r\n imageSrc={`${CDN_domain + \"v3assets/CreateYourRug/designAdvice.jpg\"}`}\r\n imageAlt=\"customize-rug\"\r\n mainTitle=\"Customize your rug\"\r\n subTitle=\"You can simply choose a design from our collections and alter the color, material,\r\n shape, and size to make a rug completely of your choice\"\r\n > */}\r\n\r\n {cyrFlags.showCustomizeRug &&\r\n (cyrFlags.showInteractiveCatalog?.hasInteractiveCatalog &&\r\n cyrFlags.showInteractiveCatalog?.interactiveCatalogUrl !== \"\" ? (\r\n \r\n window.open(cyrFlags.showInteractiveCatalog?.interactiveCatalogUrl, \"_blank\")\r\n }\r\n imageSrc={\r\n cyrFlags.showInteractiveCatalog?.interactiveCatalogThumbUrl ||\r\n `${CDN_domain + \"v3assets/CreateYourRug/catalog.png\"}`\r\n }\r\n imageAlt=\"catalog\"\r\n mainTitle={strings.createYourRug.interactiveCatalogCardTitle}\r\n subTitle={strings.createYourRug.interactiveCatalogCardSubtitle}\r\n >\r\n ) : (\r\n {\r\n setShowRightColumn(true);\r\n scrollIntoView(\".cyr-color-area\");\r\n }}\r\n imageSrc={`${CDN_domain + \"v3assets/CreateYourRug/designAdvice.jpg\"}`}\r\n imageAlt=\"customize-rug\"\r\n mainTitle={strings.createYourRug.customizeRugTitle}\r\n subTitle={strings.createYourRug.customizeRugSubtitle}\r\n >\r\n ))}\r\n
\r\n \r\n {strings.createYourRug.personalizedServices}
\r\n \r\n
\r\n \r\n {uiState.showLoadingOverlay && \r\n {videoSrc !== \"\" ? (\r\n \r\n ) : (\r\n 
\r\n )}\r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\n","import classNames from \"classnames\";\r\nimport React, { useEffect, useState } from \"react\";\r\nimport { Tabs, Tab } from \"@blueprintjs/core\";\r\nimport AppProvider from \"../../../api/appProvider\";\r\nimport { useInitDesignMount } from \"../../../hooks/initDesignListHook\";\r\nimport {\r\n designListActions,\r\n useDesignListState,\r\n useDispatchDesignList\r\n} from \"../../../reducers/designlist.reducer\";\r\nimport { getCustomClass } from \"../../../utils/domUtils\";\r\nimport { useHomeMount } from \"../Home/hooks\";\r\nimport { ReactComponent as Icons } from \"../../symbol-defs.svg\";\r\nimport Stage from \"../../organisms/StageNew\";\r\nimport { useVisualizationState, visViewModes } from \"../../../reducers/visualizations.reducer\";\r\nimport RoomList from \"../../organisms/RoomList\";\r\nimport Collection from \"../../organisms/CollectionSection\";\r\nimport { findSimilarDesigns } from \"../../../utils/treeutils\";\r\nimport strings from \"../../../strings\";\r\nimport Designviews from \"../../organisms/Designviews\";\r\nimport { usePrevious } from \"../../../hooks\";\r\nimport { canvasToBlobPromise } from \"../../../utils/canvasutils\";\r\nimport { useDesignDetailState } from \"../../../reducers/designdetails.reducer\";\r\n\r\nconst ExplorugController = () => {\r\n const designListState = useDesignListState();\r\n const dispatchDesignList = useDispatchDesignList();\r\n const designDetailState = useDesignDetailState();\r\n const { selectedFile, tree } = designListState;\r\n const visualizationState = useVisualizationState();\r\n const previousSelectedFile = usePrevious(selectedFile);\r\n const [selectedTab, setSelectedTab] = useState(0);\r\n const [designImage1x, setDesignImage1x] = useState(null);\r\n const [viewImage1x, setViewImage1x] = useState(null);\r\n\r\n const [Folder1Content, setFolder1Content] = useState(null);\r\n const [Folder2Content, setFolder2Content] = useState(null);\r\n const [Folder1SelectedFile, setFolder1SelectedFile] = useState(null);\r\n const [Folder2SelectedFile, setFolder2SelectedFile] = useState(null);\r\n const [Folder2DefaultFolder, setFolder2DefaultFolder] = useState(null);\r\n const [Folder2DefaultThumbUrl, setFolder2DefaultThumbUrl] = useState(null);\r\n\r\n useHomeMount();\r\n useInitDesignMount();\r\n const { controller } = window.flags;\r\n\r\n useEffect(() => {\r\n document.getElementsByTagName(\"body\")[0].className = \"explorug-controller\";\r\n }, []);\r\n useEffect(() => {\r\n if (!tree || !tree.length) {\r\n return;\r\n }\r\n if (Folder1Content && Folder2Content) return; //return if folder1 and folder2 content is already set;\r\n\r\n if (!controller.showDesignsNRooms) {\r\n const nodeItems = tree.filter(\r\n node => node && (node.children.length || node.files.length) && node.name.charAt(0) !== \".\"\r\n );\r\n const Frames = nodeItems[0].children.filter(\r\n node => node.name.toLowerCase() === controller.Folder1Name.toLowerCase()\r\n );\r\n if (Frames.length) setFolder1Content(Frames[0]);\r\n const Pictures = nodeItems[0].children.filter(\r\n node => node.name.toLowerCase() === controller.Folder2Name.toLowerCase()\r\n );\r\n if (Pictures.length) {\r\n setFolder2Content(Pictures[0]);\r\n const defaultFolder =\r\n Pictures[0].children && Pictures[0].children.length ? Pictures[0].children[0] : null;\r\n if (defaultFolder) setFolder2DefaultFolder(defaultFolder);\r\n\r\n if (defaultFolder && defaultFolder.files?.length) {\r\n setFolder2SelectedFile(defaultFolder.files[0]);\r\n AppProvider.getDesignThumbnails({ designs: [defaultFolder.files[0]] }).then(details => {\r\n console.log(details);\r\n if (details && details.length) {\r\n const thumburl = details[0].thumbUrl;\r\n setFolder2DefaultThumbUrl(thumburl);\r\n }\r\n });\r\n }\r\n }\r\n }\r\n }, [tree]);\r\n\r\n useEffect(() => {\r\n if (\r\n selectedFile &&\r\n selectedFile.fullPath &&\r\n selectedFile.fullPath !== previousSelectedFile?.fullPath\r\n ) {\r\n if (!controller.showDesignsNRooms) {\r\n // if it's showing two folders content\r\n if (selectedFile.location.includes(controller.Folder1Name)) {\r\n setFolder1SelectedFile(selectedFile);\r\n } else if (selectedFile.location.includes(controller.Folder2Name)) {\r\n setFolder2SelectedFile(selectedFile);\r\n }\r\n }\r\n\r\n if (controller.passJsonOnDesignChange === 1) {\r\n const msgProps = {\r\n triggeredDesign: selectedFile.fullPath\r\n };\r\n console.log(\"useEffect -> msgProps\", msgProps);\r\n window.parent.postMessage(msgProps, \"*\");\r\n }\r\n\r\n AppProvider.get1xDesign({ file: selectedFile.fullPath }).then(design => {\r\n if (!controller.passJsonOnDesignChange) {\r\n console.log(\"post to parent \", design);\r\n window.parent.postMessage(design, \"*\");\r\n } else if (controller.passJsonOnDesignChange === 2) {\r\n const data = {\r\n design: design,\r\n room: viewImage1x\r\n };\r\n console.log(\"post to parent \", data);\r\n window.parent.postMessage(data, \"*\");\r\n }\r\n\r\n setDesignImage1x(design);\r\n });\r\n }\r\n }, [selectedFile]);\r\n\r\n useEffect(() => {\r\n if (controller.passJsonOnDetailViewChange === 1) {\r\n var viewMode = \"\";\r\n switch (visualizationState.viewMode) {\r\n case visViewModes.DESIGN_VIEW_DEEPZOOM:\r\n viewMode = \"\";\r\n break;\r\n case visViewModes.DESIGN_VIEW_PERSPECTIVE:\r\n viewMode = \"perspectiveview\";\r\n break;\r\n case visViewModes.MY_ROOM:\r\n viewMode = \"myroom\";\r\n break;\r\n case visViewModes.ROOM_VIEW:\r\n viewMode = \"roomview\";\r\n break;\r\n default:\r\n break;\r\n }\r\n if (viewMode !== \"roomview\") {\r\n const msgProps = {\r\n initview: viewMode\r\n };\r\n console.log(\"useEffect -> msgProps\", msgProps);\r\n\r\n window.parent.postMessage(msgProps, \"*\");\r\n }\r\n } else {\r\n var imgToSend =\r\n visualizationState.viewMode === visViewModes.DESIGN_VIEW_DEEPZOOM ? designImage1x : \"\";\r\n if (imgToSend) {\r\n if (controller.passJsonOnDesignChange === 2) {\r\n const data = {\r\n design: imgToSend,\r\n room: \"\"\r\n };\r\n setViewImage1x(\"\");\r\n setDesignImage1x(imgToSend)\r\n console.log(\"post to parent \", data);\r\n window.parent.postMessage(data, \"*\");\r\n } else {\r\n console.log(\"post to parent \", imgToSend);\r\n window.parent.postMessage(imgToSend, \"*\");\r\n }\r\n }\r\n }\r\n }, [visualizationState.viewMode]);\r\n\r\n useEffect(() => {\r\n if (designDetailState.loading) return;\r\n if (visualizationState.viewMode === visViewModes.ROOM_VIEW) {\r\n if (\r\n !visualizationState ||\r\n !visualizationState.activeNode ||\r\n !visualizationState.activeNode.FullPath\r\n )\r\n return;\r\n const roomPath = visualizationState.activeNode.FullPath;\r\n if (controller.passJsonOnRoomViewChange === 1) {\r\n const msgProps = {\r\n initview: roomPath\r\n };\r\n console.log(\"useEffect -> msgProps\", msgProps);\r\n window.parent.postMessage(msgProps, \"*\");\r\n } else {\r\n if (window.getRoomRenderingCanvas) {\r\n const renderInActualSize = window.innerWidth >= 1024 ? false : true;\r\n window.getRoomRenderingCanvas(renderInActualSize).then(response => {\r\n console.log(\"data posted to parent\", response);\r\n setViewImage1x(response);\r\n if (controller.passJsonOnDesignChange === 2) {\r\n const data = {\r\n design: designImage1x,\r\n room: response\r\n };\r\n console.log(\"post to parent \", data);\r\n window.parent.postMessage(data, \"*\");\r\n } else window.parent.postMessage(response, \"*\");\r\n });\r\n }\r\n }\r\n } else if (visualizationState.viewMode === visViewModes.DESIGN_VIEW_PERSPECTIVE) {\r\n const perspectiveRenderCanvas = window.getPerspectiveCanvas();\r\n const downloadName = `${designDetailState.designName} in ${strings.designViews.perspective}`;\r\n\r\n canvasToBlobPromise(perspectiveRenderCanvas)\r\n .then(roomCanvasBlob => {\r\n AppProvider.uploadRoomviewBlob({ blob: roomCanvasBlob, filename: downloadName }).then(\r\n response => {\r\n console.log(\"data posted to parent\", response);\r\n setViewImage1x(response);\r\n if (controller.passJsonOnDesignChange === 2) {\r\n const data = {\r\n design: designImage1x,\r\n room: response\r\n };\r\n console.log(\"post to parent \", data);\r\n window.parent.postMessage(data, \"*\");\r\n } else window.parent.postMessage(response, \"*\");\r\n }\r\n );\r\n })\r\n .catch(() => {\r\n console.log(\"error while getting perspective blob image\");\r\n });\r\n }\r\n }, [designDetailState.loading]);\r\n\r\n const onThumbnailClick = (node, e) => {\r\n if (!node.designProps) return;\r\n if (designListState.selectedFile && node.id === designListState.selectedFile?.id) {\r\n console.info(\"clicked in active design thumbnail\");\r\n return;\r\n }\r\n\r\n let requiredVariation = {};\r\n if (window.flags.designVariations.preserveVariations) {\r\n if (designListState.activeVariation.id) {\r\n const similarDesigns = findSimilarDesigns(designListState.tree, node);\r\n if (similarDesigns) {\r\n const va = designListState.activeVariation.name.replace(\r\n designListState.selectedFile?.name,\r\n \"\"\r\n );\r\n if (va)\r\n requiredVariation = similarDesigns.files.find(file => {\r\n if (file.name.includes(va)) return true;\r\n return false;\r\n });\r\n }\r\n }\r\n }\r\n dispatchDesignList({\r\n type: designListActions.SELECT_DESIGN,\r\n payload: { selectedFile: node, activeVariation: requiredVariation }\r\n });\r\n };\r\n\r\n return (\r\n {mainTitle}
\r\n {subTitle}
\r\n\r\n \r\n setSelectedTab(0)}\r\n panel={\r\n <>\r\n {designListState && designListState.tree && (\r\n setSelectedTab(1)}\r\n panel={ setSelectedTab(2)}\r\n panel={\r\n {Folder1Content && (\r\n setSelectedTab(0)}\r\n panel={\r\n <>\r\n {\r\n setSelectedTab(1)}\r\n panel={\r\n <>\r\n {\r\n
\r\n );\r\n};\r\n\r\nExplorugController.propTypes = {};\r\n\r\nexport default ExplorugController;\r\n","import classNames from \"classnames\";\r\nimport React, { useState } from \"react\";\r\nimport FadeIn from \"react-fade-in/lib/FadeIn\";\r\nimport { loadingTexts } from \"../../../utils/stringUtils\";\r\nimport BrandLogo from \"../../molecules/BrandLogo\";\r\n\r\nconst InitialLogoPage = () => {\r\n const [showLoader, setShowLoader] = useState(false);\r\n const page = sessionStorage.getItem(\"page\");\r\n return (\r\n \r\n
\r\n\r\n {controller.showDesignsNRooms ? (\r\n {strings.controller.mainTitle}
\r\n {controller.showDesignsNRooms ? (\r\n \r\n {visualizationState.viewMode === visViewModes.DESIGN_VIEW_DEEPZOOM && designImage1x && (\r\n
\r\n ) : (\r\n <>\r\n \r\n 
\r\n
\r\n )}\r\n {visualizationState.viewMode === visViewModes.ROOM_VIEW && (\r\n \r\n
\r\n \r\n )}\r\n \r\n {(Folder2SelectedFile?.thumbUrl || Folder2DefaultThumbUrl) && (\r\n
\r\n \r\n 
\r\n
\r\n \r\n
\r\n )}\r\n \r\n }\r\n >\r\n Collection
\r\n \r\n
\r\n }\r\n \r\n }\r\n >\r\n )}\r\n {Folder2Content && (\r\n Frames
\r\n \r\n
\r\n }\r\n \r\n }\r\n >\r\n )}\r\n \r\n )}\r\n Frames
\r\n \r\n {page ? (\r\n \r\n \r\n
\r\n \r\n setShowLoader(true)}\r\n onError={() => setShowLoader(true)}\r\n />\r\n
\r\n ) : (\r\n <>\r\n )}\r\n \r\n
\r\n \r\n {uiState.showLoadingOverlay && \r\n
\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n ![\"\"](\"\")
\r\n \r\n {!window.initialData.hideLoadingOverlay ? (\r\n
\r\n \r\n
\r\n \r\n
*/}\r\n {!designDetailsState.loading && (\r\n \r\n openNextDetailView({ direction: \"right\" })}\r\n color=\"#F05223\"\r\n />\r\n openNextDetailView({ direction: \"left\" })}\r\n color=\"#F05223\"\r\n />\r\n {!removeArrowNoVariation && (\r\n <>\r\n showNextVariation({ direction: \"right\" })}\r\n color=\"#F05223\"\r\n />\r\n showNextVariation({ direction: \"left\" })}\r\n color=\"#F05223\"\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\n showNextRoom({ direction: \"right\" })}\r\n color=\"#F05223\"\r\n />\r\n showNextRoom({ direction: \"left\" })}\r\n color=\"#F05223\"\r\n />\r\n {!removeArrowRoomNoVariation && (\r\n <>\r\n showSameRoomVariation({ direction: \"right\" })}\r\n color=\"#F05223\"\r\n />\r\n showSameRoomVariation({ direction: \"left\" })}\r\n color=\"#F05223\"\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\nStudioEntry.propTypes = {};\r\n\r\nexport default StudioEntry;\r\n","import React, { useState, Suspense } from \"react\";\r\nimport { useMount } from \"react-use\";\r\nimport Home from \"../Home\";\r\nimport AppProvider from \"../../../api/appProvider\";\r\nimport { UiStateProvider, useUiState, pageViews } from \"../../../reducers/mainui.reducer\";\r\nimport { DesignListStateProvider } from \"../../../reducers/designlist.reducer\";\r\nimport { VisualizationStateProvider, visViewModes } from \"../../../reducers/visualizations.reducer\";\r\nimport { ColorListStateProvider } from \"../../../reducers/colors.reducer\";\r\nimport { DesignDetailStateProvider } from \"../../../reducers/designdetails.reducer\";\r\nimport { MyroomStateProvider } from \"../../../reducers/myroom.reducer\";\r\nimport strings, { initializeStrings } from \"../../../strings\";\r\nimport deepmerge from \"deepmerge\";\r\nimport { defaultFlags, flaginCurrentMode } from \"./defaultflags\";\r\nimport { RoomConfigStateProvider } from \"../../organisms/IllustrationView/roomconfig.reducer\";\r\nimport { decodeColorsFromString, errorTypes } from \"../../../utils/utils\";\r\n\r\nimport { disableScreenshot, getFromSessionStorage, loadCssFile } from \"../../../utils/domUtils\";\r\nimport ErrorPage from \"../ErrorPage\";\r\nimport { OrdersheetDetailStateProvider } from \"../../../reducers/ordersheetdetails.reducer\";\r\nimport { RoomviewStateProvider } from \"../../../reducers/roomview.reducer\";\r\nimport { processDesignPath } from \"../../../utils/treeutils\";\r\nimport ColorsPage from \"../Colors\";\r\nimport CreateYourRug from \"../CreateYourRug\";\r\nimport ExplorugController from \"../ExplorugController\";\r\nimport InitialLogoPage from \"../InitialLogoPage\";\r\nimport MyRugStudio from \"../MyRugStudio\";\r\nimport StudioEntry from \"../StudioEntry\";\r\n\r\nwindow.flags = {};\r\nconst DesignBrowser = React.lazy(() => import(\"../DesignBrowser\"));\r\nconst PageTorender = props => {\r\n const uiState = useUiState();\r\n switch (uiState.pageView) {\r\n case pageViews.HOME:\r\n case pageViews.STEPPER:\r\n return \r\n \r\n handleNavigator({ querySelector: roomContainerClassName, direction: \"right\" })\r\n }\r\n />\r\n \r\n handleNavigator({ querySelector: roomContainerClassName, direction: \"left\" })\r\n }\r\n />\r\n
\r\n )}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default CircularButton;\r\n","import React from \"react\";\r\nconst SET_VIEW_MODE = \"SET_VIEW_MODE\";\r\nconst SET_ILLUSTRATIONS = \"SET_ILLUSTRATIONS\";\r\nconst SET_ACTIVE_NODE = \"SET_ACTIVE_ILLUSTRATION_NODE\";\r\nconst SELECT_NEXT_ILLUSTRATION = \"SELECT_NEXT_ILLUSTRATION\";\r\nconst SELECT_PREV_ILLUSTRATION = \"SELECT_PREV_ILLUSTRATION\";\r\nconst FILTER_ILLUSTRATIONS_BY_PATH = \"FILTER_ILLUSTRATIONS_BY_PATH\";\r\nconst RESET_ROOMS_FILTER = \"RESET_ROOMS_FILTER\";\r\nconst SET_ROOMS_CONTROL = \"SET_ROOMS_CONTROL\";\r\nconst FILTER_ILLUSTRATIONS_FOR_DESIGN = \"FILTER_ILLUSTRATIONS_FOR_DESIGN\";\r\nconst SET_FLOOR_OPTIONS = \"SET_FLOOR_OPTIONS\";\r\nconst SET_ACTIVE_FLOOR_OPTION = \"SET_ACTIVE_FLOOR_OPTION\";\r\nconst SET_SHOW_FLOOR_OPTION = \"SET_SHOW_FLOOR_OPTION\";\r\nconst SET_CARPET_OPTION = \"SET_CARPET_OPTION\";\r\nconst SWITCH_PREV_VIEW = \"SWITCH_PREV_VIEW\";\r\nconst SET_ROOM_FOLDERS = \"SET_ROOM_FOLDERS\";\r\nconst SET_SIMILAR_ROOMS = \"SET_SIMILAR_ROOMS\";\r\nconst visViewModes = {\r\n ROOM_VIEW: \"ROOM_VIEW\",\r\n MY_ROOM: \"MY_ROOM\",\r\n DESIGN_VIEW_DEEPZOOM: \"DESIGN_VIEW_DEEPZOOM\", //deep zoom view\r\n DESIGN_VIEW_DEEPZOOM_RX: \"DESIGN_VIEW_DEEPZOOM_RX\", //deep zoom with repeat x\r\n DESIGN_VIEW_ZERO_ZOOM: \"DESIGN_VIEW_ZERO_ZOOM\",\r\n DESIGN_VIEW_PERSPECTIVE: \"DESIGN_VIEW_PERSPECTIVE\",\r\n DESIGN_VIEW_FOLDEDBACK: \"DESIGN_VIEW_FOLDEDBACK\",\r\n DESIGN_VIEW_PHOTOGRAPHIC: \"DESIGN_VIEW_PHOTOGRAPHIC\",\r\n CATALOG_VIEW: \"CATALOG_VIEW\"\r\n};\r\n\r\nconst StateContext = React.createContext();\r\nconst DispatchContext = React.createContext();\r\n\r\nconst visualizationsActions = {\r\n SET_VIEW_MODE,\r\n SET_ILLUSTRATIONS,\r\n SET_ACTIVE_NODE,\r\n SELECT_NEXT_ILLUSTRATION,\r\n SELECT_PREV_ILLUSTRATION,\r\n FILTER_ILLUSTRATIONS_BY_PATH,\r\n RESET_ROOMS_FILTER,\r\n FILTER_ILLUSTRATIONS_FOR_DESIGN,\r\n SET_ROOMS_CONTROL,\r\n SET_ACTIVE_FLOOR_OPTION,\r\n SET_SHOW_FLOOR_OPTION,\r\n SET_FLOOR_OPTIONS,\r\n SET_CARPET_OPTION,\r\n SWITCH_PREV_VIEW,\r\n SET_ROOM_FOLDERS,\r\n SET_SIMILAR_ROOMS\r\n};\r\n\r\nconst visualizationState = {\r\n viewMode: visViewModes.DESIGN_VIEW_DEEPZOOM,\r\n history: [visViewModes.DESIGN_VIEW_DEEPZOOM],\r\n illustrations: [],\r\n initialIllustrations: [],\r\n activeNode: {\r\n id: \"0\"\r\n },\r\n roomsControl: null,\r\n floorOptions: {\r\n show: false,\r\n floors: [],\r\n activeFloor: {}\r\n },\r\n carpetOptions: {\r\n rotation: null\r\n },\r\n roomFolders: [], //done for studioentry\r\n similarRooms: [] //done for studioentry\r\n};\r\n\r\nconst visualizationReducer = (state, action) => {\r\n const { payload } = action;\r\n switch (action.type) {\r\n case SET_VIEW_MODE:\r\n return { ...state, viewMode: action.payload, history: [...state.history, action.payload] };\r\n case SWITCH_PREV_VIEW:\r\n const his = [...state.history];\r\n if (!his.length) return state;\r\n const popped = his.pop();\r\n let viewMode = his[his.length - 1];\r\n if (!his.length) viewMode = popped;\r\n return { ...state, viewMode, history: his };\r\n case SET_ILLUSTRATIONS:\r\n return setIllustrations(state, payload);\r\n case SET_ACTIVE_NODE:\r\n if (state.activeNode) {\r\n if (\r\n state.activeNode.id !== action.payload.id ||\r\n state.viewMode !== visViewModes.ROOM_VIEW\r\n ) {\r\n return { ...state, activeNode: action.payload };\r\n } else return state;\r\n } else return { ...state, activeNode: action.payload };\r\n case SELECT_PREV_ILLUSTRATION:\r\n return selPrevIll(state);\r\n case SELECT_NEXT_ILLUSTRATION:\r\n return selNextIll(state);\r\n case FILTER_ILLUSTRATIONS_BY_PATH:\r\n return filterIllustrationByPath(state, action.payload);\r\n case SET_ROOMS_CONTROL:\r\n return { ...state, roomsControl: action.payload };\r\n case FILTER_ILLUSTRATIONS_FOR_DESIGN:\r\n return filterIllForDesign(state, payload);\r\n case SET_FLOOR_OPTIONS:\r\n return setFloorOptions(state, payload);\r\n case SET_ACTIVE_FLOOR_OPTION:\r\n return { ...state, floorOptions: { ...state.floorOptions, activeFloor: payload } };\r\n case SET_SHOW_FLOOR_OPTION:\r\n return { ...state, floorOptions: { ...state.floorOptions, show: !!payload } };\r\n case SET_CARPET_OPTION:\r\n return { ...state, carpetOptions: payload };\r\n case SET_ROOM_FOLDERS:\r\n return { ...state, roomFolders: payload };\r\n case SET_SIMILAR_ROOMS:\r\n return { ...state, similarRooms: payload };\r\n default:\r\n return state;\r\n }\r\n};\r\nconst setFloorOptions = (state, payload) => {\r\n const { floorOptions } = state;\r\n const {\r\n floors = floorOptions.floors,\r\n activeFloor = floorOptions.activeFloor,\r\n show = floorOptions.show\r\n } = payload;\r\n return { ...state, floorOptions: { ...state.floorOptions, floors, activeFloor, show } };\r\n};\r\n// const filterIllForDesign = (state, payload) => {\r\n// const designFullPath = payload;\r\n// const { roomsControl, initialIllustrations, activeNode } = state\r\n// if (!designFullPath || !roomsControl) return state\r\n// const filteredRooms =\r\n// roomsControl.find(\r\n// item => item.design.toLowerCase() === designFullPath.toLowerCase()\r\n// ) || {};\r\n// if (filteredRooms.rooms) {\r\n// const filterPaths = filteredRooms.rooms.map(item => item.toLowerCase());\r\n// const filtered = initialIllustrations.filter(item => filterPaths.includes(item.FullPath.toLowerCase()))\r\n// if (activeNode.id === \"0\")\r\n// return { ...state, illustrations: filtered };\r\n// const hasCurrentRoom = filtered.find(item => item.FullPath.toLowerCase() === activeNode.FullPath.toLowerCase())\r\n// if (hasCurrentRoom)\r\n// return { ...state, illustrations: filtered };\r\n// else\r\n// return { ...state, illustrations: filtered, viewMode: visViewModes.DESIGN_VIEW_DEEPZOOM }\r\n// } else {\r\n// return { ...state, illustrations: initialIllustrations };\r\n// }\r\n// }\r\nconst filterIllForDesign = (state, payload) => {\r\n const designFullPath = payload;\r\n const { roomsControl, initialIllustrations, activeNode } = state;\r\n if (!designFullPath || !roomsControl) return state;\r\n const filteredRooms =\r\n roomsControl.find(item => {\r\n //check if the design path contains \"Designs/ in it or contains file extension\"\r\n const pathArr = item.design.split(\"/\").filter(i => i && i !== \"\");\r\n const filename = pathArr[pathArr.length - 1];\r\n const filenameArr = filename.split(\".\");\r\n const ext = filenameArr[filenameArr.length - 1];\r\n\r\n let name = pathArr.join(\"/\");\r\n const desfp = designFullPath.split(\".\").filter(i => i && i !== \"\");\r\n const desfpext = desfp[desfp.length - 1];\r\n if (ext.toLowerCase() !== desfpext) name = `${name}.${desfpext}`;\r\n const designPath = designFullPath.replace(\"Designs/\", \"\");\r\n return name.toLowerCase() === designPath.toLowerCase();\r\n }) || {};\r\n if (!filteredRooms.rooms && !window.flags.showAllRoomsWhenNoRoomsSelected) {\r\n filteredRooms.rooms = [];\r\n }\r\n if (filteredRooms.rooms) {\r\n const filterPaths = filteredRooms.rooms.map(item => {\r\n //check if the room path contains \"Rooms/ in it or contains file extension\"\r\n let path = item.toLowerCase();\r\n const pathArr = item.split(\"/\").filter(item => item && item !== \"\");\r\n if (pathArr[0] !== \"rooms\") path = `rooms/${path}`;\r\n const name = pathArr[pathArr.length - 1];\r\n const extArr = name.split(\".\");\r\n const ext = extArr[extArr.length - 1];\r\n if (ext !== \"crf3d\") path = `${path}.crf3d`;\r\n return path;\r\n });\r\n const filtered = initialIllustrations.filter(item =>\r\n filterPaths.includes(item.FullPath.toLowerCase())\r\n );\r\n if (activeNode.id === \"0\") return { ...state, illustrations: filtered };\r\n const hasCurrentRoom = filtered.find(item => {\r\n return item.FullPath.toLowerCase() === activeNode.FullPath.toLowerCase();\r\n });\r\n if (hasCurrentRoom) return { ...state, illustrations: filtered };\r\n else return { ...state, illustrations: filtered, viewMode: visViewModes.DESIGN_VIEW_DEEPZOOM };\r\n } else {\r\n return { ...state, illustrations: initialIllustrations };\r\n }\r\n};\r\n\r\nconst setIllustrations = (state, payload) => {\r\n let illustrations = payload;\r\n if (state.illustrations.length) {\r\n const filterPaths = state.illustrations.map(item => item.FullPath.toLowerCase());\r\n illustrations = payload.filter(item => filterPaths.includes(item.FullPath.toLowerCase()));\r\n }\r\n return { ...state, illustrations, initialIllustrations: payload };\r\n};\r\nconst filterIllustrationByPath = (state, payload) => {\r\n const filterPaths = payload.map(item => item.toLowerCase());\r\n const filteredIllustrations = state.initialIllustrations.filter(item =>\r\n filterPaths.includes(item.FullPath.toLowerCase())\r\n );\r\n return { ...state, illustrations: filteredIllustrations };\r\n};\r\nconst selPrevIll = state => {\r\n const ind = state.illustrations.findIndex(item => item.id === state.activeNode.id);\r\n if (ind < 0 || ind === 0) return state;\r\n return { ...state, activeNode: state.illustrations[ind - 1] };\r\n};\r\nconst selNextIll = state => {\r\n const ind = state.illustrations.findIndex(item => item.id === state.activeNode.id);\r\n if (ind < 0 || ind >= state.illustrations.length - 1) return state;\r\n return { ...state, activeNode: state.illustrations[ind + 1] };\r\n};\r\nfunction VisualizationStateProvider({ children }) {\r\n const { visualizations } = window.flags;\r\n const initState = { ...visualizationState, viewMode: visualizations.defaultView };\r\n const [state, dispatch] = React.useReducer(visualizationReducer, initState);\r\n return (\r\n \r\n {\r\n onChange(e.target.value);\r\n setValue(e.target.value);\r\n }}\r\n >\r\n {addPlaceholder && (\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","export const MD5 = function (string) {\r\n\r\n function RotateLeft(lValue, iShiftBits) {\r\n return (lValue << iShiftBits) | (lValue >>> (32 - iShiftBits));\r\n }\r\n\r\n function AddUnsigned(lX, lY) {\r\n var lX4, lY4, lX8, lY8, lResult;\r\n lX8 = (lX & 0x80000000);\r\n lY8 = (lY & 0x80000000);\r\n lX4 = (lX & 0x40000000);\r\n lY4 = (lY & 0x40000000);\r\n lResult = (lX & 0x3FFFFFFF) + (lY & 0x3FFFFFFF);\r\n if (lX4 & lY4) {\r\n return (lResult ^ 0x80000000 ^ lX8 ^ lY8);\r\n }\r\n if (lX4 | lY4) {\r\n if (lResult & 0x40000000) {\r\n return (lResult ^ 0xC0000000 ^ lX8 ^ lY8);\r\n } else {\r\n return (lResult ^ 0x40000000 ^ lX8 ^ lY8);\r\n }\r\n } else {\r\n return (lResult ^ lX8 ^ lY8);\r\n }\r\n }\r\n\r\n function F(x, y, z) { return (x & y) | ((~x) & z); }\r\n function G(x, y, z) { return (x & z) | (y & (~z)); }\r\n function H(x, y, z) { return (x ^ y ^ z); }\r\n function I(x, y, z) { return (y ^ (x | (~z))); }\r\n\r\n function FF(a, b, c, d, x, s, ac) {\r\n a = AddUnsigned(a, AddUnsigned(AddUnsigned(F(b, c, d), x), ac));\r\n return AddUnsigned(RotateLeft(a, s), b);\r\n };\r\n\r\n function GG(a, b, c, d, x, s, ac) {\r\n a = AddUnsigned(a, AddUnsigned(AddUnsigned(G(b, c, d), x), ac));\r\n return AddUnsigned(RotateLeft(a, s), b);\r\n };\r\n\r\n function HH(a, b, c, d, x, s, ac) {\r\n a = AddUnsigned(a, AddUnsigned(AddUnsigned(H(b, c, d), x), ac));\r\n return AddUnsigned(RotateLeft(a, s), b);\r\n };\r\n\r\n function II(a, b, c, d, x, s, ac) {\r\n a = AddUnsigned(a, AddUnsigned(AddUnsigned(I(b, c, d), x), ac));\r\n return AddUnsigned(RotateLeft(a, s), b);\r\n };\r\n\r\n function ConvertToWordArray(string) {\r\n var lWordCount;\r\n var lMessageLength = string.length;\r\n var lNumberOfWords_temp1 = lMessageLength + 8;\r\n var lNumberOfWords_temp2 = (lNumberOfWords_temp1 - (lNumberOfWords_temp1 % 64)) / 64;\r\n var lNumberOfWords = (lNumberOfWords_temp2 + 1) * 16;\r\n var lWordArray = Array(lNumberOfWords - 1);\r\n var lBytePosition = 0;\r\n var lByteCount = 0;\r\n while (lByteCount < lMessageLength) {\r\n lWordCount = (lByteCount - (lByteCount % 4)) / 4;\r\n lBytePosition = (lByteCount % 4) * 8;\r\n lWordArray[lWordCount] = (lWordArray[lWordCount] | (string.charCodeAt(lByteCount) << lBytePosition));\r\n lByteCount++;\r\n }\r\n lWordCount = (lByteCount - (lByteCount % 4)) / 4;\r\n lBytePosition = (lByteCount % 4) * 8;\r\n lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80 << lBytePosition);\r\n lWordArray[lNumberOfWords - 2] = lMessageLength << 3;\r\n lWordArray[lNumberOfWords - 1] = lMessageLength >>> 29;\r\n return lWordArray;\r\n };\r\n\r\n function WordToHex(lValue) {\r\n var WordToHexValue = \"\", WordToHexValue_temp = \"\", lByte, lCount;\r\n for (lCount = 0; lCount <= 3; lCount++) {\r\n lByte = (lValue >>> (lCount * 8)) & 255;\r\n WordToHexValue_temp = \"0\" + lByte.toString(16);\r\n WordToHexValue = WordToHexValue + WordToHexValue_temp.substr(WordToHexValue_temp.length - 2, 2);\r\n }\r\n return WordToHexValue;\r\n };\r\n\r\n function Utf8Encode(string) {\r\n string = string.replace(/\\r\\n/g, \"\\n\");\r\n var utftext = \"\";\r\n\r\n for (var n = 0; n < string.length; n++) {\r\n\r\n var c = string.charCodeAt(n);\r\n\r\n if (c < 128) {\r\n utftext += String.fromCharCode(c);\r\n }\r\n else if ((c > 127) && (c < 2048)) {\r\n utftext += String.fromCharCode((c >> 6) | 192);\r\n utftext += String.fromCharCode((c & 63) | 128);\r\n }\r\n else {\r\n utftext += String.fromCharCode((c >> 12) | 224);\r\n utftext += String.fromCharCode(((c >> 6) & 63) | 128);\r\n utftext += String.fromCharCode((c & 63) | 128);\r\n }\r\n\r\n }\r\n\r\n return utftext;\r\n };\r\n\r\n var x = [];\r\n var k, AA, BB, CC, DD, a, b, c, d;\r\n var S11 = 7, S12 = 12, S13 = 17, S14 = 22;\r\n var S21 = 5, S22 = 9, S23 = 14, S24 = 20;\r\n var S31 = 4, S32 = 11, S33 = 16, S34 = 23;\r\n var S41 = 6, S42 = 10, S43 = 15, S44 = 21;\r\n\r\n string = Utf8Encode(string);\r\n\r\n x = ConvertToWordArray(string);\r\n\r\n a = 0x67452301; b = 0xEFCDAB89; c = 0x98BADCFE; d = 0x10325476;\r\n\r\n for (k = 0; k < x.length; k += 16) {\r\n AA = a; BB = b; CC = c; DD = d;\r\n a = FF(a, b, c, d, x[k + 0], S11, 0xD76AA478);\r\n d = FF(d, a, b, c, x[k + 1], S12, 0xE8C7B756);\r\n c = FF(c, d, a, b, x[k + 2], S13, 0x242070DB);\r\n b = FF(b, c, d, a, x[k + 3], S14, 0xC1BDCEEE);\r\n a = FF(a, b, c, d, x[k + 4], S11, 0xF57C0FAF);\r\n d = FF(d, a, b, c, x[k + 5], S12, 0x4787C62A);\r\n c = FF(c, d, a, b, x[k + 6], S13, 0xA8304613);\r\n b = FF(b, c, d, a, x[k + 7], S14, 0xFD469501);\r\n a = FF(a, b, c, d, x[k + 8], S11, 0x698098D8);\r\n d = FF(d, a, b, c, x[k + 9], S12, 0x8B44F7AF);\r\n c = FF(c, d, a, b, x[k + 10], S13, 0xFFFF5BB1);\r\n b = FF(b, c, d, a, x[k + 11], S14, 0x895CD7BE);\r\n a = FF(a, b, c, d, x[k + 12], S11, 0x6B901122);\r\n d = FF(d, a, b, c, x[k + 13], S12, 0xFD987193);\r\n c = FF(c, d, a, b, x[k + 14], S13, 0xA679438E);\r\n b = FF(b, c, d, a, x[k + 15], S14, 0x49B40821);\r\n a = GG(a, b, c, d, x[k + 1], S21, 0xF61E2562);\r\n d = GG(d, a, b, c, x[k + 6], S22, 0xC040B340);\r\n c = GG(c, d, a, b, x[k + 11], S23, 0x265E5A51);\r\n b = GG(b, c, d, a, x[k + 0], S24, 0xE9B6C7AA);\r\n a = GG(a, b, c, d, x[k + 5], S21, 0xD62F105D);\r\n d = GG(d, a, b, c, x[k + 10], S22, 0x2441453);\r\n c = GG(c, d, a, b, x[k + 15], S23, 0xD8A1E681);\r\n b = GG(b, c, d, a, x[k + 4], S24, 0xE7D3FBC8);\r\n a = GG(a, b, c, d, x[k + 9], S21, 0x21E1CDE6);\r\n d = GG(d, a, b, c, x[k + 14], S22, 0xC33707D6);\r\n c = GG(c, d, a, b, x[k + 3], S23, 0xF4D50D87);\r\n b = GG(b, c, d, a, x[k + 8], S24, 0x455A14ED);\r\n a = GG(a, b, c, d, x[k + 13], S21, 0xA9E3E905);\r\n d = GG(d, a, b, c, x[k + 2], S22, 0xFCEFA3F8);\r\n c = GG(c, d, a, b, x[k + 7], S23, 0x676F02D9);\r\n b = GG(b, c, d, a, x[k + 12], S24, 0x8D2A4C8A);\r\n a = HH(a, b, c, d, x[k + 5], S31, 0xFFFA3942);\r\n d = HH(d, a, b, c, x[k + 8], S32, 0x8771F681);\r\n c = HH(c, d, a, b, x[k + 11], S33, 0x6D9D6122);\r\n b = HH(b, c, d, a, x[k + 14], S34, 0xFDE5380C);\r\n a = HH(a, b, c, d, x[k + 1], S31, 0xA4BEEA44);\r\n d = HH(d, a, b, c, x[k + 4], S32, 0x4BDECFA9);\r\n c = HH(c, d, a, b, x[k + 7], S33, 0xF6BB4B60);\r\n b = HH(b, c, d, a, x[k + 10], S34, 0xBEBFBC70);\r\n a = HH(a, b, c, d, x[k + 13], S31, 0x289B7EC6);\r\n d = HH(d, a, b, c, x[k + 0], S32, 0xEAA127FA);\r\n c = HH(c, d, a, b, x[k + 3], S33, 0xD4EF3085);\r\n b = HH(b, c, d, a, x[k + 6], S34, 0x4881D05);\r\n a = HH(a, b, c, d, x[k + 9], S31, 0xD9D4D039);\r\n d = HH(d, a, b, c, x[k + 12], S32, 0xE6DB99E5);\r\n c = HH(c, d, a, b, x[k + 15], S33, 0x1FA27CF8);\r\n b = HH(b, c, d, a, x[k + 2], S34, 0xC4AC5665);\r\n a = II(a, b, c, d, x[k + 0], S41, 0xF4292244);\r\n d = II(d, a, b, c, x[k + 7], S42, 0x432AFF97);\r\n c = II(c, d, a, b, x[k + 14], S43, 0xAB9423A7);\r\n b = II(b, c, d, a, x[k + 5], S44, 0xFC93A039);\r\n a = II(a, b, c, d, x[k + 12], S41, 0x655B59C3);\r\n d = II(d, a, b, c, x[k + 3], S42, 0x8F0CCC92);\r\n c = II(c, d, a, b, x[k + 10], S43, 0xFFEFF47D);\r\n b = II(b, c, d, a, x[k + 1], S44, 0x85845DD1);\r\n a = II(a, b, c, d, x[k + 8], S41, 0x6FA87E4F);\r\n d = II(d, a, b, c, x[k + 15], S42, 0xFE2CE6E0);\r\n c = II(c, d, a, b, x[k + 6], S43, 0xA3014314);\r\n b = II(b, c, d, a, x[k + 13], S44, 0x4E0811A1);\r\n a = II(a, b, c, d, x[k + 4], S41, 0xF7537E82);\r\n d = II(d, a, b, c, x[k + 11], S42, 0xBD3AF235);\r\n c = II(c, d, a, b, x[k + 2], S43, 0x2AD7D2BB);\r\n b = II(b, c, d, a, x[k + 9], S44, 0xEB86D391);\r\n a = AddUnsigned(a, AA);\r\n b = AddUnsigned(b, BB);\r\n c = AddUnsigned(c, CC);\r\n d = AddUnsigned(d, DD);\r\n }\r\n\r\n var temp = WordToHex(a) + WordToHex(b) + WordToHex(c) + WordToHex(d);\r\n\r\n return temp.toLowerCase();\r\n}","const calcSlope = (point, center) => {\r\n const m = (center[1] - point[1]) / (center[0] - point[0])\r\n return m\r\n}\r\n\r\nconst getPivotPosOrigin = (pivot, wid, hgt) => {\r\n let ftToUnits = 305\r\n let tw = ((wid) / 2) * ftToUnits\r\n let th = ((hgt) / 2) * ftToUnits\r\n switch (pivot.toLowerCase()) {\r\n case 'tl':\r\n tw = tw * -1\r\n th = th * 1\r\n break;\r\n case 'tc':\r\n tw = 0\r\n th = th * 1\r\n break;\r\n case 'tr':\r\n tw = tw * 1\r\n th = th * 1\r\n break;\r\n case 'cl':\r\n tw = tw * -1\r\n th = 0\r\n break;\r\n case 'cc':\r\n tw = 0\r\n th = 0\r\n break;\r\n case 'cr':\r\n tw = tw * 1\r\n th = 0\r\n break;\r\n case 'bl':\r\n tw = tw * -1\r\n th = th * -1\r\n break;\r\n case 'bc':\r\n tw = 0\r\n th = th * -1\r\n break;\r\n case 'br':\r\n tw = tw * 1\r\n th = th * -1\r\n break;\r\n default:\r\n break;\r\n }\r\n let point = {\r\n x: tw,\r\n y: 0,\r\n z: th\r\n }\r\n return point\r\n}\r\n\r\nconst getpointatdist = (point, m, d) => {\r\n let x1 = point[0] + d / Math.sqrt(1 + (m * m))\r\n let y1 = m * (x1 - point[0]) + point[1]\r\n return [x1, y1]\r\n}\r\nconst calcRot = (rotation) => {\r\n const phi = rotation.x\r\n const theta = rotation.y\r\n const psi = rotation.z\r\n\r\n const m11 = Math.cos(theta) * Math.cos(psi)\r\n const m12 = -Math.cos(phi) * Math.sin(psi) + Math.sin(phi) * Math.sin(theta) * Math.cos(psi)\r\n const m13 = Math.sin(phi) * Math.sin(psi) + Math.cos(phi) * Math.sin(theta) * Math.cos(psi)\r\n\r\n const m21 = Math.cos(theta) * Math.sin(psi)\r\n const m22 = Math.cos(phi) * Math.cos(psi) + Math.sin(phi) * Math.sin(theta) * Math.sin(psi)\r\n const m23 = -Math.sin(phi) * Math.cos(psi) + Math.cos(phi) * Math.sin(theta) * Math.sin(psi)\r\n\r\n const m31 = -Math.sin(theta)\r\n const m32 = Math.cos(phi) * Math.cos(theta)\r\n const m33 = Math.cos(phi) * Math.cos(theta)\r\n\r\n const rotM = [\r\n m11, m12, m13, 0,\r\n m21, m22, m23, 0,\r\n m31, m32, m33, 0,\r\n 0, 0, 0, 1\r\n ];\r\n return rotM\r\n}\r\n\r\nconst multiplyMatrixAndPoint = (matrix, point) => {\r\n // Give a simple variable name to each part of the matrix, a column and row number\r\n let c0r0 = matrix[0], c1r0 = matrix[1], c2r0 = matrix[2], c3r0 = matrix[3];\r\n let c0r1 = matrix[4], c1r1 = matrix[5], c2r1 = matrix[6], c3r1 = matrix[7];\r\n let c0r2 = matrix[8], c1r2 = matrix[9], c2r2 = matrix[10], c3r2 = matrix[11];\r\n let c0r3 = matrix[12], c1r3 = matrix[13], c2r3 = matrix[14], c3r3 = matrix[15];\r\n\r\n // Now set some simple names for the point\r\n let x = point[0];\r\n let y = point[1];\r\n let z = point[2];\r\n let w = point[3];\r\n\r\n // Multiply the point against each part of the 1st column, then add together\r\n let resultX = (x * c0r0) + (y * c1r0) + (z * c2r0) + (w * c3r0);\r\n\r\n // Multiply the point against each part of the 2nd column, then add together\r\n let resultY = (x * c0r1) + (y * c1r1) + (z * c2r1) + (w * c3r1);\r\n\r\n // Multiply the point against each part of the 3rd column, then add together\r\n let resultZ = (x * c0r2) + (y * c1r2) + (z * c2r2) + (w * c3r2);\r\n\r\n // Multiply the point against each part of the 4th column, then add together\r\n let resultW = (x * c0r3) + (y * c1r3) + (z * c2r3) + (w * c3r3);\r\n\r\n return [resultX, resultY, resultZ, resultW];\r\n}\r\n\r\nexport const pivotObject = (pv, object, position) => {\r\n if (pv.toLowerCase() === 'cc') {\r\n object.position.x = position[0]\r\n object.position.y = position[1]\r\n object.position.z = position[2]\r\n return;\r\n }\r\n const pivotPointOrigin = getPivotPosOrigin(pv, object.scale.x, object.scale.y)\r\n const rotationM = calcRot(object.rotation)\r\n const pivotPointOriginRotated = multiplyMatrixAndPoint(rotationM, [pivotPointOrigin.x, pivotPointOrigin.y, pivotPointOrigin.z, 1])\r\n\r\n let distance = Math.sqrt(pivotPointOriginRotated[0] * pivotPointOriginRotated[0] +\r\n pivotPointOriginRotated[1] * pivotPointOriginRotated[1] +\r\n pivotPointOriginRotated[2] * pivotPointOriginRotated[2])\r\n\r\n let pivotPoint2D, slope;\r\n // if (pivotPointOriginRotated[0] > -1 && pivotPointOriginRotated[0] < 1) {\r\n // pivotPoint2D = [pivotPointOriginRotated[1], pivotPointOriginRotated[2]]\r\n // slope = calcSlope(pivotPoint2D, [0, 0])\r\n // }\r\n // else if (pivotPointOriginRotated[1] > -1 && pivotPointOriginRotated[1] < 1) {\r\n // pivotPoint2D = [pivotPointOriginRotated[0], pivotPointOriginRotated[2]]\r\n // slope = calcSlope(pivotPoint2D, [0, 0])\r\n // }\r\n // else if (pivotPointOriginRotated[2] > -1 && pivotPointOriginRotated[2] < 1) {\r\n // pivotPoint2D = [pivotPointOriginRotated[0], pivotPointOriginRotated[1]]\r\n // slope = calcSlope(pivotPoint2D, [0, 0])\r\n // }\r\n\r\n // const pivotPointRotAbs = pivotPointOriginRotated.slice(0, 3).map(a => Math.abs(a))\r\n // const min = Math.min(...pivotPointRotAbs)\r\n // const minIndex = pivotPointRotAbs.indexOf(min)\r\n // if (minIndex === 0)\r\n // pivotPoint2D = [pivotPointOriginRotated[1], pivotPointOriginRotated[2]]\r\n // else if (minIndex === 1)\r\n // pivotPoint2D = [pivotPointOriginRotated[0], pivotPointOriginRotated[2]]\r\n // else if (minIndex === 2)\r\n // pivotPoint2D = [pivotPointOriginRotated[0], pivotPointOriginRotated[1]]\r\n\r\n pivotPoint2D = [pivotPointOriginRotated[0], pivotPointOriginRotated[1]]\r\n\r\n slope = calcSlope(pivotPoint2D, [0, 0])\r\n\r\n slope = slope * -1\r\n\r\n let negativeDistances;\r\n if (slope > 0) {\r\n negativeDistances = ['bl', 'bc', 'br', 'cl']\r\n\r\n }\r\n else {\r\n negativeDistances = ['bl', 'bc', 'br', 'cr']\r\n }\r\n if (negativeDistances.includes(pv.toLowerCase())) {\r\n distance = distance * -1\r\n }\r\n\r\n let centerPoint = [position[0], position[1], position[2]]\r\n let centerPoint2D, newCenterPoint2D, newCenterPoint;\r\n\r\n // if (centerPoint[0] > -1 && centerPoint[0] < 1) {\r\n // centerPoint2D = [centerPoint[1], centerPoint[2]]\r\n // newCenterPoint2D = window.getpointatdist(centerPoint2D, slope, distance)\r\n // newCenterPoint = [centerPoint[0], newCenterPoint2D[0], newCenterPoint2D[1]]\r\n // }\r\n // else if (centerPoint[1] > -1 && centerPoint[1] < 1) {\r\n centerPoint2D = [centerPoint[0], centerPoint[2]]\r\n if (slope === Number.POSITIVE_INFINITY) {\r\n newCenterPoint2D = [centerPoint2D[0], centerPoint2D[1] + distance]\r\n }\r\n else if (slope === Number.NEGATIVE_INFINITY) {\r\n newCenterPoint2D = [centerPoint2D[0], centerPoint2D[1] - distance]\r\n }\r\n else {\r\n newCenterPoint2D = getpointatdist(centerPoint2D, slope, distance)\r\n }\r\n newCenterPoint = [newCenterPoint2D[0], centerPoint[1], newCenterPoint2D[1]]\r\n // }\r\n // else if (centerPoint[2] > -1 && centerPoint[2] < 1) {\r\n // centerPoint2D = [centerPoint[0], centerPoint[1]]\r\n // newCenterPoint2D = window.getpointatdist(centerPoint2D, slope, distance)\r\n // newCenterPoint = [newCenterPoint2D[0], newCenterPoint2D[1], centerPoint[2]]\r\n // }\r\n\r\n object.position.x = newCenterPoint[0]\r\n object.position.y = newCenterPoint[1]\r\n object.position.z = newCenterPoint[2]\r\n return;\r\n}","import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader';\r\nimport * as THREE from \"three\";\r\nconst svgLoader = new SVGLoader();\r\n\r\nconst getSVGText = (path) => {\r\n const svg = `\r\n \r\n `\r\n return svg\r\n}\r\n\r\nconst UVGenerator = {\r\n\r\n generateTopUV: function (geometry, vertices, indexA, indexB, indexC) {\r\n\r\n const a_x = vertices[indexA * 3];\r\n const a_y = vertices[indexA * 3 + 1];\r\n const b_x = vertices[indexB * 3];\r\n const b_y = vertices[indexB * 3 + 1];\r\n const c_x = vertices[indexC * 3];\r\n const c_y = vertices[indexC * 3 + 1];\r\n\r\n return [\r\n new THREE.Vector2(a_x, a_y),\r\n new THREE.Vector2(b_x, b_y),\r\n new THREE.Vector2(c_x, c_y)\r\n ];\r\n\r\n },\r\n\r\n generateSideWallUV: function (geometry, vertices, indexA, indexB, indexC, indexD) {\r\n\r\n const a_x = vertices[indexA * 3];\r\n const a_y = vertices[indexA * 3 + 1];\r\n const a_z = vertices[indexA * 3 + 2];\r\n const b_x = vertices[indexB * 3];\r\n const b_y = vertices[indexB * 3 + 1];\r\n const b_z = vertices[indexB * 3 + 2];\r\n const c_x = vertices[indexC * 3];\r\n const c_y = vertices[indexC * 3 + 1];\r\n const c_z = vertices[indexC * 3 + 2];\r\n const d_x = vertices[indexD * 3];\r\n const d_y = vertices[indexD * 3 + 1];\r\n const d_z = vertices[indexD * 3 + 2];\r\n return [\r\n new THREE.Vector2(a_x, a_y),\r\n new THREE.Vector2(b_x, b_y),\r\n new THREE.Vector2(c_x, c_y),\r\n new THREE.Vector2(d_x, d_y)\r\n ];\r\n }\r\n\r\n};\r\n\r\n\r\n\r\nexport const getExtrudedCarpet = ({ svgOutline, depth = 0.05, material }) => {\r\n if (!svgOutline) return\r\n // let svgText = svgOutline.replace(/[\\r\\n]/gm, '')\r\n let svgText = getSVGText(svgOutline)\r\n const data = svgLoader.parse(svgText);\r\n const paths = data.paths;\r\n let shapes = [];\r\n for (let i = 0; i < paths.length; i++) {\r\n Array.prototype.push.apply(shapes, paths[i].toShapes()); // catenate, so we can create a single geometry and mesh\r\n }\r\n const extrusionSettings = {\r\n curveSegments: 100,\r\n depth: depth,\r\n bevelEnabled: false,\r\n bevelThickness: 0,\r\n bevelSize: 0.01,\r\n bevelSegments: 1,\r\n bevelOffset: 0,\r\n UVGenerator: UVGenerator\r\n };\r\n const geometry = new THREE.ExtrudeBufferGeometry(shapes, extrusionSettings);\r\n geometry.center();\r\n geometry.needsUpdate = true;\r\n const mesh = new THREE.Mesh(geometry, material);\r\n return mesh;\r\n}","import * as THREE from \"three\";\r\nimport { OrbitControls } from \"../../../utils/OrbitControls\";\r\nimport { FBXLoader } from \"three/examples/jsm/loaders/FBXLoader\";\r\nimport {\r\n convertArrIntoRad,\r\n convertArrintoDeg,\r\n convertUnit,\r\n areaOfellipse,\r\n createVector,\r\n degToRad\r\n} from \"../../../utils/utils\";\r\nimport { CanvasTexture, Box3, MeshBasicMaterial } from \"three\";\r\nimport { makeUrl } from \"../../../utils/utils\";\r\nimport { CDN_domain } from \"../../../api/appProvider\";\r\nimport { pivotObject } from \"./pivotHelper\";\r\nimport { getExtrudedCarpet } from \"./extrudeShape\";\r\nexport default class ThreeViewHelper {\r\n constructor() {\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 this.ambientIntensity = undefined;\r\n }\r\n init({\r\n canvas,\r\n config = {},\r\n shots,\r\n dims = {},\r\n surfaceName = \"surface1\",\r\n resolution,\r\n roomType,\r\n baseUrl\r\n }) {\r\n let { width = window.innerWidth, height = window.innerHeight } = dims;\r\n this.roomDims = { width: 30, height: 30 };\r\n if (config.roomSize) this.roomDims = config.roomSize;\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 this.baseUrl = baseUrl;\r\n this.roomType = roomType;\r\n // if (roomType === \"illustrtion\") {\r\n // canvas.style.visibility = \"hidden\"\r\n // } else {\r\n // canvas.style.visibility = \"inherit\"\r\n // }\r\n this.renderer = new THREE.WebGLRenderer({\r\n canvas,\r\n preserveDrawingBuffer: true,\r\n alpha: true,\r\n antialias: false\r\n });\r\n this.renderer.setPixelRatio(resolution);\r\n this.renderer.setSize(width, height);\r\n const camConfig = config[shots[0]];\r\n this.camera = perspectiveCamera({ ...camConfig, width, height });\r\n this.scene.add(this.camera);\r\n window.scene = this.scene;\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 // const helper = new THREE.DirectionalLightHelper(this.directionalLight, 50)\r\n // this.scene.add(helper)\r\n const intensity = this.sceneConfig.ambientIntensity || 0.5;\r\n this.ambientLight = new THREE.AmbientLight(0xffffff, intensity);\r\n this.scene.add(this.ambientLight);\r\n }\r\n removeLights() {\r\n if (this.directionalLight) this.scene.remove(this.directionalLight);\r\n if (this.ambientLight) this.scene.remove(this.ambientLight);\r\n }\r\n setupSceneObjects({ carpetRotation, fbxUrl }) {\r\n switch (this.roomType) {\r\n case \"illustration\":\r\n return this.setup3dObject();\r\n default:\r\n const loadCarpet = this.setupCarpet({ fbxUrl });\r\n this.removeObjIfExists(\"floor\");\r\n this.removeObjIfExists(\"wallpaper\");\r\n\r\n const promiseArr = [loadCarpet];\r\n if (this.sceneConfig.objects3d) {\r\n const floorName = this.findObjInConfig(\"floor\");\r\n const wallpaperName = this.findObjInConfig(\"wallpaper\");\r\n\r\n if (floorName) {\r\n const loadFloor = this.setupFloor(floorName);\r\n promiseArr.push(loadFloor);\r\n }\r\n if (wallpaperName) {\r\n const loadWallpaper = this.setupWallpaper(wallpaperName);\r\n promiseArr.push(loadWallpaper);\r\n }\r\n }\r\n\r\n return Promise.all(promiseArr);\r\n }\r\n }\r\n removeObjIfExists(objName) {\r\n const obj = this.scene.getObjectByName(objName);\r\n if (obj) {\r\n this.scene.remove(obj);\r\n }\r\n }\r\n findObjInConfig(objName) {\r\n return this.sceneConfig.objects3d.find(item => item.toLowerCase() === objName);\r\n }\r\n setup3dObject() {\r\n const { modelUrl } = this.sceneConfig;\r\n const fbxUrl = makeUrl(this.baseUrl, modelUrl);\r\n this.clearScene();\r\n\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 this.fbxLoader.load(\r\n fbxUrl,\r\n obj => {\r\n this.object = obj.getObjectByName(objKey);\r\n this.scene.add(this.object);\r\n setup();\r\n },\r\n undefined,\r\n console.error\r\n );\r\n });\r\n }\r\n setupFloor() {\r\n return new Promise((resolve, reject) => {\r\n const { modelUrl } = this.sceneConfig;\r\n const fbxUrl = makeUrl(this.baseUrl, modelUrl);\r\n const objKey = \"floor\";\r\n const objConf = this.sceneConfig[objKey];\r\n const { position = [0, 0, 0], rotation = [90, 0, 0], scale } = objConf;\r\n const floor =\r\n this.scene.getObjectByName(\"floor\") ||\r\n this.scene.getObjectByName(\"Floor\") ||\r\n this.scene.getObjectByName(\"FLOOR\");\r\n if (floor) {\r\n this.scene.remove(floor);\r\n }\r\n const setup = () => {\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 = new MeshBasicMaterial({ side: THREE.DoubleSide, transparent: true });\r\n this.floor.material.needsUpdate = true;\r\n resolve();\r\n };\r\n this.fbxLoader.load(\r\n fbxUrl,\r\n obj => {\r\n this.floor =\r\n obj.getObjectByName(\"floor\") ||\r\n obj.getObjectByName(\"Floor\") ||\r\n obj.getObjectByName(\"FLOOR\");\r\n this.scene.add(this.floor);\r\n setup();\r\n },\r\n undefined,\r\n console.error\r\n );\r\n });\r\n }\r\n\r\n setupWallpaper(wallpaperName) {\r\n return new Promise((resolve, reject) => {\r\n const { modelUrl } = this.sceneConfig;\r\n const fbxUrl = makeUrl(this.baseUrl, modelUrl);\r\n const objKey = wallpaperName;\r\n const objConf = this.sceneConfig[objKey];\r\n const { position = [0, 0, 0], rotation = [90, 0, 0], scale } = objConf;\r\n const wallpaper =\r\n this.scene.getObjectByName(\"wallpaper\") ||\r\n this.scene.getObjectByName(\"Wallpaper\") ||\r\n this.scene.getObjectByName(\"WALLPAPER\");\r\n if (wallpaper) {\r\n this.scene.remove(wallpaper);\r\n }\r\n const setup = obj => {\r\n this.wallpaper =\r\n obj.getObjectByName(\"wallpaper\") ||\r\n obj.getObjectByName(\"Wallpaper\") ||\r\n obj.getObjectByName(\"WALLPAPER\");\r\n this.scene.add(this.wallpaper);\r\n this.wallpaper.position.fromArray(position);\r\n this.wallpaper.scale.fromArray(scale);\r\n this.wallpaper.rotation.fromArray(convertArrIntoRad(rotation));\r\n this.wallpaper.material = new MeshBasicMaterial({\r\n side: THREE.DoubleSide,\r\n transparent: true,\r\n color: 0xff0000\r\n });\r\n this.wallpaper.material.needsUpdate = true;\r\n\r\n resolve();\r\n };\r\n if (!this.object3d) this.fbxLoader.load(fbxUrl, setup, undefined, console.error);\r\n else setup(this.object3d);\r\n });\r\n }\r\n\r\n setupCarpet({ carpetRotation, fbxUrl }) {\r\n fbxUrl = fbxUrl ? fbxUrl : CDN_domain + \"v3assets/rug.fbx\";\r\n this.objConf = this.sceneConfig[this.surfaceName];\r\n const { position = [0, 0, 0], rotation = [90, 0, 0] } = this.objConf;\r\n if (this.objectLoaded) {\r\n this.scene.remove(this.object);\r\n const tarObj = this.scene.getObjectByName(\"TargetObject\");\r\n if (tarObj) this.scene.remove(tarObj);\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 const isSetPileAngle = window.flags.visualizations.setPileAngleInVisualizationTiles;\r\n // this.directionalLight.position.set(\r\n // position[0] - 3000 / fact,\r\n // position[1] + 3000 / fact,\r\n // position[2]\r\n // );\r\n var pileAngle = Math.PI / 4;\r\n if (isSetPileAngle) {\r\n pileAngle = (isSetPileAngle * Math.PI) / 180;\r\n }\r\n this.directionalLight.position.set(\r\n (position[0] - 3000 / fact) * Math.cos(pileAngle) * Math.sqrt(2),\r\n (position[1] + 3000 / fact) * Math.sin(pileAngle) * Math.sqrt(2),\r\n position[2]\r\n );\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 this.initialRotation = (rotation[2] * Math.PI) / 180;\r\n if (carpetRotation) {\r\n this.carpetMesh.rotation.z += (carpetRotation * Math.PI) / 180;\r\n }\r\n if (this.designDetails) 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\r\n if (this.changedIntensity()) {\r\n this.ambientIntensity = this.sceneConfig.ambientIntensity;\r\n if (this.carpetLoaded) {\r\n this.removeLights();\r\n this.setupLights();\r\n }\r\n }\r\n if (!this.carpetLoaded) {\r\n const onFbxLoad = obj => {\r\n this.carpetMesh = obj.getObjectByName(this.surfaceName);\r\n this.scene.add(this.carpetMesh);\r\n this.setupLights();\r\n setup();\r\n };\r\n this.loadfbx(fbxUrl)\r\n .then(obj => {\r\n onFbxLoad(obj);\r\n })\r\n .catch(err => {\r\n console.error(\"fbx load -> err\", err);\r\n const fbxUrl_ = \"v3assets/\" + fbxUrl.split(\"/\").pop();\r\n this.loadfbx(fbxUrl_)\r\n .then(obj => {\r\n onFbxLoad(obj);\r\n })\r\n .catch(err => {\r\n console.error(\"error on fbx load -> err\", err);\r\n });\r\n });\r\n } else setup();\r\n });\r\n }\r\n loadfbx(fbxUrl) {\r\n return new Promise((resolve, reject) => {\r\n this.fbxLoader.load(\r\n fbxUrl,\r\n obj => {\r\n resolve(obj);\r\n },\r\n undefined,\r\n err => {\r\n reject(err);\r\n }\r\n );\r\n });\r\n }\r\n changedIntensity() {\r\n const changedIntensity = this.ambientIntensity !== this.sceneConfig.ambientIntensity;\r\n if (\r\n changedIntensity &&\r\n (this.ambientIntensity !== undefined || this.sceneConfig.ambientIntensity !== undefined)\r\n ) {\r\n return true;\r\n } else {\r\n return false;\r\n }\r\n }\r\n setCarpetRotation(rotation) {\r\n const rot = convertArrIntoRad(rotation);\r\n if (!this.carpetLoaded) return;\r\n this.carpetMesh.rotation.fromArray(rot);\r\n }\r\n setCarpetPositon(position) {\r\n if (!this.carpetLoaded) return;\r\n this.carpetMesh.position.fromArray(position);\r\n }\r\n setCarpetScale(designDetails) {\r\n const { PhysicalWidth, PhysicalHeight, Unit, IsIrregular } = designDetails;\r\n if (!PhysicalWidth || !PhysicalHeight || !Unit) {\r\n console.error(\"Could not set carpet scale\");\r\n return;\r\n }\r\n const { flagged } = this.sceneConfig;\r\n let fact = flagged ? 10 : 1;\r\n\r\n let wid = convertUnit(Unit, \"ft\", PhysicalWidth);\r\n let hgt = convertUnit(Unit, \"ft\", PhysicalHeight);\r\n\r\n if (window.InterfaceElements.IsWallToWall) {\r\n //take it from props/parameteres\r\n const { position = [0, 0, 0] } = this.objConf;\r\n\r\n const z = 107.6 * hgt; //107.6 = half of the rug.fbx which is 215 units (check in blender) (215 units = 1 ft)\r\n const x = 107.6 * wid;\r\n let fac = flagged ? 5 : 1;\r\n const min = new THREE.Vector3(\r\n (position[0] - x) / fac,\r\n position[1] - 30,\r\n (position[2] - z) / fac\r\n );\r\n const max = new THREE.Vector3(\r\n (position[0] + x) / fac,\r\n position[1] + 30,\r\n (position[2] + z) / fac\r\n );\r\n this.bounds = new Box3(min, max);\r\n\r\n wid = this.roomDims.width;\r\n hgt = this.roomDims.height;\r\n }\r\n // set carpet scale according to design details or specific ratio\r\n if (this.extrudedCarpet) {\r\n this.carpetMesh.scale.set((wid * 313) / fact, (hgt * 313) / fact, 1 * 156);\r\n } else {\r\n this.carpetMesh.scale.set(wid / fact, hgt / fact, IsIrregular ? 1.2 : 2 / fact);\r\n }\r\n\r\n let pv = this.objConf.pivot;\r\n if (pv) {\r\n pivotObject(pv, this.carpetMesh, this.objConf.position);\r\n }\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, customDesign }) {\r\n return new Promise((resolve, reject) => {\r\n const { surfaceUnit = \"in\", doubleSide, defaultScale, fitWidth, offset } = this.objProps;\r\n const PhysicalWidth = convertUnit(\r\n designDetails.Unit,\r\n surfaceUnit,\r\n designDetails.PhysicalWidth\r\n );\r\n const PhysicalHeight = convertUnit(\r\n designDetails.Unit,\r\n surfaceUnit,\r\n designDetails.PhysicalHeight\r\n );\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 designTexture.colorSpace = THREE.SRGBColorSpace;\r\n let repeat = [1, 1];\r\n const scaleFactorForCustomDesign = 6;\r\n if (defaultScale)\r\n if (!fitWidth) {\r\n if (customDesign) {\r\n repeat = [\r\n (defaultScale[0] * scaleFactorForCustomDesign) / PhysicalWidth,\r\n (defaultScale[1] * scaleFactorForCustomDesign) / PhysicalHeight\r\n ];\r\n } else {\r\n repeat = [defaultScale[0] / PhysicalWidth, defaultScale[1] / PhysicalHeight];\r\n }\r\n } else {\r\n if (customDesign) {\r\n repeat = [\r\n 1,\r\n ((defaultScale[1] * scaleFactorForCustomDesign) /\r\n (defaultScale[0] * scaleFactorForCustomDesign)) *\r\n (PhysicalWidth / PhysicalHeight)\r\n ];\r\n } else {\r\n repeat = [1, (defaultScale[1] / defaultScale[0]) * (PhysicalWidth / PhysicalHeight)];\r\n }\r\n }\r\n if (offset) {\r\n designTexture.offset.fromArray(offset);\r\n } else {\r\n designTexture.offset.fromArray([0, 0]);\r\n }\r\n designTexture.repeat.fromArray(repeat);\r\n //designTexture.rotation= Math.PI/2;\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 setCarpetTexture({ designDetails, designCanvas, normapCanvas }) {\r\n const designTexture = new CanvasTexture(designCanvas);\r\n const normalTexture = new CanvasTexture(normapCanvas);\r\n if (window.InterfaceElements.IsJpeg && window.flags.visualizations?.applyLinearFilter) {\r\n designTexture.anisotropy = this.renderer.capabilities.getMaxAnisotropy();\r\n normalTexture.anisotropy = this.renderer.capabilities.getMaxAnisotropy();\r\n designTexture.wrapS = designTexture.wrapT = THREE.RepeatWrapping;\r\n normalTexture.wrapS = normalTexture.wrapT = THREE.RepeatWrapping;\r\n designTexture.generateMipmaps = false;\r\n designTexture.minFilter = THREE.LinearFilter;\r\n designTexture.magFilter = THREE.LinearFilter;\r\n designTexture.colorSpace = THREE.SRGBColorSpace;\r\n if (window.flags.visualizations?.textureWrapType === \"clampToEdge\") {\r\n designTexture.wrapS = designTexture.wrapT = THREE.ClampToEdgeWrapping;\r\n normalTexture.wrapS = normalTexture.wrapT = THREE.ClampToEdgeWrapping;\r\n }\r\n } else {\r\n designTexture.anisotropy = this.renderer.capabilities.getMaxAnisotropy();\r\n normalTexture.anisotropy = this.renderer.capabilities.getMaxAnisotropy();\r\n designTexture.wrapS = designTexture.wrapT = THREE.RepeatWrapping;\r\n normalTexture.wrapS = normalTexture.wrapT = THREE.RepeatWrapping;\r\n designTexture.colorSpace = THREE.SRGBColorSpace;\r\n }\r\n const surfaceUnit = \"ft\";\r\n const PhysicalWidth = convertUnit(designDetails.Unit, surfaceUnit, designDetails.PhysicalWidth);\r\n const PhysicalHeight = convertUnit(\r\n designDetails.Unit,\r\n surfaceUnit,\r\n designDetails.PhysicalHeight\r\n );\r\n this.designDetails = { ...designDetails, PhysicalHeight, PhysicalWidth, Unit: surfaceUnit };\r\n this.updateCarpetRepeatWallToWall({ designTexture });\r\n this.updateCarpetRepeatWallToWall({ designTexture: normalTexture });\r\n const { normalScale = [2, 2] } = this.sceneConfig;\r\n const newNormalScale = normalScale.map(\r\n value => value * window.flags.visualizations.multiplicationFactorForNormalMap\r\n );\r\n const normalScaleVec = new THREE.Vector2(...newNormalScale);\r\n this.material = new THREE.MeshStandardMaterial({\r\n map: designTexture,\r\n normalMap: normalTexture,\r\n normalScale: normalScaleVec,\r\n roughness: 1,\r\n metalness: 0.1,\r\n needsUpdate: true,\r\n transparent: true,\r\n alphaTest: 0.5,\r\n side: !this.designDetails.IsIrregular ? THREE.FrontSide : THREE.DoubleSide\r\n });\r\n this.designDetails.outline = false; //temporarily set to disable svg outline\r\n if (this.designDetails.IsIrregular && this.designDetails.outline) {\r\n this.extrudedCarpet = getExtrudedCarpet({\r\n svgOutline: this.designDetails.outline,\r\n material: this.material\r\n });\r\n if (this.extrudedCarpet) {\r\n this.extrudedCarpet.position.copy(this.carpetMesh.position);\r\n this.extrudedCarpet.rotation.copy(this.carpetMesh.rotation);\r\n if (this.extrudedCarpet) {\r\n this.carpetMeshBkp = this.carpetMesh;\r\n this.carpetMesh = this.extrudedCarpet;\r\n let childrenLen = this.scene.children.length;\r\n for (let i = 0; i < childrenLen; i++) {\r\n const child = this.scene.children[i];\r\n if (child.name === this.carpetMeshBkp.name) {\r\n this.carpetMesh.name = child.name;\r\n this.scene.children[i] = this.carpetMesh;\r\n }\r\n }\r\n }\r\n }\r\n } else if (this.carpetMeshBkp) {\r\n this.carpetMesh = this.carpetMeshBkp;\r\n let childrenLen = this.scene.children.length;\r\n for (let i = 0; i < childrenLen; i++) {\r\n const child = this.scene.children[i];\r\n if (child.name === this.carpetMesh.name) {\r\n this.carpetMesh.name = child.name;\r\n this.scene.children[i] = this.carpetMesh;\r\n }\r\n }\r\n this.carpetMeshBkp = null;\r\n this.extrudedCarpet = null;\r\n }\r\n if (!this.carpetMesh) return;\r\n this.carpetMesh.material = this.material;\r\n this.carpetMesh.material.needsUpdate = true;\r\n this.setCarpetScale(this.designDetails);\r\n this.render();\r\n }\r\n updateCarpetRepeatWallToWall(options = {}) {\r\n const { designTexture = this.carpetMesh.material.map } = options;\r\n if (window.InterfaceElements.IsWallToWall) {\r\n let repeat = [\r\n this.roomDims.width / this.designDetails.PhysicalWidth,\r\n this.roomDims.height / this.designDetails.PhysicalHeight\r\n ];\r\n let offsetX = 0;\r\n let offsetY = 0;\r\n if (window.flags.visualizations?.wallToWallCenterRepeat?.x) {\r\n let halfRepeatX = repeat[0] / 2;\r\n offsetX = 0.5 - (halfRepeatX - Math.floor(halfRepeatX)); //offset to center the tile center as canvas center horizontally\r\n }\r\n if (window.flags.visualizations?.wallToWallCenterRepeat?.y) {\r\n let halfRepeatY = repeat[0] / 2;\r\n offsetY = 0.5 - (halfRepeatY - Math.floor(halfRepeatY)); //offset to center the tile center as canvas center vertically\r\n }\r\n designTexture.offset.fromArray([offsetX, offsetY]);\r\n designTexture.repeat.fromArray([repeat[0], repeat[1]]);\r\n }\r\n }\r\n setFloorTexture({ floorCanvas }) {\r\n if (!this.floor || !this.floor.material || !this.renderer) return;\r\n\r\n if (!this.floor.material.map) {\r\n const texture = new CanvasTexture(floorCanvas);\r\n texture.anisotropy = this.renderer.capabilities.getMaxAnisotropy();\r\n texture.wrapS = texture.wrapT = THREE.RepeatWrapping;\r\n texture.colorSpace = THREE.SRGBColorSpace;\r\n this.floor.material.map = texture;\r\n }\r\n this.floor.material.map.needsUpdate = true;\r\n this.floor.material.needsUpdate = true;\r\n if (!this.floor.visible) this.floor.visible = true;\r\n this.render();\r\n }\r\n\r\n setWallpaperTexture({ wallpaperCanvas, dims = { width: 1, height: 1 } }) {\r\n if (!this.wallpaper || !this.wallpaper.material || !this.renderer) return;\r\n this.wallpaperDims = dims;\r\n const wallpaperConfig = this.sceneConfig[this.wallpaper.name];\r\n const { surfaceSize } = wallpaperConfig;\r\n\r\n if (!this.wallpaper.material.map) {\r\n this.wallpaper.material.color.set(\"white\");\r\n const texture = new CanvasTexture(wallpaperCanvas);\r\n texture.anisotropy = this.renderer.capabilities.getMaxAnisotropy();\r\n texture.wrapS = texture.wrapT = THREE.RepeatWrapping;\r\n texture.colorSpace = THREE.SRGBColorSpace;\r\n\r\n this.wallpaper.material.map = texture;\r\n this.setWallpaperSurfaceSize({ surfaceSize });\r\n }\r\n this.wallpaper.material.map.needsUpdate = true;\r\n this.wallpaper.material.needsUpdate = true;\r\n if (!this.wallpaper.visible) this.wallpaper.visible = true;\r\n this.render();\r\n }\r\n setWallpaperSurfaceSize({ surfaceSize }) {\r\n const dims = this.wallpaperDims;\r\n if (!dims) return;\r\n let repeat = [1, 1];\r\n this.sceneConfig[this.wallpaper.name].surfaceSize = surfaceSize;\r\n\r\n if (surfaceSize) repeat = [surfaceSize[0] / dims.width, surfaceSize[1] / dims.height];\r\n this.wallpaper.material.map.repeat.set(...repeat);\r\n }\r\n\r\n changeFloorVisibility(visible) {\r\n if (this.floor) {\r\n this.floor.visible = visible;\r\n this.render();\r\n }\r\n }\r\n\r\n changeWallpaperVisibility(visible) {\r\n this.wallpaper.visible = visible;\r\n this.render();\r\n }\r\n\r\n render() {\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) {\r\n this.bounds.clampPoint(sub, subClamped);\r\n }\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 raycastMouseOnSurface(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.scene.getObjectByName(this.surfaceName));\r\n let surfaceMapRepeat = this.scene.getObjectByName(this.surfaceName).material.map.repeat;\r\n if (intersects && intersects[0]?.uv) {\r\n intersects[0].uv.x *= surfaceMapRepeat.x;\r\n intersects[0].uv.y *= surfaceMapRepeat.y;\r\n }\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 const { rotationFlag } = this.sceneConfig;\r\n if (!rotationFlag) this.carpetMesh.rotation[axis] += (rotationInDegrees * Math.PI) / 180;\r\n else this.carpetMesh.rotation[axis] -= (rotationInDegrees * Math.PI) / 180;\r\n if (axis === \"z\") this.initialRotation = this.carpetMesh.rotation.z;\r\n // const snap = 15 * Math.PI / 180\r\n // this.carpetMesh.rotation[axis] = Math.round(this.carpetMesh.rotation[axis] / snap) * snap\r\n this.render();\r\n }\r\n rotateCarpetFromInitialValue(rotationInDegrees) {\r\n if (!this.carpetMesh) return;\r\n const { rotationFlag } = this.sceneConfig;\r\n const fact = !rotationFlag ? 1 : -1;\r\n this.objConf = this.sceneConfig[this.surfaceName];\r\n const { rotation = [90, 0, 0] } = this.objConf;\r\n if (rotationInDegrees === 0) this.initialRotation = degToRad(rotation[2]);\r\n this.carpetMesh.rotation.z = this.initialRotation + degToRad(rotationInDegrees) * fact;\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 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 const { offsetX, offsetY } = this.getRendererOffset();\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 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 getCarpetMask() {\r\n const object = this.carpetMesh.clone();\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 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) {\r\n if (this.carpetMesh.material.map) this.carpetMesh.material.map.needsUpdate = true;\r\n if (this.carpetMesh.material.normalMap) this.carpetMesh.material.normalMap.needsUpdate = true;\r\n this.carpetMesh.material.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.needsUpdate = true;\r\n // this.object.material.normalMap.needsUpdate = true;\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 if (this.camera) {\r\n this.camera.aspect = width / height;\r\n this.camera.updateProjectionMatrix();\r\n }\r\n this.renderer.setSize(width, height);\r\n this.render();\r\n }\r\n getObjectConfig() {\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 if (!this.carpetMesh) return;\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 if (!carpetSize) return;\r\n const { flagged } = this.sceneConfig;\r\n const fact = flagged ? 10 : 1;\r\n const carpetRadius = (215 * 3) / fact;\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\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 );\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}\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 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 control.addEventListener(\"change\", () => {\r\n renderer.render(scene, camera);\r\n });\r\n control.update();\r\n return control;\r\n};\r\nexport const loadFbx = url => {\r\n return new Promise((resolve, reject) => {\r\n new FBXLoader().load(url, resolve, undefined, reject);\r\n });\r\n};\r\n","import {\r\n convertArrintoDeg,\r\n convertUnit,\r\n getCroppedSize,\r\n makeUrl,\r\n resizeKeepingAspect\r\n} from \"../../../utils/utils\";\r\nimport { readImage } from \"../../../utils/domUtils\";\r\nimport {\r\n canvasToBlobPromise,\r\n clearCanvas,\r\n createCanvas,\r\n cropStitchCanvas,\r\n downloadImageData\r\n} from \"../../../utils/canvasutils\";\r\nimport ThreeViewHelper from \"./threeviewhelper\";\r\nimport TileCanvas from \"../../../tilecanvasnew\";\r\nimport AppProvider, { CDN_domain, myrugStudioSaveUrl } from \"../../../api/appProvider\";\r\nimport { pageViews } from \"../../../reducers/mainui.reducer\";\r\nimport axios from \"axios\";\r\nconst 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\n\r\nconst rgbFromHex = hex => {\r\n let rgb = new 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\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 this.currentActiveColors = [];\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 this.transitionCanvas = options.transitionCanvas;\r\n this.floatingOptionsContainer = options.floatingOptionsContainer;\r\n this.bgVideo = options.bgVideo;\r\n }\r\n clearAllCanvases() {\r\n clearCanvas(this.bgCanvas, this.bgCanvas.width, this.bgCanvas.height);\r\n clearCanvas(this.maskCanvas, this.maskCanvas.width, this.maskCanvas.height);\r\n clearCanvas(this.shadowCanvas, this.shadowCanvas.width, this.shadowCanvas.height);\r\n clearCanvas(this.inputCanvas, this.inputCanvas.width, this.inputCanvas.height);\r\n }\r\n initConfig({ baseUrl, config, files, sizeFromConfig = false }) {\r\n this.baseUrl = baseUrl;\r\n this.config = config;\r\n this.files = normalizeDirNames(files);\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 this.currentActiveColors = [];\r\n this.selectedColorCode = null;\r\n this.resolution = window.devicePixelRatio;\r\n if (window.flags.homeTemplate == pageViews.STUDIOENTRY) {\r\n this.dimensionPixels = resizeKeepingAspect(illustrationDims, containerDims, \"crop\");\r\n } else {\r\n this.dimensionPixels = resizeKeepingAspect(illustrationDims, containerDims, \"fit_inside\");\r\n }\r\n\r\n this.dimension = {\r\n width: Math.trunc(\r\n sizeFromConfig && illustrationDims.width\r\n ? illustrationDims.width\r\n : window.screen.width * this.resolution\r\n ),\r\n height: Math.trunc(\r\n sizeFromConfig && illustrationDims.height\r\n ? illustrationDims.height\r\n : window.screen.height * this.resolution\r\n )\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 if (this.floatingOptionsContainer) {\r\n this.floatingOptionsContainer.style.width = `${this.dimensionPixels.width}px`;\r\n this.floatingOptionsContainer.style.height = `${this.dimensionPixels.height}px`;\r\n }\r\n if (this.bgVideo) {\r\n this.bgVideo.style.width = `${this.dimensionPixels.width}px`;\r\n this.bgVideo.style.height = `${this.dimensionPixels.height}px`;\r\n }\r\n this.clearAllCanvases();\r\n\r\n const x = {\r\n shot: this.config.shots[0],\r\n light: this.config.lights ? this.config.lights[0] : null\r\n };\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 bgPatchGreyUrl = `${createName(x.shot, x.light)}pch.grey.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 bgVideoUrl = config.backgroundVideo;\r\n const promises = [];\r\n this.bgImage = null;\r\n this.maskImage = null;\r\n this.patchImage = null;\r\n this.patchGreyImage = null;\r\n this.patchShadow = null;\r\n this.shadowImage = null;\r\n this.highlightImage = null;\r\n this.glowImage = null;\r\n if (!this.files.includes(bgUrl)) 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 (this.files.includes(bgPatchUrl))\r\n promises.push(readImage(makeUrl(baseUrl, bgPatchUrl)).then(img => (this.patchImage = img)));\r\n if (this.files.includes(bgPatchShadowUrl))\r\n promises.push(\r\n readImage(makeUrl(baseUrl, bgPatchShadowUrl)).then(img => (this.patchShadow = img))\r\n );\r\n if (this.files.includes(bgPatchGreyUrl))\r\n promises.push(\r\n readImage(makeUrl(baseUrl, bgPatchGreyUrl)).then(img => (this.patchGreyImage = img))\r\n );\r\n if (this.files.includes(maskUrl))\r\n promises.push(readImage(makeUrl(baseUrl, maskUrl)).then(img => (this.maskImage = img)));\r\n if (this.files.includes(shadowUrl))\r\n promises.push(readImage(makeUrl(baseUrl, shadowUrl)).then(img => (this.shadowImage = img)));\r\n if (this.files.includes(highlightUrl))\r\n promises.push(\r\n readImage(makeUrl(baseUrl, highlightUrl)).then(img => (this.highlightImage = img))\r\n );\r\n if (this.files.includes(glowUrl))\r\n promises.push(readImage(makeUrl(baseUrl, glowUrl)).then(img => (this.glowImage = img)));\r\n if (this.bgVideo) {\r\n if (this.files.includes(bgVideoUrl)) {\r\n const mask = makeUrl(baseUrl, maskUrl);\r\n this.bgVideo.src = makeUrl(baseUrl, bgVideoUrl);\r\n this.bgVideo.setAttribute(\r\n \"style\",\r\n `-webkit-mask-image:url(${mask});mask-image:url(${mask});`\r\n );\r\n } else {\r\n this.bgVideo.src = \"\";\r\n this.bgVideo.setAttribute(\"style\", \"mask-image:none\");\r\n }\r\n }\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\r\n const tempBgCanvas = createCanvas(width, height);\r\n tempBgCanvas.getContext(\"2d\").drawImage(this.bgCanvas, 0, 0, width, height);\r\n\r\n clearCanvas(canvas, canvas.width, canvas.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 bgCtx.drawImage(tempBgCanvas, 0, 0, width, height);\r\n if (this.patchImage) {\r\n this.annotationCanvas = createCanvas(this.dimensionPixels.width, this.dimensionPixels.height);\r\n this.annotationCanvas\r\n .getContext(\"2d\")\r\n .drawImage(this.patchImage, 0, 0, this.dimensionPixels.width, this.dimensionPixels.height);\r\n } else {\r\n this.annotationCanvas = null;\r\n }\r\n\r\n if (this.patchImage && dominantColorHex) {\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 if (!this.selectedColorCode) this.selectedColorCode = patchRgb;\r\n // let counter = 0,\r\n // ifcounter = 0;\r\n // let t1 = performance.now();\r\n for (let i = 0; i < patchData.data.length; i += 4) {\r\n // counter++;\r\n if (\r\n isNumberInRange(\r\n patchData.data[i],\r\n this.selectedColorCode[0] - 5,\r\n this.selectedColorCode[0] + 5\r\n ) &&\r\n isNumberInRange(\r\n patchData.data[i + 1],\r\n this.selectedColorCode[1] - 5,\r\n this.selectedColorCode[1] + 5\r\n ) &&\r\n isNumberInRange(\r\n patchData.data[i + 2],\r\n this.selectedColorCode[2] - 5,\r\n this.selectedColorCode[2] + 5\r\n )\r\n ) {\r\n // ifcounter++;\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 } else {\r\n patchData.data[i] = 128;\r\n patchData.data[i + 1] = 128;\r\n patchData.data[i + 2] = 128;\r\n patchData.data[i + 3] = 0;\r\n }\r\n }\r\n // let t2 = performance.now();\r\n //console.log(t2 - t1, \" ms \", counter, \" counter \", ifcounter);\r\n const sel = this.currentActiveColors.findIndex(\r\n item => item.annotationColor === this.selectedColorCode\r\n );\r\n if (!sel || sel === -1) {\r\n this.currentActiveColors.push({\r\n annotationColor: this.selectedColorCode,\r\n dominantColorHex\r\n });\r\n } else\r\n this.currentActiveColors[sel] = {\r\n annotationColor: this.selectedColorCode,\r\n dominantColorHex\r\n };\r\n\r\n patchCtx.putImageData(patchData, 0, 0);\r\n const patchGreyCanvas = createCanvas(width, height);\r\n const patchGreyCtx = patchGreyCanvas.getContext(\"2d\");\r\n if (this.patchGreyImage) {\r\n patchGreyCtx.drawImage(this.patchGreyImage, 0, 0, width, height);\r\n }\r\n\r\n patchGreyCtx.globalCompositeOperation = \"overlay\";\r\n patchGreyCtx.drawImage(patchCanvas, 0, 0, width, height);\r\n\r\n if (this.patchShadow) {\r\n patchGreyCtx.globalCompositeOperation = \"multiply\";\r\n patchGreyCtx.drawImage(this.patchShadow, 0, 0, width, height);\r\n }\r\n\r\n patchGreyCtx.globalCompositeOperation = \"destination-in\";\r\n patchGreyCtx.drawImage(patchCanvas, 0, 0, width, height);\r\n // document.body.appendChild(patchCanvas)\r\n bgCtx.drawImage(patchGreyCanvas, 0, 0, width, height);\r\n }\r\n return \"successfully updated bg\";\r\n }\r\n updatethreeCanvas(options = {}) {\r\n const { carpetRotation } = options;\r\n if (!this.config.scenes) return;\r\n const scene = this.config.scenes[0];\r\n const { roomType, shots } = 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,\r\n dims: this.dimensionPixels,\r\n resolution: this.resolution,\r\n baseUrl: this.baseUrl,\r\n roomType\r\n });\r\n let fbx =\r\n window.flags.visualizations.usePlainFbx || window.InterfaceElements.IsWallToWall\r\n ? \"plain_rug.fbx\"\r\n : \"rug.fbx\";\r\n let fbxUrl = `${CDN_domain}v3assets/${fbx}`;\r\n return this.threeView.setupSceneObjects({ carpetRotation, fbxUrl });\r\n }\r\n renderDesignFromCustomUrl({\r\n customUrl,\r\n customDesignOutline,\r\n physicalWidth,\r\n physicalHeight,\r\n unit = \"cm\"\r\n }) {\r\n return new Promise((resolve, reject) => {\r\n readImage(customUrl)\r\n .then(image => {\r\n const { width, height } = image;\r\n const designCanvas = createCanvas(width, height);\r\n const ctx = designCanvas.getContext(\"2d\");\r\n ctx.drawImage(image, 0, 0);\r\n const ctxdata = ctx.getImageData(0, 0, designCanvas.width, designCanvas.height).data;\r\n const isIrregular = hasTransparentPixel(ctxdata);\r\n\r\n const normapCanvas = createCanvas(width, height);\r\n const ctxNorm = normapCanvas.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 (!physicalWidth || !physicalHeight) {\r\n const maxDims = { width: 1200, height: 1500 };\r\n const { width: newWidth, height: newHeight } = resizeKeepingAspect(\r\n { width, height },\r\n maxDims,\r\n \"fit_inside\"\r\n );\r\n PhysicalWidth = convertUnit(\"in\", \"ft\", newWidth / 10);\r\n PhysicalHeight = convertUnit(\"in\", \"ft\", newHeight / 10);\r\n } else {\r\n PhysicalWidth = convertUnit(unit, \"ft\", physicalWidth);\r\n PhysicalHeight = convertUnit(unit, \"ft\", physicalHeight);\r\n }\r\n const designDetails = {\r\n Width: width,\r\n Height: height,\r\n PhysicalWidth,\r\n PhysicalHeight,\r\n Unit: \"ft\",\r\n outline: customDesignOutline,\r\n IsIrregular: isIrregular\r\n };\r\n\r\n if (this.config.roomType == \"illustration\") {\r\n this.threeView.setObjectTexture({\r\n designDetails,\r\n designCanvas,\r\n normapCanvas,\r\n customDesign: true\r\n });\r\n } else {\r\n this.threeView.setCarpetTexture({ designDetails, designCanvas, normapCanvas });\r\n }\r\n this.updateGizmo();\r\n resolve();\r\n })\r\n .catch(err => {\r\n reject(err);\r\n });\r\n });\r\n }\r\n changeRenderedDesignSize({ PhysicalWidth, PhysicalHeight, Unit = \"cm\" }) {\r\n if (!PhysicalWidth || !PhysicalHeight) return;\r\n this.threeView.setCarpetScale({ PhysicalWidth, PhysicalHeight, Unit });\r\n this.threeView.updateMap();\r\n }\r\n renderDesign({ designDetails, designPath, hash, designDimsOrig }) {\r\n //designDimsorig is required for studiop.\r\n this.designDetails = designDetails;\r\n this.designPath = designPath;\r\n const { roomType } = this.config;\r\n const { designScale, canvasSize, renderBounds, offset } = this.config[this.config.scenes[0]];\r\n if (designScale) this.zoom = designScale;\r\n else this.zoom = window.flags.visualizations.renderDesignSpecific;\r\n const isDimsOrig =\r\n designDimsOrig.Width === designDetails.Width &&\r\n designDimsOrig.Height === designDetails.Height;\r\n\r\n let tileTransparency;\r\n try {\r\n tileTransparency = this.tileDetails[`tileTransparency${this.zoom}`]; //reading tile transparency from\r\n } catch (error) {\r\n console.log(error);\r\n }\r\n //TODO: convert this to param of function\r\n if (window.InterfaceElements.IsJpeg) {\r\n this.zoom = 1; // is always 1 for jpeg\r\n tileTransparency = [1];\r\n }\r\n let desDetails = { ...designDetails };\r\n if (!isDimsOrig) desDetails = { ...desDetails, ...designDimsOrig };\r\n let maxArea = null;\r\n if (window.flags.visualizations.maxCanvasSize) {\r\n const maxCanvasSize = window.flags.visualizations.maxCanvasSize;\r\n maxArea = maxCanvasSize[0] * maxCanvasSize[1];\r\n }\r\n tileCanvas.init({\r\n maxArea: maxArea,\r\n zoom: this.zoom,\r\n designDetails: desDetails,\r\n canvasSize,\r\n renderBounds,\r\n offset\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 let drawNormap = tileTransparency.length;\r\n if (!window.flags.applyNormalMapInJPEG && window.InterfaceElements.IsJpeg) {\r\n drawNormap = false;\r\n }\r\n tileCanvas.drawCanvasTiles(\r\n {\r\n designPath,\r\n zoom: this.zoom,\r\n designDetails,\r\n hash,\r\n drawNormap,\r\n tileTransparency\r\n },\r\n () => {\r\n // this.threeView.updateMap()\r\n },\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\r\n default:\r\n return new Promise((resolve, reject) => {\r\n this.designCanvasMod = createCanvas(tileCanvas.width, tileCanvas.height);\r\n this.normalCanvasMod = createCanvas(tileCanvas.width, tileCanvas.height);\r\n\r\n this.threeView.setCarpetTexture({\r\n designDetails: this.designDetails,\r\n designCanvas: this.designCanvasMod,\r\n normapCanvas: this.normalCanvasMod\r\n });\r\n this.threeView.setCarpetVisibility(false);\r\n const { DesignColors } = designDetails;\r\n let drawNormap;\r\n if (!window.flags.applyNormalMapInJPEG && window.InterfaceElements.IsJpeg) {\r\n drawNormap = false;\r\n } else {\r\n drawNormap =\r\n !DesignColors.every(\r\n color => color.PileHeight === DesignColors[0].PileHeight && !color.Carving\r\n ) || tileTransparency?.length;\r\n }\r\n\r\n const options = {\r\n designPath,\r\n zoom: this.zoom,\r\n designDetails: desDetails,\r\n hash,\r\n tileTransparency,\r\n drawNormap\r\n };\r\n // if (window.flags.visualizations.isBorderRugs) {\r\n // const centerDesignOptions = {\r\n // designPath\r\n // };\r\n // // tileCanvas.drawCanvasCenterTiles(centerDesignOptions);\r\n // }\r\n\r\n tileCanvas.drawCanvasTiles(\r\n options,\r\n () => {}, // function to call after each tile render\r\n () => {\r\n // function to call after render is complete\r\n if (\r\n (window.flags.visualizations.isBorderRugs || !isDimsOrig) &&\r\n window.flags.ordersheet.repeatRugInArea\r\n ) {\r\n const centerPath = //sessionStorage.getItem('centerDesignUrl') ||null;\r\n window.initialData.centerDesignUrl && window.initialData.centerDesignUrl !== \"\"\r\n ? window.initialData.centerDesignUrl\r\n : null;\r\n const borderWidth = window.initialData.borderSize || 0;\r\n const unit = window.initialData.unit || null;\r\n\r\n this.repeatDesignForOverSize({\r\n centerPath,\r\n borderWidth,\r\n unit,\r\n onComplete: () => {\r\n this.threeView.setCarpetScale(this.designDetails);\r\n this.threeView.updateMap();\r\n this.threeView.setCarpetVisibility(true);\r\n this.updateGizmo();\r\n resolve();\r\n }\r\n });\r\n } else {\r\n const cropPadding =\r\n maxArea === null ? 100 : 100 / (designDimsOrig.Width / tileCanvas.canvas.width);\r\n if (!isDimsOrig) {\r\n const { width, height } = getCroppedSize(\r\n (designDimsOrig =\r\n maxArea !== null\r\n ? {\r\n ...designDimsOrig,\r\n Width: tileCanvas.canvas.width,\r\n Height: tileCanvas.canvas.height\r\n }\r\n : designDimsOrig),\r\n designDetails,\r\n cropPadding\r\n );\r\n this.designCanvasMod.width = width * this.zoom;\r\n this.designCanvasMod.height = height * this.zoom;\r\n this.normalCanvasMod.width = width * this.zoom;\r\n this.normalCanvasMod.height = height * this.zoom;\r\n }\r\n cropStitchCanvas({ origCanvas: tileCanvas.canvas, canvas: this.designCanvasMod });\r\n cropStitchCanvas({\r\n origCanvas: tileCanvas.canvasNorm,\r\n canvas: this.normalCanvasMod\r\n });\r\n\r\n this.threeView.updateMap(); //\r\n this.threeView.setCarpetVisibility(true);\r\n this.updateGizmo();\r\n resolve();\r\n }\r\n }\r\n );\r\n });\r\n }\r\n }\r\n updateDesignWallToWall() {\r\n return new Promise((resolve, reject) => {\r\n this.threeView.updateCarpetRepeatWallToWall();\r\n this.threeView.updateMap(); //\r\n this.threeView.setCarpetVisibility(true);\r\n this.updateGizmo();\r\n resolve();\r\n });\r\n }\r\n renderFloor({ path }) {\r\n return new Promise((resolve, reject) => {\r\n if (!this.threeView) {\r\n resolve();\r\n return;\r\n }\r\n if (!path) {\r\n this.threeView.changeFloorVisibility(false);\r\n resolve();\r\n return;\r\n }\r\n readImage(path).then(floorImage => {\r\n if (!this.floorCanvas) this.floorCanvas = createCanvas(floorImage.width, floorImage.height);\r\n else {\r\n this.floorCanvas.width = floorImage.width;\r\n this.floorCanvas.height = floorImage.height;\r\n }\r\n this.floorCanvas.getContext(\"2d\").drawImage(floorImage, 0, 0);\r\n this.threeView.setFloorTexture({ floorCanvas: this.floorCanvas });\r\n resolve();\r\n });\r\n });\r\n }\r\n renderWallpaper({ path, dims }) {\r\n return new Promise((resolve, reject) => {\r\n if (!this.threeView) {\r\n resolve();\r\n return;\r\n }\r\n if (!path) {\r\n this.threeView.changeWallpaperVisibility(false);\r\n resolve();\r\n return;\r\n }\r\n readImage(path).then(wallpaperImage => {\r\n if (!this.wallpaperCanvas)\r\n this.wallpaperCanvas = createCanvas(wallpaperImage.width, wallpaperImage.height);\r\n else {\r\n this.wallpaperCanvas.width = wallpaperImage.width;\r\n this.wallpaperCanvas.height = wallpaperImage.height;\r\n }\r\n this.wallpaperCanvas.getContext(\"2d\").drawImage(wallpaperImage, 0, 0);\r\n this.threeView.setWallpaperTexture({ wallpaperCanvas: this.wallpaperCanvas, dims });\r\n resolve();\r\n });\r\n });\r\n }\r\n setWallpaperSurfaceSize({ surfaceSize }) {\r\n return new Promise((resolve, reject) => {\r\n if (!surfaceSize) {\r\n resolve();\r\n return;\r\n }\r\n this.threeView.setWallpaperSurfaceSize({ surfaceSize });\r\n });\r\n }\r\n updateCarpetPosition(position) {\r\n this.threeView.setCarpetPositon(position);\r\n this.updateGizmo();\r\n }\r\n updateCarpetRotation(rotation) {\r\n this.threeView.setCarpetRotation(rotation);\r\n }\r\n setTileDetails(tileDetails) {\r\n this.tileDetails = tileDetails;\r\n }\r\n updateTiles({ designDetails, updateDesignTiles, updateNormapTiles, hash, designDimsOrig }) {\r\n if (!this.tileDetails) {\r\n return Promise.resolve();\r\n }\r\n return new Promise((resolve, reject) => {\r\n //todo: implement cropped size\r\n let colorIndex;\r\n if (updateDesignTiles) colorIndex = updateDesignTiles.colorIndex;\r\n if (updateNormapTiles) colorIndex = updateNormapTiles.colorIndex;\r\n const isDimsOrig =\r\n designDimsOrig.Width === designDetails.Width &&\r\n designDimsOrig.Height === designDetails.Height;\r\n\r\n if (this.designDetails && this.designDetails.DesignColors === designDetails.DesignColors) {\r\n this.designDetails = designDetails;\r\n this.threeView.designDetails = designDetails;\r\n this.threeView.setCarpetScale(designDetails);\r\n if (\r\n (window.flags.visualizations.isBorderRugs || !isDimsOrig) &&\r\n window.flags.ordersheet.repeatRugInArea\r\n ) {\r\n const centerPath = window.initialData.centerDesignUrl || null;\r\n // window.initialData.centerDesignUrl && window.initialData.centerDesignUrl !== \"\"\r\n // ? window.initialData.centerDesignUrl\r\n // : null;\r\n const borderWidth = window.initialData.borderSize || 0;\r\n const unit = window.initialData.unit || null;\r\n // window.initialData.borderSize\r\n // ? window.initialData.borderSize\r\n // : null;\r\n\r\n this.repeatDesignForOverSize({\r\n centerPath,\r\n borderWidth,\r\n unit,\r\n onComplete: () => {\r\n this.threeView.setCarpetScale(this.designDetails);\r\n this.threeView.updateMap();\r\n resolve();\r\n return;\r\n }\r\n });\r\n } else {\r\n if (!isDimsOrig) {\r\n const cropPadding = 100;\r\n const { width, height } = getCroppedSize(designDimsOrig, designDetails, cropPadding);\r\n // startX = offsetX;\r\n // startY = offsetY;\r\n this.designCanvasMod.width = width;\r\n this.designCanvasMod.height = height;\r\n this.normalCanvasMod.width = width;\r\n this.normalCanvasMod.height = height;\r\n } else {\r\n const width = designDimsOrig.Width;\r\n const height = designDimsOrig.Height;\r\n this.designCanvasMod.width = width;\r\n this.designCanvasMod.height = height;\r\n this.normalCanvasMod.width = width;\r\n this.normalCanvasMod.height = height;\r\n }\r\n cropStitchCanvas({ origCanvas: tileCanvas.canvas, canvas: this.designCanvasMod });\r\n cropStitchCanvas({ origCanvas: tileCanvas.canvasNorm, canvas: this.normalCanvasMod });\r\n this.threeView.updateMap();\r\n resolve();\r\n return;\r\n }\r\n }\r\n this.designDetails = designDetails;\r\n\r\n let colorTileData = null;\r\n\r\n if (colorIndex && colorIndex !== -1 && !window.flags.isFelt) {\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 tileTransparency = this.tileDetails[`tileTransparency${this.zoom}`];\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 tileTransparency\r\n };\r\n if (!updateNormapTiles) {\r\n tileCanvas.designTilesUpdated = true;\r\n tileCanvas.updateDesignTiles(\r\n props,\r\n () => {\r\n this.threeView.updateMap();\r\n },\r\n () => {\r\n if (this.designCanvasMod)\r\n this.designCanvasMod.getContext(\"2d\").drawImage(tileCanvas.canvas, 0, 0);\r\n this.threeView.updateMap();\r\n setTimeout(() => {\r\n resolve();\r\n }, 500);\r\n }\r\n );\r\n } else {\r\n tileCanvas.normapTilesUpdated = true;\r\n tileCanvas.updateNormapTiles(\r\n props,\r\n () => {\r\n this.threeView.updateMap();\r\n },\r\n () => {\r\n if (this.normalCanvasMod)\r\n this.normalCanvasMod.getContext(\"2d\").drawImage(tileCanvas.canvasNorm, 0, 0);\r\n this.threeView.updateMap();\r\n setTimeout(() => {\r\n resolve();\r\n }, 500);\r\n }\r\n );\r\n // this.tileCanvas1x.updateNo(props, () => this.render())\r\n }\r\n });\r\n }\r\n repeatDesignForOverSize({ centerPath = null, borderWidth = 0, unit, onComplete }) {\r\n let centerDims;\r\n const width = this.designDetails.Width;\r\n const height = this.designDetails.Height;\r\n this.designCanvasMod.width = width;\r\n this.designCanvasMod.height = height;\r\n this.normalCanvasMod.width = width;\r\n this.normalCanvasMod.height = height;\r\n let centerCanvas;\r\n\r\n if (centerPath) {\r\n if (unit && this.designDetails.Unit !== unit) {\r\n borderWidth = convertUnit(unit, this.designDetails.Unit, borderWidth);\r\n }\r\n let borderDesignWid = parseFloat(window.initialData.borderDesignWid);\r\n let borderDesignHgt = parseFloat(window.initialData.borderDesignHgt);\r\n\r\n let centerCanvasPhyWidth = borderDesignWid - borderWidth * 2;\r\n let centerCanvasPhyHeight = borderDesignHgt - borderWidth * 2;\r\n let centerCanvasWid = (centerCanvasPhyWidth * width) / borderDesignWid;\r\n let centerCanvasHgt = (centerCanvasPhyHeight * height) / borderDesignHgt;\r\n\r\n centerDims = {\r\n width: centerCanvasWid,\r\n height: centerCanvasHgt\r\n };\r\n }\r\n const img = new Image();\r\n const img1 = new Image();\r\n const imgCenter = new Image();\r\n let imgloaded = false,\r\n img1loaded = false,\r\n imgCenterloaded = true;\r\n\r\n if (centerPath) {\r\n imgCenterloaded = false;\r\n centerCanvas = createCanvas(centerDims.width, centerDims.height);\r\n }\r\n const repeatImg = (canvas, img, width, height) => {\r\n var ctx = canvas.getContext(\"2d\");\r\n var pat = ctx.createPattern(img, \"repeat\");\r\n\r\n //find offset\r\n let repeat = [width / img.width, height / img.height];\r\n let offsetX = 0;\r\n let offsetY = 0;\r\n let halfRepeatX = repeat[0] / 2;\r\n offsetX = 0.5 - (halfRepeatX - Math.floor(halfRepeatX)); //offset to center the tile center as canvas center horizontally\r\n let halfRepeatY = repeat[1] / 2;\r\n offsetY = 0.5 - (halfRepeatY - Math.floor(halfRepeatY)); //offset to center the tile center as canvas center vertically\r\n let offsetXActual = Math.abs(offsetX * img.width);\r\n if (offsetX < 0) {\r\n offsetXActual = img.width - offsetXActual;\r\n }\r\n let offsetYActual = Math.abs(offsetY * img.height);\r\n if (offsetY < 0) {\r\n offsetYActual = img.height - offsetYActual;\r\n }\r\n\r\n ctx.save();\r\n ctx.translate(-offsetXActual, -offsetYActual);\r\n ctx.rect(0, 0, width + offsetXActual, height + offsetYActual);\r\n ctx.fillStyle = pat;\r\n ctx.fill();\r\n ctx.restore();\r\n };\r\n\r\n const finish = () => {\r\n if (imgloaded && img1loaded && imgCenterloaded) {\r\n if (centerPath) {\r\n const startx = (this.designCanvasMod.width - centerCanvas.width) / 2;\r\n const starty = (this.designCanvasMod.height - centerCanvas.height) / 2;\r\n const finalCanvasContext = this.designCanvasMod.getContext(\"2d\");\r\n finalCanvasContext.drawImage(\r\n centerCanvas,\r\n startx,\r\n starty,\r\n centerCanvas.width,\r\n centerCanvas.height\r\n );\r\n }\r\n onComplete();\r\n return;\r\n }\r\n };\r\n\r\n img.onload = () => {\r\n repeatImg(this.designCanvasMod, img, width, height);\r\n imgloaded = true;\r\n finish();\r\n };\r\n img1.onload = () => {\r\n repeatImg(this.normalCanvasMod, img1, width, height);\r\n img1loaded = true;\r\n finish();\r\n };\r\n imgCenter.onload = () => {\r\n repeatImg(centerCanvas, imgCenter, centerDims.width, centerDims.height);\r\n imgCenterloaded = true;\r\n finish();\r\n };\r\n\r\n img.src = tileCanvas.canvas.toDataURL();\r\n img1.src = tileCanvas.canvasNorm.toDataURL();\r\n imgCenter.src = centerPath;\r\n imgCenter.crossOrigin = \"Anonymous\";\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, this.maskCanvas.width, this.maskCanvas.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 if (!this.config.hasTransparencyMask) makeMask(tmpCanvas, width, height, this.maskImage, true);\r\n else {\r\n tmpCanvas.getContext(\"2d\").globalCompositeOperation = \"destination-in\";\r\n tmpCanvas.getContext(\"2d\").drawImage(this.maskImage, 0, 0, width, height);\r\n }\r\n this.maskCanvas.getContext(\"2d\").drawImage(tmpCanvas, 0, 0, width, height);\r\n }\r\n async updateShadow(options = {}) {\r\n const { clear = false } = options;\r\n clearCanvas(this.shadowCanvas, this.shadowCanvas.width, this.shadowCanvas.height);\r\n if (clear) return \"clear\";\r\n const { width, height } = this.dimension;\r\n const tempCanvas = createCanvas(width, height);\r\n const tCtx = tempCanvas.getContext(\"2d\");\r\n setCanvasDimensions(this.shadowCanvas, this.dimension, this.dimensionPixels);\r\n let threeLayer = this.threeCanvas;\r\n if (!this.threeView.renderer) return;\r\n this.threeView.render();\r\n tCtx.drawImage(threeLayer, 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 }\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(threeLayer, 0, 0, width, height);\r\n this.shadowCanvas.getContext(\"2d\").drawImage(tempCanvas, 0, 0, width, height);\r\n if (window.flags.designView.hasDesignWaterMark) {\r\n const logoUrl = `${AppProvider.domain}${window.InterfaceElements.LogoUrl}`;\r\n const img = await readImage(logoUrl);\r\n const imgwidth = 100;\r\n const imgheight = (img.height * imgwidth) / img.width;\r\n\r\n const startx = width - (imgwidth + 15);\r\n const starty = height - (imgheight + 15);\r\n const context = this.shadowCanvas.getContext(\"2d\");\r\n context.globalAlpha = 0.5;\r\n context.drawImage(img, startx, starty, imgwidth, imgheight);\r\n }\r\n }\r\n makeTransitionCanvas(options = {}) {\r\n // return\r\n const { clear = false } = options;\r\n clearCanvas(this.transitionCanvas, this.transitionCanvas.width, this.transitionCanvas.height);\r\n if (clear) return \"clear\";\r\n setCanvasDimensions(this.transitionCanvas, this.dimension, this.dimensionPixels);\r\n const transitionctx = this.transitionCanvas.getContext(\"2d\");\r\n\r\n transitionctx.drawImage(this.bgCanvas, 0, 0, this.dimension.width, this.dimension.height);\r\n transitionctx.drawImage(this.threeCanvas, 0, 0, this.dimension.width, this.dimension.height);\r\n transitionctx.drawImage(this.maskCanvas, 0, 0, this.dimension.width, this.dimension.height);\r\n transitionctx.drawImage(this.shadowCanvas, 0, 0, this.dimension.width, this.dimension.height);\r\n return \"done\";\r\n }\r\n handleCanvasClick(e) {\r\n return;\r\n // if (!this.annotationCanvas) return\r\n // const imgData = this.annotationCanvas.getContext(\"2d\").getImageData(e.x, e.y, 1, 1)\r\n // if (imgData.data.every(data => data === 255)) return;\r\n // this.selectedColorCode = imgData.data.slice(0, 3)\r\n // return this.selectedColorCode\r\n }\r\n mouseDownTouchStart(e) {\r\n this.updateGizmo();\r\n this.intersectsGizmo = this.findGizmoIntersection(e);\r\n this.moved = false;\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 const difference = e.x - this.prev.x;\r\n this.moved = difference > 10;\r\n if (!this.intersectsGizmo) {\r\n this.threeView.mouseTouchMove(e);\r\n this.updateGizmo();\r\n } else {\r\n this.threeView.rotateCarpet(difference, \"z\");\r\n this.prev = { ...e };\r\n }\r\n }\r\n mouseDownTouchEnd(e) {\r\n if (this.shadowCleared) this.updateShadow();\r\n let showColorSelectionBox = null;\r\n let isActiveValue = null;\r\n if (!this.moved && this.annotationCanvas) {\r\n const imgData = this.annotationCanvas.getContext(\"2d\").getImageData(e.x, e.y, 1, 1);\r\n if (imgData.data[3] !== 0) {\r\n isActiveValue = imgData.data[3];\r\n showColorSelectionBox = this.selectedColorCode = imgData.data.slice(0, 3);\r\n if (imgData.data[0] == 45 && imgData.data[1] == 24 && imgData.data[2] == 18) {\r\n showColorSelectionBox = false;\r\n }\r\n }\r\n }\r\n let rotation = null;\r\n let position = null;\r\n const object = this.threeView.getObjectConfig();\r\n let texCoordinates;\r\n const intersect = this.threeView.raycastMouseOnSurface(e);\r\n if (intersect && this.designDetails) {\r\n const x = this.designDetails.Width * intersect.uv.x;\r\n const y = this.designDetails.Height * (1 - intersect.uv.y);\r\n texCoordinates = { x, y };\r\n }\r\n if (object) {\r\n if (this.intersectsGizmo) {\r\n rotation = convertArrintoDeg(object.rotation.toArray().slice(0, 3));\r\n } else {\r\n position = object.position;\r\n }\r\n }\r\n\r\n return { showColorSelectionBox, rotation, position, texCoordinates, isActiveValue };\r\n }\r\n findGizmoIntersection(e) {\r\n const { x, y } = e;\r\n if (!this.inputCanvas) return;\r\n var imgData = this.inputCanvas.getContext(\"2d\").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 clearGizmo() {}\r\n updateGizmo() {\r\n const { roomType } = this.config;\r\n if (roomType === \"illustration\" || !window.flags.visualizations.showGizmoInRoomView) return;\r\n const diamondHeight = 10;\r\n const context = this.inputCanvas.getContext(\"2d\");\r\n const { width, height } = this.inputCanvas;\r\n clearCanvas(this.inputCanvas, this.inputCanvas.width, this.inputCanvas.height);\r\n const gizmoCoordinates = this.threeView.getGizmoCordinates();\r\n if (!gizmoCoordinates) return;\r\n let { radX, radY, canvasCenter } = gizmoCoordinates;\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 = \"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(canvasCenter.x, canvasCenter.y, radiusX, radiusY, 0, 0, 2 * Math.PI);\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 const containerDims = {\r\n width: this.container.clientWidth,\r\n height: this.container.clientHeight\r\n };\r\n if (window.flags.homeTemplate == pageViews.STUDIOENTRY) {\r\n this.dimensionPixels = resizeKeepingAspect(this.config.dims, containerDims, \"crop\");\r\n } else {\r\n this.dimensionPixels = resizeKeepingAspect(this.config.dims, containerDims, \"fit_inside\");\r\n }\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 if (this.floatingOptionsContainer) {\r\n this.floatingOptionsContainer.style.width = `${this.dimensionPixels.width}px`;\r\n this.floatingOptionsContainer.style.height = `${this.dimensionPixels.height}px`;\r\n }\r\n if (this.bgVideo) {\r\n this.bgVideo.style.width = `${this.dimensionPixels.width}px`;\r\n this.bgVideo.style.height = `${this.dimensionPixels.height}px`;\r\n }\r\n this.updateGizmo();\r\n }\r\n\r\n async getWaterMarkLogoForRugStudio(width, height, callback) {\r\n // const logoUrl = `${AppProvider.domain}${window.InterfaceElements.LogoUrl}`;\r\n const logoUrl = `${AppProvider.domain}/MyRugStudio/Logo.png`;\r\n const img = await readImage(logoUrl);\r\n return img;\r\n }\r\n\r\n async downloadPdfOrImageForRugStudioCustomDesign(\r\n roomName,\r\n description,\r\n qrurl,\r\n room = \"free\",\r\n type = \"image\",\r\n isWatermark = true,\r\n paypalName = \"\",\r\n paypalEmail = \"\",\r\n purchasedDate = \"\"\r\n ) {\r\n let w = 3840;\r\n let h = 2160;\r\n const renderCanvas = createCanvas(w, h);\r\n const renderCtx = renderCanvas.getContext(\"2d\");\r\n\r\n // Create a context for the watermark image on the shadowCanvas\r\n const context = this.shadowCanvas.getContext(\"2d\");\r\n context.globalAlpha = 1;\r\n var startx, starty, imgwidth, imgheight;\r\n this.getWaterMarkLogoForRugStudio().then(watermarkImage => {\r\n if (isWatermark) {\r\n const isPremiumRoom = room == \"paid\";\r\n imgwidth = isPremiumRoom ? 400 : 200; // Set the desired width of the watermark image\r\n var devicePixelRatio = window.devicePixelRatio || 1;\r\n imgwidth = imgwidth * devicePixelRatio;\r\n imgheight = (watermarkImage.height * imgwidth * devicePixelRatio) / watermarkImage.width;\r\n const canvasWidth = window.screen.width * window.devicePixelRatio;\r\n const canvasHeight = window.screen.height * window.devicePixelRatio;\r\n startx = isPremiumRoom ? (canvasWidth - imgwidth) / 2 : canvasWidth - (imgwidth + 20);\r\n starty = isPremiumRoom ? (canvasHeight - imgheight) / 2 : canvasHeight - (imgheight + 20);\r\n context.beginPath();\r\n context.roundRect(startx - 20, starty - 20, imgwidth + 40, imgheight + 40, [20, 0, 0, 0]);\r\n context.fillStyle = \"rgba(255, 255, 255, 0.1)\";\r\n context.fill();\r\n // Draw the watermark image on the shadowCanvas\r\n context.drawImage(watermarkImage, startx, starty, imgwidth, imgheight);\r\n }\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 if (type == \"pdf\") {\r\n canvasToBlobPromise(renderCanvas).then(blob => {\r\n AppProvider.fetchPdfForRugStudio({\r\n roomPath: blob,\r\n description: description,\r\n qrurl: qrurl,\r\n roomName: roomName,\r\n room: room,\r\n isWatermark: isWatermark,\r\n paypalName: paypalName,\r\n paypalEmail: paypalEmail,\r\n purchasedDate: purchasedDate\r\n }).then(url => {\r\n const link = document.createElement(\"a\");\r\n link.href = myrugStudioSaveUrl + \"MyRugSave.aspx?mode=downloadFile&file=\" + url.pdfPath;\r\n link.download = roomName + \".pdf\"; // Set the default file name\r\n // Simulate a click event on the link\r\n link.dispatchEvent(new MouseEvent(\"click\"));\r\n\r\n // Clear the watermark from the shadowCanvas\r\n context.clearRect(startx, starty, imgwidth, imgheight);\r\n context.clearRect(startx - 20, starty - 20, imgwidth + 40, imgheight + 40, [\r\n 20,\r\n 0,\r\n 0,\r\n 0\r\n ]);\r\n if (!isWatermark) {\r\n setTimeout(() => {\r\n AppProvider.sendEmailMyRugStudio({\r\n file: url.pdfPath,\r\n qrurl: qrurl,\r\n roomName: roomName,\r\n isWatermark: isWatermark,\r\n paypalName: paypalName,\r\n paypalEmail: paypalEmail,\r\n purchasedDate: purchasedDate\r\n });\r\n }, [10000]);\r\n }\r\n });\r\n });\r\n } else {\r\n const link = document.createElement(\"a\");\r\n link.href = renderCanvas.toDataURL(\"image/jpeg\");\r\n link.download = roomName;\r\n link.click();\r\n context.clearRect(startx, starty, imgwidth, imgheight);\r\n context.clearRect(startx - 20, starty - 20, imgwidth + 40, imgheight + 40, [20, 0, 0, 0]);\r\n }\r\n });\r\n }\r\n\r\n renderinCanvas({ width, height } = this.dimensionPixels) {\r\n const w = width;\r\n const h = height;\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, mime);\r\n }\r\n\r\n async downloadRenderingForRugStudio(\r\n name,\r\n roomName,\r\n description,\r\n qrurl,\r\n room = \"free\",\r\n type = \"image\",\r\n isWatermark = true,\r\n paypalName = \"\",\r\n paypalEmail = \"\",\r\n purchasedDate = \"\"\r\n ) {\r\n const renderCanvas = this.renderinCanvas();\r\n const context = renderCanvas.getContext(\"2d\");\r\n context.globalAlpha = 1;\r\n\r\n this.getWaterMarkLogoForRugStudio().then(watermarkImage => {\r\n if (isWatermark) {\r\n const isPremiumRoom = room == \"paid\";\r\n const imgwidth = isPremiumRoom ? 800 : 400; // Set the desired width of the watermark image\r\n const imgheight = (watermarkImage.height * imgwidth) / watermarkImage.width;\r\n const canvasWidth = renderCanvas.width;\r\n const canvasHeight = renderCanvas.height;\r\n const startx = isPremiumRoom ? (canvasWidth - imgwidth) / 2 : canvasWidth - (imgwidth + 20);\r\n const starty = isPremiumRoom\r\n ? (canvasHeight - imgheight) / 2\r\n : canvasHeight - (imgheight + 20);\r\n context.beginPath();\r\n context.roundRect(startx - 20, starty - 20, imgwidth + 40, imgheight + 40, [20, 0, 0, 0]);\r\n context.fillStyle = \"rgba(255, 255, 255, 0.1)\";\r\n context.fill();\r\n // Draw the watermark image on the shadowCanvas\r\n context.drawImage(watermarkImage, startx, starty, imgwidth, imgheight);\r\n }\r\n if (type == \"pdf\") {\r\n canvasToBlobPromise(renderCanvas).then(blob => {\r\n AppProvider.fetchPdfForRugStudio({\r\n roomPath: blob,\r\n description: description,\r\n qrurl: qrurl,\r\n roomName: roomName,\r\n room: room,\r\n isWatermark: isWatermark,\r\n paypalName: paypalName,\r\n paypalEmail: paypalEmail,\r\n purchasedDate: purchasedDate\r\n }).then(url => {\r\n const link = document.createElement(\"a\");\r\n link.href = myrugStudioSaveUrl + \"MyRugSave.aspx?mode=downloadFile&file=\" + url.pdfPath;\r\n link.download = name + \".pdf\"; // Set the default file name\r\n // Simulate a click event on the link\r\n link.dispatchEvent(new MouseEvent(\"click\"));\r\n if (!isWatermark) {\r\n setTimeout(() => {\r\n AppProvider.sendEmailMyRugStudio({\r\n file: url.pdfPath,\r\n qrurl: qrurl,\r\n roomName: roomName,\r\n isWatermark: isWatermark,\r\n paypalName: paypalName,\r\n paypalEmail: paypalEmail,\r\n purchasedDate: purchasedDate\r\n });\r\n }, [10000]);\r\n }\r\n });\r\n });\r\n } else {\r\n const link = document.createElement(\"a\");\r\n link.href = renderCanvas.toDataURL(\"image/jpeg\");\r\n link.download = name;\r\n link.click();\r\n }\r\n });\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};\r\nconst normalizeDirNames = files =>\r\n files.map(item => (item.charAt(0) === \"/\" ? item.substring(1) : item));\r\n\r\nconst hasTransparentPixel = data => {\r\n let isTransparent = false;\r\n\r\n for (let index = 0; index < data.length; index += 4) {\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\nconst isNumberInRange = (num, min, max, inclusive = true) => {\r\n if (inclusive) {\r\n if (num >= min && num <= max) return true;\r\n } else {\r\n if (num > min && num < max) return true;\r\n }\r\n return false;\r\n};\r\n","import { colorNumberModes } from \"../components/pages/EntryPage/defaultflags\";\r\nimport React from \"react\";\r\nimport { MD5 } from \"../utils/md5\";\r\nimport { getPathOffile } from \"../utils/arrayUtils\";\r\nimport { convertUnit_Arr } from \"../utils/utils\";\r\n\r\nconst StateContext = React.createContext();\r\nconst DispatchContext = React.createContext();\r\n\r\nconst SET_DETAILS = \"SET_DETAILS\";\r\nconst SET_RUG_PHYSICAL_SIZE = \"SET_RUG_PHYSICAL_SIZE\";\r\n\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_CUSTOSCOUT_ID_TO_HIDE = \"SET_CUSTOSCOUT_ID_TO_HIDE\"; //In cyr the area swatch shows in both design and room stage area.\r\nconst SET_AVAIL_SIZES = \"SET_AVAIL_SIZES\";\r\nconst SELECT_ILLU_SIZE = \"SELECT_ILLU_SIZE\";\r\nconst SET_CUSTOM_FIELDS = \"SET_CUSTOM_FIELDS\";\r\nconst SET_CUSTOM_FIELDS_LOADING = \"SET_CUSTOM_FIELDS_LOADING\";\r\nconst SET_DESIGNCOLORS = \"SET_DESIGNCOLORS\";\r\nconst CHANGE_HASH = \"CHANGE_HASH\";\r\nconst SET_DESIGN_VIEW_ZOOM = \"SET_DESIGN_VIEW_ZOOM\";\r\nconst SET_DESIGN_VIEW_ZOOM_JPEG = \"SET_DESIGN_VIEW_ZOOM_JPEG\";\r\nconst SET_URL_QR = \"SET_URL_QR\";\r\nconst SET_LOCKED_COLOR_INDEX_ARRAY = \"SET_LOCKED_COLOR_INDEX_ARRAY\";\r\nconst SET_CUSTOM_SIZE = \"SET_CUSTOM_SIZE\";\r\n\r\nconst designDetailActions = {\r\n SET_DETAILS,\r\n SET_DETAILS_ONLY,\r\n SET_DESIGNCOLORS,\r\n SET_RUG_PHYSICAL_SIZE,\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_CUSTOSCOUT_ID_TO_HIDE,\r\n SET_AVAIL_SIZES,\r\n SELECT_ILLU_SIZE,\r\n SET_CUSTOM_FIELDS,\r\n SET_CUSTOM_FIELDS_LOADING,\r\n CHANGE_HASH,\r\n SET_DESIGN_VIEW_ZOOM,\r\n SET_DESIGN_VIEW_ZOOM_JPEG,\r\n SET_URL_QR,\r\n SET_LOCKED_COLOR_INDEX_ARRAY,\r\n SET_CUSTOM_SIZE\r\n};\r\nconst designDetailState = {\r\n loading: true,\r\n designDetails: {},\r\n designName: null,\r\n originalName: null,\r\n currentDesignPath: null,\r\n designDimsOrig: null,\r\n fullpath: null,\r\n selectedColor: -1,\r\n customizationFlag: false,\r\n history: [],\r\n future: [],\r\n undoHistory: [],\r\n totalKnots: null,\r\n tileDetails: null,\r\n hash: null,\r\n designViewZoom: 3,\r\n designViewZoomJpeg: 1,\r\n encodedUrl: 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 custoScoutIdforCyr: \"\",\r\n clickedDivElement: \"\"\r\n },\r\n carvingColorsIndex: [],\r\n customFields: {\r\n loading: false,\r\n fields: null\r\n },\r\n lockedColorIndexArray: [], //during shuffling don't change the positions of this array, done in artoffloors\r\n customSize: {\r\n x: 0,\r\n y: 0,\r\n closestName: \"\",\r\n currentCustomSizeFilename: \"\",\r\n newname: \"\"\r\n }\r\n};\r\nconst getVariationFolder = fullpath => {\r\n if (!fullpath || fullpath === \"\") return fullpath;\r\n let foldername = fullpath.split(\"/\").pop();\r\n foldername = foldername.substr(0, foldername.lastIndexOf(\".\"));\r\n\r\n if (fullpath.lastIndexOf(\"/.\") >= 0) {\r\n const sp = fullpath.split(\"/\");\r\n foldername = sp[sp.length - 2].replace(\".\", \"\");\r\n }\r\n return foldername;\r\n};\r\n\r\nconst designDetailReducer = (state, action) => {\r\n switch (action.type) {\r\n case SET_DETAILS:\r\n return setDesignDetails(state, action.payload);\r\n case SET_RUG_PHYSICAL_SIZE:\r\n return changeRugPhySize(state, action.payload);\r\n case SET_TILE_DETAILS:\r\n return setTileDetails(state, action.payload);\r\n case SET_URL_QR:\r\n return { ...state, encodedUrl: action.payload };\r\n case SELECT_DESIGN_COLOR:\r\n return {\r\n ...state,\r\n selectedColor: action.payload,\r\n custoScout: { ...state.custoScout, show: state.custoScout.show }\r\n };\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 if (!state.future.length) return state;\r\n return redoDesignColor(state);\r\n case RESET_COLOR_SELECTION:\r\n if (!state.history.length) return state;\r\n window.sessionStorage.removeItem(\"DesignColors\");\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 { ...state };\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 ...action.payload\r\n }\r\n };\r\n case TOOGLE_CUSTOSCOUT:\r\n return { ...state, custoScout: { ...state.custoScout, show: action.payload } };\r\n case SET_CUSTOSCOUT_ID_TO_HIDE:\r\n return { ...state, custoScout: { ...state.custoScout, custoScoutIdforCyr: action.payload } };\r\n case SET_CUSTOM_FIELDS_LOADING:\r\n return { ...state, customFields: { ...state.customFields, loading: !!action.payload } };\r\n case SET_CUSTOM_FIELDS:\r\n return { ...state, customFields: { ...state.customFields, fields: action.payload } };\r\n case SET_CUSTOM_SIZE:\r\n return { ...state, customSize: action.payload };\r\n case SET_DESIGN_VIEW_ZOOM:\r\n return { ...state, designViewZoom: action.payload };\r\n case SET_DESIGN_VIEW_ZOOM_JPEG:\r\n return { ...state, designViewZoomJpeg: action.payload };\r\n case SET_DESIGNCOLORS:\r\n return setDesignColors(state, action.payload);\r\n case CHANGE_HASH:\r\n return {\r\n ...state,\r\n hash: generateHash(action.payload, Math.round(Math.random(100000) * 100000))\r\n };\r\n case SET_LOCKED_COLOR_INDEX_ARRAY:\r\n return { ...state, lockedColorIndexArray: action.payload };\r\n default:\r\n return state;\r\n }\r\n};\r\nconst setDesignColors = (state, payload) => {\r\n let newDesignDetails = { ...state.designDetails, DesignColors: payload };\r\n\r\n let designDetailsState = {\r\n ...state,\r\n designDetails: newDesignDetails,\r\n colorNumbers: updateColorNumbers(newDesignDetails.DesignColors),\r\n hash: generateHash(newDesignDetails)\r\n };\r\n return designDetailsState;\r\n};\r\nconst setDesignDetails = (state, payload) => {\r\n const {\r\n designDetails: designDetailsPayload,\r\n fullpath,\r\n hash,\r\n customizationFlag,\r\n label,\r\n originalName,\r\n setCustomConversion = false,\r\n customInToCmFactor\r\n } = payload;\r\n const details = normalizeUnit({\r\n ...designDetailsPayload,\r\n defaultUnit: window.flags.defaultUnit,\r\n setCustomConversion,\r\n customInToCmFactor\r\n });\r\n let designColorsPalette = designDetailsPayload.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) {\r\n const ParentFolder = window.sessionStorage.getItem(\"ParentFolder\");\r\n const DesignColors = window.sessionStorage.getItem(\"DesignColors\");\r\n if (getPathOffile(fullpath) === ParentFolder && DesignColors) {\r\n designColorsPalette = JSON.parse(DesignColors);\r\n }\r\n }\r\n if (window.flags.applyColorPaletteinVariations) {\r\n const DesignColors = window.sessionStorage.getItem(\"DesignColors\");\r\n const CurrentVariationFolder = window.sessionStorage.getItem(\"CurrentVariationFolder\");\r\n\r\n if (getVariationFolder(fullpath) === CurrentVariationFolder && DesignColors) {\r\n designColorsPalette = JSON.parse(DesignColors);\r\n } else if (DesignColors && getVariationFolder(fullpath) !== CurrentVariationFolder) {\r\n window.sessionStorage.removeItem(\"DesignColors\");\r\n }\r\n }\r\n const designDetails = {\r\n ...designDetailsPayload,\r\n ...details,\r\n OrderProperties: { QualityIndex: window.flags.defaultQualityIndex },\r\n DesignColors: designColorsPalette\r\n };\r\n let history = [];\r\n if (\r\n designDetailsPayload.DesignColors !== designColorsPalette &&\r\n (window.flags.applyColorPaletteinVariations || window.flags.applyColorPaletteinSameFolder)\r\n ) {\r\n // History states should reset to [], normally, but when color palette should be passed to other variations / designs of same folder, the history state should have original color in it's array.\r\n // When a design Variation is changed, the original state should have size of current variation and colors of its original state.\r\n //Therefore, the Original state i.e first element of the history array should be similar to state of the newly selected design but the color should be that of original state.\r\n\r\n //Setting new history state\r\n const { updateDesignTiles, updateNormapTiles, hash } = state;\r\n const newHistoryState = { designDetails, updateDesignTiles, updateNormapTiles, hash };\r\n\r\n //Getting Original color of the design\r\n const origColors =\r\n state.history && state.history.length ? state.history[0].designDetails.DesignColors : null;\r\n\r\n if (origColors) {\r\n //if orig colors exist, first element should have orig colors and physical width, height...other parameters equal to new selected design i.e. new history state\r\n const firstHistoryState = {\r\n ...newHistoryState,\r\n designDetails: { ...newHistoryState.designDetails, DesignColors: origColors }\r\n };\r\n history = [firstHistoryState, newHistoryState];\r\n }\r\n }\r\n return {\r\n ...state,\r\n designDetails,\r\n history: 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: customizationFlag ? null : \"\",\r\n fullpath: fullpath,\r\n designName: label,\r\n originalName: originalName ? originalName : label,\r\n updateDesignTiles: null,\r\n updateNormapTiles: null,\r\n customizationFlag: !!customizationFlag,\r\n hash: hash ? hash : generateHash(designDetails, fullpath),\r\n carvingColorsIndex: getCarvingColorNumbers(designDetails.DesignColors),\r\n designDimsOrig: {\r\n Width: designDetails.Width,\r\n Height: designDetails.Height,\r\n PhysicalWidth: designDetails.PhysicalWidth,\r\n PhysicalHeight: designDetails.PhysicalHeight\r\n }\r\n };\r\n};\r\n\r\nconst changeRugPhySize = (state, payload) => {\r\n const widRatio = state.designDetails.Width / state.designDetails.PhysicalWidth;\r\n const hgtRatio = state.designDetails.Height / state.designDetails.PhysicalHeight;\r\n const PhysicalWidth = payload.PhysicalWidth\r\n ? payload.PhysicalWidth\r\n : state.designDetails.PhysicalWidth;\r\n const PhysicalHeight = payload.PhysicalHeight\r\n ? payload.PhysicalHeight\r\n : state.designDetails.PhysicalHeight;\r\n const Width = Math.round(PhysicalWidth * widRatio);\r\n const Height = Math.round(PhysicalHeight * hgtRatio);\r\n const designDetails = {\r\n ...state.designDetails,\r\n PhysicalWidth,\r\n Width,\r\n Height,\r\n PhysicalHeight\r\n };\r\n const hash = payload.hash ? payload.hash : generateHash(designDetails, state.fullpath);\r\n return {\r\n ...state,\r\n designDetails,\r\n hash\r\n };\r\n};\r\nconst setColorsInSession = (DesignColors, fullpath) => {\r\n // const DesignColors = DesignColors;\r\n const ParentFolder = getPathOffile(fullpath);\r\n const currentVariationFolder = getVariationFolder(fullpath);\r\n window.sessionStorage.setItem(\"ParentFolder\", ParentFolder);\r\n window.sessionStorage.setItem(\"CurrentVariationFolder\", currentVariationFolder);\r\n window.sessionStorage.setItem(\"DesignColors\", JSON.stringify(DesignColors));\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 setColorsInSession(d.DesignColors, state.fullpath);\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 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 colorNumbers: updateColorNumbers(d.DesignColors),\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 = (\r\n state,\r\n { material, materialName, colorIndex, isMaterialSameForAll }\r\n) => {\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 if (isMaterialSameForAll) {\r\n d.DesignColors.forEach(designColor => {\r\n designColor.Material = material;\r\n designColor.materialName = material;\r\n designColor.YarnDetails.forEach(yarn => {\r\n yarn.Material = material;\r\n yarn.MaterialName = materialName;\r\n });\r\n });\r\n }\r\n // d.DesignColors[colorIndex].YarnDetails[0].Material = material;\r\n\r\n if (window.flags.applyColorPaletteinSameFolder || window.flags.applyColorPaletteinVariations) {\r\n setColorsInSession(d.DesignColors, state.fullpath);\r\n }\r\n return {\r\n ...state,\r\n history: [...state.history, { designDetails, updateDesignTiles, updateNormapTiles, hash }],\r\n designDetails: d,\r\n colorNumbers: updateColorNumbers(d.DesignColors),\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 setColorsInSession(d.DesignColors, state.fullpath);\r\n }\r\n const updatedDesignTiles = { colorIndex: selectedColor };\r\n return {\r\n ...state,\r\n designDetails: d,\r\n colorNumbers: updateColorNumbers(d.DesignColors),\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 } = 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 setColorsInSession(d.DesignColors, state.fullpath);\r\n }\r\n const updateDesignTiles = { colorIndex: selectedColor };\r\n return {\r\n ...state,\r\n designDetails: d,\r\n colorNumbers: updateColorNumbers(d.DesignColors),\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 setColorsInSession(d.DesignColors, state.fullpath);\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.sort(function(a, b) {\r\n // var x = colorPalette.indexOf(a),\r\n // y = colorPalette.indexOf(b);\r\n // return d.DesignColors[x].Knots > d.DesignColors[y].Knots\r\n // ? -1\r\n // : d.DesignColors[x].Knots < d.DesignColors[y].Knots\r\n // ? 1\r\n // : 0;\r\n // });\r\n\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 if (window.flags.applyColorPaletteinSameFolder || window.flags.applyColorPaletteinVariations) {\r\n setColorsInSession(d.DesignColors, state.fullpath);\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\n// const 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\n// const convertUnit_Arr = (from, to, valueArr, setCustomConversion = false, customInToCmFactor) => {\r\n// return valueArr.map(val => convertUnit(from, to, val, setCustomConversion, customInToCmFactor));\r\n// };\r\n\r\nconst normalizeUnit = ({\r\n PhysicalWidth,\r\n PhysicalHeight,\r\n defaultUnit,\r\n Unit,\r\n setCustomConversion = false,\r\n customInToCmFactor\r\n}) => {\r\n let width = PhysicalWidth,\r\n height = PhysicalHeight,\r\n defUnit = defaultUnit;\r\n\r\n // console.log(\r\n // Unit,\r\n // defUnit,\r\n // PhysicalWidth,\r\n // PhysicalHeight,\r\n // setCustomConversion,\r\n // customInToCmFactor\r\n // );\r\n if (!defaultUnit) {\r\n if (Unit === \"in\") defUnit = \"ft\";\r\n else defUnit = Unit;\r\n }\r\n\r\n [width, height] = convertUnit_Arr(\r\n Unit,\r\n defUnit,\r\n [PhysicalWidth, PhysicalHeight],\r\n setCustomConversion,\r\n customInToCmFactor\r\n );\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 if (defUnit === \"cm\" && window.flags.ordersheet.roundOffToNearest5) {\r\n width = Math.round(width / 5) * 5;\r\n height = Math.round(height / 5) * 5;\r\n }\r\n return { PhysicalWidth: width, PhysicalHeight: height, Unit: defUnit };\r\n};\r\nconst updateColorNumbers = designColors => {\r\n const { colorNumberMode, differentSymbolForAllColors = false } = window.flags.colorAreaSwatch;\r\n var map = {};\r\n var result = [];\r\n var cnt = 1;\r\n var element, temp;\r\n if (differentSymbolForAllColors) {\r\n for (var j = 0; j < designColors.length; j++) {\r\n if (colorNumberMode == colorNumberModes.NUMERIC) {\r\n result[j] = j + 1;\r\n } else {\r\n result[j] = String.fromCharCode(65 + j);\r\n }\r\n }\r\n } else {\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 }\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 currentState = his.pop();\r\n const { designDetails, updateDesignTiles, updateNormapTiles, hash } = currentState;\r\n const pushToFutureState = {\r\n designDetails: state.designDetails,\r\n updateDesignTiles: state.updateDesignTiles,\r\n updateNormapTiles: state.updateNormapTiles,\r\n hash: state.hash\r\n };\r\n return {\r\n ...state,\r\n updateNormapTiles,\r\n designDetails,\r\n updateDesignTiles,\r\n hash,\r\n history: his,\r\n future: [...state.future, pushToFutureState]\r\n };\r\n}\r\n\r\nfunction redoDesignColor(state) {\r\n const his = [...state.future];\r\n if (!his.length) return state;\r\n const currentState = his.pop();\r\n const { designDetails, updateDesignTiles, updateNormapTiles, hash } = currentState; // Shift instead of pop\r\n const pushToPastState = {\r\n designDetails: state.designDetails,\r\n updateDesignTiles: state.updateDesignTiles,\r\n updateNormapTiles: state.updateNormapTiles,\r\n hash: state.hash\r\n };\r\n return {\r\n ...state,\r\n updateNormapTiles,\r\n designDetails,\r\n updateDesignTiles,\r\n hash,\r\n future: his,\r\n history: [...state.history, pushToPastState]\r\n };\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\nconst 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 {text}
}\r\n {children}\r\n \r\n );\r\n return tooltip ? (\r\n\r\n setShowLoader(true)} onError={() => setShowLoader(true)} />\r\n
\r\n {item}
;\r\n })}\r\n \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\r\n const onVariationThumbClick = (clickedThumbUrl, index) => {\r\n setMainThumbUrl(clickedThumbUrl);\r\n setSelectedVariation(index);\r\n };\r\n const onMainThumbClick = e => {\r\n if (selectedVariation) {\r\n const activeVariation = designVariations[selectedVariation];\r\n if (onThumbnailClick) onThumbnailClick(activeVariation);\r\n } else {\r\n if (onThumbnailClick) onThumbnailClick(e);\r\n }\r\n };\r\n return (\r\n\r\n setIsHovering(true)}\r\n onMouseLeave={() => setIsHovering(false)}\r\n className={classNames({ active: active }, className)}\r\n onClick={onMainThumbClick}\r\n >\r\n \r\n
\r\n \r\n \r\n {getDesignDimensionsString({\r\n designDetails: designProps,\r\n showDesignDimensions: flags.designDetailSection.showDesignDimensions,\r\n showOneDimensionIfSquare: flags.designDetailSection.showOneDimensionIfSquare\r\n })}\r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nTemplateDesignVars.propTypes = {\r\n className: PropTypes.string,\r\n thumb: PropTypes.object,\r\n hasRemove: PropTypes.bool,\r\n onRemoveClicked: PropTypes.func,\r\n onThumbnailClick: PropTypes.func,\r\n thumbnailType: PropTypes.oneOf([\"portrait\", \"landscape\"]),\r\n showTitle: PropTypes.bool\r\n};\r\nexport default TemplateDesignVars;\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 {\r\n getDesignDimensionsString\r\n} from \"../../../utils/utils\";\r\n\r\nconst TemplateVarsBottomBar = props => {\r\n const {\r\n className,\r\n thumb,\r\n onRemoveClicked,\r\n onThumbnailClick,\r\n hasRemove,\r\n imageRotated,\r\n aspect = \"portrait\",\r\n showTitle = true,\r\n active,\r\n thumbType\r\n } = props;\r\n const { thumbUrl, name, designProps, variations } = thumb;\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 { flags } = window;\r\n const [mainThumbUrl, setMainThumbUrl] = useState(thumbUrl);\r\n\r\n const [selectedVariation, setSelectedVariation] = useState(null);\r\n let designVariations = [];\r\n if (variations) {\r\n designVariations =\r\n variations.vars && variations.vars.length\r\n ? variations.vars\r\n : variations.colors && variations.colors.length\r\n ? variations.colors\r\n : [];\r\n }\r\n useEffect(() => {\r\n setMainThumbUrl(thumbUrl);\r\n }, [thumbUrl]);\r\n useEffect(() => {\r\n setIsloading(true);\r\n if (!mainThumbUrl) return;\r\n const image = new Image();\r\n image.src = mainThumbUrl;\r\n image.onload = () => {\r\n try {\r\n thumbImg.current.src = image.src;\r\n thumbImg.current.backgroundImage = image.src;\r\n } catch (error) {\r\n console.error(error);\r\n }\r\n setIsloading(false);\r\n };\r\n }, [mainThumbUrl]);\r\n const rendername = name => {\r\n return (\r\n <>\r\n {name &&\r\n name.split(\"~\").map((item, i) => {\r\n return {item}
;\r\n })}\r\n \r\n );\r\n };\r\n const getMainBgImage = () => {\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\r\n const getBgImage = (thumbImgSrc) => {\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 \r\n if(!thumbImgSrc || thumbImgSrc==='')\r\n return \"none\";\r\n \r\n const thumbSrc = thumbImgSrc !== null ? \"url(\" + thumbImgSrc + \")\" : \"none\";\r\n return thumbSrc;\r\n };\r\n\r\n const onVariationThumbClick = (clickedThumbUrl, index) => {\r\n setMainThumbUrl(clickedThumbUrl);\r\n setSelectedVariation(index);\r\n };\r\n const onMainThumbClick = e => {\r\n if (selectedVariation) {\r\n const activeVariation = designVariations[selectedVariation];\r\n if (onThumbnailClick) onThumbnailClick(activeVariation);\r\n } else {\r\n if (onThumbnailClick) onThumbnailClick(e);\r\n }\r\n };\r\n return (\r\n\r\n setIsHovering(true)}\r\n onMouseLeave={() => setIsHovering(false)}\r\n className={classNames(\"mainThumbArea\", { active: active }, className)}\r\n onClick={onMainThumbClick}\r\n >\r\n \r\n
\r\n\r\n {/* New
*/}\r\n \r\n \r\n {showTitle && (\r\n
\r\n \r\n {rendername(name)}\r\n
\r\n )}\r\n\r\n {designProps && (\r\n \r\n {getDesignDimensionsString({\r\n designDetails: designProps,\r\n showDesignDimensions: flags.designDetailSection.showDesignDimensions,\r\n showOneDimensionIfSquare: flags.designDetailSection.showOneDimensionIfSquare\r\n })}\r\n
\r\n )}\r\n {item}
;\r\n })}\r\n \r\n );\r\n };\r\n const getMainBgImage = () => {\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 const getBgImage = (thumbImgSrc) => {\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 \r\n if(!thumbImgSrc || thumbImgSrc==='')\r\n return \"none\";\r\n \r\n const thumbSrc = thumbImgSrc !== null ? \"url(\" + thumbImgSrc + \")\" : \"none\";\r\n return thumbSrc;\r\n };\r\n\r\n const onVariationThumbClick = (clickedThumbUrl, index) => {\r\n setMainThumbUrl(clickedThumbUrl);\r\n setSelectedVariation(index);\r\n };\r\n const onMainThumbClick = e => {\r\n if (selectedVariation) {\r\n const activeVariation = designVariations[selectedVariation];\r\n if (onThumbnailClick) onThumbnailClick(activeVariation);\r\n } else {\r\n if (onThumbnailClick) onThumbnailClick(e);\r\n }\r\n };\r\n return (\r\n\r\n setIsHovering(true)}\r\n onMouseLeave={() => setIsHovering(false)}\r\n className={classNames(\"mainThumbArea\", { active: active }, className)}\r\n onClick={onMainThumbClick}\r\n >\r\n \r\n
\r\n\r\n {/* New
*/}\r\n \r\n \r\n {showTitle && (\r\n
\r\n \r\n \r\n {rendername(name)}\r\n
\r\n )}\r\n\r\n {designProps && (\r\n \r\n {getDesignDimensionsString({\r\n designDetails: designProps,\r\n showDesignDimensions: flags.designDetailSection.showDesignDimensions,\r\n showOneDimensionIfSquare: flags.designDetailSection.showOneDimensionIfSquare\r\n })}\r\n
\r\n )}\r\n {item}
;\r\n })}\r\n \r\n );\r\n };\r\n const getMainBgImage = () => {\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\r\n const onMainThumbClick = e => {\r\n if (selectedVariation) {\r\n const activeVariation = designVariations[selectedVariation];\r\n if (onThumbnailClick) onThumbnailClick(activeVariation);\r\n } else {\r\n if (onThumbnailClick) onThumbnailClick(e);\r\n }\r\n };\r\n return (\r\n\r\n setIsHovering(true)}\r\n onMouseLeave={() => setIsHovering(false)}\r\n className={classNames(\"mainThumbArea\", { active: active }, className)}\r\n onClick={onMainThumbClick}\r\n >\r\n \r\n
\r\n\r\n {/* New
*/}\r\n \r\n \r\n {showTitle && (\r\n
\r\n \r\n {hasRemove && isHovering && (\r\n \r\n {rendername(name)}\r\n
\r\n )}\r\n\r\n {designProps && (\r\n \r\n {getDesignDimensionsString({\r\n designDetails: designProps,\r\n showDesignDimensions: flags.designDetailSection.showDesignDimensions,\r\n showOneDimensionIfSquare: flags.designDetailSection.showOneDimensionIfSquare\r\n })}\r\n
\r\n )}\r\n \r\n {renderThumbnails({\r\n template: window.flags.thumbnailTemplate,\r\n templateOptions: thumbnailTemplates,\r\n node,\r\n handleThumbClick,\r\n otherProps\r\n })}\r\n {/*
\r\n );\r\n};\r\nconst renderThumbnails = ({ template, templateOptions, node, handleThumbClick, otherProps }) => {\r\n switch (template) {\r\n case templateOptions.DesignOnly:\r\n return \r\n {files.map((file, index) => (\r\n onThumbnailClick && onThumbnailClick(file, index)}\r\n active={file.id === selectedFile.id}\r\n />\r\n ))}\r\n
\r\n );\r\n};\r\n\r\nexport default DesignThumblist;\r\n","/* eslint-disable react-hooks/exhaustive-deps */\r\nimport React, { useEffect, useState } from \"react\";\r\nimport {\r\n useDispatchordersheetDetail,\r\n ordersheetDetailActions,\r\n useOrdersheetDetailState\r\n} from \"../../../../reducers/ordersheetdetails.reducer\";\r\nimport AtRadio from \"../../../atoms/AtRadio\";\r\n\r\nconst DavisRugsOptions = props => {\r\n const { flags } = window;\r\n const {\r\n groupID = \"rugtypes\",\r\n groupLabel = \"Rug Techniques\",\r\n onOptionChange,\r\n selectedValue,\r\n radioLabels,\r\n radioValues\r\n } = props;\r\n\r\n const [RugOption, setRugOption] = useState(selectedValue);\r\n\r\n const changeRugOption = event => {\r\n //setShowRugSize(true);\r\n if (onOptionChange) onOptionChange(event);\r\n setRugOption(event.currentTarget.value);\r\n };\r\n useEffect(() => {}, []);\r\n return (\r\n \r\n {flags.accountSpecific.priceEstimation_davisLandings.checkKeyForPrice && (\r\n
\r\n );\r\n};\r\nexport const RugTypes = props => {\r\n const { flags } = window;\r\n const dispatchOrdersheetDetail = useDispatchordersheetDetail();\r\n const ordersheetDetailState = useOrdersheetDetailState();\r\n const { onOptionChange } = props;\r\n\r\n var { variables } = flags.accountSpecific.priceEstimation_davisLandings;\r\n const RugTypes = variables.RugTypes.options;\r\n const selectedRugType = ordersheetDetailState.accountSpecific.davisRugs.rugType;\r\n\r\n const [RugType, setRugType] = useState(selectedRugType === \"\" ? RugTypes[0] : selectedRugType);\r\n const changeRugTypes = event => {\r\n setRugType(event.currentTarget.value);\r\n dispatchOrdersheetDetail({\r\n type: ordersheetDetailActions.SET_DAVISRUGS_RUGTYPE,\r\n payload: event.currentTarget.value\r\n });\r\n if (onOptionChange) onOptionChange(event.currentTarget.value, undefined);\r\n };\r\n\r\n useEffect(() => {\r\n if (!selectedRugType || selectedRugType === \"\")\r\n dispatchOrdersheetDetail({\r\n type: ordersheetDetailActions.SET_DAVISRUGS_RUGTYPE,\r\n payload: RugTypes[0]\r\n });\r\n }, [RugTypes]);\r\n return (\r\n \r\n {radioValues && (\r\n
\r\n )}\r\n \r\n
\r\n )}\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nconst FormFieldTextInput = props => {\r\n const { defaultFieldVal, handlefieldChange, element } = props;\r\n const [fieldValue, setFieldValue] = useState(defaultFieldVal);\r\n const handleInputChange = (e, element) => {\r\n setFieldValue(e.target.value);\r\n handlefieldChange({\r\n ordersheetFieldId: element.ordersheetFieldId,\r\n ordersheetFieldValue: e.target.value\r\n });\r\n };\r\n\r\n return (\r\n \r\n handleInputChange(e, element)}\r\n />\r\n
\r\n