\r\n \r\n فاصله از راست \r\n {\r\n props.applyTextureZoom(\r\n props.choosedPrespective,\r\n props.zoom,\r\n offsetH,\r\n props.offsetV,\r\n props.roomInDesignStage,\r\n props.multiply\r\n )\r\n }}\r\n />\r\n
\r\n \r\n فاصله از بالا \r\n {\r\n props.applyTextureZoom(\r\n props.choosedPrespective,\r\n props.zoom,\r\n props.offsetH,\r\n offsetV,\r\n props.roomInDesignStage,\r\n props.multiply\r\n )\r\n }}\r\n />\r\n
\r\n \r\n بزرگنمایی \r\n {\r\n props.applyTextureZoom(\r\n props.choosedPrespective,\r\n zoom,\r\n props.offsetH,\r\n props.offsetV,\r\n props.roomInDesignStage,\r\n props.multiply\r\n )\r\n }}\r\n />\r\n
\r\n \r\n روشنایی \r\n {\r\n props.applyCurveFilter(\r\n props.choosedPrespective,\r\n brightness,\r\n props.contrast,\r\n props.roomInDesignStage,\r\n props.multiply\r\n )\r\n }}\r\n />\r\n
\r\n \r\n
کنتراست \r\n\r\n
setContrast(values[0])}\r\n onFinalChange={(values) => {\r\n props.applyCurveFilter(\r\n props.choosedPrespective,\r\n props.brightness,\r\n contrast,\r\n props.roomInDesignStage,\r\n props.multiply\r\n )\r\n }}\r\n renderTrack={({ props, children }) => (\r\n \r\n \r\n {children}\r\n \r\n \r\n \r\n تغییر شدت طرح اولیه عکس \r\n {\r\n if (value == 0.81 || value == 0.8) {\r\n props.resetMultiply(props.roomInDesignStage)\r\n } else {\r\n props.changeMultiplyIntensity(\r\n props.roomInDesignStage,\r\n multiply,\r\n props.grayScaleImages\r\n )\r\n }\r\n }}\r\n />\r\n
\r\n \r\n )\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n choosedPrespective: state.tools.choosedPrespective,\r\n multiplyIntensity: state.tools.multiplyIntensity,\r\n roomInDesignStage: state.tools.roomInDesignStage,\r\n grayScaleImages: state.tools.grayScaleImages,\r\n multiply: state.tools.multiply,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n applyCurveFilter: (prespective, brightness, contrast) =>\r\n dispatch(applyCurveFilter(prespective, brightness, contrast)),\r\n changeMultiplyIntensity: (roomInDesignStage, value, grayScaleImages) =>\r\n dispatch(\r\n changeMultiplyIntensity(\r\n roomInDesignStage,\r\n value,\r\n grayScaleImages\r\n )\r\n ),\r\n resetMultiply: (roomInDesignStage) =>\r\n dispatch(resetMultiply(roomInDesignStage)),\r\n }\r\n}\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(MiniEditor)\r\n","import React, { useEffect, useState } from 'react'\r\nimport { activePath, selectCurve } from '../../redux/tools/actions'\r\nimport { connect } from 'react-redux'\r\nimport './Scene.css'\r\nimport { Spinner } from 'reactstrap'\r\nimport MiniEditor from './miniEditor/MiniEditorV1'\r\nimport MiniEditorV1 from './miniEditor/MiniEditorV1'\r\nimport MiniEditorV2 from './miniEditor/MiniEditorV2'\r\nimport classnames from 'classnames'\r\n\r\nconst Home = (props) => {\r\n let [show, setShow] = useState(false)\r\n let [points, setPoints] = useState([])\r\n var paper = window.paper\r\n var tool = new paper.Tool()\r\n\r\n useEffect(() => {\r\n tool.onMouseMove = function (event) {\r\n //console.log(event.point);\r\n if (paper.project.hitTest(event.point)) {\r\n props.activePath(paper.project.hitTest(event.point).item._id)\r\n } else {\r\n props.activePath(null)\r\n\r\n if (window.paper.project._activeLayer?._children)\r\n window.paper.project._activeLayer._children.forEach((q) => {\r\n q.opacity = 0\r\n })\r\n }\r\n }\r\n }, [])\r\n\r\n useEffect(() => {\r\n tool.onMouseDown = function (event) {\r\n if (paper.project.hitTest(event.point)) {\r\n props.selectCurve(\r\n paper.project.hitTest(event.point).item._id,\r\n props.roomInDesignStage\r\n )\r\n }\r\n }\r\n if (!props.isPhotoEditorVisible && props.hoveredPathId) {\r\n window.paper.project._activeLayer._children.forEach((q) => {\r\n if (q._id === props.hoveredPathId) {\r\n q.opacity = 0.7\r\n } else {\r\n q.opacity = 0\r\n }\r\n })\r\n }\r\n }, [props.hoveredPathId])\r\n\r\n useEffect(() => {}, [props.choosedPrespective])\r\n\r\n let selectionClassNames = classnames({\r\n 'not-selectable': props.isPhotoEditorVisible,\r\n })\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n {(props.isDrawing || props.uploading) && (\r\n \r\n
لطفا منتظر بمانید \r\n \r\n )}\r\n \r\n props.onClick(dispatch)}\r\n id={props.name}\r\n style={props.style}\r\n >\r\n {props.isButton && (\r\n \r\n {props.title} \r\n \r\n )}\r\n {!props.isButton && props.icon && (\r\n {props.icon} \r\n )}\r\n {!props.isButton && props.image && {props.title} }\r\n {props.showCartBadge && cart.length > 0 && {cart.length} }\r\n \r\n {props.tooltip && (\r\n \r\n {props.tooltip}\r\n \r\n )}\r\n \r\n )\r\n}\r\n\r\nexport default NavbarItem\r\n","import domtoimage from 'dom-to-image'\r\nimport { logout } from '../redux/auth/actions'\r\nimport logoutIcon from '../assets/img/navbarIcons/logout.svg'\r\nimport saveIcon from '../assets/img/navbarIcons/download.svg'\r\nimport cartIcon from '../assets/img/icons/SHOPPING (1).svg'\r\nimport { uploadPlan } from '../redux/user/actions'\r\n\r\nconst config = [\r\n {\r\n name: 'cart',\r\n image: cartIcon,\r\n tooltip: 'سبد خرید',\r\n onClick: (dispatch) => {\r\n window.location.href = '/#/cart'\r\n },\r\n showCartBadge: true,\r\n },\r\n {\r\n name: 'logout',\r\n image: logoutIcon,\r\n tooltip: 'خروج',\r\n onClick: (dispatch) => {\r\n dispatch(logout())\r\n },\r\n },\r\n {\r\n name: 'save',\r\n image: saveIcon,\r\n isButton: true,\r\n title: 'ذخیره عکس',\r\n style: { order: 1 },\r\n isEditorOnly: true,\r\n onClick: (dispatch) => {\r\n var node = document.getElementById('main-scene')\r\n\r\n setTimeout(() => {\r\n domtoimage\r\n .toPng(node)\r\n .then(function (dataUrl) {\r\n var link = document.createElement('a')\r\n link.download = `mokabber_plus_${Date.now()}.jpeg`\r\n link.href = dataUrl\r\n link.click()\r\n dispatch(uploadPlan(dataUrl))\r\n })\r\n .catch(function (error) {\r\n console.error('oops, something went wrong!', error)\r\n })\r\n }, 1000)\r\n },\r\n },\r\n]\r\n\r\nexport default config\r\n","import jwtDecode from 'jwt-decode'\r\nimport { setAxiosHeader } from '../apiService/apiService'\r\n\r\nexport const isAuthenticated = () => {\r\n if (!localStorage.getItem('token')) return false\r\n\r\n setAxiosHeader(localStorage.getItem('token'))\r\n\r\n // const accessToken = JSON.parse(localStorage.getItem(\"accessToken\"));\r\n // const refreshToken = localStorage.getItem(\"refreshToken\");\r\n\r\n return true\r\n}\r\n\r\nexport const getUserFullname = () => {\r\n const token = localStorage.getItem('token')\r\n if (!token) return null\r\n\r\n const { unique_name, fullName } = jwtDecode(token)\r\n if (fullName) return fullName\r\n return unique_name\r\n}\r\n","import React, { useState, Fragment } from 'react'\r\nimport './Index.css'\r\nimport NavbarItem from '../index/navbarItem/NavbarItem'\r\nimport config from '../../../routes/navbarConfig'\r\nimport logo from '../../../assets/img/logo.svg'\r\nimport {\r\n getUserFullname,\r\n isAuthenticated,\r\n} from '../../../services/authenticationChecker'\r\nimport Tour from 'reactour'\r\nimport Button from 'reactstrap/lib/Button'\r\nimport { useDispatch } from 'react-redux'\r\nimport { Link } from 'react-router-dom'\r\nimport { drawForHelpTour } from '../../../redux/tools/actions'\r\nimport classNames from 'classnames'\r\n\r\nconst Index = ({ isPlan, isPayment, ...props }) => {\r\n const [isTourOpen, setIsTourOpen] = useState(false)\r\n const [currentStep, setCurrentStep] = useState(0)\r\n\r\n const toggleTourStatus = () => {\r\n setIsTourOpen(!isTourOpen)\r\n setCurrentStep(0)\r\n }\r\n\r\n const dispatch = useDispatch()\r\n\r\n const tourFooter = (goTo, nextPage) => (\r\n \r\n goTo(nextPage)}\r\n >\r\n بعدی\r\n \r\n restartTourStatus(goTo)}\r\n >\r\n بعدا میبینم\r\n \r\n
\r\n )\r\n\r\n const finalTourFooter = (goTo) => (\r\n \r\n restartTourStatus(goTo)}\r\n >\r\n اتمام\r\n \r\n
\r\n )\r\n\r\n const restartTourStatus = (goTo) => {\r\n toggleTourStatus()\r\n goTo(0)\r\n }\r\n\r\n const steps = [\r\n {\r\n selector: '.nav.nav-tabs .nav-item:last-child a',\r\n content: ({ goTo }) => (\r\n \r\n \r\n 1 \r\n بر روی اتاقها کلیک کنید\r\n
\r\n {tourFooter(goTo, 1)}\r\n \r\n ),\r\n action: (node) => {\r\n if (node && node.focus) {\r\n node.focus()\r\n node.click()\r\n }\r\n },\r\n stepInteraction: false,\r\n },\r\n {\r\n selector: '.room-card.card',\r\n content: ({ goTo }) => (\r\n \r\n \r\n 2 \r\n اتاق را انتخاب کنید\r\n
\r\n {tourFooter(goTo, 2)}\r\n \r\n ),\r\n action: (node) => {\r\n if (node && node.focus) {\r\n node.focus()\r\n node.click()\r\n }\r\n },\r\n stepInteraction: false,\r\n },\r\n {\r\n selector: '.nav.nav-tabs .nav-item a',\r\n content: ({ goTo }) => (\r\n \r\n \r\n 3 \r\n بر روی پارچهها کلیک کنید\r\n
\r\n {tourFooter(goTo, 3)}\r\n \r\n ),\r\n action: (node) => {\r\n if (node && node.focus) {\r\n node.focus()\r\n node.click()\r\n }\r\n },\r\n stepInteraction: false,\r\n },\r\n {\r\n selector: '.material-item-wrapper',\r\n content: ({ goTo }) => (\r\n \r\n \r\n 4 \r\n پارچه مورد نظر را انتخاب نموده و بر روی ناحیه دلخواه در\r\n تصویر کشیده و رها کنید\r\n
\r\n {tourFooter(goTo, 4)}\r\n \r\n ),\r\n stepInteraction: false,\r\n },\r\n {\r\n selector: '#scene-container',\r\n content: ({ goTo }) => (\r\n \r\n \r\n 5 \r\n برای ایجاد تغییراتی از قبیل روشنایی و بزرگنمایی ابتدا\r\n ناحیه مورد نظر را انتخاب کنید\r\n
\r\n {tourFooter(goTo, 5)}\r\n \r\n ),\r\n action: () => {\r\n dispatch(drawForHelpTour())\r\n },\r\n position: 'right',\r\n stepInteraction: false,\r\n },\r\n {\r\n selector: '.mini-editor',\r\n content: ({ goTo }) => (\r\n \r\n \r\n 6 \r\n امکان تغییر کنتراست، بزرگنمایی، روشنایی و غیره وجود دارد\r\n
\r\n {tourFooter(goTo, 6)}\r\n \r\n ),\r\n stepInteraction: true,\r\n },\r\n {\r\n selector: '.download-btn',\r\n content: ({ goTo }) => (\r\n \r\n \r\n 7 \r\n پس از ایجاد تغییرات و نهایی شدن طرح، با کلیک بر روی\r\n دانلود، عکس طرح ذخیره خواهد شد\r\n
\r\n {finalTourFooter(goTo)}\r\n \r\n ),\r\n stepInteraction: true,\r\n },\r\n ]\r\n\r\n return (\r\n \r\n \r\n {isAuthenticated && (\r\n {getUserFullname()} \r\n \r\n )}\r\n {config\r\n .filter((q) => (!isPayment && !isPlan) || !q.isEditorOnly)\r\n .map((item, index) => {\r\n return \r\n راهنمای استفاده\r\n \r\n )}\r\n \r\n \r\n )\r\n}\r\n\r\nexport default Index\r\n","import React, { useState, lazy, Suspense } from 'react'\r\nimport {\r\n TabContent,\r\n TabPane,\r\n Nav,\r\n NavItem,\r\n NavLink,\r\n Card,\r\n Button,\r\n CardTitle,\r\n CardText,\r\n Row,\r\n Col,\r\n} from 'reactstrap'\r\nimport classnames from 'classnames'\r\nimport './Index.css'\r\nimport Rooms from '../rooms/index'\r\nimport roomImage from '../../../assets/img/navbarIcons/rooms.svg'\r\nimport materialImage from '../../../assets/img/navbarIcons/materials.svg'\r\n\r\nconst Materials = lazy(() => import('../materials/index'))\r\n\r\nconst Loading = () => {\r\n return (\r\n \r\n در حال بارگذاری ...\r\n \r\n )\r\n}\r\n\r\nconst Index = (props) => {\r\n const [activeTab, setActiveTab] = useState('2')\r\n\r\n const toggle = (tab) => {\r\n if (activeTab !== tab) setActiveTab(tab)\r\n }\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n {\r\n toggle('1')\r\n }}\r\n >\r\n \r\n \r\n {\r\n toggle('2')\r\n }}\r\n >\r\n \r\n \r\n
\r\n \r\n \r\n {activeTab === '1' && (\r\n
\r\n \r\n \r\n \r\n {activeTab === '2' && (\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 MainLayout\r\n","import React, { useState } from \"react\";\r\nimport { isEmpty } from \"lodash\";\r\nimport './AccordionItem.css';\r\nimport Icon from \"../../Icons/Icon\";\r\nimport classNames from \"classnames\";\r\nimport { Collapse } from \"reactstrap\";\r\nimport { useHistory } from \"react-router-dom\";\r\n\r\nconst AccordionItem = ({ icon, title, extraInfo, badge, className, children, to }) => {\r\n\r\n const [isOpen, setIsOpen] = useState(false)\r\n const history = useHistory();\r\n\r\n return (\r\n to && history.push(to)}>\r\n
\r\n {!isEmpty(icon) && children && setIsOpen(!isOpen)}\r\n >{title}\r\n {extraInfo} \r\n {badge != null && badge != undefined && badge > 0 && {badge} }\r\n children && setIsOpen(!isOpen)}>› \r\n
\r\n {children &&
\r\n {children}\r\n }\r\n
\r\n
\r\n \r\n {filters.map((filter, filterIndex) => (\r\n
q.filterTitle == filter.title)\r\n ?.items.map((q) => {q + ' '} )\r\n .slice(0, 3)}\r\n >\r\n {filter.items.map((q) => (\r\n \r\n \r\n \r\n onFilterChanged(\r\n filter.title,\r\n q,\r\n e.target.checked\r\n )\r\n }\r\n checked={isChecked(filter.title, q)}\r\n />{' '}\r\n {q}\r\n \r\n \r\n ))}\r\n \r\n ))}\r\n \r\n در حال بارگذاری ...\r\n \r\n )\r\n}\r\n\r\nconst PlanSidebar = ({ isCustomProfile, ...props }) => {\r\n const cart = useSelector((state) => state.payment.cart)\r\n const profileLoading = useSelector((state) => state.user.profileLoading)\r\n const planProfileLoading = useSelector(\r\n (state) => state.user.planProfileLoading\r\n )\r\n\r\n return (\r\n \r\n {profileLoading || planProfileLoading ? (\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 PlanSidebar\r\n","import React from 'react'\r\nimport { Col, Container, Row } from 'reactstrap'\r\n\r\nimport Navbar from '../pages/Navbar/index/Index'\r\nimport PlanSidebar from '../pages/Plans/sidebar/PlanSidebar'\r\n\r\nconst PlanLayout = ({ children, isCustomProfile }) => (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n)\r\n\r\nexport default PlanLayout\r\n","import React from \"react\";\r\nimport { Col, Container, Row } from \"reactstrap\";\r\n\r\nconst MainLayout = ({ children }) => (\r\n \r\n {children}
\r\n \r\n);\r\n\r\nexport default MainLayout;\r\n","import React from \"react\";\r\nimport { Col, Container, Row } from \"reactstrap\";\r\n\r\nconst MainLayout = ({ children }) => (\r\n {children} \r\n);\r\n\r\nexport default MainLayout;\r\n","import classNames from 'classnames'\r\nimport React from 'react'\r\nimport { Spinner } from 'reactstrap'\r\n\r\nimport './Loading.css'\r\n\r\nconst Loading = ({ isImage, size }) => {\r\n return (\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default Loading\r\n","import React from 'react'\r\nimport { Card, CardImg, CardHeader, CardFooter, CustomInput } from 'reactstrap'\r\n\r\nimport CommentWhiteIcon from '../../../assets/img/icons/COMMENT_WHITE.svg'\r\nimport LikeIcon from '../../../assets/img/icons/LIKE.svg'\r\nimport LikeWhiteIcon from '../../../assets/img/icons/LIKE_WHITE.svg'\r\nimport ShareWhiteIcon from '../../../assets/img/icons/SHARE_WHITE.svg'\r\nimport FavouriteIcon from '../../../assets/img/icons/ADD TO FAV.svg'\r\nimport FavouriteWhiteIcon from '../../../assets/img/icons/ADD TO FAV_WHITE.svg'\r\nimport Loading from '../../../components/Loading/Loading'\r\n\r\nimport './PlanPreview.css'\r\nimport Icon from '../../Icons/Icon'\r\nimport classNames from 'classnames'\r\nimport { useHistory } from 'react-router-dom'\r\n\r\nconst PlanPreview = ({\r\n id,\r\n fullName,\r\n imageUrl,\r\n isLiked,\r\n likesCount,\r\n isFavourited,\r\n showToggle,\r\n isPublic,\r\n fullSize,\r\n onLiked,\r\n onFavourited,\r\n onTogglePublic,\r\n loading,\r\n onShare,\r\n ...props\r\n}) => {\r\n const history = useHistory()\r\n\r\n const onImageNotLoaded = (e) => {\r\n const imgElement = e.target\r\n\r\n imgElement.classList.add('plan-preview__img--empty')\r\n imgElement.src = '/images/empty.png'\r\n }\r\n\r\n return (\r\n \r\n {!fullSize && (\r\n \r\n {fullName}\r\n \r\n )}\r\n {loading ? (\r\n !fullSize && history.push('/plan/' + id)}\r\n loading=\"lazy\"\r\n onError={onImageNotLoaded}\r\n />\r\n )}\r\n {showToggle && (\r\n \r\n onTogglePublic(id, !isPublic)}\r\n />\r\n
\r\n )}\r\n \r\n onLiked(id)}\r\n />\r\n {likesCount > 0 && (\r\n \r\n {likesCount}\r\n \r\n )}\r\n history.push('/plan/' + id)}\r\n />\r\n onShare(id)}\r\n />\r\n onFavourited(id)}\r\n />\r\n \r\n \r\n )\r\n}\r\n\r\nexport default PlanPreview\r\n","import React from 'react'\r\nimport { Modal, ModalHeader, ModalBody } from 'reactstrap'\r\nimport {\r\n WhatsappShareButton,\r\n WhatsappIcon,\r\n TelegramShareButton,\r\n TelegramIcon,\r\n TwitterShareButton,\r\n TwitterIcon,\r\n EmailShareButton,\r\n EmailIcon,\r\n} from 'react-share'\r\n\r\nimport { baseShareURL } from '../../../apiService/apiService'\r\n\r\nimport './PlanShareModal.css'\r\n\r\nconst PlanShareModal = ({ planId, visible, toggle }) => {\r\n const getUrl = () => baseShareURL + '/#/plan/' + planId\r\n const getTitle = () => 'مکبر پلاس'\r\n\r\n return (\r\n \r\n اشتراکگذاری طراحی \r\n \r\n طرح خود را در شبکههای اجتماعی به اشتراک بگذارید
\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n
\r\n \r\n \r\n )\r\n}\r\n\r\nexport default PlanShareModal\r\n","import React, { useEffect, useState } from 'react'\r\nimport { useDispatch, useSelector } from 'react-redux'\r\nimport { useHistory, useLocation } from 'react-router-dom'\r\n\r\nimport {\r\n Container,\r\n Row,\r\n Col,\r\n Input,\r\n Button,\r\n Dropdown,\r\n DropdownToggle,\r\n DropdownMenu,\r\n DropdownItem,\r\n InputGroup,\r\n InputGroupAddon,\r\n Form,\r\n} from 'reactstrap'\r\nimport CardColumns from 'reactstrap/lib/CardColumns'\r\nimport InfiniteScroll from 'react-infinite-scroll-component'\r\nimport classNames from 'classnames'\r\nimport { debounce, isEmpty } from 'lodash'\r\n\r\nimport {\r\n getPlans,\r\n resetPlans,\r\n toggleFavourite,\r\n toggleLike,\r\n togglePublic,\r\n} from '../../redux/plan/actions'\r\n\r\nimport Icon from '../../components/Icons/Icon'\r\nimport PlanPreview from '../../components/Plans/PlanPreview/PlanPreview'\r\nimport PlanShareModal from '../../components/Plans/PlanShareModal/PlanShareModal'\r\nimport Loading from '../../components/Loading/Loading'\r\n\r\nimport SortIcon from '../../assets/img/icons/SORT.svg'\r\nimport SearchIcon from '../../assets/img/icons/SEARCH.svg'\r\n\r\nimport './index.css'\r\n\r\nconst Index = (props) => {\r\n const dispatch = useDispatch()\r\n const [sort, setSort] = useState(null)\r\n const [type, setType] = useState(null)\r\n const [filter, setFilter] = useState(null)\r\n\r\n const plans = useSelector((state) => state.plan.plans)\r\n const loadingPlans = useSelector((state) => state.plan.loadingPlans)\r\n\r\n const [dropdownOpen, setDropdownOpen] = useState(false)\r\n const location = useLocation()\r\n const history = useHistory()\r\n const [search, setSearch] = useState('')\r\n\r\n useEffect(() => {\r\n if (type) addQueryString('type', type)\r\n }, [type])\r\n\r\n const [pageNumber, setPageNumber] = useState(1)\r\n\r\n const fetchData = () => {\r\n setPageNumber((prevPageNumber) => prevPageNumber + 1)\r\n dispatch(\r\n getPlans({\r\n type: type,\r\n sort: sort,\r\n filter: filter,\r\n search: search,\r\n pageNumber: pageNumber + 1,\r\n })\r\n )\r\n }\r\n\r\n useEffect(() => {\r\n let newSort = sort\r\n let newType = type\r\n let newFilter = {}\r\n\r\n const params = new URLSearchParams(location.search)\r\n for (let param of params) {\r\n const [key, value] = param\r\n\r\n if (key === 'sort') newSort = value\r\n else if (key === 'type') newType = value\r\n else if (new RegExp('[0-9]+').test(key)) {\r\n newFilter = { ...newFilter, [key]: value }\r\n }\r\n }\r\n\r\n dispatch(\r\n getPlans({\r\n type: newType,\r\n sort: newSort,\r\n filter: newFilter,\r\n pageNumber: 1,\r\n search: search,\r\n replace: true,\r\n })\r\n )\r\n setPageNumber(1)\r\n setSort(newSort)\r\n setType(newType)\r\n setFilter(newFilter)\r\n }, [location])\r\n\r\n const resetPaging = () => {\r\n setPageNumber(1)\r\n dispatch(resetPlans())\r\n }\r\n\r\n const toggle = () => setDropdownOpen((prevState) => !prevState)\r\n\r\n const addQueryString = (key, value) => {\r\n resetPaging()\r\n let urlParams = new URLSearchParams(location.search)\r\n urlParams.set(key, value)\r\n history.push({ pathname: '/', search: '?' + urlParams.toString() })\r\n }\r\n\r\n const onLikedPlan = (planId) => {\r\n dispatch(toggleLike(planId))\r\n }\r\n const onFavouritedPlan = (planId) => {\r\n dispatch(toggleFavourite(planId))\r\n }\r\n const onTogglePublic = (planId, newValue) => {\r\n dispatch(togglePublic(planId, newValue))\r\n }\r\n\r\n const [isShareVisible, setIsShareVisible] = useState(false)\r\n const toggleShare = () => setIsShareVisible(!isShareVisible)\r\n const [currentPlanId, setCurrentPlanId] = useState(null)\r\n\r\n const onShare = (planId) => {\r\n setCurrentPlanId(planId)\r\n toggleShare()\r\n }\r\n\r\n const onSearchChanged = debounce((searchValue) => {\r\n onSearch(searchValue)\r\n }, 500)\r\n\r\n const onSearch = (searchValue) => {\r\n setSearch(searchValue)\r\n\r\n dispatch(\r\n getPlans({\r\n type: type,\r\n sort: sort,\r\n filter: filter,\r\n search: searchValue,\r\n pageNumber: 1,\r\n replace: true,\r\n })\r\n )\r\n }\r\n\r\n return (\r\n \r\n \r\n {\r\n e.preventDefault()\r\n onSearch()\r\n }}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n onSearchChanged(e.target.value)}\r\n />\r\n \r\n \r\n
\r\n \r\n
\r\n addQueryString('sort', 'popular')}\r\n >\r\n محبوبترین ها\r\n \r\n addQueryString('sort', 'most-seen')}\r\n >\r\n پربازدیدترین ها\r\n \r\n addQueryString('sort', 'newest')}\r\n >\r\n جدیدترین ها\r\n \r\n
\r\n
\r\n نمایش\r\n \r\n \r\n {type === 'my' ? 'طرحهای من' : 'همه'}\r\n \r\n \r\n setType('all')}>\r\n همه\r\n \r\n setType('my')}>\r\n طرحهای من\r\n \r\n \r\n \r\n
\r\n
\r\n
}\r\n endMessage={\r\n loadingPlans ? (\r\n
\r\n ) : (\r\n !isEmpty(plans) &&\r\n pageNumber !== 1 && (\r\n
\r\n تمامی طرحها دیده شد! \r\n
\r\n )\r\n )\r\n }\r\n scrollableTarget={document.querySelector(\r\n '.plans__container'\r\n )}\r\n height={\r\n document.querySelector('.plans__container')\r\n ?.clientHeight ?? 500\r\n }\r\n >\r\n
\r\n {isEmpty(plans) && !loadingPlans ? (\r\n هیچ طرحی پیدا نشد
\r\n ) : (\r\n plans.map((plan) => (\r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nexport default Index\r\n","export const ADD_TO_CART = 'ADD_TO_CART'\r\nexport const SET_CART = 'SET_CART'\r\nexport const RESET_CART = 'RESET_CART'\r\n\r\nexport const GET_ADDRESSES_START = 'GET_ADDRESSES_START'\r\nexport const GET_ADDRESSES_SUCCESS = 'GET_ADDRESSES_SUCCESS'\r\nexport const GET_ADDRESSES_FAIL = 'GET_ADDRESSES_FAIL'\r\n\r\nexport const SUBMIT_ORDER_START = 'SUBMIT_ORDER_START'\r\nexport const SUBMIT_ORDER_SUCCESS = 'SUBMIT_ORDER_SUCCESS'\r\nexport const SUBMIT_ORDER_FAIL = 'SUBMIT_ORDER_FAIL'\r\n","import * as types from './constants'\r\nimport apiService from '../../apiService/apiService'\r\n\r\nexport const addToCart = (product) => {\r\n return (dispatch) => {\r\n dispatch({\r\n type: types.ADD_TO_CART,\r\n payload: product,\r\n })\r\n }\r\n}\r\n\r\nexport const updateCartMeterage = (productId, newMeterage) => {\r\n return (dispatch, getState) => {\r\n const cartItems = getState().payment.cart\r\n\r\n dispatch({\r\n type: types.SET_CART,\r\n payload: cartItems.map((q) => {\r\n if (q.id === productId) q.meterage = newMeterage\r\n return q\r\n }),\r\n })\r\n }\r\n}\r\n\r\nexport const removeFromCart = (productId) => {\r\n return (dispatch, getState) => {\r\n const cartItems = getState().payment.cart\r\n\r\n dispatch({\r\n type: types.SET_CART,\r\n payload: cartItems.filter((q) => q.id !== productId),\r\n })\r\n }\r\n}\r\n\r\nexport const resetCart = () => {\r\n return (dispatch) => {\r\n dispatch({\r\n type: types.RESET_CART,\r\n })\r\n }\r\n}\r\n\r\nexport const getAddresses = (profileId) => {\r\n return (dispatch) => {\r\n apiService.profile\r\n .getAddresses(profileId)\r\n .then((response) => {\r\n if (response.status == 200) {\r\n const addresses = response.data\r\n dispatch({\r\n type: types.GET_ADDRESSES_START,\r\n payload: addresses,\r\n })\r\n } else {\r\n dispatch({\r\n type: types.GET_ADDRESSES_FAIL,\r\n error:\r\n response.data.message ||\r\n response.data.errors[0].description,\r\n })\r\n }\r\n })\r\n .catch((error) => {\r\n let errorMessage = error\r\n if (error?.response?.data) errorMessage = error.response.data\r\n dispatch({\r\n type: types.GET_ADDRESSES_FAIL,\r\n error: errorMessage,\r\n })\r\n })\r\n }\r\n}\r\n\r\nexport const buyOrder = (history) => {\r\n return (dispatch, getState) => {\r\n const cartItems = getState().payment.cart\r\n dispatch({\r\n type: types.SUBMIT_ORDER_START,\r\n })\r\n\r\n apiService.payment\r\n .submitOrder(cartItems)\r\n .then((response) => {\r\n if (response.status == 200) {\r\n dispatch({\r\n type: types.SUBMIT_ORDER_SUCCESS,\r\n payload: response.data,\r\n })\r\n history.push({\r\n pathname: '/payment/result',\r\n search: `?id=${response.data}`,\r\n })\r\n } else {\r\n dispatch({\r\n type: types.SUBMIT_ORDER_FAIL,\r\n error:\r\n response.data.message ||\r\n response.data.errors[0].description,\r\n })\r\n history.push({\r\n pathname: '/payment/result',\r\n })\r\n }\r\n })\r\n .catch((error) => {\r\n let errorMessage = error\r\n if (error?.response?.data) errorMessage = error.response.data\r\n dispatch({\r\n type: types.SUBMIT_ORDER_FAIL,\r\n error: errorMessage,\r\n })\r\n history.push({\r\n pathname: '/payment/result',\r\n })\r\n })\r\n }\r\n}\r\n","import classNames from 'classnames'\r\nimport React from 'react'\r\n\r\nimport './Price.css'\r\n\r\nconst Price = ({ price, size, color, discounted }) => {\r\n const getPrice = () => {\r\n return price?.toLocaleString('fa') ?? 0\r\n }\r\n\r\n return (\r\n \r\n {getPrice()} \r\n تومان \r\n \r\n )\r\n}\r\n\r\nexport default Price\r\n","import React from 'react'\r\n\r\nimport './Comment.css';\r\n\r\nimport moment from \"moment-jalaali\";\r\nmoment.loadPersian();\r\n\r\nconst Comment = ({ name, userImageUrl, time, text }) => {\r\n return (\r\n \r\n
\r\n
\r\n
{name}
\r\n
{moment(time).fromNow()} \r\n
\r\n
{text}
\r\n
\r\n {\r\n e.preventDefault()\r\n onAddComment(comment)\r\n }}\r\n >\r\n \r\n \r\n \r\n ارسال\r\n \r\n \r\n setComment(e.target.value)}\r\n disabled={loading}\r\n />\r\n \r\n \r\n {loading ? (\r\n
\r\n )\r\n}\r\n\r\nexport default PlanComments\r\n","import React, { useEffect, useState } from 'react'\r\nimport { useHistory } from 'react-router'\r\nimport { useParams } from 'react-router-dom'\r\nimport { useDispatch, useSelector } from 'react-redux'\r\n\r\nimport {\r\n Container,\r\n Row,\r\n Col,\r\n Input,\r\n Label,\r\n Button,\r\n Form,\r\n InputGroup,\r\n InputGroupAddon,\r\n} from 'reactstrap'\r\nimport { isEmpty } from 'lodash'\r\n\r\nimport { addToCart } from '../../../redux/payment/actions'\r\nimport { addComment, getPlan } from '../../../redux/plan/actions'\r\nimport {\r\n toggleFavourite,\r\n toggleLike,\r\n togglePublic,\r\n updatePlan,\r\n} from '../../../redux/plan/actions'\r\n\r\nimport Price from '../../../components/Payment/Price/Price'\r\nimport CartIcon from '../../../assets/img/icons/SHOPPING.svg'\r\nimport SearchIcon from '../../../assets/img/icons/SEARCH.svg'\r\nimport Icon from '../../../components/Icons/Icon'\r\nimport PlanPreview from '../../../components/Plans/PlanPreview/PlanPreview'\r\nimport PlanComments from '../../../components/Plans/PlanComments/PlanComments'\r\nimport Loading from '../../../components/Loading/Loading'\r\n\r\nimport './index.css'\r\nimport PlanShareModal from '../../../components/Plans/PlanShareModal/PlanShareModal'\r\n\r\nconst Index = (props) => {\r\n const plan = useSelector((state) => state.plan.plan)\r\n const fabrics = useSelector((state) => state.plan.planFabrics)\r\n const comments = useSelector((state) => state.plan.planComments)\r\n\r\n const loadingFabrics = useSelector((state) => state.plan.loadingFabrics)\r\n const loadingPlan = useSelector((state) => state.plan.loadingPlan)\r\n\r\n const dispatch = useDispatch()\r\n const history = useHistory()\r\n const { id: planId } = useParams()\r\n\r\n useEffect(() => {\r\n if (planId) dispatch(getPlan(planId))\r\n }, [planId])\r\n\r\n const onAddNewComment = (comment) => dispatch(addComment(plan.id, comment))\r\n const [search, setSearch] = useState('')\r\n\r\n const onAddToCart = (fabric) => {\r\n dispatch(addToCart(fabric))\r\n history.push('/cart')\r\n }\r\n\r\n const onLikedPlan = (planId) => {\r\n dispatch(toggleLike(planId))\r\n dispatch(updatePlan({ ...plan, isLiked: !plan.isLiked }))\r\n }\r\n const onFavouritedPlan = (planId) => {\r\n dispatch(toggleFavourite(planId))\r\n dispatch(updatePlan({ ...plan, isFavourited: !plan.isFavourited }))\r\n }\r\n const onTogglePublic = (planId, newValue) => {\r\n dispatch(togglePublic(planId, newValue))\r\n dispatch(updatePlan({ ...plan, isPublic: !plan.isPublic }))\r\n }\r\n\r\n const [isShareVisible, setIsShareVisible] = useState(false)\r\n const toggleShare = () => setIsShareVisible(!isShareVisible)\r\n const [currentPlanId, setCurrentPlanId] = useState(null)\r\n\r\n const onShare = (planId) => {\r\n setCurrentPlanId(planId)\r\n toggleShare()\r\n }\r\n\r\n const onSearch = () => {\r\n alert(search)\r\n }\r\n\r\n return (\r\n \r\n \r\n {\r\n e.preventDefault()\r\n onSearch()\r\n }}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n setSearch(e.target.value)}\r\n />\r\n \r\n \r\n \r\n history.goBack()}\r\n >\r\n ‹ بازگشت\r\n \r\n \r\n \r\n \r\n \r\n پارچهای در طرح پیدا نشد\r\n
\r\n ) : (\r\n fabrics.filter(x=>x.name).map((fabric) => (\r\n \r\n
\r\n
\r\n {fabric.name}\r\n
\r\n {fabric?.images &&
}\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 Index\r\n","import React, { Component } from 'react'\r\nimport {\r\n Button,\r\n Card,\r\n CardHeader,\r\n CardTitle,\r\n CardBody,\r\n Spinner,\r\n} from 'reactstrap'\r\nimport { connect } from 'react-redux'\r\nimport { AvForm, AvField } from 'availity-reactstrap-validation'\r\nimport { registerUser, validateUser } from '../redux/user/actions'\r\nimport logo from '../assets/img/logo-white.svg'\r\nimport { NavLink, withRouter } from 'react-router-dom'\r\nimport { withTranslate } from 'react-redux-multilingual'\r\nimport informationIcon from '../assets/img/navbarIcons/information.svg'\r\n\r\nclass SignUp extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n image: '',\r\n validationKey: '',\r\n }\r\n }\r\n\r\n handleSubmit = (event, errors, values) => {\r\n event.preventDefault()\r\n event.persist()\r\n this.setState({ errors, values })\r\n\r\n if (errors.length == 0)\r\n this.props.registerUser(\r\n this.state.password,\r\n this.state.firstName,\r\n this.state.lastName,\r\n this.state.mobile,\r\n this.props.history\r\n )\r\n }\r\n\r\n handleSubmitStepTwo = (event, errors, values) => {\r\n event.preventDefault()\r\n event.persist()\r\n this.setState({ errors, values })\r\n\r\n if (errors.length == 0)\r\n this.props.validateUser(\r\n this.state.mobile,\r\n this.state.validationKey,\r\n this.props.history\r\n )\r\n }\r\n\r\n handleInputChange = (e) => {\r\n const name = e.target.name\r\n this.setState({ [name]: e.target.value })\r\n }\r\n\r\n getErrors = () => {\r\n if (!this.props.error) return ''\r\n\r\n if (typeof this.props.error == 'object') {\r\n let messages = []\r\n for (const key in this.props.error) {\r\n messages.push({this.props.error[key]}
)\r\n }\r\n return messages\r\n }\r\n return this.props.error.toString()\r\n }\r\n\r\n render = () => {\r\n return (\r\n \r\n \r\n
\r\n
\r\n {this.props.error && (\r\n \r\n \r\n {this.getErrors()}\r\n \r\n \r\n )}\r\n \r\n {!this.props.isRegistrationDone ? (\r\n \r\n
\r\n \r\n \r\n قبلا ثبت نام کرده اید؟\r\n \r\n {!this.props.waiting ? (\r\n \r\n ثبت نام\r\n \r\n ) : (\r\n
\r\n \r\n
\r\n
\r\n \r\n {!this.props.waiting ? (\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\nconst mapStateToProps = (store) => {\r\n return {\r\n isRegistrationDone: store.user.isRegistrationDone,\r\n waiting: store.user.waiting,\r\n error: store.user.error,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n registerUser: (password, firstName, lastName, mobile, history) =>\r\n dispatch(\r\n registerUser(password, firstName, lastName, mobile, history)\r\n ),\r\n validateUser: (mobile, validationKey, history) =>\r\n dispatch(validateUser(mobile, validationKey, history)),\r\n }\r\n}\r\n\r\nexport default connect(\r\n mapStateToProps,\r\n mapDispatchToProps\r\n)(withRouter(withTranslate(SignUp)))\r\n","import React, { Component } from 'react'\r\nimport {\r\n Button,\r\n Card,\r\n CardHeader,\r\n CardTitle,\r\n CardBody,\r\n Spinner,\r\n} from 'reactstrap'\r\nimport { connect } from 'react-redux'\r\nimport { NavLink } from 'react-router-dom'\r\nimport { AvForm, AvField } from 'availity-reactstrap-validation'\r\nimport { login, setError, validateUser } from '../redux/auth/actions'\r\nimport logo from '../assets/img/logo-white.svg'\r\nimport { withTranslate } from 'react-redux-multilingual'\r\nimport informationIcon from '../assets/img/navbarIcons/information.svg'\r\n\r\nclass SignIn extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n mobile: '',\r\n password: '',\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n if (this.props.duplicateMessage) {\r\n this.props.setError(this.props.duplicateMessage)\r\n } else {\r\n this.props.setError(null)\r\n }\r\n }\r\n handleSubmit = (event, errors, values) => {\r\n event.preventDefault()\r\n event.persist()\r\n this.setState({ errors, values })\r\n\r\n if (errors.length == 0)\r\n this.props.login(\r\n this.state.mobile,\r\n this.state.password,\r\n this.props.history\r\n )\r\n }\r\n\r\n handleSubmitStepTwo = (event, errors, values) => {\r\n event.preventDefault()\r\n event.persist()\r\n this.setState({ errors, values })\r\n\r\n if (errors.length == 0)\r\n this.props.validateUser(\r\n this.state.mobile,\r\n this.state.validationKey,\r\n this.props.history\r\n )\r\n }\r\n\r\n handleInputChange = (e) => {\r\n const name = e.target.name\r\n this.setState({ [name]: e.target.value })\r\n }\r\n\r\n getErrors = () => {\r\n if (!this.props.error) return ''\r\n\r\n if (typeof this.props.error == 'object') {\r\n let messages = []\r\n for (const key in this.props.error) {\r\n messages.push({this.props.error[key]}
)\r\n }\r\n return messages\r\n }\r\n return this.props.error.toString()\r\n }\r\n\r\n render = () => {\r\n return (\r\n \r\n \r\n \r\n {this.props.error && (\r\n \r\n \r\n {this.getErrors()}\r\n \r\n \r\n )}\r\n \r\n {!this.props.isUserValidated ? (\r\n \r\n
\r\n \r\n \r\n {this.props.translate(\r\n 'forgotYourPassword'\r\n )}\r\n \r\n \r\n \r\n \r\n {this.props.translate(\r\n 'notRegisteredYet'\r\n )}\r\n \r\n {!this.props.waiting ? (\r\n \r\n {this.props.translate('login')}\r\n \r\n ) : (\r\n
\r\n \r\n
\r\n
\r\n \r\n {!this.props.waiting ? (\r\n \r\n تایید تلفن همراه\r\n \r\n ) : (\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n isUserValidated: store.auth.isUserValidated,\r\n duplicateMessage: store.user.duplicateMessage,\r\n waiting: store.auth.waiting,\r\n error: store.auth.error,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n login: (mobile, password, history) =>\r\n dispatch(login(mobile, password, history)),\r\n validateUser: (mobile, validationKey, history) =>\r\n dispatch(validateUser(mobile, validationKey, history)),\r\n setError: (message) => dispatch(setError(message)),\r\n }\r\n}\r\n\r\nexport default connect(\r\n mapStateToProps,\r\n mapDispatchToProps\r\n)(withTranslate(SignIn))\r\n","import React, { Component } from 'react'\r\nimport {\r\n Button,\r\n Card,\r\n CardHeader,\r\n CardTitle,\r\n CardBody,\r\n Spinner,\r\n} from 'reactstrap'\r\nimport { connect } from 'react-redux'\r\nimport { AvForm, AvField } from 'availity-reactstrap-validation'\r\nimport { registerUser } from '../redux/user/actions'\r\nimport logo from '../assets/img/logo-white.svg'\r\nimport { NavLink } from 'react-router-dom'\r\nimport {\r\n sendForgotPasswordToken,\r\n forgotPasswordFinalStep,\r\n} from '../redux/auth/actions'\r\nimport { withTranslate } from 'react-redux-multilingual'\r\nimport informationIcon from '../assets/img/navbarIcons/information.svg'\r\n\r\nclass ForgotPassword extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n image: '',\r\n mobile: '',\r\n token: '',\r\n password: '',\r\n }\r\n }\r\n\r\n handleSubmit = (event, errors, values) => {\r\n event.preventDefault()\r\n event.persist()\r\n this.setState({ errors, values })\r\n\r\n if (errors.length == 0)\r\n this.props.sendForgotPasswordToken(this.state.mobile)\r\n }\r\n\r\n handleSecondStepSubmit = (event, errors, values) => {\r\n event.preventDefault()\r\n event.persist()\r\n this.setState({ errors, values })\r\n\r\n if (errors.length == 0)\r\n this.props.forgotPasswordFinalStep(\r\n this.state.mobile,\r\n this.state.token,\r\n this.state.password\r\n )\r\n }\r\n\r\n handleInputChange = (e) => {\r\n const name = e.target.name\r\n this.setState({ [name]: e.target.value })\r\n }\r\n\r\n getErrors = () => {\r\n if (!this.props.error) return ''\r\n\r\n if (typeof this.props.error == 'object') {\r\n let messages = []\r\n for (const key in this.props.error) {\r\n messages.push({this.props.error[key]}
)\r\n }\r\n return messages\r\n }\r\n return this.props.error.toString()\r\n }\r\n\r\n render = () => {\r\n return (\r\n \r\n \r\n\r\n \r\n {this.props.error && (\r\n \r\n \r\n {this.getErrors()}\r\n \r\n \r\n )}\r\n \r\n \r\n {!this.props.isForgotPasswordTokenSent ? (\r\n
\r\n \r\n \r\n {this.props.translate('notRegisteredYet')}\r\n \r\n {!this.props.waiting ? (\r\n \r\n ارسال کد\r\n \r\n ) : (\r\n
\r\n \r\n ) : (\r\n
\r\n \r\n \r\n {this.props.translate('notRegisteredYet')}\r\n \r\n {!this.props.waiting ? (\r\n \r\n تغییر رمز عبور\r\n \r\n ) : (\r\n
\r\n \r\n )}\r\n
\r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n waiting: store.auth.waiting,\r\n error: store.auth.error,\r\n isForgotPasswordTokenSent: store.auth.isForgotPasswordTokenSent,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n sendForgotPasswordToken: (mobile) =>\r\n dispatch(sendForgotPasswordToken(mobile)),\r\n forgotPasswordFinalStep: (mobile, token, password) =>\r\n dispatch(forgotPasswordFinalStep(mobile, token, password)),\r\n }\r\n}\r\n\r\nexport default connect(\r\n mapStateToProps,\r\n mapDispatchToProps\r\n)(withTranslate(ForgotPassword))\r\n","import React, { Component } from \"react\";\r\n\r\nconst HIT_TEST_OPTIONS = {\r\n segments: true,\r\n stroke: true,\r\n fill: true,\r\n tolerance: 5\r\n};\r\n\r\nexport default function withSelectTool(WrappedComponent) {\r\n return class SelectTool extends Component {\r\n constructor(props) {\r\n super(props);\r\n const d = props.initialData;\r\n const id = d && d[0] && d[0].id;\r\n this.state = {\r\n activeLayer: id,\r\n selectedItem: id,\r\n firstSelectedItem: {},\r\n selectedItems: []\r\n };\r\n this._changed = false;\r\n this._item = null;\r\n this._segment = null;\r\n this._point = null;\r\n this._tool = null;\r\n this._firstSelectedItem = null;\r\n this._secondSelectedItem = null;\r\n }\r\n\r\n selectItems = ({ id }) => {\r\n if (!this.state.selectedItems.includes(id)) {\r\n const items = this.state.selectedItems ? this.state.selectedItems : [];\r\n items.push(id);\r\n this.setState({ selectedItems: items });\r\n\r\n if (items.length == 1) {\r\n this._firstSelectedItem = this._item;\r\n } else if (items.length == 2) {\r\n this._secondSelectedItem = this._item;\r\n }\r\n }\r\n };\r\n\r\n deselectItems = () => {\r\n this._firstSelectedItem = null;\r\n this.setState({ selectedItems: [] });\r\n };\r\n\r\n selectItem = ({ id, type }) => {\r\n if (id === this.state.selectedItem) {\r\n return;\r\n }\r\n switch (type) {\r\n case \"Layer\":\r\n this.setState({ activeLayer: id, selectedItem: id });\r\n break;\r\n case \"Path\":\r\n case \"Circle\":\r\n case \"Rectangle\":\r\n this.setState({ selectedItem: id });\r\n break;\r\n default:\r\n break;\r\n }\r\n };\r\n\r\n deselectItem = () => {\r\n this.setState({ selectedItem: null });\r\n };\r\n\r\n keyDown = (e) => {\r\n if (this._item) {\r\n const {\r\n key,\r\n modifiers: { shift }\r\n } = e;\r\n switch (key) {\r\n case \"delete\":\r\n this.props.removeItem(this._item);\r\n this._changed = false;\r\n this._item = null;\r\n this._point = null;\r\n break;\r\n case \"up\":\r\n this._item.translate(0, shift ? -10 : -1);\r\n this._changed = true;\r\n break;\r\n case \"down\":\r\n this._item.translate(0, shift ? 10 : 1);\r\n this._changed = true;\r\n break;\r\n case \"left\":\r\n this._item.translate(shift ? -10 : -1, 0);\r\n this._changed = true;\r\n break;\r\n case \"right\":\r\n this._item.translate(shift ? 10 : 1, 0);\r\n this._changed = true;\r\n break;\r\n case \"ل\":\r\n case \"g\":\r\n this.props.groupItems(this.state.selectedItems);\r\n this.deselectItems();\r\n this.deselectItem();\r\n case \"ث\":\r\n case \"e\":\r\n var twoPath = [],\r\n selectedEl = {};\r\n const paper = this._tool._scope;\r\n this.state.selectedItems.forEach((item, index) => {\r\n this.props.data.layers[0].children.forEach((element) => {\r\n if (element.id === item) {\r\n if (index === 0) {\r\n selectedEl = element;\r\n }\r\n twoPath.push(new paper.Path(element.pathData));\r\n }\r\n });\r\n });\r\n\r\n // var newPath = twoPath[0].unite(twoPath[1])\r\n // var newPath = twoPath[0].intersect(twoPath[1])\r\n // var newPath = twoPath[0].subtract(twoPath[1])\r\n var newPath = twoPath[0].exclude(twoPath[1]);\r\n // var newPath = twoPath[0].divide(twoPath[1])\r\n this.props.updateItem(this._firstSelectedItem, {\r\n pathData: newPath.getPathData(),\r\n selected: true,\r\n relatedCurvePoints: newPath.getSegments().map((seg) => {\r\n return { x: seg.point.x, y: seg.point.y };\r\n })\r\n });\r\n\r\n this.props.removeItem(this._secondSelectedItem);\r\n default:\r\n break;\r\n }\r\n }\r\n };\r\n\r\n keyUp = (e) => {\r\n const { key } = e;\r\n if (this._item && this._changed && key !== \"shift\") {\r\n if (this._updateTimeout) {\r\n clearTimeout(this._updateTimeout);\r\n }\r\n this._updateTimeout = setTimeout(() => {\r\n this.props.updateItem(this._item, {\r\n pathData: this._item.getPathData(),\r\n selected: true,\r\n relatedCurvePoints: this._item.getSegments().map((seg) => {\r\n return { x: seg.point.x, y: seg.point.y };\r\n })\r\n });\r\n this._changed = false;\r\n this._updateTimeout = null;\r\n }, 350);\r\n }\r\n };\r\n\r\n mouseDown = (e) => {\r\n this._tool = e.tool;\r\n\r\n e.tool.view._project.layers[2]._children.forEach((element) => {\r\n element.fillColor._canvasStyle = \"rgb(255,255,255,0.05)\";\r\n element.opacity = 1;\r\n });\r\n\r\n this.deselectItem();\r\n const hit = e.tool.view._project.hitTest(e.point, HIT_TEST_OPTIONS);\r\n if (hit && hit.item && !hit.item.locked) {\r\n if (hit.type === \"segment\") {\r\n this._segment = hit.segment;\r\n }\r\n\r\n hit.item.fillColor = hit.item.strokeColor._canvasStyle;\r\n hit.item.opacity = 0.5;\r\n\r\n this.selectItem(hit.item.data);\r\n hit.item.bringToFront();\r\n this._item = hit.item;\r\n this._point = e.point;\r\n } else {\r\n this._item = null;\r\n this._point = null;\r\n this.deselectItems();\r\n }\r\n };\r\n\r\n mouseDrag = (e) => {\r\n if (this.state.selectedItems.length == 0) {\r\n if (this._segment) {\r\n this._segment.point.x += e.delta.x;\r\n this._segment.point.y += e.delta.y;\r\n } else if (this._item && this._point) {\r\n this._item.translate(e.point.subtract(this._point));\r\n }\r\n\r\n this._changed = true;\r\n this._point = e.point;\r\n }\r\n };\r\n\r\n mouseUp = (e) => {\r\n if (this._segment) {\r\n if (e.event.shiftKey) {\r\n this._item.removeSegment(this._segment.index);\r\n }\r\n } else if (this._item) {\r\n if (e.event.ctrlKey) {\r\n const hit = e.tool.view._project.hitTest(e.point, HIT_TEST_OPTIONS);\r\n if (hit.location && this.state.selectedItems.length == 0) {\r\n this._item.insert(hit.location.segment.index + 1, e.point);\r\n } else {\r\n this.deselectItem();\r\n this.selectItems(this._item.data);\r\n }\r\n }\r\n }\r\n\r\n if (this._changed && this._item) {\r\n this.props.updateItem(this._item, {\r\n pathData: this._item.getPathData(),\r\n selected: true,\r\n relatedCurvePoints: this._item.getSegments().map((seg) => {\r\n return { x: seg.point.x, y: seg.point.y };\r\n })\r\n });\r\n }\r\n\r\n this._changed = false;\r\n this._point = null;\r\n this._segment = null;\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n {children}\r\n \r\n )\r\n }\r\n\r\n}\r\n","import React, { Component } from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { Portal } from 'react-portal'\r\nimport Tether from 'tether'\r\n\r\nimport './Dropdown.css'\r\n\r\nconst POS = {\r\n t: 'top',\r\n b: 'bottom',\r\n l: 'left',\r\n r: 'right',\r\n m: 'middle',\r\n c: 'center',\r\n}\r\n\r\nexport default class Dropdown extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.ref = React.createRef()\r\n }\r\n\r\n static propTypes = {\r\n align: function(props, propName, componentName) {\r\n if (!/[btm][lrc] [btm][lrc]/.test(props[propName])) {\r\n return new Error(\r\n `Invalid prop ${propName} (${props[propName]}) ` +\r\n `supplied to ${componentName}. Validation failed.`\r\n )\r\n }\r\n },\r\n children: PropTypes.any.isRequired,\r\n closeOnEsc: PropTypes.bool,\r\n closeOnOutsideClick: PropTypes.bool,\r\n offset: PropTypes.string,\r\n target: PropTypes.element.isRequired,\r\n }\r\n\r\n static defaultProps = {\r\n align: 'tl bl',\r\n closeOnEsc: true,\r\n closeOnOutsideClick: true,\r\n offset: '0 0',\r\n }\r\n\r\n onOpen = (portalNode) => {\r\n const { align, offset } = this.props\r\n const [ay,ax,ty,tx] = align.split('').map(a => a && POS[a]).filter(a => a)\r\n const [oy,ox] = offset.split(' ').map(o => parseInt(o, 10))\r\n\r\n portalNode.classList.add('Dropdown')\r\n\r\n this._tether = new Tether({\r\n element: portalNode,\r\n target: this.ref,\r\n attachment: `${ay} ${ax}`,\r\n targetAttachment: `${ty} ${tx}`,\r\n offset: `${oy} ${ox}`,\r\n constraints: [{\r\n to: 'window',\r\n pin: true,\r\n }],\r\n })\r\n\r\n portalNode.style.opacity = 1\r\n }\r\n\r\n beforeClose = (portalNode, remove) => {\r\n if (this._tether) {\r\n this._tether.destroy()\r\n }\r\n this._timeout = setTimeout(remove)\r\n }\r\n\r\n componentWillUnmount() {\r\n if (this._timeout) {\r\n clearTimeout(this._timeout)\r\n }\r\n }\r\n render() {\r\n const { children, closeOnEsc, closeOnOutsideClick, target } = this.props\r\n return (\r\n \r\n {children}\r\n \r\n )\r\n }\r\n\r\n}\r\n","import React, { Component, Children, cloneElement } from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport './List.css'\r\n\r\nexport default class List extends Component {\r\n\r\n static propTypes = {\r\n children: PropTypes.any.isRequired,\r\n closePortal: PropTypes.func,\r\n }\r\n\r\n render() {\r\n const { closePortal } = this.props\r\n const children = Children.toArray(this.props.children).filter(c => c)\r\n return (\r\n this.list = ref}>\r\n {Children.map(children, (child, index) => cloneElement(child, {\r\n tabIndex: index + 1,\r\n closeMenu: closePortal,\r\n }))}\r\n \r\n )\r\n }\r\n\r\n}\r\n","import React, { Component } from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport Dropdown from './Dropdown'\r\nimport List from './List'\r\n\r\nimport './Menu.css'\r\n\r\nexport default class Menu extends Component {\r\n\r\n static propTypes = {\r\n align: PropTypes.string,\r\n children: PropTypes.any.isRequired,\r\n offset: PropTypes.string,\r\n target: PropTypes.element.isRequired,\r\n }\r\n\r\n render() {\r\n const { children, ...rest } = this.props\r\n return (\r\n \r\n \r\n {children}\r\n
\r\n \r\n )\r\n }\r\n\r\n}\r\n","import React, { Component } from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport './Item.css'\r\n\r\nexport default class Item extends Component {\r\n\r\n static propTypes = {\r\n children: PropTypes.any.isRequired,\r\n closeMenu: PropTypes.func,\r\n onClick: PropTypes.func,\r\n tabIndex: PropTypes.number,\r\n }\r\n\r\n handleClick = () => {\r\n if (this.props.onClick) {\r\n this.props.onClick(this.props)\r\n }\r\n this.props.closeMenu()\r\n }\r\n\r\n render() {\r\n const { children, tabIndex } = this.props\r\n const props = {\r\n className: 'PortalMenu__Item',\r\n onClick: this.handleClick,\r\n tabIndex,\r\n }\r\n return (\r\n \r\n {children}\r\n \r\n )\r\n }\r\n}\r\n","import React, { useState, Fragment } from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { Link, Prompt } from 'react-router-dom'\r\nimport InputRange from 'react-input-range'\r\nimport Button from './Button'\r\nimport Menu from './Menu/Menu'\r\nimport MenuItem from './Menu/Item'\r\nimport './Toolbar.css'\r\nimport Tour from 'reactour'\r\nimport { Button as BootstrapButton } from 'reactstrap'\r\n\r\nimport Cube1 from '../../../assets/img/cube/cube-1.png'\r\nimport Cube2 from '../../../assets/img/cube/cube-2.png'\r\nimport Cube3 from '../../../assets/img/cube/cube-3.png'\r\nimport Cube4 from '../../../assets/img/cube/cube-4.png'\r\nimport Cube5 from '../../../assets/img/cube/cube-5.png'\r\nimport Cube6 from '../../../assets/img/cube/cube-6.png'\r\nimport Cube7 from '../../../assets/img/cube/cube-7.png'\r\nimport logo from '../../../assets/img/logo-header-white.svg'\r\n\r\nconst Toolbar = (props) => {\r\n const [menuCube, setMenuCube] = useState(false)\r\n const [cubeSkewAngle, setCubeSkewAngle] = useState(45)\r\n const [isTourOpen, setIsTourOpen] = useState(false)\r\n const [currentStep, setCurrentStep] = useState(0)\r\n\r\n const toggleTourStatus = () => {\r\n setIsTourOpen(!isTourOpen)\r\n setCurrentStep(0)\r\n }\r\n\r\n const restartTourStatus = (goTo) => {\r\n toggleTourStatus()\r\n goTo(0)\r\n }\r\n\r\n const tourFooter = (goTo, nextPage) => (\r\n \r\n goTo(nextPage)}\r\n >\r\n بعدی\r\n \r\n restartTourStatus(goTo)}\r\n >\r\n بعدا میبینم\r\n \r\n
\r\n )\r\n\r\n const finalTourFooter = (goTo) => (\r\n \r\n restartTourStatus(goTo)}\r\n >\r\n اتمام\r\n \r\n
\r\n )\r\n\r\n const steps = [\r\n {\r\n selector: '.Toolbar button:nth-child(3)',\r\n content: ({ goTo }) => (\r\n \r\n \r\n 1 \r\n ابزار 'رسم مسیر' را انتخاب کنید\r\n
\r\n {tourFooter(goTo, 1)}\r\n \r\n ),\r\n action: (node) => {\r\n if (node && node.focus) {\r\n node.focus()\r\n node.click()\r\n }\r\n },\r\n stepInteraction: false,\r\n },\r\n {\r\n selector: 'canvas',\r\n content: ({ goTo }) => (\r\n \r\n \r\n 2 \r\n اطراف ناحیه دلخواه جهت امتحان کردن پارچه را انتخاب کنید\r\n
\r\n {tourFooter(goTo, 2)}\r\n \r\n ),\r\n action: (node) => {\r\n if (node && node.focus) {\r\n node.focus()\r\n node.click()\r\n }\r\n },\r\n stepInteraction: true,\r\n },\r\n {\r\n selector: '.Toolbar button:nth-child(2)',\r\n content: ({ goTo }) => (\r\n \r\n \r\n 3 \r\n ابزار 'انتخاب مسیر' را انتخاب کنید\r\n
\r\n {tourFooter(goTo, 3)}\r\n \r\n ),\r\n action: (node) => {\r\n if (node) {\r\n node.click()\r\n }\r\n },\r\n stepInteraction: false,\r\n },\r\n {\r\n selector: 'canvas',\r\n content: ({ goTo }) => (\r\n \r\n \r\n 4 \r\n با انتخاب مسیر و سپس جابجایی نقاط، میتوان دقت انتخاب مسیر را افزایش دهید\r\n
\r\n {tourFooter(goTo, 4)}\r\n \r\n ),\r\n action: (node) => {\r\n if (node && node.focus) {\r\n node.focus()\r\n node.click()\r\n }\r\n },\r\n stepInteraction: true,\r\n },\r\n {\r\n selector: '.Toolbar div:nth-of-type(3)',\r\n content: ({ goTo }) => (\r\n \r\n \r\n 5 \r\n در صورت هرگونه اشتباه امکان بازگشت به یک مرحله یا بازگشت به مرحله اول نیز وجود دارد\r\n
\r\n {tourFooter(goTo, 5)}\r\n \r\n ),\r\n action: (node) => {\r\n if (node && node.focus) {\r\n node.focus()\r\n node.click()\r\n }\r\n },\r\n stepInteraction: false,\r\n },\r\n {\r\n selector: '.Toolbar div:nth-of-type(2) button',\r\n content: ({ goTo }) => (\r\n \r\n \r\n 6 \r\n پس از تکمیل انتخاب مسیر، 'وضعیت پرسکتیو' را انتخاب کنید\r\n
\r\n {tourFooter(goTo, 6)}\r\n \r\n ),\r\n action: (node) => {\r\n if (node) {\r\n node.click()\r\n }\r\n },\r\n stepInteraction: true,\r\n },\r\n {\r\n selector: '.Toolbar .pers-menu-items',\r\n content: ({ goTo }) => (\r\n \r\n \r\n 7 \r\n زاویه و نحوه قرارگیری ناحیه انتخاب شده را در تصویر انتخاب کنید\r\n
\r\n {tourFooter(goTo, 7)}\r\n \r\n ),\r\n action: (node) => {\r\n if (node) {\r\n node.click()\r\n }\r\n },\r\n stepInteraction: true,\r\n },\r\n {\r\n selector: 'canvas',\r\n content: ({ goTo }) => (\r\n \r\n \r\n 8 \r\n با جابجایی نقاط جهت خواب پارچه و نحوه قرارگیری آن در نقاط مختلف تغییر خواهد کرد\r\n
\r\n {tourFooter(goTo, 8)}\r\n \r\n ),\r\n stepInteraction: true,\r\n },\r\n {\r\n selector: '.Toolbar .pers-menu .input-range',\r\n content: ({ goTo }) => (\r\n \r\n \r\n 9 \r\n با جابجایی اسلایدر زاویه شکست پارچه در نقاط میانی تغییر خواهد کرد\r\n
\r\n {tourFooter(goTo, 9)}\r\n \r\n ),\r\n stepInteraction: true,\r\n },\r\n {\r\n selector: '.Toolbar .pers-menu button',\r\n content: ({ goTo }) => (\r\n \r\n \r\n 10 \r\n پس از انجام تغییرات و رسیدن به مکان مورد انتظار دکمه 'تایید' را انتخاب کنید\r\n
\r\n {tourFooter(goTo, 10)}\r\n \r\n ),\r\n stepInteraction: true,\r\n },\r\n {\r\n selector: '.Toolbar div:nth-of-type(5)',\r\n content: ({ goTo }) => (\r\n \r\n \r\n 11 \r\n پس از انجام تغییرات و برای نگهداری تغییرات بر روی دکمه 'ذخیره' کلیک کنید\r\n
\r\n {tourFooter(goTo, 11)}\r\n \r\n ),\r\n stepInteraction: false,\r\n },\r\n {\r\n selector: '.Toolbar div:nth-of-type(6)',\r\n content: ({ goTo }) => (\r\n \r\n \r\n 12 \r\n برای بازگشت به صفحه اصلی بر روی دکمه 'بازگشت' را انتخاب کنید\r\n
\r\n {finalTourFooter(goTo)}\r\n \r\n ),\r\n stepInteraction: false,\r\n },\r\n ]\r\n\r\n const { activeTool, fullscreen, imageSize, showLayers } = props\r\n\r\n const menuHandler = (showMenu, showCube, type) => {\r\n setMenuCube(showMenu)\r\n // props.stateCubeHandler(showCube, type)\r\n props.stateDynamicCubeHandler(showCube, type)\r\n }\r\n\r\n return (\r\n \r\n
setCurrentStep(step)}\r\n disableInteraction={false}\r\n closeWithMask={false}\r\n rounded={8}\r\n />\r\n \r\n راهنمای استفاده\r\n \r\n \r\n \r\n pan_tool \r\n \r\n \r\n touch_app \r\n \r\n \r\n create \r\n \r\n \r\n timeline \r\n \r\n {props.showDynamicCube ? (\r\n props.deleteDynamicCubeHandler()}\r\n >\r\n delete \r\n \r\n ) : (\r\n \r\n delete \r\n \r\n )}\r\n
\r\n \r\n {/*
\r\n view_comfy \r\n */}\r\n\r\n {!props.showDynamicCube ? (\r\n {\r\n let isShowMenu = true\r\n props.setDefaultView()\r\n props.data.layers[0].children.forEach(\r\n (element, index) => {\r\n if (\r\n element.id === props.selectedItem &&\r\n element.dimension\r\n ) {\r\n isShowMenu = false\r\n // props.stateCubeHandler(\r\n // true,\r\n // element.dimType\r\n // )\r\n props.stateDynamicCubeHandler(\r\n true,\r\n element.dimType,\r\n () =>\r\n setCubeSkewAngle(\r\n props.getInitialCubeSkewAngle()\r\n )\r\n )\r\n }\r\n }\r\n )\r\n\r\n isShowMenu && setMenuCube(!menuCube)\r\n }}\r\n disabled={props.selectedItem == null}\r\n >\r\n 3d_rotation \r\n \r\n ) : (\r\n \r\n props.confirmDynamicCubeHandler()}\r\n >\r\n check \r\n \r\n menuHandler(false, false)}\r\n >\r\n close \r\n \r\n {props.perspectiveType != 1 && (\r\n {\r\n setCubeSkewAngle(value)\r\n }}\r\n onChangeComplete={(value) =>\r\n props.applyCubeSkewChange(cubeSkewAngle)\r\n }\r\n />\r\n )}\r\n \r\n )}\r\n\r\n {menuCube && (\r\n \r\n
menuHandler(false, true, 1)}\r\n >\r\n menuHandler(false, true, 2)}\r\n >\r\n menuHandler(false, true, 3)}\r\n >\r\n menuHandler(false, true, 4)}\r\n >\r\n \r\n \r\n redo \r\n \r\n \r\n undo \r\n \r\n \r\n clear \r\n \r\n
\r\n \r\n \r\n \r\n {showLayers ? 'layers' : 'layers_clear'}\r\n \r\n \r\n \r\n \r\n {fullscreen ? 'fullscreen_exit' : 'fullscreen'}\r\n \r\n \r\n
\r\n \r\n \r\n save \r\n \r\n
\r\n {/* \r\n \r\n color_lens \r\n \r\n
*/}\r\n {props.isSaving && (\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 {(interpolatedStyles) => (\r\n \r\n {interpolatedStyles.map(\r\n ({ height, left, rotate, scale, top, width }, index) => (\r\n
\r\n \r\n {tools[index].icon}\r\n \r\n \r\n {this.renderChildButtons()}\r\n
\r\n {({ rotate }) => (\r\n \r\n \r\n {tool.icon}\r\n \r\n \r\n {icon && {icon} }\r\n {children} \r\n
\r\n )\r\n }\r\n}\r\n","import React, { Component } from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport Tree from 'react-treeview'\r\n\r\nimport Label from './Label'\r\n\r\nimport './Item.css'\r\n\r\nfunction getIcon(type) {\r\n switch (type) {\r\n case 'Layer':\r\n return 'layers'\r\n case 'Group':\r\n return 'folder'\r\n case 'Path':\r\n return 'timeline'\r\n case 'Circle':\r\n return 'lens'\r\n case 'Rectangle':\r\n return 'crop_square'\r\n case 'Raster':\r\n return 'photo'\r\n default:\r\n return 'insert_drive_file'\r\n }\r\n}\r\n\r\nfunction getText(type) {\r\n switch (type) {\r\n case 'Layer':\r\n return 'لایه'\r\n case 'Group':\r\n return 'گروه'\r\n case 'Path':\r\n return 'مسیر'\r\n case 'Circle':\r\n return 'lens'\r\n case 'Rectangle':\r\n return 'crop_square'\r\n case 'Raster':\r\n return 'تصویر'\r\n default:\r\n return ''\r\n }\r\n}\r\n\r\nexport default class Item extends Component {\r\n static propTypes = {\r\n id: PropTypes.any.isRequired,\r\n type: PropTypes.string.isRequired,\r\n expanded: PropTypes.object.isRequired,\r\n activeLayer: PropTypes.number,\r\n selectedItem: PropTypes.string,\r\n onArrowClick: PropTypes.func,\r\n onLabelClick: PropTypes.func,\r\n }\r\n\r\n handleArrowClick = () => {\r\n if (this.props.onArrowClick) {\r\n this.props.onArrowClick(this.props)\r\n }\r\n }\r\n\r\n render() {\r\n const {\r\n id,\r\n type,\r\n data,\r\n children,\r\n expanded,\r\n activeLayer,\r\n selectedItem,\r\n onLabelClick,\r\n onStrokeColorClick,\r\n onChangeLockClick,\r\n } = this.props\r\n const isGroup = type === 'Group' || type === 'Layer'\r\n const hasChildren = children && children.length > 0\r\n const labelProps = {\r\n id,\r\n type,\r\n icon: getIcon(type),\r\n onClick: onLabelClick,\r\n selected:\r\n id === selectedItem || (id === activeLayer && !selectedItem),\r\n }\r\n const treeProps = {\r\n collapsed: expanded[id] === false,\r\n onClick: this.handleArrowClick,\r\n nodeLabel: (\r\n {`${getText(type)} شماره ${\r\n id ?? 0\r\n }`} \r\n ),\r\n }\r\n\r\n const strokeColors = [\r\n '#ff0000',\r\n '#00ff00',\r\n '#0000ff',\r\n '#ffff00',\r\n '#ff00ff',\r\n '#00ffff',\r\n '#000000',\r\n ]\r\n\r\n return (\r\n \r\n {hasChildren &&\r\n children.map(({ id, type }, num) => {\r\n let selectedElement = {},\r\n nextStrokeColor = '',\r\n islocked = false\r\n\r\n data.layers[0].children.forEach((element, index) => {\r\n if (element.id === this.props.selectedItem) {\r\n selectedElement = element\r\n\r\n islocked = element.locked\r\n\r\n strokeColors.forEach((color, colorIndex) => {\r\n if (color === selectedElement.strokeColor) {\r\n nextStrokeColor =\r\n strokeColors[colorIndex + 1]\r\n }\r\n })\r\n\r\n if (!nextStrokeColor) {\r\n nextStrokeColor = '#ff0000'\r\n }\r\n }\r\n })\r\n\r\n return (\r\n \r\n {`${getText(type)} شماره ${num + 1}`}\r\n\r\n {this.props.selectedItem === id && (\r\n \r\n {/* onChangeLockClick(this.props)}\r\n >\r\n \r\n {islocked ? 'lock' : 'lock_open'}\r\n \r\n */}\r\n \r\n onStrokeColorClick(\r\n this.props,\r\n nextStrokeColor\r\n )\r\n }\r\n >\r\n \r\n \r\n
\r\n )}\r\n \r\n )\r\n })}\r\n {!hasChildren && isGroup && (\r\n خالی \r\n )}\r\n \r\n )\r\n }\r\n}\r\n","import React, { Component } from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport assign from 'object-assign'\r\n\r\nimport Item from './Item'\r\n\r\nimport './Layers.css'\r\n\r\nexport default class Layers extends Component {\r\n static propTypes = {\r\n activeLayer: PropTypes.number,\r\n data: PropTypes.object.isRequired,\r\n selectedItem: PropTypes.string,\r\n selectItem: PropTypes.func\r\n }\r\n\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n expanded: {}\r\n }\r\n }\r\n\r\n handleArrowClick = ({ id }) => {\r\n const { expanded } = this.state\r\n this.setState({\r\n expanded: assign({}, expanded, {\r\n [id]: typeof expanded[id] === 'undefined' ? false : !expanded[id]\r\n })\r\n })\r\n }\r\n\r\n handleLabelClick = (item) => {\r\n if (typeof this.props.selectItem === 'function') {\r\n this.props.setTool('select')\r\n this.props.selectItem(item)\r\n }\r\n }\r\n\r\n handleStrokeColorClick = (item, color) => {\r\n if (typeof this.props.changeColorItem === 'function') {\r\n this.props.changeColorItem(item, color)\r\n }\r\n }\r\n\r\n handleLockClick = (item) => {\r\n if (typeof this.props.changeColorItem === 'function') {\r\n const data = this.props.changeLockItem(item)\r\n }\r\n }\r\n\r\n render() {\r\n const { activeLayer, data, selectedItem } = this.props\r\n const { expanded } = this.state\r\n const itemProps = {\r\n data,\r\n activeLayer,\r\n expanded,\r\n selectedItem,\r\n onArrowClick: this.handleArrowClick,\r\n onLabelClick: this.handleLabelClick,\r\n onStrokeColorClick: this.handleStrokeColorClick,\r\n onChangeLockClick: this.handleLockClick\r\n }\r\n return (\r\n \r\n
\r\n layers \r\n لایهبندی خطوط \r\n \r\n
\r\n {data.layers.map(({ id, type, children }) => (\r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n {data &&\r\n data.layers.map(\r\n ({ id: layerId, type, children, name }) => {\r\n return (\r\n \r\n {children.map(\r\n ({\r\n id: itemId,\r\n type: Item,\r\n ...props\r\n }) => {\r\n const fillColor =\r\n 'rgb(255,255,255,0.05)'\r\n return (\r\n \r\n 0\r\n ? selectedItems.includes(\r\n itemId\r\n )\r\n : itemId ===\r\n selectedItem ||\r\n layerId ===\r\n selectedItem\r\n : false\r\n }\r\n onMouseEnter={(\r\n e\r\n ) => {\r\n if (\r\n this.props\r\n .activeTool ===\r\n 'select' &&\r\n !this.props\r\n .selectedItem\r\n ) {\r\n e.target.fillColor =\r\n e.target.strokeColor._canvasStyle\r\n e.target.opacity = 0.5\r\n }\r\n }}\r\n onMouseLeave={(\r\n e\r\n ) => {\r\n if (\r\n !this.props\r\n .selectedItem\r\n ) {\r\n e.target.fillColor = fillColor\r\n e.target.opacity = 1\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 {this.props.showCube && this.props.cubeGenerator()}\r\n {this.props.showDynamicCube &&\r\n this.props.dynamicCubeGenerator()}\r\n \r\n {this.props.showPhotoEditor && (\r\n \r\n
{\r\n const roomId = this.props.match.params.id\r\n this.props.editRoom(roomId, file)\r\n this.props.photoEditorHandler()\r\n }}\r\n image={data.image}\r\n onClose={this.props.photoEditorHandler}\r\n />\r\n \r\n )\r\n }\r\n}\r\n\r\nconst mapStateToProps = (store) => {\r\n return {\r\n loading: store.placeDetector.loading,\r\n error: store.placeDetector.error,\r\n isSaving: store.placeDetector.isSaving,\r\n savingError: store.placeDetector.savingError,\r\n room: store.tools.room,\r\n }\r\n}\r\n\r\nconst mapDispatchToProps = (dispatch) => {\r\n return {\r\n registerUser: (email, password, firstName, lastName, mobile, history) =>\r\n dispatch(\r\n registerUser(\r\n email,\r\n password,\r\n firstName,\r\n lastName,\r\n mobile,\r\n history\r\n )\r\n ),\r\n saveData: (roomId, data) => dispatch(saveData(roomId, data)),\r\n editRoom: (roomId, file) => dispatch(editRoom(roomId, file)),\r\n getRoom: (id) => dispatch(getRoom(id)),\r\n }\r\n}\r\n\r\nexport default connect(\r\n mapStateToProps,\r\n mapDispatchToProps\r\n)(\r\n compose(\r\n withInitial,\r\n withHistory,\r\n withFullscreen,\r\n withTools,\r\n withMoveTool,\r\n withSelectTool,\r\n withPerspectiveTool,\r\n withDynamicCubeTool,\r\n withCubeTool,\r\n withPenTool,\r\n withFastPenTool,\r\n withCircleTool,\r\n withRectangleTool,\r\n withDeleteTool\r\n )(PlaceDetector)\r\n)\r\n","import * as types from './constants'\r\nimport apiService from '../../apiService/apiService'\r\n\r\nexport const initialData = (image) => {\r\n return (dispatch) => {\r\n dispatch({\r\n type: types.INITIAL_DATA,\r\n })\r\n }\r\n}\r\n\r\nexport const saveData = (roomId, newData) => {\r\n const data = {\r\n projectData: JSON.stringify({ layers: newData }),\r\n }\r\n return (dispatch) => {\r\n dispatch({\r\n type: types.SAVE_DATA_STARTED,\r\n })\r\n apiService.rooms\r\n .update(roomId, data)\r\n .then((response) => {\r\n if (response.status == '200' || response.status == '204') {\r\n dispatch({\r\n type: types.SAVE_DATA_SUCCESS,\r\n })\r\n window.location.reload()\r\n } else {\r\n dispatch({\r\n type: types.SAVE_DATA_FAILED,\r\n error:\r\n response.data.message ||\r\n response.data.errors[0].description,\r\n })\r\n }\r\n })\r\n .catch((error) => {\r\n let errorMessage = error\r\n if (error?.response?.data) errorMessage = error.response.data\r\n dispatch({\r\n type: types.SAVE_DATA_FAILED,\r\n error: errorMessage,\r\n })\r\n })\r\n }\r\n}\r\n","export const INITIAL_DATA = 'INITIAL_DATA'\r\nexport const SAVE_DATA_STARTED = 'SAVE_DATA_STARTED'\r\nexport const SAVE_DATA_SUCCESS = 'SAVE_DATA_SUCCESS'\r\nexport const SAVE_DATA_FAILED = 'SAVE_DATA_FAILED'\r\n","import React, { Component } from 'react'\r\nimport INITIAL_DATA from '../../../initial-data.json'\r\n\r\nconst IMAGE_WIDTH = 1000\r\nconst IMAGE_HEIGHT = 657\r\n\r\nexport default function withInitial(WrappedComponent) {\r\n return class extends Component {\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n mounted: false,\r\n }\r\n this._box = null\r\n this._request = null\r\n\r\n let initialData = JSON.parse(window.localStorage.getItem('rooms'))\r\n if (!initialData) {\r\n initialData = INITIAL_DATA\r\n window.localStorage.setItem(\r\n 'rooms',\r\n JSON.stringify(INITIAL_DATA)\r\n )\r\n }\r\n\r\n this._initialData = initialData.rooms.filter(\r\n (d) => d.id == props.match.params.id\r\n )[0]\r\n }\r\n\r\n resizeWindow = () => {\r\n if (!this._request) {\r\n this._request = requestAnimationFrame(this.resizePaper)\r\n }\r\n }\r\n\r\n resizePaper = () => {\r\n this.forceUpdate()\r\n this._request = null\r\n }\r\n\r\n componentDidMount() {\r\n this.setState({ mounted: true })\r\n window.addEventListener('resize', this.resizeWindow)\r\n }\r\n\r\n componentWillUnmount() {\r\n if (this._request) {\r\n cancelAnimationFrame(this._request)\r\n this._request = null\r\n }\r\n window.removeEventListener('resize', this.resizeWindow)\r\n }\r\n\r\n render() {\r\n const { imageSize, mounted } = this.state\r\n const box = this._box && this._box.getBoundingClientRect()\r\n const initialLocalStorage = window.localStorage.getItem('data')\r\n\r\n return (\r\n 0}\r\n canRedo={history.length > 1 && historyIndex + 1 < history.length}\r\n showPhotoEditor={this.state.showPhotoEditor}\r\n photoEditorHandler={this.photoEditorHandler}\r\n undo={this.undo}\r\n redo={this.redo}\r\n clearHistory={this.clearHistory}\r\n />\r\n );\r\n }\r\n };\r\n}\r\n","import React, { Component } from 'react'\r\n\r\nexport default function withFullscreen(WrappedComponent) {\r\n\r\n return class extends Component {\r\n\r\n constructor(props) {\r\n super(props)\r\n this.state = {\r\n fullscreen: false,\r\n }\r\n }\r\n\r\n toggleFullscreen = () => {\r\n if (!this.state.fullscreen) {\r\n if (document.documentElement.requestFullscreen) {\r\n document.documentElement.requestFullscreen()\r\n } else if (document.documentElement.msRequestFullscreen) {\r\n document.documentElement.msRequestFullscreen()\r\n } else if (document.documentElement.mozRequestFullScreen) {\r\n document.documentElement.mozRequestFullScreen()\r\n } else if (document.documentElement.webkitRequestFullscreen) {\r\n document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT)\r\n }\r\n } else {\r\n if (document.exitFullscreen) {\r\n document.exitFullscreen()\r\n } else if (document.msExitFullscreen) {\r\n document.msExitFullscreen()\r\n } else if (document.mozCancelFullScreen) {\r\n document.mozCancelFullScreen()\r\n } else if (document.webkitExitFullscreen) {\r\n document.webkitExitFullscreen()\r\n }\r\n }\r\n }\r\n\r\n fullScreenChange = () => {\r\n this.setState({ fullscreen: !this.state.fullscreen })\r\n }\r\n\r\n componentDidMount() {\r\n document.addEventListener('webkitfullscreenchange', this.fullScreenChange)\r\n document.addEventListener('mozfullscreenchange', this.fullScreenChange)\r\n document.addEventListener('fullscreenchange', this.fullScreenChange)\r\n document.addEventListener('MSFullscreenChange', this.fullScreenChange)\r\n }\r\n\r\n componentWillUnmount() {\r\n document.addEventListener('webkitfullscreenchange', this.fullScreenChange)\r\n document.addEventListener('mozfullscreenchange', this.fullScreenChange)\r\n document.addEventListener('fullscreenchange', this.fullScreenChange)\r\n document.addEventListener('MSFullscreenChange', this.fullScreenChange)\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n )\r\n }\r\n\r\n stateDynamicCubeHandler = (state = null, type = 6, callback) => {\r\n this.setState(\r\n {\r\n showDynamicCube:\r\n state === null ? !this.state.showDynamicCube : state,\r\n },\r\n () => {\r\n if (state) {\r\n this.initialDynamicCube(type)\r\n\r\n if (callback) callback()\r\n } else this.clearNodes()\r\n }\r\n )\r\n }\r\n\r\n clearNodes = () => {\r\n document.querySelectorAll('.node').forEach((node) => node.remove())\r\n }\r\n\r\n initialDynamicCube = (type = 1) => {\r\n let points = []\r\n let cornerPoints = [\r\n [0, 0],\r\n [0, 0],\r\n [0, 0],\r\n [0, 0],\r\n ]\r\n let breakRatio = null\r\n let skewAngle = Math.PI / 4\r\n let isNew = true\r\n\r\n this.props.data.layers[0].children.forEach((element, index) => {\r\n if (\r\n element.id === this.props.selectedItem &&\r\n element.dimension\r\n ) {\r\n isNew = false\r\n this.pathData = element.pathData\r\n const offsetX = document.querySelector('.Paper canvas')\r\n .offsetLeft\r\n\r\n cornerPoints = element.cubeData.cornerPoints.map((q) => {\r\n return [q[0] + 0, q[1]]\r\n })\r\n breakRatio = element.cubeData.breakRatio\r\n skewAngle = element.cubeData.skewAngle\r\n\r\n points = this.getCubePoint(\r\n element.dimension,\r\n element.dimType\r\n )\r\n } else if (element.id === this.props.selectedItem) {\r\n this.pathData = element.pathData\r\n points = this.getCubePointFromPath(type)\r\n }\r\n })\r\n\r\n this.points = points\r\n this.corner_points = cornerPoints\r\n this.skewAngle = skewAngle\r\n this.setState({ type })\r\n\r\n const canvas = document.getElementById('dynamic-cube-canvas')\r\n\r\n warpOnCubeWithControls(\r\n canvas,\r\n points,\r\n type,\r\n '/images/materials/material1.jpg',\r\n this.props.width,\r\n this.props.height,\r\n this.pathData,\r\n cornerPoints,\r\n breakRatio,\r\n skewAngle,\r\n isNew,\r\n ({ points, cornerPoints, breakRatio }) => {\r\n this.points = points\r\n this.cornerPoints = cornerPoints\r\n this.breakRatio = breakRatio\r\n }\r\n )\r\n\r\n document.body.addEventListener('mousedown', this.onMouseDown)\r\n }\r\n\r\n getCubePoint = (dimension, type = 1) => {\r\n let points = []\r\n\r\n const offsetX = document.querySelector('.Paper canvas').offsetLeft\r\n\r\n dimension.forEach((dim, index) => {\r\n points[index] = [dim.x + offsetX, dim.y]\r\n })\r\n\r\n return points\r\n }\r\n\r\n getCubePointFromPath = (type) => {\r\n const paper = window.paper\r\n const canvas = document.getElementById('selection')\r\n paper.setup(canvas)\r\n paper.project.clear()\r\n const path = new paper.Path(this.pathData)\r\n\r\n const bounds = path.internalBounds\r\n let points = []\r\n if (type == 1) {\r\n points[0] = [bounds.left, bounds.top]\r\n points[1] = [bounds.right, bounds.top]\r\n points[2] = [bounds.right, bounds.bottom]\r\n points[3] = [bounds.left, bounds.bottom]\r\n points[4] = [bounds.right, bounds.bottom]\r\n points[5] = [bounds.left, bounds.bottom]\r\n } else if (type == 2) {\r\n points[0] = [\r\n bounds.centerX + (bounds.right - bounds.centerX) / 3,\r\n bounds.top,\r\n ]\r\n points[1] = [\r\n bounds.centerX - (bounds.centerX - bounds.left) / 3,\r\n bounds.top,\r\n ]\r\n points[2] = [\r\n (bounds.centerX + bounds.left) / 2,\r\n (bounds.top + bounds.centerY) / 2,\r\n ]\r\n points[3] = [\r\n (bounds.centerX + bounds.right) / 2,\r\n (bounds.top + bounds.centerY) / 2,\r\n ]\r\n points[4] = [(bounds.centerX + bounds.left) / 2, bounds.bottom]\r\n points[5] = [(bounds.centerX + bounds.right) / 2, bounds.bottom]\r\n } else if (type == 3) {\r\n points[0] = [bounds.left, bounds.top]\r\n points[1] = [(bounds.centerX + bounds.right) / 2, bounds.top]\r\n points[2] = [bounds.right, (bounds.top + bounds.centerY) / 2]\r\n points[3] = [\r\n (bounds.centerX + bounds.left) / 2,\r\n (bounds.top + bounds.centerY) / 2,\r\n ]\r\n points[4] = [bounds.right, bounds.bottom]\r\n points[5] = [(bounds.centerX + bounds.left) / 2, bounds.bottom]\r\n } else if (type == 4) {\r\n points[0] = [(bounds.centerX + bounds.left) / 2, bounds.top]\r\n points[1] = [bounds.right, bounds.top]\r\n points[2] = [\r\n (bounds.centerX + bounds.right) / 2,\r\n (bounds.top + bounds.centerY) / 2,\r\n ]\r\n points[3] = [bounds.left, (bounds.top + bounds.centerY) / 2]\r\n points[4] = [(bounds.centerX + bounds.right) / 2, bounds.bottom]\r\n points[5] = [bounds.left, bounds.bottom]\r\n } else if (type == 5) {\r\n points[0] = [bounds.left, bounds.top]\r\n points[1] = [(bounds.centerX + bounds.right) / 2, bounds.top]\r\n points[2] = [bounds.right, (bounds.top + bounds.centerY) / 2]\r\n points[3] = [\r\n (bounds.centerX + bounds.left) / 2,\r\n (bounds.top + bounds.centerY) / 2,\r\n ]\r\n points[4] = [bounds.left, (bounds.bottom + bounds.centerY) / 2]\r\n points[5] = [\r\n (bounds.centerX + bounds.right) / 2,\r\n (bounds.bottom + bounds.centerY) / 2,\r\n ]\r\n points[6] = [bounds.right, bounds.bottom]\r\n points[7] = [(bounds.centerX + bounds.left) / 2, bounds.bottom]\r\n } else if (type == 6) {\r\n points[0] = [(bounds.centerX + bounds.left) / 2, bounds.top]\r\n points[1] = [bounds.right, bounds.top]\r\n points[2] = [\r\n (bounds.centerX + bounds.right) / 2,\r\n (bounds.top + bounds.centerY) / 2,\r\n ]\r\n points[3] = [bounds.left, (bounds.top + bounds.centerY) / 2]\r\n points[4] = [\r\n (bounds.centerX + bounds.left) / 2,\r\n (bounds.bottom + bounds.centerY) / 2,\r\n ]\r\n points[5] = [bounds.right, (bounds.bottom + bounds.centerY) / 2]\r\n points[6] = [(bounds.centerX + bounds.right) / 2, bounds.bottom]\r\n points[7] = [bounds.left, bounds.bottom]\r\n } else if (type == 7) {\r\n // TODO: AMIR CHECK\r\n points[0] = [bounds.centerX, bounds.top]\r\n points[1] = [bounds.right, bounds.centerY]\r\n points[2] = [bounds.centerX, bounds.centerY]\r\n points[3] = [bounds.left, bounds.centerY]\r\n points[4] = [\r\n bounds.centerX,\r\n (bounds.bottom + bounds.centerY) / 2,\r\n ]\r\n points[5] = [bounds.right, (bounds.bottom + bounds.centerY) / 2]\r\n points[6] = [bounds.centerX, bounds.bottom]\r\n points[7] = [bounds.left, (bounds.bottom + bounds.centerY) / 2]\r\n }\r\n\r\n const offsetX = document.querySelector('.Paper canvas').offsetLeft\r\n for (const key in points) {\r\n points[key][0] += offsetX\r\n }\r\n\r\n return points\r\n }\r\n\r\n confirmDynamicCubeHandler = () => {\r\n const offsetX = document.querySelector('.Paper canvas').offsetLeft\r\n const offsetY = document.querySelector('.Paper canvas').offsetTop\r\n const { type } = this.state\r\n \r\n const dimension = this.points.map((point, index) => {\r\n return {\r\n x: point[0] - offsetX,\r\n y: point[1],\r\n }\r\n })\r\n const cornerPoints = this.cornerPoints.map((point, index) => {\r\n return [point[0] - 0, point[1]]\r\n })\r\n this.props.updateItemById(this.props.selectedItem, 0, {\r\n dimension: dimension.filter((node) => node != null),\r\n cubeData: {\r\n cornerPoints,\r\n breakRatio: this.breakRatio,\r\n skewAngle: this.skewAngle,\r\n },\r\n dimType: type,\r\n plan: this.getPlanOfType(type),\r\n perspective: type,\r\n })\r\n\r\n this.stateDynamicCubeHandler(false)\r\n }\r\n\r\n deleteDynamicCubeHandler = () => {\r\n this.props.updateItemById(this.props.selectedItem, 0, {\r\n dimension: null,\r\n cubeData: null,\r\n dimType: null,\r\n plan: null,\r\n perspective: null,\r\n })\r\n\r\n this.stateDynamicCubeHandler(false)\r\n }\r\n\r\n getInitialCubeSkewAngle = () => {\r\n return (this.skewAngle * 180) / Math.PI\r\n }\r\n\r\n applyCubeSkewChange = (skewAngle) => {\r\n this.skewAngle = (skewAngle / 180) * Math.PI\r\n // TODO: DRAW AGAIN\r\n updateCubeSkewAngle(\r\n this.skewAngle,\r\n ({ points, cornerPoints, breakRatio }) => {\r\n this.points = points\r\n this.cornerPoints = cornerPoints\r\n this.breakRatio = breakRatio\r\n }\r\n )\r\n }\r\n\r\n onMouseDown = (e) => {\r\n if (e.target.classList.contains('node')) {\r\n this.node = e.target\r\n\r\n document.body.addEventListener('mousemove', this.onMouseMove)\r\n\r\n document.body.onmouseup = () => {\r\n document.body.removeEventListener(\r\n 'mousemove',\r\n this.onMouseMove\r\n )\r\n }\r\n }\r\n }\r\n\r\n onMouseMove = (e) => {\r\n updateCubeByNodes(\r\n e,\r\n this.node,\r\n ({ points, cornerPoints, breakRatio }) => {\r\n this.points = points\r\n this.cornerPoints = cornerPoints\r\n this.breakRatio = breakRatio\r\n }\r\n )\r\n }\r\n\r\n getPlanOfType = (type) => {\r\n switch (type) {\r\n case 1:\r\n return '1'\r\n break\r\n case 2:\r\n case 3:\r\n case 4:\r\n return '2'\r\n break\r\n case 5:\r\n case 6:\r\n case 7:\r\n return '3'\r\n break\r\n }\r\n }\r\n\r\n getFacesOfType = (type, index) => {\r\n if (type >= 5) {\r\n let faces = null\r\n switch (type) {\r\n case 5:\r\n faces = [\r\n ['Left'], // 0\r\n ['Up', 'Left'], // 1\r\n ['Up'], // 2\r\n ['Up', 'Left', 'Right'], // 3\r\n ['Up', 'Right'], // 4\r\n ['Left', 'Right'], // 5\r\n ['Right'], //6\r\n ]\r\n break\r\n case 6:\r\n faces = [\r\n ['Up'], // 0\r\n ['Up', 'Right'], // 1\r\n ['Right'], // 2\r\n ['Up', 'Left'], // 3\r\n ['Up', 'Left', 'Right'], // 4\r\n ['Left'], // 5\r\n ['Left', 'Right'], // 6\r\n ]\r\n break\r\n case 7:\r\n faces = [\r\n ['Left'], // 0\r\n ['Up', 'Left'], // 1\r\n ['Up'], // 2\r\n ['Up', 'Left', 'Right'], // 3\r\n ['Up', 'Right'], // 4\r\n ['Left', 'Right'], // 5\r\n ['Right'], // 6\r\n ]\r\n break\r\n\r\n default:\r\n break\r\n }\r\n\r\n return faces[index]\r\n } else {\r\n return null\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n {this.state._svgState.polygons.length > 0 &&\r\n this.state._svgState.polygons.map(\r\n (polygon, index) => {\r\n return (\r\n \r\n \r\n \r\n \r\n )\r\n }\r\n )}\r\n\r\n {this.state._svgState.lines.map((line, index) => {\r\n return (\r\n \r\n \r\n this.draggingNodeHandler(line)}\r\n onClick={() => {\r\n this.setState({\r\n _svgState: {\r\n ...this.state\r\n ._svgState,\r\n selectedNode:\r\n line.start,\r\n },\r\n })\r\n }}\r\n cx={line.start.coord[0]}\r\n cy={line.start.coord[1]}\r\n r={line.start.radius}\r\n />\r\n {\r\n this.setState({\r\n _svgState: {\r\n ...this.state\r\n ._svgState,\r\n selectedNode:\r\n line.end,\r\n },\r\n })\r\n }}\r\n cx={line.end.coord[0]}\r\n cy={line.end.coord[1]}\r\n r={line.end.radius}\r\n />\r\n \r\n \r\n )\r\n })}\r\n \r\n \r\n \r\n )\r\n }\r\n\r\n // componentWillMount() {\r\n // if (Object.keys(this.state.points).length !== 0) {\r\n // for (let key in this.state.points) {\r\n // this.addNode(this.state.points[key][0], this.state.points[key][1]);\r\n // }\r\n\r\n // for (let i = 0; i < this.state.lines.length; i++) {\r\n // /////\r\n // const line = this.state.lines[i]; /////////\r\n // this.addLine(line[0][0], line[0][1], line[1][0], line[1][1]);\r\n // }\r\n\r\n // this.addPolygons();\r\n // this.hideBackPoint();\r\n\r\n // DragTracker({\r\n // container: document.querySelector(\"#cube-drawer svg\"),\r\n // selector: \"[data-draggable]\",\r\n // dragOutside: false,\r\n // callback: (node, pos) => {\r\n // const line = {\r\n // coord: [node.getAttribute(\"cx\"), node.getAttribute(\"cy\")]\r\n // };\r\n // this.draggingNodeHandler(line, pos);\r\n // // var event = document.createEvent('CustomEvent')\r\n // // event.initCustomEvent('dragging', true, false, { pos })\r\n // // node.dispatchEvent(event)\r\n // },\r\n // callbackClick: (node, pos) => {\r\n // const line = {\r\n // coord: [node.getAttribute(\"cx\"), node.getAttribute(\"cy\")]\r\n // };\r\n // this.draggingNodeHandler(line, pos);\r\n // // var event = document.createEvent('CustomEvent')\r\n // // event.initCustomEvent('dragging', true, false, { pos })\r\n // // node.dispatchEvent(event)\r\n // }\r\n // });\r\n // }\r\n // }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n)\r\n\r\nexport default PaymentLayout\r\n","import React, { useState } from 'react'\r\nimport {\r\n Button,\r\n Input,\r\n Label,\r\n Modal,\r\n ModalHeader,\r\n ModalBody,\r\n ModalFooter,\r\n} from 'reactstrap'\r\nimport Price from '../../../../components/Payment/Price/Price'\r\nimport Icon from '../../../../components/Icons/Icon'\r\nimport EditIcon from '../../../../assets/img/icons/EDIT ICON.svg'\r\n\r\nimport './CartItem.css'\r\n\r\nconst CartItem = ({\r\n id,\r\n name,\r\n meterage,\r\n discount,\r\n price,\r\n imageUrl,\r\n onRemove,\r\n onEdited,\r\n}) => {\r\n const [isEditing, setIsEditing] = useState(false)\r\n const [currentMeterage, setCurrentMeterage] = useState(meterage)\r\n\r\n const onEditing = () => {\r\n if (isEditing) onEdited(id, currentMeterage)\r\n setIsEditing(!isEditing)\r\n\r\n const input = document.getElementById('meterage' + id)\r\n if (input) input.focus()\r\n }\r\n\r\n const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false)\r\n const toggle = () => setIsDeleteModalVisible(!isDeleteModalVisible)\r\n\r\n return (\r\n \r\n
\r\n
{name} \r\n
\r\n
\r\n
\r\n \r\n {isEditing ? (\r\n 'ذخیره'\r\n ) : (\r\n <>\r\n \r\n \r\n حذف\r\n \r\n
\r\n
\r\n
\r\n
پارچه مورد نیاز
\r\n
setCurrentMeterage(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 toggle()\r\n onRemove(id)\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
prev + curr.price * (curr.meterage ?? 1), 0)} />\r\n \r\n
\r\n
تخفیف \r\n
prev + (curr.discount ?? 0), 0)} />\r\n \r\n
\r\n
قابل پرداخت \r\n
prev + (curr.price * (curr.meterage ?? 1)) - (curr.discount ?? 0), 0)}\r\n size=\"lg\" color=\"secondary\" />\r\n \r\n {children}\r\n
هزینهی ارسال در ادامه بر اساس آدرس، زمان و نحوهی ارسال انتخابی شما محاسبه و به این مبلغ اضافه خواهد شد
\r\n
\r\n
\r\n \r\n
\r\n history.goBack()}\r\n >\r\n ‹ بازگشت\r\n \r\n
\r\n
\r\n \r\n \r\n سبد خرید شما خالی است.\r\n \r\n )}\r\n\r\n {cartItems.map((cart, index) => (\r\n \r\n \r\n \r\n \r\n \r\n \r\n )}\r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n history.goBack()}\r\n >\r\n ‹ بازگشت\r\n \r\n
\r\n {submittingOrder &&
}\r\n
\r\n \r\n \r\n
خریدار \r\n
{getUserFullname()}
\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 !isEmpty(addresses) && \r\n آدرسها \r\n {addresses.map(address => \r\n \r\n \r\n )}\r\n \r\n }\r\n */}\r\n {cartItems.map((cart) => (\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {isSuccessful() ? (\r\n \r\n \r\n \r\n ) : (\r\n \r\n \r\n \r\n )}\r\n
\r\n \r\n {getUserFullname()} عزیز
\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
{receiptNumber}
\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 PaymentResult\r\n","import React, { Suspense } from \"react\";\r\nimport {\r\n BrowserRouter as Router,\r\n Route,\r\n Switch,\r\n Redirect\r\n} from \"react-router-dom\";\r\nimport { PublicRoutes, PrivateRoutes } from \"./configs\";\r\nimport { isAuthenticated } from \"../services/authenticationChecker\";\r\nimport Loading from \"../components/Loading/Loading\";\r\n\r\nconst ConstructRoutes = (routes) =>\r\n routes.map(\r\n ({ path, component: Component, layout: Layout, props: Props, layoutProps }, index) => {\r\n return (\r\n {\r\n const totalProps = { ...props, ...Props };\r\n return (\r\n \r\n \r\n \r\n );\r\n }}\r\n />\r\n );\r\n }\r\n );\r\n\r\nconst Routes = (props) => (\r\n \r\n {ConstructRoutes(isAuthenticated() ? PrivateRoutes : PublicRoutes)}\r\n {isAuthenticated() ? (\r\n \r\n);\r\n\r\nexport default Routes;\r\n","import React from \"react\";\r\n\r\nimport \"material-design-icons/iconfont/material-icons.css\";\r\n\r\nimport Routes from \"./routes/Routes\";\r\n\r\nimport './App.css'\r\n\r\nconst App = () => \r\n \r\n \r\n \r\n \r\n \r\n \r\n ,\r\n document.getElementById('root')\r\n)\r\n\r\nserviceWorker.unregister()\r\n","import * as types from './constants'\r\nimport apiService, { setAxiosHeader } from '../../apiService/apiService'\r\nimport { toPlanProfile, toUserProfile } from '../../mapper/planMapper'\r\nimport { toast } from 'react-toastify'\r\n\r\nexport const registerUser = (\r\n password,\r\n firstName,\r\n lastName,\r\n mobile,\r\n history\r\n) => {\r\n const data = {\r\n Password: password,\r\n Mobile: mobile,\r\n FirstName: firstName,\r\n LastName: lastName,\r\n }\r\n return (dispatch) => {\r\n dispatch({\r\n type: types.REGISTERATION_START,\r\n })\r\n apiService.auth\r\n .register(data)\r\n .then((response) => {\r\n if (response.status == 200) {\r\n dispatch({\r\n type: types.REGISTERATION_SUCCESS,\r\n isRegistrationDone: true,\r\n })\r\n } else {\r\n dispatch({\r\n type: types.REGISTERATION_FAIL,\r\n error:\r\n response.data.message ||\r\n response.data.errors[0].description,\r\n })\r\n }\r\n })\r\n .catch((error) => {\r\n if (error?.response?.status == '403') {\r\n dispatch({\r\n type: types.REGISTERATION_DUPLICATE,\r\n payload: error.response.data,\r\n })\r\n history.push('/signin')\r\n return\r\n }\r\n\r\n let errorMessage = error\r\n if (error?.response?.data) errorMessage = error.response.data\r\n dispatch({\r\n type: types.REGISTERATION_FAIL,\r\n error: errorMessage,\r\n })\r\n })\r\n }\r\n}\r\n\r\nexport const validateUser = (mobile, validationKey, history) => {\r\n const data = {\r\n userName: mobile,\r\n token: validationKey,\r\n }\r\n return (dispatch) => {\r\n dispatch({\r\n type: types.VALIDATION_START,\r\n })\r\n apiService.auth\r\n .validateUser(data)\r\n .then((response) => {\r\n if (response.status == 200) {\r\n const { token } = response.data\r\n localStorage.setItem('token', token)\r\n setAxiosHeader(token)\r\n dispatch({\r\n type: types.VALIDATION_SUCCESS,\r\n payload: token,\r\n })\r\n window.location.href = '/app'\r\n } else {\r\n dispatch({\r\n type: types.VALIDATION_FAIL,\r\n error:\r\n response.data.message ||\r\n response.data.errors[0].description,\r\n })\r\n }\r\n })\r\n .catch((error) => {\r\n let errorMessage = error\r\n if (error?.response?.data) errorMessage = error.response.data\r\n dispatch({\r\n type: types.VALIDATION_FAIL,\r\n error: errorMessage,\r\n })\r\n })\r\n }\r\n}\r\n\r\nexport const getProfile = () => {\r\n return (dispatch) => {\r\n dispatch({\r\n type: types.VALIDATION_START,\r\n })\r\n apiService.profile\r\n .get()\r\n .then(async (response) => {\r\n if (response.status == 200) {\r\n const profile = response.data\r\n const { data: imageUrl } =\r\n await apiService.profile.getProfilePicture()\r\n return dispatch({\r\n type: types.GET_PROFILE_SUCCESS,\r\n payload: { ...toUserProfile(profile), image: imageUrl },\r\n })\r\n } else {\r\n dispatch({\r\n type: types.GET_PROFILE_FAIL,\r\n error:\r\n response.data.message ||\r\n response.data.errors[0].description,\r\n })\r\n }\r\n })\r\n .catch((error) => {\r\n let errorMessage = error\r\n if (error?.response?.data) errorMessage = error.response.data\r\n dispatch({\r\n type: types.GET_PROFILE_FAIL,\r\n error: errorMessage,\r\n })\r\n })\r\n }\r\n}\r\n\r\nexport const uploadProfile = (file) => {\r\n return (dispatch) => {\r\n dispatch({\r\n type: types.UPLOAD_PROFILE_START,\r\n })\r\n\r\n apiService.profile\r\n .uploadProfile(file)\r\n .then((response) => {\r\n if (response.status == 200) {\r\n dispatch({\r\n type: types.UPLOAD_PROFILE_SUCCESS,\r\n })\r\n toast.success('عکس پروفایل شما با موفقیت آپلود شد')\r\n\r\n return dispatch(getProfile())\r\n } else {\r\n dispatch({\r\n type: types.UPLOAD_PROFILE_FAIL,\r\n error:\r\n response.data.message ||\r\n response.data.errors[0].description,\r\n })\r\n }\r\n })\r\n .catch((error) => {\r\n let errorMessage = error\r\n if (error?.response?.data) errorMessage = error.response.data\r\n toast.error(\r\n 'مشکلی در آپلود عکس پروفایل بوجود آمد، لطفا دوباره تلاش کنید'\r\n )\r\n\r\n dispatch({\r\n type: types.UPLOAD_PROFILE_FAIL,\r\n error: errorMessage,\r\n })\r\n })\r\n }\r\n}\r\n\r\nexport const changeName = (firstName, lastName) => {\r\n return (dispatch) => {\r\n dispatch({\r\n type: types.CHANGE_NAME_START,\r\n })\r\n\r\n apiService.profile\r\n .changeName(firstName, lastName)\r\n .then((response) => {\r\n dispatch({\r\n type: types.CHANGE_NAME_SUCCESS,\r\n })\r\n toast.success('نام با موفقیت تغییر یافت')\r\n return dispatch(getProfile())\r\n })\r\n .catch((error) => {\r\n let errorMessage = error\r\n if (error?.response?.data) errorMessage = error.response.data\r\n toast.error('تغییر نام با مشکل مواجه شد، لطفا دوباره تلاش کنید')\r\n dispatch({\r\n type: types.CHANGE_NAME_FAIL,\r\n error: errorMessage,\r\n })\r\n })\r\n }\r\n}\r\n\r\nexport const uploadPlan = (dataUrl) => {\r\n return (dispatch, getState) => {\r\n const fabricIds =\r\n getState().tools.roomInDesignStage?.selectedPrespectives?.map(\r\n (q) => q.material.id\r\n )\r\n const roomId = getState().tools.roomInDesignStage?.id\r\n\r\n dispatch({\r\n type: types.UPLOAD_PLAN_START,\r\n })\r\n\r\n if (!fabricIds || fabricIds.length === 0) {\r\n return dispatch({\r\n type: types.UPLOAD_PLAN_FAIL,\r\n error: null,\r\n })\r\n }\r\n\r\n apiService.profile\r\n .uploadPlan(dataUrl, roomId, fabricIds)\r\n .then((response) => {\r\n if (response.status == 200) {\r\n dispatch({\r\n type: types.UPLOAD_PLAN_SUCCESS,\r\n })\r\n return dispatch(getProfile())\r\n } else {\r\n dispatch({\r\n type: types.UPLOAD_PLAN_FAIL,\r\n error:\r\n response.data.message ||\r\n response.data.errors[0].description,\r\n })\r\n }\r\n })\r\n .catch((error) => {\r\n let errorMessage = error\r\n if (error?.response?.data) errorMessage = error.response.data\r\n dispatch({\r\n type: types.UPLOAD_PLAN_FAIL,\r\n error: errorMessage,\r\n })\r\n })\r\n }\r\n}\r\n","module.exports = __webpack_public_path__ + \"static/media/SHOPPING.7dc322a0.svg\";","module.exports = __webpack_public_path__ + \"static/media/logo-white.f083a363.svg\";","module.exports = __webpack_public_path__ + \"static/media/information.a0026945.svg\";","import {\r\n createPatternFromImage,\r\n createPatternFromImageForDrawing,\r\n} from './fileHelper'\r\n\r\nconst defultimgInitialWidth = 100\r\nvar imgInitialWidth = defultimgInitialWidth\r\nconst imgFinalWidth = 800\r\nconst opacity = 0.7\r\n\r\nconst _defaultOptions = {\r\n skewSign: 1,\r\n width: null,\r\n height: null,\r\n pathData: null,\r\n points: [\r\n [97, 158],\r\n [432, 102],\r\n [875, 159],\r\n [576, 211],\r\n [879, 398],\r\n [576, 491],\r\n ],\r\n breakRatio: 1,\r\n corner_points: [\r\n [0, 0],\r\n [0, 0],\r\n [0, 0],\r\n [0, 0],\r\n ],\r\n controls: [],\r\n triangles: [],\r\n skewAngle: Math.PI / 4,\r\n showFrame: true,\r\n subs: (7 * 8) / 2,\r\n divs: (7 * 8) / 2,\r\n scaleFactor: 4,\r\n dirtyTriangles: true,\r\n canvas: null,\r\n image: null,\r\n context: null,\r\n}\r\n\r\nlet options = {\r\n ..._defaultOptions,\r\n}\r\n\r\nexport const warpOnCube = (\r\n pts,\r\n mode,\r\n imgSrc,\r\n imgWidth,\r\n imgHeight,\r\n pathData,\r\n { zoom, offsetH, offsetV },\r\n { cornerPoints, breakRatio, skewAngle }\r\n) =>\r\n new Promise((resolve, reject) => {\r\n options = { ..._defaultOptions }\r\n\r\n options.width = imgWidth\r\n options.height = imgHeight\r\n options.pathData = pathData\r\n options.corner_points = cornerPoints\r\n options.breakRatio = breakRatio\r\n\r\n imgInitialWidth = (zoom / 100) * defultimgInitialWidth\r\n\r\n options.points = pts\r\n options.mode = mode\r\n options.skewSign = mode == 4 ? -1 : 1\r\n\r\n options.skewAngle = skewAngle\r\n\r\n options.image = new Image()\r\n options.image.crossOrigin = 'Anonymous'\r\n\r\n options.image.onload = () =>\r\n draw(() => {\r\n const { canvas } = options\r\n let img = canvas.toDataURL('image/png')\r\n\r\n options.context.clip(new Path2D(options.pathData))\r\n resolve(img)\r\n })\r\n\r\n createPatternFromImageForDrawing(\r\n imgSrc,\r\n imgInitialWidth,\r\n imgFinalWidth,\r\n offsetH,\r\n offsetV\r\n ).then((imgBase64) => {\r\n options.image.setAttribute('src', imgBase64)\r\n })\r\n\r\n options.canvas = document.createElement('canvas')\r\n\r\n options.canvas.width = imgWidth\r\n options.canvas.height = imgHeight\r\n\r\n document.body.appendChild(options.canvas)\r\n options.context = options.canvas.getContext('2d')\r\n\r\n options.context.clearRect(\r\n 0,\r\n 0,\r\n options.canvas.width,\r\n options.canvas.height\r\n )\r\n })\r\n\r\nexport const warpOnCubeWithControls = (\r\n canvas,\r\n pts,\r\n mode,\r\n imgSrc,\r\n imgWidth,\r\n imgHeight,\r\n pathData,\r\n cornerPoints,\r\n breakRatio,\r\n skewAngle,\r\n isNew,\r\n callback\r\n) => {\r\n options = { ..._defaultOptions }\r\n\r\n options.width = imgWidth\r\n options.height = imgHeight\r\n options.pathData = pathData\r\n if (cornerPoints) options.corner_points = cornerPoints\r\n\r\n options.points = pts\r\n options.mode = mode\r\n options.skewSign = mode == 4 ? -1 : 1\r\n\r\n options.skewAngle = skewAngle\r\n if (mode != 1) calcLengthAndAngles(breakRatio)\r\n if (isNew) stretchPoints()\r\n\r\n options.image = new Image()\r\n options.image.crossOrigin = 'Anonymous'\r\n\r\n options.image.onload = () =>\r\n draw(() => {\r\n callback({\r\n points: options.points,\r\n cornerPoints: options.corner_points,\r\n breakRatio: options.breakRatio,\r\n })\r\n })\r\n\r\n createPatternFromImage(imgSrc, imgInitialWidth, imgFinalWidth).then(\r\n (imgBase64) => {\r\n options.image.setAttribute('src', imgBase64)\r\n }\r\n )\r\n\r\n options.canvas = canvas\r\n options.canvas.width = imgWidth\r\n options.canvas.height = imgHeight\r\n\r\n options.context = options.canvas.getContext('2d')\r\n\r\n options.context.clearRect(0, 0, options.canvas.width, options.canvas.height)\r\n options.context.clip(new Path2D(options.pathData))\r\n\r\n let { controls, points } = options\r\n\r\n controls = []\r\n for (let i = 0; i < 6; i++) {\r\n let control = document.createElement('div')\r\n control.setAttribute('data-node', i)\r\n control.innerText = i + 1\r\n control.classList.add('node')\r\n canvas.parentNode.insertBefore(control, canvas.nextSibling)\r\n controls.push(control)\r\n }\r\n\r\n controls[0].style.left = points[0][0] + 'px'\r\n controls[0].style.top = points[0][1] + 'px'\r\n\r\n controls[1].style.left = points[1][0] + 'px'\r\n controls[1].style.top = points[1][1] + 'px'\r\n\r\n controls[2].style.left = points[2][0] + 'px'\r\n controls[2].style.top = points[2][1] + 'px'\r\n\r\n controls[3].style.left = points[3][0] + 'px'\r\n controls[3].style.top = points[3][1] + 'px'\r\n\r\n if (mode == 1) {\r\n controls[2].style.display = 'none'\r\n controls[3].style.display = 'none'\r\n }\r\n\r\n controls[4].style.left = points[4][0] + 'px'\r\n controls[4].style.top = points[4][1] + 'px'\r\n\r\n controls[5].style.left = points[5][0] + 'px'\r\n controls[5].style.top = points[5][1] + 'px'\r\n\r\n options.controls = controls\r\n options.canvas = canvas\r\n options.context = options.context\r\n}\r\n\r\nexport const updateCubeByNodes = (e, node, callback) => {\r\n let { points, skewSign, mode } = options\r\n options.dirtyTriangles = true\r\n\r\n let nodeIndex = parseInt(node.getAttribute('data-node'))\r\n\r\n if (nodeIndex >= 6) return\r\n\r\n let ratio = 0\r\n\r\n switch (nodeIndex) {\r\n case 0:\r\n case 3:\r\n case 5:\r\n let l03 = lengthOf(0, 3)\r\n let l05 = lengthOf(0, 5)\r\n ratio = l03 / l05\r\n break\r\n case 1:\r\n case 2:\r\n case 4:\r\n let l12 = lengthOf(1, 2)\r\n let l14 = lengthOf(1, 4)\r\n ratio = l12 / l14\r\n break\r\n default:\r\n break\r\n }\r\n\r\n let dx = e.pageX - points[nodeIndex][0]\r\n let dy = e.pageY - points[nodeIndex][1]\r\n let x = e.pageX\r\n let y = e.pageY\r\n\r\n //#region Block Extra Y Movement\r\n if (nodeIndex == 0) {\r\n if (y >= points[5][1]) {\r\n y = points[5][1]\r\n dy = 0\r\n }\r\n }\r\n\r\n if (nodeIndex == 1) {\r\n if (y >= points[4][1]) {\r\n y = points[4][1]\r\n dy = 0\r\n }\r\n }\r\n\r\n if (nodeIndex == 5) {\r\n if (y <= points[0][1]) {\r\n y = points[0][1]\r\n dy = 0\r\n }\r\n }\r\n\r\n if (nodeIndex == 4) {\r\n if (y <= points[1][1]) {\r\n y = points[1][1]\r\n dy = 0\r\n }\r\n }\r\n //#endregion\r\n\r\n //#region Block Perspective Left Extra X Movement\r\n\r\n if (mode == 3) {\r\n if (nodeIndex == 5) {\r\n if (x <= points[0][0] + 5) {\r\n x = points[0][0] + 5\r\n dx = 0\r\n dy = 0\r\n }\r\n }\r\n\r\n if (nodeIndex == 4) {\r\n if (x <= points[1][0] + 5) {\r\n x = points[1][0] + 5\r\n dx = 0\r\n dy = 0\r\n }\r\n }\r\n }\r\n //#endregion\r\n\r\n //#region Block Perspective Right Extra X Movement\r\n\r\n if (mode == 4) {\r\n if (nodeIndex == 5) {\r\n if (x >= points[0][0] - 5) {\r\n x = points[0][0] - 5\r\n dx = 0\r\n dy = 0\r\n }\r\n }\r\n\r\n if (nodeIndex == 4) {\r\n if (x >= points[1][0] - 5) {\r\n x = points[1][0] - 5\r\n dx = 0\r\n dy = 0\r\n }\r\n }\r\n }\r\n\r\n //#endregion\r\n\r\n //#region Block Perspective Front Extra X Movement\r\n\r\n if (mode == 2) {\r\n if (nodeIndex == 5) {\r\n if (x <= points[0][0] + 5) {\r\n x = points[0][0] + 5\r\n dx = 0\r\n dy = 0\r\n }\r\n }\r\n\r\n if (nodeIndex == 4) {\r\n if (x >= points[1][0] - 5) {\r\n x = points[1][0] - 5\r\n dx = 0\r\n dy = 0\r\n }\r\n }\r\n }\r\n\r\n //#endregion\r\n\r\n if (nodeIndex == 3 || nodeIndex == 2) {\r\n let alpha = 1\r\n\r\n if (nodeIndex == 3) {\r\n alpha = Math.atan2(\r\n points[5][1] - points[0][1],\r\n points[5][0] - points[0][0]\r\n )\r\n } else\r\n alpha = Math.atan2(\r\n points[4][1] - points[1][1],\r\n points[4][0] - points[1][0]\r\n )\r\n\r\n x = points[nodeIndex][0] + dx\r\n y = points[nodeIndex][1] + dx * Math.tan(alpha)\r\n\r\n if (nodeIndex == 3) {\r\n if (skewSign > 0) {\r\n if (x < points[0][0]) {\r\n x = points[0][0]\r\n }\r\n if (x > points[5][0]) {\r\n x = points[5][0]\r\n }\r\n if (y < points[0][1]) {\r\n y = points[0][1]\r\n }\r\n if (y > points[5][1]) {\r\n y = points[5][1]\r\n }\r\n } else {\r\n if (x > points[0][0]) {\r\n x = points[0][0]\r\n }\r\n if (x < points[5][0]) {\r\n x = points[5][0]\r\n }\r\n if (y < points[0][1]) {\r\n y = points[0][1]\r\n }\r\n if (y > points[5][1]) {\r\n y = points[5][1]\r\n }\r\n }\r\n }\r\n\r\n if (nodeIndex == 2) {\r\n if (skewSign > 0 && mode != 2) {\r\n if (x < points[1][0]) {\r\n x = points[1][0]\r\n }\r\n if (x > points[4][0]) {\r\n x = points[4][0]\r\n }\r\n\r\n if (y < points[1][1]) {\r\n y = points[1][1]\r\n }\r\n if (y > points[4][1]) {\r\n y = points[4][1]\r\n }\r\n } else {\r\n if (x > points[1][0]) {\r\n x = points[1][0]\r\n }\r\n if (x < points[4][0]) {\r\n x = points[4][0]\r\n }\r\n\r\n if (y < points[1][1]) {\r\n y = points[1][1]\r\n }\r\n if (y > points[4][1]) {\r\n y = points[4][1]\r\n }\r\n }\r\n }\r\n }\r\n\r\n node.style.left = x + 'px'\r\n node.style.top = y + 'px'\r\n\r\n points[nodeIndex] = [x, y]\r\n\r\n updateSameLinePoints(nodeIndex, dx, dy, ratio)\r\n\r\n updateCornerPoints(nodeIndex, dx, dy, ratio)\r\n\r\n calcBreakLine(nodeIndex)\r\n\r\n draw(() =>\r\n callback({\r\n points: options.points,\r\n cornerPoints: options.corner_points,\r\n breakRatio: options.breakRatio,\r\n })\r\n )\r\n}\r\n\r\nexport const updateCubeSkewAngle = (skewAngle, callback) => {\r\n options.skewAngle = skewAngle\r\n\r\n draw(() =>\r\n callback({\r\n points: options.points,\r\n cornerPoints: options.corner_points,\r\n breakRatio: options.breakRatio,\r\n })\r\n )\r\n}\r\n\r\nconst calcLengthAndAngles = (breakRatio = null) => {\r\n const { skewSign, points } = options\r\n\r\n let deviation = Math.abs(Math.abs(angleOf(3, 2)) - Math.abs(angleOf(1, 2)))\r\n\r\n if (skewSign < 0) {\r\n const skewAngle =\r\n Math.PI / 4 -\r\n (Math.abs(angleOf(3, 2)) > Math.PI / 2\r\n ? Math.PI - Math.abs(angleOf(3, 2))\r\n : Math.abs(angleOf(3, 2)))\r\n // options.skewAngle = skewAngle - deviation\r\n } else {\r\n const skewAngle = Math.PI / 4\r\n // Math.PI / 4 +\r\n // (Math.abs(angleOf(3, 2)) > Math.PI / 2\r\n // ? Math.PI - Math.abs(angleOf(3, 2))\r\n // : Math.abs(angleOf(3, 2)))\r\n // options.skewAngle = skewAngle + deviation\r\n }\r\n\r\n calcBreakLine(null, breakRatio)\r\n}\r\n\r\nconst calcBreakLine = (nodeIndex = 3, breakRatio) => {\r\n if (breakRatio) {\r\n options.breakRatio = breakRatio\r\n return\r\n }\r\n\r\n const { subs } = options\r\n\r\n options.breakRatio = 0\r\n\r\n if (nodeIndex == 3)\r\n options.breakRatio = lengthOf(0, 3) / (lengthOf(5, 3) + lengthOf(0, 3))\r\n else options.breakRatio = lengthOf(1, 2) / (lengthOf(4, 2) + lengthOf(1, 2))\r\n\r\n options.breakRatio = Math.round(subs * options.breakRatio)\r\n}\r\n\r\nconst stretchPoints = () => {\r\n const baseLength = 200\r\n\r\n let d0_3 = lengthOf(0, 3)\r\n let d3_5 = lengthOf(3, 5)\r\n let d0_1 = lengthOf(0, 1)\r\n let d2_3 = lengthOf(2, 3)\r\n let d2_4 = lengthOf(2, 4)\r\n let d1_2 = lengthOf(1, 2)\r\n\r\n const targetAngle1 = -(Math.PI / 2 + angleOf(0, 3))\r\n const targetAngle2 = -(Math.PI / 2 + angleOf(1, 2))\r\n\r\n // extend shape with amount of break point (cube edge) points 3, 4\r\n const { points, corner_points, skewSign, mode } = options\r\n let { scaleFactor } = options\r\n\r\n let length = lengthOf(3, 5)\r\n points[5][0] = points[3][0] + length * Math.sin(targetAngle1)\r\n points[5][1] = points[3][1] + length * Math.cos(targetAngle1)\r\n\r\n length = lengthOf(2, 4)\r\n points[4][0] = points[2][0] + length * Math.sin(targetAngle2)\r\n points[4][1] = points[2][1] + length * Math.cos(targetAngle2)\r\n\r\n if (d3_5 == 0) d3_5 = d0_3\r\n if (d2_4 == 0) d2_4 = d1_2\r\n\r\n const maxLength = Math.max(...[d0_3, d3_5, d0_1, d2_3, d2_4, d1_2])\r\n\r\n d0_3 = (d0_3 / maxLength) * baseLength\r\n d3_5 = (d3_5 / maxLength) * baseLength\r\n d0_1 = (d0_1 / maxLength) * baseLength\r\n d2_3 = (d2_3 / maxLength) * baseLength\r\n d2_4 = (d2_4 / maxLength) * baseLength\r\n d1_2 = (d1_2 / maxLength) * baseLength\r\n\r\n if (mode == 1) scaleFactor /= 2\r\n\r\n corner_points[0][0] =\r\n points[0][0] +\r\n (scaleFactor * d0_3 * Math.cos(angleOf(0, 3)) +\r\n scaleFactor * d0_1 * Math.cos(angleOf(0, 1)))\r\n corner_points[0][1] =\r\n points[0][1] +\r\n (scaleFactor * d0_3 * Math.sin(angleOf(0, 3)) +\r\n scaleFactor * d0_1 * Math.sin(angleOf(0, 1)))\r\n\r\n corner_points[3][0] =\r\n points[5][0] +\r\n (scaleFactor * d2_3 * Math.cos(angleOf(3, 2)) -\r\n scaleFactor * d3_5 * Math.cos(angleOf(0, 3)))\r\n corner_points[3][1] =\r\n points[5][1] +\r\n (scaleFactor * d2_3 * Math.sin(angleOf(3, 2)) -\r\n scaleFactor * d3_5 * Math.sin(angleOf(0, 3)))\r\n\r\n corner_points[1][0] =\r\n points[1][0] +\r\n (scaleFactor * d1_2 * Math.cos(angleOf(1, 2)) -\r\n scaleFactor * d0_1 * Math.cos(angleOf(0, 1)))\r\n corner_points[1][1] =\r\n points[1][1] +\r\n (scaleFactor * d1_2 * Math.sin(angleOf(1, 2)) -\r\n scaleFactor * d0_1 * Math.sin(angleOf(0, 1)))\r\n\r\n corner_points[2][0] =\r\n points[4][0] +\r\n (-scaleFactor * d2_4 * Math.cos(angleOf(1, 2)) -\r\n scaleFactor * d2_3 * Math.cos(angleOf(3, 2)))\r\n corner_points[2][1] =\r\n points[4][1] +\r\n (-scaleFactor * d2_4 * Math.sin(angleOf(1, 2)) -\r\n scaleFactor * d2_3 * Math.sin(angleOf(3, 2)))\r\n\r\n options.corner_points = corner_points\r\n options.points = points\r\n}\r\n\r\nconst updateCornerPoints = (nodeIndex, dx, dy, ratio) => {\r\n const { corner_points, scaleFactor } = options\r\n\r\n switch (nodeIndex) {\r\n case 0: //corner point index of 3\r\n corner_points[0][0] += dx * scaleFactor\r\n corner_points[0][1] += dy * scaleFactor\r\n break\r\n case 1: //corner point index of 3\r\n corner_points[1][0] += dx * scaleFactor\r\n corner_points[1][1] += dy * scaleFactor\r\n break\r\n case 4: //corner point index of 3\r\n corner_points[2][0] += dx * scaleFactor\r\n corner_points[2][1] += dy * scaleFactor\r\n break\r\n case 5: //corner point index of 3\r\n corner_points[3][0] += dx * scaleFactor\r\n corner_points[3][1] += dy * scaleFactor\r\n break\r\n\r\n default:\r\n break\r\n }\r\n options.corner_points = corner_points\r\n}\r\n\r\nconst updateSameLinePoints = (nodeIndex, dx, dy, ratio) => {\r\n let { points, controls } = options\r\n let deltaX, deltaY, alpha\r\n switch (nodeIndex) {\r\n case 0:\r\n case 5:\r\n deltaX = ratio * dx\r\n deltaY = ratio * dy\r\n\r\n points[3][0] += deltaX\r\n points[3][1] += deltaY\r\n\r\n controls[3].style.left = points[3][0] + 'px'\r\n controls[3].style.top = points[3][1] + 'px'\r\n break\r\n case 1:\r\n case 4:\r\n deltaX = ratio * dx\r\n deltaY = ratio * dy\r\n\r\n points[2][0] += deltaX\r\n points[2][1] += deltaY\r\n\r\n controls[2].style.left = points[2][0] + 'px'\r\n controls[2].style.top = points[2][1] + 'px'\r\n break\r\n\r\n case 2:\r\n alpha = angleOf(5, 0)\r\n points[3][0] =\r\n points[0][0] + ratio * lengthOf(0, 5) * Math.cos(alpha)\r\n points[3][1] =\r\n points[0][1] + ratio * lengthOf(0, 5) * Math.sin(alpha)\r\n controls[3].style.left = points[3][0] + 'px'\r\n controls[3].style.top = points[3][1] + 'px'\r\n break\r\n\r\n case 3:\r\n alpha = angleOf(4, 1)\r\n points[2][0] =\r\n points[1][0] + ratio * lengthOf(1, 4) * Math.cos(alpha)\r\n points[2][1] =\r\n points[1][1] + ratio * lengthOf(1, 4) * Math.sin(alpha)\r\n controls[2].style.left = points[2][0] + 'px'\r\n controls[2].style.top = points[2][1] + 'px'\r\n\r\n break\r\n default:\r\n break\r\n }\r\n\r\n options.points = points\r\n options.controls = controls\r\n}\r\n\r\nconst createPlane = (imgSrc) => {\r\n let { canvas, controls, points, mode } = options\r\n\r\n let image = new Image()\r\n image.onload = () => {\r\n draw()\r\n }\r\n\r\n createPatternFromImage(imgSrc, 200, 800).then((imgBase64) => {\r\n image.setAttribute('src', imgBase64)\r\n })\r\n\r\n canvas = document.getElementById('dynamic-cube-canvas')\r\n canvas.setAttribute('width', options.width)\r\n canvas.setAttribute('height', options.height)\r\n\r\n let context = canvas.getContext('2d')\r\n context.clearRect(0, 0, canvas.width, canvas.height)\r\n context.clip(new Path2D(options.pathData))\r\n\r\n controls = []\r\n for (let i = 0; i < 6; i++) {\r\n let control = document.createElement('div')\r\n control.setAttribute('data-node', i)\r\n control.innerText = i\r\n control.classList.add('node')\r\n canvas.parentNode.insertBefore(control, canvas.nextSibling)\r\n controls.push(control)\r\n }\r\n\r\n controls[0].style.left = points[0][0] + 'px'\r\n controls[0].style.top = points[0][1] + 'px'\r\n\r\n controls[1].style.left = points[1][0] + 'px'\r\n controls[1].style.top = points[1][1] + 'px'\r\n\r\n controls[2].style.left = points[2][0] + 'px'\r\n controls[2].style.top = points[2][1] + 'px'\r\n\r\n controls[3].style.left = points[3][0] + 'px'\r\n controls[3].style.top = points[3][1] + 'px'\r\n\r\n if (mode == 1) {\r\n controls[2].style.display = 'none'\r\n controls[3].style.display = 'none'\r\n }\r\n\r\n controls[4].style.left = points[4][0] + 'px'\r\n controls[4].style.top = points[4][1] + 'px'\r\n\r\n controls[5].style.left = points[5][0] + 'px'\r\n controls[5].style.top = points[5][1] + 'px'\r\n\r\n options.image = image\r\n options.controls = controls\r\n options.canvas = canvas\r\n options.context = context\r\n}\r\n\r\nconst renderPlane = (tri, number) => {\r\n const { context, showFrame, image } = options\r\n\r\n options.context = context\r\n\r\n if (image) {\r\n drawTriangle(\r\n context,\r\n image,\r\n tri.p0.x,\r\n tri.p0.y,\r\n tri.p1.x,\r\n tri.p1.y,\r\n tri.p2.x,\r\n tri.p2.y,\r\n tri.t0.u,\r\n tri.t0.v,\r\n tri.t1.u,\r\n tri.t1.v,\r\n tri.t2.u,\r\n tri.t2.v,\r\n number\r\n )\r\n }\r\n\r\n if (showFrame) {\r\n const left = (tri.p0.x + tri.p1.x + tri.p2.x) / 3\r\n const top = (tri.p0.y + tri.p1.y + tri.p2.y) / 3\r\n const color = context.getImageData(left, top, 1, 1)\r\n context.strokeStyle = `rgba(${color.data[0]},${color.data[1]},${color.data[2]},0.2)`\r\n // context.strokeStyle = `rgba(127,76,77,0.2)`\r\n context.beginPath()\r\n context.moveTo(tri.p0.x, tri.p0.y)\r\n context.lineTo(tri.p1.x, tri.p1.y)\r\n context.lineTo(tri.p2.x, tri.p2.y)\r\n context.lineTo(tri.p0.x, tri.p0.y)\r\n context.stroke()\r\n context.closePath()\r\n }\r\n}\r\n\r\nconst draw = (callback) => {\r\n const { canvas, context, dirtyTriangles } = options\r\n let { triangles } = options\r\n\r\n context.clearRect(0, 0, window.innerWidth, window.innerHeight)\r\n if (dirtyTriangles) {\r\n options.dirtyTriangles = false\r\n triangles = calculateGeometry()\r\n options.triangles = triangles\r\n }\r\n\r\n let k = 0\r\n for (const triangle of triangles) {\r\n k++\r\n renderPlane(triangle, k)\r\n }\r\n\r\n if (callback) callback()\r\n}\r\n\r\nconst calculateGeometry = () => {\r\n const { corner_points, points, image, subs, divs } = options\r\n // clear triangles out\r\n let triangles = []\r\n\r\n let r = 12\r\n // generate subdivision\r\n\r\n let p = corner_points\r\n\r\n let p1 = new Point(p[0][0] + r, p[0][1] + r)\r\n let p2 = new Point(p[1][0] + r, p[1][1] + r)\r\n\r\n // let p3 = new Point(p[4][0] + r, p[4][1] + r)\r\n // let p4 = new Point(p[5][0] + r, p[5][1] + r)\r\n\r\n let p3 = new Point(p[2][0] + r, p[2][1] + r)\r\n let p4 = new Point(p[3][0] + r, p[3][1] + r)\r\n\r\n let dx1 = p4.x - p1.x\r\n let dy1 = p4.y - p1.y\r\n let dx2 = p3.x - p2.x\r\n let dy2 = p3.y - p2.y\r\n\r\n let imgW = image.naturalWidth\r\n let imgH = image.naturalHeight\r\n\r\n for (let sub = 0; sub < subs; ++sub) {\r\n let curRow = sub / subs\r\n let nextRow = (sub + 1) / subs\r\n\r\n let curRowX1 = p1.x + dx1 * curRow\r\n let curRowY1 = p1.y + dy1 * curRow\r\n\r\n let curRowX2 = p2.x + dx2 * curRow\r\n let curRowY2 = p2.y + dy2 * curRow\r\n\r\n let nextRowX1 = p1.x + dx1 * nextRow\r\n let nextRowY1 = p1.y + dy1 * nextRow\r\n\r\n let nextRowX2 = p2.x + dx2 * nextRow\r\n let nextRowY2 = p2.y + dy2 * nextRow\r\n\r\n for (let div = 0; div < divs; ++div) {\r\n let curCol = div / divs\r\n let nextCol = (div + 1) / divs\r\n\r\n let dCurX = curRowX2 - curRowX1\r\n let dCurY = curRowY2 - curRowY1\r\n let dNextX = nextRowX2 - nextRowX1\r\n let dNextY = nextRowY2 - nextRowY1\r\n\r\n let p1x = curRowX1 + dCurX * curCol\r\n let p1y = curRowY1 + dCurY * curCol\r\n\r\n let p2x = curRowX1 + (curRowX2 - curRowX1) * nextCol\r\n let p2y = curRowY1 + (curRowY2 - curRowY1) * nextCol\r\n\r\n let p3x = nextRowX1 + dNextX * nextCol\r\n let p3y = nextRowY1 + dNextY * nextCol\r\n\r\n let p4x = nextRowX1 + dNextX * curCol\r\n let p4y = nextRowY1 + dNextY * curCol\r\n\r\n let u1 = curCol * imgW\r\n let u2 = nextCol * imgW\r\n let v1 = curRow * imgH\r\n let v2 = nextRow * imgH\r\n\r\n let triangle1 = new Triangle(\r\n new Point(p1x, p1y),\r\n new Point(p3x, p3y),\r\n new Point(p4x, p4y),\r\n new TextCoord(u1, v1),\r\n new TextCoord(u2, v2),\r\n new TextCoord(u1, v2)\r\n )\r\n\r\n let triangle2 = new Triangle(\r\n new Point(p1x, p1y),\r\n new Point(p2x, p2y),\r\n new Point(p3x, p3y),\r\n new TextCoord(u1, v1),\r\n new TextCoord(u2, v1),\r\n new TextCoord(u2, v2)\r\n )\r\n\r\n triangles.push(triangle1)\r\n triangles.push(triangle2)\r\n }\r\n }\r\n\r\n return triangles\r\n}\r\n\r\nconst drawTriangle = (\r\n ctx,\r\n img,\r\n x0,\r\n y0,\r\n x1,\r\n y1,\r\n x2,\r\n y2,\r\n sx0,\r\n sy0,\r\n sx1,\r\n sy1,\r\n sx2,\r\n sy2,\r\n number\r\n) => {\r\n const { skewAngle, skewSign, subs, divs, breakRatio, mode } = options\r\n ctx.save()\r\n\r\n let denom = sx0 * (sy2 - sy1) - sx1 * sy2 + sx2 * sy1 + (sx1 - sx2) * sy0\r\n if (denom == 0) {\r\n return\r\n }\r\n\r\n let m11 =\r\n -(sy0 * (x2 - x1) - sy1 * x2 + sy2 * x1 + (sy1 - sy2) * x0) / denom\r\n let m12 = (sy1 * y2 + sy0 * (y1 - y2) - sy2 * y1 + (sy2 - sy1) * y0) / denom\r\n let m21 = (sx0 * (x2 - x1) - sx1 * x2 + sx2 * x1 + (sx1 - sx2) * x0) / denom\r\n let m22 =\r\n -(sx1 * y2 + sx0 * (y1 - y2) - sx2 * y1 + (sx2 - sx1) * y0) / denom\r\n let dx =\r\n (sx0 * (sy2 * x1 - sy1 * x2) +\r\n sy0 * (sx1 * x2 - sx2 * x1) +\r\n (sx2 * sy1 - sx1 * sy2) * x0) /\r\n denom\r\n let dy =\r\n (sx0 * (sy2 * y1 - sy1 * y2) +\r\n sy0 * (sx1 * y2 - sx2 * y1) +\r\n (sx2 * sy1 - sx1 * sy2) * y0) /\r\n denom\r\n\r\n ctx.beginPath()\r\n ctx.moveTo(x0, y0)\r\n ctx.lineTo(x1, y1)\r\n ctx.lineTo(x2, y2)\r\n ctx.closePath()\r\n\r\n ctx.clip()\r\n\r\n ctx.transform(m11, m12, m21, m22, dx, dy)\r\n\r\n ctx.globalAlpha = opacity\r\n\r\n if (mode == 1 || number <= subs * 2 * breakRatio) {\r\n ctx.drawImage(img, 0, 0)\r\n } else {\r\n // calc the 45 degree skew angle needed by ctx.transform\r\n // move to the bottom of the original image\r\n ctx.translate(0, (breakRatio / subs) * img.height)\r\n ctx.scale(1, -1)\r\n ctx.transform(1, 0, skewSign * Math.tan(skewAngle), 1, 0, 0)\r\n //ctx.scale(1, 1.50);\r\n\r\n // flip reflected image\r\n ctx.rotate(Math.PI)\r\n ctx.scale(-1, 1)\r\n\r\n // draw the reflected image\r\n ctx.drawImage(img, 0, -((breakRatio / subs) * img.height))\r\n }\r\n\r\n ctx.restore()\r\n}\r\n\r\nconst angleOf = (fromIndex, toIndex) => {\r\n const { points } = options\r\n return Math.atan2(\r\n points[fromIndex][1] - points[toIndex][1],\r\n points[fromIndex][0] - points[toIndex][0]\r\n )\r\n}\r\n\r\nconst lengthOf = (fromIndex, toIndex) => {\r\n const { points } = options\r\n return Math.sqrt(\r\n Math.pow(points[fromIndex][0] - points[toIndex][0], 2) +\r\n Math.pow(points[fromIndex][1] - points[toIndex][1], 2)\r\n )\r\n}\r\n\r\n// point class\r\n\r\nexport const Point = function (x, y) {\r\n this.x = x ? x : 0\r\n this.y = y ? y : 0\r\n}\r\n\r\nPoint.prototype.length = function (point) {\r\n point = point ? point : new Point()\r\n let xs = 0,\r\n ys = 0\r\n xs = point.x - this.x\r\n xs = xs * xs\r\n\r\n ys = point.y - this.y\r\n ys = ys * ys\r\n return Math.sqrt(xs + ys)\r\n}\r\n\r\nexport const TextCoord = function (u, v) {\r\n this.u = u ? u : 0\r\n this.v = v ? v : 0\r\n}\r\n\r\nexport const Triangle = function (p0, p1, p2, t0, t1, t2) {\r\n this.p0 = p0\r\n this.p1 = p1\r\n this.p2 = p2\r\n\r\n this.t0 = t0\r\n this.t1 = t1\r\n this.t2 = t2\r\n}\r\n","export const INITIAL_IMAGE_DATA = \"INITIAL_IMAGE_DATA\";\r\nexport const SAVE_IMAGE_DATA = \"SAVE_IMAGE_DATA\";\r\n"],"sourceRoot":""} 
\r\n \r\n 
\r\n \r\n 
\r\n 
\r\n 
\r\n 
\r\n 
\r\n 
\r\n