\n { MAT_COLORS_ORDER.map((color) => (\n (matColors.includes(color) ? (\n
\n \n );\n }\n return null;\n }, [matte, matColors, selectedMatColor, selectedMount]);\n\n const renderFillBleed = useMemo(() => {\n if (fullBleed) {\n return (\n \n { fltn && (\n
\n \n );\n }\n return null;\n }, [dckl, fltn, selectedMount, matColors, selectedMatColor]);\n\n return (\n \n );\n};\n\nMounts.propTypes = {\n onSelect: T.func.isRequired,\n selectedMount: T.oneOf(VALID_MOUNT_KINDS),\n selectedMatColor: T.string,\n paperId: T.oneOfType([T.number, T.string]).isRequired,\n matte: T.bool,\n fullBleed: T.bool,\n dckl: T.bool,\n fltn: T.bool,\n matColors: T.arrayOf(T.string),\n matColorsRgb: T.arrayOf(T.arrayOf(T.number))\n};\n\nexport default Mounts;\n","import React from 'react';\nimport T from 'prop-types';\nimport * as Classes from './styles.module.scss';\n\nconst Radio = (props) => (\n \n
\n);\nRadio.propTypes = {\n checked: T.bool,\n id: T.oneOfType([T.string, T.number])\n};\nexport default Radio;\n","// extracted by mini-css-extract-plugin\nvar _1 = \"_nayueMnaS3n4G3LaZXg\";\nexport { _1 as \"radio\" }\n","import React from 'react';\nimport T from 'prop-types';\nimport * as Classes from './styles.module.scss';\n\nconst PinIt = ({ href, imageUrl, description }) => {\n if (!window.allowSharing) { return null; }\n\n const onClick = (e) => {\n e.preventDefault();\n if (window.PinUtils) {\n window.PinUtils.pinOne({\n url: href,\n media: imageUrl,\n description\n });\n }\n };\n\n return (\n // eslint-disable-next-line jsx-a11y/anchor-is-valid\n \n \n {\n line.map((color, cindex) => (\n onSelect(color) }\n >\n \n
\n ))\n }\n \n));\n","import createReducer from 'arts/config/create_reducer';\nimport Constants from '../config/const';\n\nconst getDefaultState = () => ({\n kind: null,\n options: null\n});\n\nconst panel = createReducer(getDefaultState(), {\n [Constants.panel.open]: (state, { kind, options }) => ({\n ...state,\n kind,\n options\n }),\n [Constants.panel.close]: (state) => ({\n ...state,\n kind: null,\n options: null\n })\n});\n\nexport default panel;\n","import createReducer from 'arts/config/create_reducer';\nimport Constants from '../config/const';\n\nconst getDefaultState = () => ({\n works: [],\n loading: false,\n filters: [],\n activeFilters: {},\n page: 1\n});\n\nconst removeFilter = (opts, key) => {\n const { [key]: _, ...rest } = opts;\n return rest;\n};\n\nconst worksReducer = createReducer(getDefaultState(), {\n [Constants.works.load]: (state) => ({\n ...state,\n loading: true\n }),\n [Constants.works.success]: (state, { works }) => ({\n ...state,\n works: [...state.works, ...(works || [])],\n loading: false,\n page: state.page + 1\n }),\n [Constants.works.filtersLoaded]: (state, { filters }) => ({\n ...state,\n filters\n }),\n [Constants.works.addFilter]: (state, { param, value, text }) => ({\n ...state,\n page: 1,\n activeFilters: {\n ...state.activeFilters,\n [param]: { value, text }\n },\n works: []\n }),\n [Constants.works.removeFilter]: (state, { param }) => ({\n ...state,\n page: 1,\n activeFilters: removeFilter(state.activeFilters, param),\n works: []\n })\n});\n\nexport default worksReducer;\n","import createReducer from 'arts/config/create_reducer';\nimport Constants from '../config/const';\n\nconst getDefaultState = () => ({\n works: [],\n loading: false,\n page: 1\n});\n\nconst favoriteWorksReducer = createReducer(getDefaultState(), {\n [Constants.favoriteWorks.load]: (state) => ({\n ...state,\n loading: true\n }),\n [Constants.favoriteWorks.success]: (state, { works }) => ({\n ...state,\n works: [...state.works, ...works],\n loading: false,\n page: state.page + 1\n })\n});\n\nexport default favoriteWorksReducer;\n","import createReducer from 'arts/config/create_reducer';\nimport Constants from '../config/const';\n\nconst getDefaultState = () => ({});\n\nconst workDetailsReducer = createReducer(getDefaultState(), {\n [Constants.work.load]: (state, { id }) => ({\n ...state,\n [id]: {\n loading: true\n }\n }),\n [Constants.work.success]: (state, { work }) => ({\n ...state,\n [work.id]: {\n ...work,\n loading: false\n }\n })\n});\n\nexport default workDetailsReducer;\n","import createReducer from 'arts/config/create_reducer';\nimport Constants from '../config/const';\nimport { toCamelCase } from '../config/utils';\n\nconst getDefaultState = () => toCamelCase(window.wall.customImage || {});\n\n// src: null,\n// widthIn: null,\n// heightIn: null,\n// posX: null,\n// poxY: null\n\nconst customImage = createReducer(getDefaultState(), {\n [Constants.customImage.update]: (state, { src }) => ({\n ...state,\n src\n }),\n [Constants.customImage.add]: (state, {\n src,\n widthIn,\n heightIn,\n posX,\n posY\n }) => ({\n src,\n widthIn,\n heightIn,\n posX,\n posY\n }),\n [Constants.customImage.remove]: () => ({}),\n [Constants.customImage.move]: (state, { posX, posY }) => ({\n ...state,\n posX,\n posY\n })\n});\n\nexport default customImage;\n","import createReducer from 'arts/config/create_reducer';\nimport Constants from '../config/const';\nimport { toCamelCase } from '../config/utils';\n\nconst getDefaultState = () => toCamelCase(window.wall.wallPaper || {});\n// src: null,\n// widthIn: null,\n// heightIn: null\n\nconst wallPaper = createReducer(getDefaultState(), {\n [Constants.wallPaper.update]: (state, { src }) => ({\n ...state,\n src\n }),\n [Constants.wallPaper.add]: (state, { src, widthIn, heightIn }) => ({\n src, widthIn, heightIn\n }),\n [Constants.wallPaper.remove]: () => ({})\n});\n\nexport default wallPaper;\n","import createReducer from 'arts/config/create_reducer';\nimport Constants from '../config/const';\nimport { screenToDefaultDpi } from '../config/utils';\n\nconst DEFAULT_ZOOM_POS = 2;\n\nconst recalculateDpis = (wall, zoomPosition) => {\n const { width: wWidth, height: wHeight } = wall;\n const { width: sWidth, height: sHeight, whitePos } = Constants.silhouette;\n const width = zoomPosition === DEFAULT_ZOOM_POS ? Math.max(sWidth, wWidth) : wWidth;\n const height = zoomPosition === DEFAULT_ZOOM_POS ? wHeight + (sHeight - whitePos) : wHeight;\n const dpi = screenToDefaultDpi({ width, height });\n const dpis = [dpi * 4, dpi * 2, dpi, dpi / 2];\n\n return {\n dpis,\n dpi: dpis[zoomPosition]\n };\n};\n\nconst centerCanvasPosition = (\n { canvasWidth, canvasHeight },\n { width, height }\n) => {\n const dx = (canvasWidth - width) / 2;\n const dy = (canvasHeight - height) / 2;\n return {\n posX: -dx,\n posY: -dy,\n centerX: width / 2,\n centerY: height / 2\n };\n};\n\nconst getDefaultState = () => {\n const {\n wallId,\n currency,\n wallPictures,\n width,\n height,\n currentColor,\n name,\n description,\n sharingUrl,\n keywordList,\n colorList,\n associatedRoomIds,\n associatedHomeDecorStyleIds\n } = window.wall || {};\n\n return ({\n wallId,\n currency,\n works: wallPictures || [],\n centerX: 0,\n centerY: 0,\n posX: 0,\n posY: 0,\n showSilhouette: true,\n silhouette: Constants.silhouette.default,\n silhouetteX: (width - Constants.silhouette.width) / 2,\n silhouetteY: height - Constants.silhouette.zero,\n currentColor,\n rulerVisible: true,\n guidesVisible: false,\n widthVisible: false,\n heightVisible: false,\n width,\n height,\n name,\n description,\n sharingUrl,\n zoomPosition: DEFAULT_ZOOM_POS,\n ...recalculateDpis(window.wall, DEFAULT_ZOOM_POS),\n keywordList,\n colorList,\n associatedRoomIds,\n associatedHomeDecorStyleIds\n });\n};\n\nconst updateWork = (works, index, newProps) => {\n const before = works.slice(0, index);\n const after = works.slice(index + 1);\n return [...before, { ...works[index], ...newProps }, ...after];\n};\n\nconst removeWork = (works, index) => {\n const before = works.slice(0, index);\n const after = works.slice(index + 1);\n return [...before, ...after];\n};\n\nconst calculateNewPosNoWorks = (state, newDpi) => {\n const {\n centerX, posX, centerY, posY, dpi\n } = state;\n const wpx = (centerX - posX) * 2 * dpi;\n const wInNew = wpx / newDpi;\n const hpx = (centerY - posY) * 2 * dpi;\n const hInNew = hpx / newDpi;\n return {\n ...state,\n posX: 0,\n posY: 0,\n centerX: wInNew / 2,\n centerY: hInNew / 2\n };\n};\n\nconst calculateNewPos = (state, newDpi) => {\n const {\n dpi, works, posX: posXWas, posY: posYWas, centerX: centerXWas, centerY: centerYWas\n } = state;\n\n if (!works.length) {\n return calculateNewPosNoWorks(state, newDpi);\n }\n\n let centerX = 0;\n let centerY = 0;\n works.forEach(({ x, y }) => {\n centerX += parseFloat(x) + 5;\n centerY += parseFloat(y) + 5;\n });\n centerX /= state.works.length;\n centerY /= state.works.length;\n\n const wpx = (centerXWas - posXWas) * 2 * dpi;\n const wInNew = wpx / newDpi;\n const posX = centerX - (wInNew / 2);\n const hpx = (centerYWas - posYWas) * 2 * dpi;\n const hInNew = hpx / newDpi;\n const posY = centerY - (hInNew / 2);\n\n return {\n ...state,\n posX,\n posY,\n centerX,\n centerY,\n dpi: newDpi\n };\n};\n\nconst setZoomPosition = (state, zoomPosition) => {\n const { dpis } = state;\n const dpi = dpis[zoomPosition];\n return ({\n ...calculateNewPos(state, dpi),\n zoomPosition\n });\n};\n\nconst resetCenter = (state, { canvasWidth, canvasHeight }) => {\n const newState = setZoomPosition(state, DEFAULT_ZOOM_POS);\n const { width: wWidth, height: wHeight } = newState;\n const { height, whitePos } = Constants.silhouette;\n const canvasPositions = centerCanvasPosition(\n { canvasWidth, canvasHeight },\n { width: wWidth, height: wHeight + (height - whitePos) }\n );\n return ({\n ...newState,\n ...canvasPositions\n });\n};\n\nconst canvasReducer = createReducer(getDefaultState(), {\n [Constants.canvas.add]: (state, {\n workId, workSizeId, frameId, x, y\n }) => ({\n ...state,\n works: [...state.works, {\n workId, workSizeId, frameId, key: (new Date()).getTime(), x, y\n }]\n }),\n [Constants.canvas.remove]: (state, { index }) => ({\n ...state,\n works: removeWork(state.works, index)\n }),\n [Constants.canvas.move]: (state, { index, x, y }) => ({\n ...state,\n works: updateWork(state.works, index, { x, y })\n }),\n [Constants.canvas.recalculateDpis]: (state) => {\n const { dpi, dpis } = recalculateDpis(state, state.zoomPosition);\n return ({\n ...calculateNewPos(state, dpi),\n dpis\n });\n },\n [Constants.canvas.zoomIn]: (state) => {\n const { zoomPosition } = state;\n if (zoomPosition === 0) { return state; }\n return setZoomPosition(state, zoomPosition - 1);\n },\n [Constants.canvas.zoomOut]: (state) => {\n const { dpis, zoomPosition } = state;\n if (zoomPosition === dpis.length - 1) { return state; }\n return setZoomPosition(state, zoomPosition + 1);\n },\n [Constants.canvas.resetCenter]: (\n state, { canvasWidth, canvasHeight }\n ) => resetCenter(state, { canvasWidth, canvasHeight }),\n [Constants.canvas.resetZoom]: (state) => {\n const newState = setZoomPosition(state, DEFAULT_ZOOM_POS);\n const {\n centerX, centerY, posX, posY\n } = newState;\n const canvasWidth = (centerX - posX) * 2;\n const canvasHeight = (centerY - posY) * 2;\n\n return resetCenter(newState, { canvasWidth, canvasHeight });\n },\n [Constants.canvas.setSize]: (state, { index, workSizeId }) => ({\n ...state,\n works: updateWork(state.works, index, { workSizeId, frameId: null })\n }),\n [Constants.canvas.setFrame]: (state, { index, frameId }) => ({\n ...state,\n works: updateWork(state.works, index, { frameId })\n }),\n [Constants.canvas.setCenter]: (state, {\n centerX, centerY, posX, posY\n }) => ({\n ...state, centerX, centerY, posX, posY\n }),\n [Constants.canvas.hideSilhouette]: (state) => ({\n ...state,\n showSilhouette: false\n }),\n [Constants.canvas.setSilhouette]: (state, { silhouette }) => {\n const newState = setZoomPosition(state, DEFAULT_ZOOM_POS);\n const {\n centerX, centerY, posX, posY\n } = newState;\n const canvasWidth = (centerX - posX) * 2;\n const canvasHeight = (centerY - posY) * 2;\n\n return {\n ...resetCenter(newState, { canvasWidth, canvasHeight }),\n silhouette,\n showSilhouette: true\n };\n },\n [Constants.canvas.setColor]: (state, { currentColor }) => ({\n ...state,\n currentColor\n }),\n [Constants.canvas.showRuler]: (state) => ({\n ...state,\n rulerVisible: true\n }),\n [Constants.canvas.hideRuler]: (state) => ({\n ...state,\n rulerVisible: false\n }),\n [Constants.canvas.showGuides]: (state) => ({\n ...state,\n guidesVisible: true\n }),\n [Constants.canvas.hideGuides]: (state) => ({\n ...state,\n guidesVisible: false\n }),\n [Constants.canvas.setWidth]: (state, { width }) => {\n const newState = {\n ...state,\n width\n };\n const { dpi, dpis } = recalculateDpis(newState, DEFAULT_ZOOM_POS);\n return ({\n ...calculateNewPos(newState, dpi),\n dpis\n });\n },\n [Constants.canvas.setHeight]: (state, { height }) => {\n const newState = {\n ...state,\n height\n };\n const { dpi, dpis } = recalculateDpis(newState, DEFAULT_ZOOM_POS);\n return ({\n ...calculateNewPos(newState, dpi),\n dpis\n });\n },\n [Constants.canvas.showWidth]: (state) => ({ ...state, widthVisible: true }),\n [Constants.canvas.hideWidth]: (state) => ({ ...state, widthVisible: false }),\n [Constants.canvas.showHeight]: (state) => ({ ...state, heightVisible: true }),\n [Constants.canvas.hideHeight]: (state) => ({ ...state, heightVisible: false }),\n [Constants.canvas.updateAttributes]: (state, { attributes }) => ({\n ...state,\n ...attributes\n })\n});\n\nexport default canvasReducer;\n","import createReducer from 'arts/config/create_reducer';\nimport Constants from '../config/const';\n\nconst getDefaultState = () => [];\n\nconst undos = createReducer(getDefaultState(), {\n [Constants.undo.push]: (state, { action }) => [...state, action],\n [Constants.undo.pop]: (state) => state.slice(0, -1)\n});\n\nexport default undos;\n","import createReducer from 'arts/config/create_reducer';\nimport Constants from '../config/const';\n\nconst getDefaultState = () => ({\n publishing: false,\n savingPreview: false,\n previewSaved: false,\n previewSavingError: null,\n showSharing: false,\n previewTimeStamp: null,\n previewSrc: null,\n logoSrc: null\n});\n\nconst exportReducer = createReducer(getDefaultState(), {\n [Constants.export.publishing]: (state) => ({\n ...state,\n publishing: true\n }),\n [Constants.export.published]: (state) => ({\n ...state,\n publishing: false\n }),\n [Constants.export.savePreview]: (state) => ({\n ...state,\n savingPreview: true,\n previewSaved: false,\n previewSavingError: null,\n showSharing: false,\n previewTimeStamp: null,\n previewSrc: null\n }),\n [Constants.export.previewSaved]: (state, { error, previewTimeStamp, previewSrc }) => ({\n ...state,\n savingPreview: false,\n previewSaved: !error,\n previewSavingError: error,\n previewTimeStamp,\n previewSrc\n }),\n [Constants.export.showSharing]: (state) => ({\n ...state,\n showSharing: true\n }),\n [Constants.export.setLogo]: (state, { logoSrc }) => ({\n ...state,\n logoSrc\n }),\n [Constants.canvas.setColor]: (state) => ({\n ...state,\n previewSrc: null\n }),\n [Constants.canvas.remove]: (state) => ({\n ...state,\n previewSrc: null\n }),\n [Constants.canvas.move]: (state) => ({\n ...state,\n previewSrc: null\n }),\n [Constants.canvas.add]: (state) => ({\n ...state,\n previewSrc: null\n }),\n [Constants.canvas.setFrame]: (state) => ({\n ...state,\n previewSrc: null\n }),\n [Constants.wallPaper.add]: (state) => ({\n ...state,\n previewSrc: null\n }),\n [Constants.wallPaper.update]: (state) => ({\n ...state,\n previewSrc: null\n }),\n [Constants.wallPaper.remove]: (state) => ({\n ...state,\n previewSrc: null\n }),\n [Constants.customImage.update]: (state) => ({\n ...state,\n previewSrc: null\n }),\n [Constants.customImage.add]: (state) => ({\n ...state,\n previewSrc: null\n }),\n [Constants.customImage.remove]: (state) => ({\n ...state,\n previewSrc: null\n }),\n [Constants.customImage.move]: (state) => ({\n ...state,\n previewSrc: null\n })\n});\n\nexport default exportReducer;\n","import createReducer from 'arts/config/create_reducer';\nimport Constants from '../config/const';\n\nconst currentIndex = createReducer(-1, {\n [Constants.workDetails.show]: (_, { index }) => index,\n [Constants.workDetails.hide]: () => (-1)\n});\n\nexport default currentIndex;\n","import createReducer from 'arts/config/create_reducer';\nimport Constants from '../config/const';\n\nconst getDefaultState = () => ({\n savingPictures: false,\n assetsUploading: 0\n});\n\nconst savingWall = createReducer(getDefaultState(), {\n [Constants.savingWall.start]: (state) => ({\n ...state,\n savingPictures: true\n }),\n [Constants.savingWall.end]: (state) => ({\n ...state,\n savingPictures: false\n }),\n [Constants.savingWall.uploadAssetsStart]: (state) => ({\n ...state,\n assetsUploading: state.assetsUploading + 1\n }),\n [Constants.savingWall.uploadAssetsEnd]: (state) => ({\n ...state,\n assetsUploading: state.assetsUploading - 1\n })\n});\n\nexport default savingWall;\n","import createReducer from 'arts/config/create_reducer';\nimport Constants from '../config/const';\n\nconst getDefaultState = () => ({\n sourceId: null,\n loading: false,\n works: [],\n original: null\n});\n\nconst moreLikeThis = createReducer(getDefaultState(), {\n [Constants.moreLikeThis.set]: (state, { sourceId, index, original }) => ({\n ...state,\n loading: false,\n works: [],\n sourceId,\n index,\n original\n }),\n [Constants.moreLikeThis.reset]: (state) => ({\n ...state,\n works: [],\n sourceId: null,\n index: 0,\n original: null\n }),\n [Constants.moreLikeThis.loading]: (state) => ({\n ...state,\n loading: true\n }),\n [Constants.moreLikeThis.loaded]: (state, { works }) => ({\n ...state,\n works,\n loading: false\n })\n});\n\nexport default moreLikeThis;\n","import createReducer from 'arts/config/create_reducer';\nimport Constants from '../config/const';\n\nconst getDefaultState = () => ({\n loading: false\n});\n\n// src: null,\n// widthIn: null,\n// heightIn: null,\n// posX: null,\n// poxY: null\n\nconst hangings = createReducer(getDefaultState(), {\n [Constants.hangings.load]: () => ({ loading: true }),\n [Constants.hangings.loaded]: (state, { hangingMarks }) => ({ hangingMarks, loading: false }),\n [Constants.hangings.update]: (state, {\n first, second, kind, isAdd\n }) => {\n const { hangingMarks } = state;\n let newMarks = [...hangingMarks];\n if (isAdd) {\n newMarks.push({ first, second, kind });\n } else {\n const index = hangingMarks.findIndex((m) => (\n ((m.first === first && m.second === second) || (m.first === second && m.second === first))\n && m.kind === kind\n ));\n newMarks[index] = null;\n newMarks = newMarks.filter(m => !!m);\n }\n return {\n ...state,\n hangingMarks: newMarks\n };\n },\n [Constants.hangings.reset]: (state) => ({\n ...state,\n hangingMarks: []\n }),\n [Constants.hangings.saving]: (state) => ({\n ...state,\n loading: true\n }),\n [Constants.hangings.saved]: (state, { hangingMarks }) => ({\n ...state,\n loading: false,\n hangingMarks\n })\n});\n\nexport default hangings;\n","import createReducer from 'arts/config/create_reducer';\nimport Constants from '../config/const';\n\nconst getDefaultState = () => ({\n x: 0,\n width: 0,\n y: 0,\n height: 0,\n custom: false\n});\n\nconst crop = createReducer(getDefaultState(), {\n [Constants.crop.set]: (_, {\n x, y, width, height\n }) => ({\n x, y, width, height, custom: true\n }),\n [Constants.crop.reset]: (state) => ({\n ...state,\n custom: false\n })\n});\nexport default crop;\n","import createReducer from 'arts/config/create_reducer';\nimport Constants from '../config/const';\n\nconst PIN_KEY = 'WallBuiler::Pin';\n\nconst getDefaultState = () => ({\n pinned: window.localStorage.getItem(PIN_KEY) === '1'\n});\n\nconst pin = createReducer(getDefaultState(), {\n [Constants.pin.toggle]: (state) => ({\n pinned: !state.pinned\n })\n});\n\nexport default pin;\n","import { combineReducers } from 'redux';\nimport cartItems from 'arts/reducers/cart_items';\nimport panel from './panel';\nimport works from './works';\nimport favoriteWorks from './favoriteWorks';\nimport workDetails from './work_details';\nimport customImage from './custom_image';\nimport wallPaper from './wall_paper';\nimport canvas from './canvas';\nimport undos from './undos';\nimport exportReducer from './export';\nimport currentIndex from './current_index';\nimport savingWall from './saving_wall';\nimport moreLikeThis from './more_like_this';\nimport hangings from './hangings';\nimport crop from './crop';\nimport pin from './pin';\n\nexport default combineReducers({\n panel,\n works,\n workDetails,\n canvas,\n customImage,\n wallPaper,\n undos,\n currentIndex,\n savingWall,\n exporting: exportReducer,\n moreLikeThis,\n crop,\n hangings,\n pin,\n favoriteWorks,\n cartItems\n});\n","/* eslint-disable import/no-import-module-exports */\nimport thunk from 'redux-thunk';\nimport { createStore, applyMiddleware } from 'redux';\nimport reducer from '../reducers';\n\nconst middleware = [\n thunk\n];\n\nif (process.env.NODE_ENV === 'development') {\n /* eslint-disable global-require */\n const { createLogger } = require('redux-logger');\n /* eslint-enable global-require */\n const logger = createLogger({ diff: false });\n middleware.push(logger);\n}\n\nexport const buildStore = () => {\n const middleWares = applyMiddleware(...middleware);\n const store = createStore(\n reducer,\n undefined,\n middleWares\n );\n // eslint-disable-next-line no-undef\n if (module.hot) {\n module.hot.accept(() => {\n /* eslint-disable global-require */\n const nextRootReducer = require('../reducers/index').default;\n /* eslint-enable global-require */\n store.replaceReducer(nextRootReducer);\n });\n }\n return store;\n};\n","const parseFB = (scope) => {\n if (window.FB && window.FB.XFBML) { window.FB.XFBML.parse(scope); }\n};\n\nexport default parseFB;\n","import React, { PureComponent } from 'react';\nimport T from 'prop-types';\nimport parseFB from 'arts/config/parseFB';\nimport PinIt from 'arts/components/Social/pin_it';\n\nimport * as Classes from './styles.module.scss';\n\nexport default class Share extends PureComponent {\n static propTypes = {\n imageUrl: T.string,\n description: T.string,\n href: T.string\n };\n\n componentDidMount() {\n parseFB(this.fbScope);\n }\n\n componentDidUpdate() {\n parseFB(this.fbScope);\n }\n\n render() {\n const { imageUrl, description, href } = this.props;\n\n return (\n { this.fbScope = r; } }>\n
\n );\n }\n}\n","// extracted by mini-css-extract-plugin\nvar _1 = \"MEsAiqSR0gevw8SSRCY7\";\nvar _2 = \"PVjRqukEzowQp5Y9jFoz\";\nvar _3 = \"fh9zPgLoA376OSd7OxjQ\";\nvar _4 = \"iW75lbOIgiFJRZ4haCiw\";\nvar _5 = \"vWMbOjIRpNKwyAMqXbfw\";\nvar _6 = \"_2THsBWyDulnpuyJJhUjD\";\nvar _7 = \"GF3JNgsyO_veqdZAew4c\";\nvar _8 = \"nJdTJpPhvXywslp8bdQg\";\nvar _9 = \"I5RU2Qm01GiMdpiKlXtC\";\nvar _a = \"yLS2IvKm5j4oGVctADfg\";\nvar _b = \"pkTZgqzJgOIkRCfF2AzU\";\nvar _c = \"mXrBOzhG4w4ljwlVEuTm\";\nvar _d = \"YE5LqtCQccWRrR6PEaRI\";\nvar _e = \"Dx9l27roXnBaIeMnxA6q\";\nvar _f = \"Q6D91ErYYiBIxj7ogomo\";\nvar _10 = \"tnAgHPqsn9_w7B6mc3Rw\";\nexport { _1 as \"add\", _2 as \"divider\", _3 as \"full\", _4 as \"infoItems\", _5 as \"menu\", _6 as \"menuDropDown\", _7 as \"menuItem\", _8 as \"noWorks\", _9 as \"reset\", _a as \"rightMenu\", _b as \"shop\", _c as \"silhouetteOption\", _d as \"subtitle\", _e as \"subtitleDropDown\", _f as \"zoom\", _10 as \"zoomHolder\" }\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst SvgComponent = ({ fill, ...props }) => (\n \n);\n\nSvgComponent.propTypes = {\n fill: PropTypes.string.isRequired\n};\n\nexport default SvgComponent;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst SvgComponent = ({ fill, ...props }) => (\n \n);\n\nSvgComponent.propTypes = {\n fill: PropTypes.string.isRequired\n};\nexport default SvgComponent;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst SvgComponent = ({ fill, ...props }) => (\n \n);\n\nSvgComponent.propTypes = {\n fill: PropTypes.string.isRequired\n};\n\nexport default SvgComponent;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst SvgComponent = ({ fill, ...props }) => (\n \n);\n\nSvgComponent.propTypes = {\n fill: PropTypes.string.isRequired\n};\n\nexport default SvgComponent;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst SvgComponent = ({ fill, ...props }) => (\n \n);\n\nSvgComponent.propTypes = {\n fill: PropTypes.string.isRequired\n};\n\nexport default SvgComponent;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst SvgComponent = ({ fill, ...props }) => (\n \n);\n\nSvgComponent.propTypes = {\n fill: PropTypes.string.isRequired\n};\n\nexport default SvgComponent;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst SvgComponent = ({ fill, ...props }) => (\n \n);\n\nSvgComponent.propTypes = {\n fill: PropTypes.string.isRequired\n};\n\nexport default SvgComponent;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst SvgComponent = ({ fill, ...props }) => (\n \n);\n\nSvgComponent.propTypes = {\n fill: PropTypes.string\n};\n\nexport default SvgComponent;\n","import React from 'react';\n\nconst SvgComponent = (props) => (\n \n);\n\nexport default SvgComponent;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst SvgComponent = ({ fill, ...props }) => (\n \n);\n\nSvgComponent.propTypes = {\n fill: PropTypes.string.isRequired\n};\n\nexport default SvgComponent;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst SvgComponent = ({ fill, ...props }) => (\n \n);\n\nSvgComponent.propTypes = {\n fill: PropTypes.string.isRequired\n};\n\nexport default SvgComponent;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as classes from './classes.module.scss';\n\nconst Subtitle = ({ name, className }) => (\n \n
\n\n \n { name }\n
\n);\n\nSubtitle.propTypes = {\n name: PropTypes.string.isRequired,\n className: PropTypes.string\n};\n\nexport default Subtitle;\n","/* eslint-disable jsx-a11y/anchor-is-valid */\nimport React from 'react';\nimport { Menu, Button, Dropdown } from 'semantic-ui-react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport Constants from '../../config/const';\nimport * as classes from './classes.module.scss';\nimport Undo from '../assets/undo';\nimport ZoomIn from '../assets/zoom_in';\nimport ZoomOut from '../assets/zoom_out';\nimport Ruler from '../assets/ruler';\nimport Save from '../assets/save';\nimport Info from '../assets/info';\nimport Export from '../assets/export';\nimport Silhouette from '../assets/silhouette';\nimport AddOther from '../assets/add_other';\nimport NewWall from '../assets/new_wall';\nimport NewWallPlus from '../assets/new_wall_plus';\nimport Subtitle from './subtitle';\n\nconst renderShopThisWall = (addCurrentWallToCart, works, price, currency) => {\n if (!price) {\n return null;\n }\n return (\n \n \n ADD TO CART\n \n
\n );\n};\n\nconst CommandBar = ({\n openPanel, zoomIn, zoomOut, resetZoom,\n undo, totalPrice, works, currency,\n addCurrentWallToCart,\n hideSilhouette, setSilhouette,\n hasWorks\n}) => {\n const dropDown = (\n \n { works.length }\n item(s),\n { currency }\n { price.toFixed(2) }\n
\n \n
\n );\n\n const renderCrop = window.canPublish && totalPrice ? (\n <>\n \n { frame }\n frame\n
\n Frame Depth: \n { frameDisplayDepth }\n
\n Frame Width: \n { frameDisplayWidth }\n { window.currentLocale.unit }\n
\n Final Framed Size: \n { frameFinalFramedSize }\n
\n ) : null;\n\n const phs = humanSizes(landscape, displayPaperWidth, displayPaperHeight);\n\n const hidden = isWorkSizeHidden ? (\n \n Frame Depth: \n { frameDisplayDepth }\n
\n Frame Width: \n { frameDisplayWidth }\n { window.currentLocale.unit }\n
\n Final Framed Size: \n { frameFinalFramedSize }\n
\n
\n );\n};\n\nSizes.propTypes = {\n landscape: PropTypes.bool,\n displayPaperWidth: PropTypes.number,\n displayPaperHeight: PropTypes.number,\n displayPrintWidth: PropTypes.number,\n displayPrintHeight: PropTypes.number,\n displayPrintWidthNoMat: PropTypes.number,\n displayPrintHeightNoMat: PropTypes.number,\n frameMat: PropTypes.number,\n frame: PropTypes.string,\n frameDisplayDepth: PropTypes.string,\n frameDisplayWidth: PropTypes.number,\n paperMaterial: PropTypes.string,\n isWorkSizeHidden: PropTypes.bool,\n frameFinalFramedSize: PropTypes.string\n};\n\nexport default Sizes;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport { Icon } from 'semantic-ui-react';\nimport * as shared from '../assets/shared.module.scss';\nimport * as classes from './classes.module.scss';\nimport Sizes from './sizes';\n\nexport const renderTitle = (title, authorName, isHidden) => {\n const hidden = isHidden ? (\n \n Image Size: \n { hidden }\n { hs }\n
\n \n { paperMaterial === 'Canvas' ? 'Canvas' : 'Paper' }\n Size\n { frame ? ' (unframed)' : null }\n : \n { phs }\n
\n \n Printed on \n { paperMaterial }\n
\n \n { frameDetails }\n
\n \n \n { hidden }\n { title }\n \n \n by \n { authorName }\n \n
\n );\n};\n\nconst WorkDetails = ({\n landscape,\n displayPaperWidth,\n displayPaperHeight,\n displayPrintWidth,\n displayPrintHeight,\n displayPrintWidthNoMat,\n displayPrintHeightNoMat,\n frameMat,\n title,\n authorName,\n price,\n paperMaterial,\n frame,\n frameDisplayDepth,\n frameDisplayWidth,\n frameFinalFramedSize,\n columns,\n showPrice,\n isHidden,\n isWorkSizeHidden,\n currency\n}) => {\n if (!title) {\n return null;\n }\n\n const sizesProps = {\n landscape,\n displayPaperWidth,\n displayPaperHeight,\n displayPrintWidth,\n displayPrintHeight,\n displayPrintWidthNoMat,\n displayPrintHeightNoMat,\n frameMat,\n frame,\n frameDisplayDepth,\n frameDisplayWidth,\n isWorkSizeHidden,\n paperMaterial,\n frameFinalFramedSize\n };\n\n if (columns) {\n const renderPrice = showPrice ? (\n \n Price: \n { currency }\n { parseFloat(price).toFixed(2) }\n
\n ) : null;\n\n return (\n \n { renderTitle(title, authorName, isHidden) }\n
\n );\n }\n\n return (\n <>\n { renderTitle(title, authorName, isHidden) }\n \n
\n { renderPrice }\n \n Price: \n { currency }\n { parseFloat(price).toFixed(2) }\n
\n \n );\n};\n\nWorkDetails.propTypes = {\n landscape: PropTypes.bool,\n frameDisplayWidth: PropTypes.number,\n displayPaperWidth: PropTypes.number,\n displayPaperHeight: PropTypes.number,\n displayPrintWidth: PropTypes.number,\n displayPrintHeight: PropTypes.number,\n displayPrintWidthNoMat: PropTypes.number,\n displayPrintHeightNoMat: PropTypes.number,\n frameMat: PropTypes.number,\n title: PropTypes.string,\n authorName: PropTypes.string,\n price: PropTypes.number,\n paperMaterial: PropTypes.string,\n frameFinalFramedSize: PropTypes.string,\n frame: PropTypes.string,\n frameDisplayDepth: PropTypes.string,\n columns: PropTypes.bool,\n showPrice: PropTypes.bool,\n isHidden: PropTypes.bool,\n isWorkSizeHidden: PropTypes.bool,\n currency: PropTypes.string\n};\n\nexport default WorkDetails;\n","import React from 'react';\nimport { Button, Icon } from 'semantic-ui-react';\nimport PropTypes from 'prop-types';\nimport { sortedHumanSizes } from '../../config/utils';\n\nconst AddToCanvasButtons = ({\n workSizesAttributes, landscape, addToCanvas\n}) => sortedHumanSizes(workSizesAttributes, landscape).map(([hs, ws]) => (\n \n \n
\n ) : null;\n\n return (\n \n
\n );\n }\n}\n","import React, { PureComponent } from 'react';\nimport debounce from 'lodash.debounce';\nimport PropTypes from 'prop-types';\nimport {\n Input\n} from 'semantic-ui-react';\nimport * as classes from './classes.module.scss';\n\nexport default class Search extends PureComponent {\n static propTypes = {\n onChange: PropTypes.func.isRequired\n };\n\n constructor(props) {\n super(props);\n this.state = { query: '' };\n this.debouncedSetQuery = debounce(this.debouncedSetQuery, 400);\n }\n\n debouncedSetQuery = () => {\n const { query } = this.state;\n const { onChange } = this.props;\n onChange(query);\n }\n\n onChange = (e) => {\n this.setState({ query: e.target.value });\n this.debouncedSetQuery();\n }\n\n render() {\n const { query } = this.state;\n return (\n \n );\n }\n}\n","import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Loader, Dropdown, Label, Icon, Menu\n} from 'semantic-ui-react';\nimport { Waypoint } from 'react-waypoint';\nimport { BY_COLOR, renderColorSelection } from 'arts/components/works/color_filters';\nimport Work from './work';\nimport * as classes from './classes.module.scss';\nimport Const from '../../config/const';\nimport Search from './search';\n\nconst renderCurrentFilter = (key, activeFilters, removeFilter) => {\n let content = null;\n if (key === BY_COLOR) {\n const hexColor = parseInt(activeFilters[key].value, 10).toString(16).padStart(6, '0');\n content = (\n \n 
\n
\n \n
\n \n { renderTitle(title, userName, isHidden) }\n
\n \n { this.renderSizes() }\n
\n { showMore }\n \n Color: \n \n
\n );\n } else {\n content = activeFilters[key].text;\n }\n return (\n \n );\n};\n\nexport default class FindWorks extends PureComponent {\n static propTypes = {\n loadNextPage: PropTypes.func.isRequired,\n addToCanvas: PropTypes.func.isRequired,\n\n loadArtFilters: PropTypes.func,\n addFilter: PropTypes.func,\n removeFilter: PropTypes.func,\n\n closePanel: PropTypes.func.isRequired,\n showMoreLikeThis: PropTypes.func.isRequired,\n works: PropTypes.arrayOf(PropTypes.object).isRequired,\n loading: PropTypes.bool.isRequired,\n filters: PropTypes.array,\n activeFilters: PropTypes.object,\n\n pinned: PropTypes.bool.isRequired,\n onlyFavorites: PropTypes.bool\n };\n\n scroll = React.createRef();\n\n componentDidMount() {\n const { loadNextPage, loadArtFilters } = this.props;\n if (loadArtFilters) {\n loadArtFilters();\n }\n loadNextPage();\n }\n\n closePanel = () => {\n const { closePanel } = this.props;\n closePanel(Const.panelKinds.works);\n }\n\n addToCanvas = (opts) => {\n const { addToCanvas, pinned } = this.props;\n addToCanvas(opts);\n if (!pinned) {\n this.closePanel();\n }\n };\n\n addSeachFilter = (query) => {\n const { addFilter, removeFilter } = this.props;\n if (query) {\n addFilter('query', query, query);\n } else {\n removeFilter('query');\n }\n }\n\n renderLoader() {\n const { loading } = this.props;\n if (!loading) { return null; }\n return (\n \n
\n );\n }\n\n renderMenuFilter({ key, options, title }) {\n const { addFilter } = this.props;\n const onSelect = (id) => addFilter(key, id, id);\n return (\n \n { renderColorSelection(onSelect, options, classes.colorLine, classes.singleColor) }\n
\n ) : (\n options.map(({ id, name }) => (\n \n
\n );\n }\n\n renderWorks() {\n const { works, showMoreLikeThis } = this.props;\n return works.map((w, index) => (\n \n \n
\n \n {\n Object.keys(activeFilters).map(\n key => renderCurrentFilter(key, activeFilters, removeFilter)\n )\n }\n
\n );\n }\n\n render() {\n const { onlyFavorites, loadNextPage } = this.props;\n const wayPoint = (\n \n { this.renderActiveFilters() }\n
\n \n );\n\n return (\n <>\n { filters }\n \n
\n \n );\n }\n}\n","import Constants from '../config/const';\nimport { loadSmilarWorks } from '../config/api';\nimport { openPanel, closePanel } from './panel';\n\nexport const showMoreLikeThis = (sourceId, index, source) => (dispatch, getState) => {\n let original;\n const { moreLikeThis: { works: moreWorks }, works, workDetails } = getState();\n switch (source) {\n case Constants.moreLikeThisSources.works: {\n original = works.works[index];\n break;\n }\n case Constants.moreLikeThisSources.canvas: {\n original = workDetails[sourceId];\n break;\n }\n default: {\n original = moreWorks[index];\n break;\n }\n }\n dispatch({\n type: Constants.moreLikeThis.set,\n sourceId,\n index,\n original\n });\n dispatch(closePanel({ kind: Constants.panelKinds.works }));\n setTimeout(() => {\n dispatch(openPanel({ kind: Constants.panelKinds.moreLikeThis }));\n }, 400);\n};\n\nexport const showWorks = () => (dispatch) => {\n dispatch(closePanel({ kind: Constants.panelKinds.moreLikeThis }));\n setTimeout(() => {\n dispatch(openPanel({ kind: Constants.panelKinds.works }));\n }, 400);\n};\n\nexport const hideMoreLikeThis = () => (dispatch) => {\n dispatch(closePanel({ kind: Constants.panelKinds.moreLikeThis }));\n dispatch({\n type: Constants.moreLikeThis.reset\n });\n};\n\nconst loadedMoreLikeThis = (works) => ({\n type: Constants.moreLikeThis.loaded,\n works\n});\n\nexport const loadMoreLikeThis = () => (dispatch, getState) => {\n dispatch({ type: Constants.moreLikeThis.loading });\n const { sourceId, source } = getState().moreLikeThis;\n loadSmilarWorks(sourceId).then((works) => {\n const { sourceId: sourceIdNew, source: sourceNew } = getState().moreLikeThis;\n if (sourceId === sourceIdNew && source === sourceNew) {\n dispatch(loadedMoreLikeThis(works));\n }\n });\n};\n","import { connect } from 'react-redux';\nimport FindWorks from './find_works';\nimport {\n loadNextPage, loadArtFilters, addFilter, removeFilter\n} from '../../actions/works';\nimport { closePanel } from '../../actions/panel';\nimport { addToCanvas } from '../../actions/canvas';\nimport { showMoreLikeThis } from '../../actions/more_like_this';\n\nconst mapStateToProps = ({ works, pin }) => ({ ...works, ...pin });\n\nexport default connect(mapStateToProps, {\n loadNextPage,\n addToCanvas,\n closePanel,\n loadArtFilters,\n addFilter,\n removeFilter,\n showMoreLikeThis\n})(FindWorks);\n","import React from 'react';\nimport { connect } from 'react-redux';\nimport FindWorks from '../find_works/find_works';\nimport {\n loadNextFavoritePage\n} from '../../actions/works';\nimport { closePanel } from '../../actions/panel';\nimport { addToCanvas } from '../../actions/canvas';\nimport { showMoreLikeThis } from '../../actions/more_like_this';\n\nconst mapStateToProps = ({ favoriteWorks, pin }) => ({ ...favoriteWorks, ...pin });\n\nconst FindFavoriteWorks = (props) => \n { this.renderWorks() }\n { this.renderLoader() }\n
\n { wayPoint }\n { title }
\n );\n }\n return title;\n};\n\nconst Header = ({\n title, onClose, Icon, className, children\n}) => (\n <>\n\n { Icon ?
\n { children }\n \n);\n\nHeader.propTypes = {\n title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n onClose: PropTypes.func.isRequired,\n children: PropTypes.node,\n Icon: PropTypes.func,\n className: PropTypes.string\n};\n\nconst PanelLayout = ({\n title, onClose, children, icon, headerClass, headerChildren\n}) => (\n \n \n
\n \n \n { headerChildren }\n \n
\n);\n\nPanelLayout.propTypes = {\n title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n onClose: PropTypes.func.isRequired,\n children: PropTypes.node.isRequired,\n headerChildren: PropTypes.node,\n icon: PropTypes.func,\n headerClass: PropTypes.string\n};\n\nexport default PanelLayout;\n","// extracted by mini-css-extract-plugin\nvar _1 = \"sfgYu44uPSu3A1n5cHS_\";\nvar _2 = \"USAW0bMk6xSKKeVmCbdc\";\nvar _3 = \"GGCJfFoH8foC04G7Lqmt\";\nvar _4 = \"I2StfrN3dRCEWF8CmuCC\";\nvar _5 = \"QFXN7JJGUC_HkSxSZZS2\";\nvar _6 = \"DR_1rbWWS1L0KttrnS_E\";\nvar _7 = \"arkK6ZAFthvPpBWZP_tX\";\nexport { _1 as \"body\", _2 as \"close\", _3 as \"header\", _4 as \"icon\", _5 as \"panelDefault\", _6 as \"panelLayout\", _7 as \"right\" }\n","// extracted by mini-css-extract-plugin\nvar _1 = \"B0K7FkZ9SRTrLwnVeQ2B\";\nexport { _1 as \"pin\" }\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst SvgComponent = ({ fill, ...props }) => (\n \n);\n\nSvgComponent.propTypes = {\n fill: PropTypes.string.isRequired\n};\n\nexport default SvgComponent;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst SvgComponent = ({ fill, ...props }) => (\n \n);\n\nSvgComponent.propTypes = {\n fill: PropTypes.string.isRequired\n};\n\nexport default SvgComponent;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as classes from './classes.module.scss';\nimport Pin from '../assets/pin';\nimport Pinned from '../assets/pinned';\n\nconst PinButton = ({ pinned, togglePin }) => (\n \n { children }\n
\n \n \n
\n);\n\nPinButton.propTypes = {\n pinned: PropTypes.bool.isRequired,\n togglePin: PropTypes.func.isRequired\n};\n\nexport default PinButton;\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { Menu } from 'semantic-ui-react';\nimport FindWorks from '../find_works';\nimport FindFavorites from '../find_favorites';\nimport PanelLayout from '../panel/layout';\nimport PinButton from '../shared/pin';\nimport * as classes from '../find_works/classes';\n\nconst AddArt = ({ closePanel, pinned, togglePin }) => {\n const [currentTab, setTab] = useState(0);\n\n const content = currentTab === 0 ? \n Easily create and style your art groupings while browsing the site -\n just mark your favorites as you browse the site (with the heart icon - \n \n ),\n
\n and you can access them from here when designing your combinations.\n
\n
\n );\n\n return (\n \n \n
\n \n { content }\n
\n \n );\n};\n\nAddArt.propTypes = {\n closePanel: PropTypes.func.isRequired,\n pinned: PropTypes.bool.isRequired,\n togglePin: PropTypes.func.isRequired\n};\n\nexport default AddArt;\n","import Constants from '../config/const';\n\nexport const togglePin = () => ({\n type: Constants.pin.toggle\n});\n","import { connect } from 'react-redux';\nimport AddArt from './add_art';\nimport { closePanel } from '../../actions/panel';\nimport { togglePin } from '../../actions/pin';\n\nconst mapStateToProps = ({ pin }) => pin;\n\nexport default connect(mapStateToProps, {\n closePanel,\n togglePin\n})(AddArt);\n","// extracted by mini-css-extract-plugin\nvar _1 = \"J7c8oxeiN1J0nt0ForUu\";\nvar _2 = \"NJGvJy6PWanHotKs_he1\";\nvar _3 = \"ero4Gc0kH3NXzXwItBBP\";\nvar _4 = \"XInUhnwRYyMVlqSoxOsq\";\nexport { _1 as \"color\", _2 as \"defaultView\", _3 as \"section\", _4 as \"selectedColor\" }\n","/* eslint-disable jsx-a11y/control-has-associated-label */\n\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport * as shared from '../assets/shared.module.scss';\nimport * as classes from './classes.module.scss';\n\nconst ColorSelection = ({\n colorName,\n currentColor,\n setColor\n}) => {\n const [name, color] = colorName;\n const className = classnames(\n classes.color, { [classes.selectedColor]: color === currentColor }\n );\n const style = {\n backgroundColor: color\n };\n const selectColor = () => setColor(color);\n return (\n \n
\n );\n};\n\nColorSection.propTypes = {\n section: PropTypes.string.isRequired,\n colors: PropTypes.array.isRequired,\n currentColor: PropTypes.string.isRequired,\n setColor: PropTypes.func.isRequired\n};\n\nconst Color = ({ currentColor, defaultColor, setColor }) => (\n <>\n \n { section }\n
\n\n {\n colors.map((c) => (\n
\n \n
\n {\n window.colors.map(({ name, colors }) => (\n \n Default\n
\n\n
\n \n
\n );\n }\n\n return (\n \n Upload a custom image.\n
\n\n
\n );\n }\n\n renderImage() {\n const { src } = this.state;\n return src ? (\n \n Please define the exact size of the image\n
\n in inches in order to best represent the size of your background.\n
\n \n \n
\n \n \n \n
\n \n \n
\n );\n }\n\n render() {\n return (\n \n
\n );\n }\n}\n","import { connect } from 'react-redux';\nimport { addCustomImage, removeCustomImage } from '../../actions/custom_image';\nimport CustomImage from './custom_image';\nimport { closePanel } from '../../actions/panel';\n\nconst mapStateToProps = ({ customImage }) => customImage;\n\nexport default connect(mapStateToProps, {\n addCustomImage, removeCustomImage, closePanel\n})(CustomImage);\n","import Constants from '../config/const';\nimport { redo } from './undo';\nimport { saveWall, uploadAsset } from './save_wall';\n\nexport const removeCustomImage = () => (dispatch, getState) => {\n const {\n src, widthIn, heightIn, posX, posY\n } = getState().customImage;\n dispatch(redo({\n type: Constants.customImage.add,\n src,\n widthIn,\n heightIn,\n posX,\n posY\n }));\n dispatch({\n type: Constants.customImage.remove\n });\n dispatch(saveWall());\n};\n\nconst updateSrc = (src) => ({\n type: Constants.customImage.update,\n src\n});\n\nexport const addCustomImage = ({\n src, widthIn, heightIn, binaryContent\n}) => (dispatch, getState) => {\n const { centerX, centerY } = getState().canvas;\n dispatch({\n type: Constants.customImage.add,\n src,\n widthIn,\n heightIn,\n posX: centerX - (widthIn / 2),\n posY: centerY - (heightIn / 2)\n });\n dispatch(redo({\n type: Constants.customImage.remove\n }));\n uploadAsset(dispatch, getState, src, binaryContent, 'custom_images').then((newSrc) => {\n const { src: prevSrc } = getState().customImage;\n if (newSrc !== prevSrc && prevSrc) {\n dispatch(updateSrc(newSrc));\n dispatch(saveWall());\n }\n });\n};\n\nexport const moveCustomImage = ({ posX, posY }) => (dispatch, getState) => {\n const { posX: posXWas, posY: posYWas } = getState().customImage;\n dispatch({\n type: Constants.customImage.move,\n posX,\n posY\n });\n dispatch(redo({\n type: Constants.customImage.move,\n posX: posXWas,\n posY: posYWas\n }));\n dispatch(saveWall());\n};\n","import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\nimport { Menu } from 'semantic-ui-react';\nimport PanelLayout from '../panel/layout';\nimport Const from '../../config/const';\nimport Color from '../color';\nimport CustomImage from '../custom_image';\n// import WallPaper from '../wall_paper';\nimport * as classes from './classes.module.scss';\n\nconst TABS = {\n 'Paint Colors': Color,\n // wallpaper: WallPaper,\n 'Upload Your Own Background': CustomImage\n};\n\nexport default class AddOther extends PureComponent {\n static propTypes = {\n closePanel: PropTypes.func.isRequired,\n hasCustomImage: PropTypes.bool.isRequired,\n hasWallPaper: PropTypes.bool.isRequired\n };\n\n constructor(props) {\n super(props);\n const { hasCustomImage /* , hasWallPaper */ } = props;\n // eslint-disable-next-line no-nested-ternary\n const activeItemIndex = hasCustomImage ? 1 : 0;\n const activeItem = Object.keys(TABS)[activeItemIndex];\n this.state = {\n activeItem\n };\n }\n\n closePanel = () => {\n const { closePanel } = this.props;\n closePanel(Const.panelKinds.other);\n }\n\n changeTab = (_, { name }) => this.setState({ activeItem: name });\n\n render() {\n const { activeItem } = this.state;\n\n const tabs = Object.keys(TABS).map((t) => (\n \n
\n \n { this.renderImage() }\n
\n { this.renderInputs() }\n \n
\n \n \n
\n \n
\n \n
\n \n
\n \n Better understand the measurement of your art grouping - measurements are in inches.\n
\n\n View\n
\n\n
\n \n
\n Wall Size\n
\n\n
\n \n
\n*/\n","import { connect } from 'react-redux';\nimport GuidesConfig from './guides_config';\nimport { closePanel } from '../../actions/panel';\nimport {\n showRuler, hideRuler,\n showGuides, hideGuides,\n showWidth, hideWidth, setWidth,\n showHeight, hideHeight, setHeight\n} from '../../actions/canvas';\n\nconst mapStateToProps = ({ canvas }) => canvas;\n\nexport default connect(mapStateToProps, {\n closePanel,\n showRuler,\n hideRuler,\n showGuides,\n hideGuides,\n showWidth,\n hideWidth,\n setWidth,\n showHeight,\n hideHeight,\n setHeight\n})(GuidesConfig);\n","import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\nimport { Input, TextArea } from 'semantic-ui-react';\nimport * as classes from './classes.module.scss';\n\nexport default class Editor extends PureComponent {\n static propTypes = {\n value: PropTypes.string,\n setValue: PropTypes.func.isRequired,\n name: PropTypes.string.isRequired,\n text: PropTypes.bool\n };\n\n constructor(props) {\n super(props);\n this.state = { editing: false, newValue: '' };\n }\n\n input = React.createRef();\n\n startEditing = () => {\n const { value } = this.props;\n this.setState({ editing: true, newValue: value }, () => {\n this.input.current.focus();\n });\n };\n\n onChange = (event) => this.setState({ newValue: event.target.value });\n\n onCancel = () => this.setState({ editing: false });\n\n onSave = () => {\n const { newValue } = this.state;\n const { setValue } = this.props;\n setValue(newValue);\n this.onCancel();\n };\n\n onKeyDown = (e) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n this.onSave();\n return;\n }\n\n if (e.key === 'Escape') {\n e.preventDefault();\n this.onCancel();\n }\n };\n\n render() {\n const { editing, newValue } = this.state;\n const { name, value, text } = this.props;\n\n const C = text ? TextArea : Input;\n const content = editing ? (\n \n
\n ) : (\n \n \n { name }\n :\n \n { content }\n
\n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Editor from './editor';\nimport * as classes from './classes.module.scss';\n\nconst Title = ({\n name, updateAttributes\n}) => {\n const setName = (newName) => updateAttributes({ name: newName });\n\n return (\n \n
\n );\n};\n\nTitle.propTypes = {\n name: PropTypes.string,\n updateAttributes: PropTypes.func.isRequired\n};\n\nexport default Title;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Button } from 'semantic-ui-react';\nimport PanelLayout from '../panel/layout';\nimport * as shared from '../assets/shared.module.scss';\nimport * as classes from './classes.module.scss';\nimport Title from './title';\nimport WorkDetails from './work_details';\nimport Const from '../../config/const';\n\nconst renderWork = (\n workExtended,\n index,\n removeFromCanvas,\n addToCart,\n currency\n) => {\n const {\n zoomPreviewUrl,\n title\n } = workExtended;\n if (!title) {\n return null;\n }\n const remove = () => removeFromCanvas(index);\n\n const addWorkCart = () => addToCart(index);\n\n return (\n \n
\n );\n};\n\nconst Info = ({\n worksExtended, closePanel, removeFromCanvas, addToCart, currency, ...rest\n}) => (\n \n \n \n
\n \n \n
\n \n
\n \n);\n\nInfo.propTypes = {\n closePanel: PropTypes.func.isRequired,\n removeFromCanvas: PropTypes.func.isRequired,\n worksExtended: PropTypes.array.isRequired,\n addToCart: PropTypes.func.isRequired,\n // the rest\n name: PropTypes.string,\n currency: PropTypes.string\n};\n\nexport default Info;\n","import { connect } from 'react-redux';\nimport Info from './info';\nimport { closePanel } from '../../actions/panel';\nimport { removeFromCanvas, updateAttributes } from '../../actions/canvas';\nimport { addToCart } from '../../actions/cart';\nimport { workSizeDetails } from '../../selectors/work_sizes';\n\nconst mapStateToProps = (state) => {\n const {\n canvas: {\n name, currency\n }\n } = state;\n\n return {\n worksExtended: workSizeDetails(state),\n name,\n currency\n };\n};\n\nexport default connect(mapStateToProps, {\n removeFromCanvas, closePanel, addToCart, updateAttributes\n})(Info);\n","// extracted by mini-css-extract-plugin\nvar _1 = \"w3udV4OLLl6_ADrCCKrX\";\nvar _2 = \"foi3AQqLRw5G3HJxFZ31\";\nvar _3 = \"BoB07SQlvgrRc9e7ywxQ\";\nvar _4 = \"S91WTYJAl2LK2XyjaF9R\";\nvar _5 = \"MJEgKl7ZsMTM6TXxet3c\";\nvar _6 = \"I5uwhbcPCIkgerHWzNAI\";\nvar _7 = \"hgrrGTrX6Xp4N44wzJRg\";\nvar _8 = \"JYRhcMxdmfG5JMbUvkS6\";\nvar _9 = \"QS_nkxxTAidp_spHXJip\";\nvar _a = \"mJmg83Z4Yp0bv1yjqKiD\";\nvar _b = \"vN60tQ7jeHE1PMkjoc9H\";\nvar _c = \"wbYWLIaxCWz83qiLLm28\";\nvar _d = \"zsrMlpqkSFxVRz9YaQ7c\";\nvar _e = \"LdZGCFh3zzTBNTyXXMYa\";\nvar _f = \"W1_w0Z5U9PGU3VZL7esZ\";\nvar _10 = \"rYVKNjiCOIxrXBcKbeL4\";\nvar _11 = \"Q_B0AA9suOHzny0aTQNQ\";\nvar _12 = \"WYy2P_EKtDIq6jM3hlnT\";\nvar _13 = \"Fqh8BnP1YK4Nb0Up0Vys\";\nvar _14 = \"bO4xDPYpbwCDewikTUSQ\";\nvar _15 = \"UaaHGEtSmsLL70S86TV6\";\nvar _16 = \"rQ51A5fcIELsExwjl8zg\";\nvar _17 = \"EJ0NNyI3dj3GOhImq48O\";\nvar _18 = \"yMhfsM0FAdC81AcACeYa\";\nvar _19 = \"AjFLHfx6rDe7fGDqdkwA\";\nvar _1a = \"iN4Ir2U2KI8F3n3lMT9g\";\nvar _1b = \"vpAgnolDJUIpMhoyc6gq\";\nvar _1c = \"vLlOaf3SnUPVH14mnSxT\";\nexport { _1 as \"action\", _2 as \"actionAlignment\", _3 as \"actions\", _4 as \"addDescription\", _5 as \"canvas\", _6 as \"copyInput\", _7 as \"copyLink\", _8 as \"description\", _9 as \"details\", _a as \"detailsSection\", _b as \"divider\", _c as \"editDescription\", _d as \"editOverlay\", _e as \"img\", _f as \"logo\", _10 as \"logoSection\", _11 as \"preview\", _12 as \"previewSection\", _13 as \"saveActions\", _14 as \"saving\", _15 as \"scroll\", _16 as \"showPrice\", _17 as \"title\", _18 as \"totals\", _19 as \"uploadFile\", _1a as \"uploading\", _1b as \"work\", _1c as \"workDetails\" }\n","/* eslint-disable no-bitwise */\nimport React, { PureComponent } from 'react';\nimport { Loader, Button } from 'semantic-ui-react';\nimport PropTypes from 'prop-types';\nimport deepEqual from 'deep-equal';\nimport * as classes from './classes.module.scss';\nimport Constants from '../../config/const';\n\nconst MARK_PADDING_PX = 4;\nconst DEFAULT_MARK_COLOR = 'red';\nconst CONNECTOR_MARK_COLOR = '#f28c8c';\n\nconst lightenDarkenColor = (col, amt) => {\n let usePound = false;\n if (col[0] === '#') {\n // eslint-disable-next-line no-param-reassign\n col = col.slice(1);\n usePound = true;\n }\n\n const num = parseInt(col, 16);\n\n let r = (num >> 16) + amt;\n\n if (r > 255) r = 255;\n else if (r < 0) r = 0;\n\n let b = ((num >> 8) & 0x00FF) + amt;\n\n if (b > 255) b = 255;\n else if (b < 0) b = 0;\n\n let g = (num & 0x0000FF) + amt;\n\n if (g > 255) g = 255;\n else if (g < 0) g = 0;\n\n let v = (g | (b << 8) | (r << 16)).toString(16);\n if (v.length < 6) {\n v = '0'.repeat(6 - v.length) + v;\n }\n return (usePound ? '#' : '') + v;\n};\n\nconst fillBackrround = (ctx, color, canvasWidth, canvasHeight) => {\n const cleanColor = color.length > 5 ? color : (`#${ color.replace(/#/, '') }${ color.replace(/#/, '') }`);\n const gradColor = cleanColor === '#ffffff' ? '#f0f0ef' : lightenDarkenColor(cleanColor, -30);\n const gradient = ctx.createLinearGradient(0, 0, canvasWidth, canvasHeight);\n gradient.addColorStop(0, cleanColor);\n gradient.addColorStop(1, gradColor);\n ctx.fillStyle = gradient;\n ctx.fillRect(0, 0, canvasWidth, canvasHeight);\n};\n\nconst renderCaption = (ctx, text, x, y, align) => {\n ctx.beginPath();\n ctx.textAlign = align;\n ctx.font = 'bold 12px sans-serif';\n ctx.fillStyle = DEFAULT_MARK_COLOR;\n ctx.fillText(`${ text.toFixed(1) }\"`, x, y);\n ctx.closePath();\n};\n\nconst renderMark = (x0, x1, y0, y1, ctx, color = DEFAULT_MARK_COLOR) => {\n ctx.beginPath();\n ctx.strokeStyle = color;\n ctx.moveTo(x0, y0);\n ctx.lineTo(x1, y1);\n ctx.stroke();\n ctx.closePath();\n};\n\nconst fullyContained = (iX, iY, iW, iH, canvasWidth, canvasHeight) => (\n iX >= 0 && iY >= 0 && iX + iW <= canvasWidth && iY + iH <= canvasHeight\n);\n\nconst cropImage = (iX, iY, iW, iH, canvasWidth, canvasHeight) => {\n let [sx, sy, sw, sh, dx, dy, dw, dh] = [iX, iY, iW, iH, iX, iY, iW, iH];\n if (iX < 0) {\n dx = 0;\n sx = -iX;\n sw -= -iX;\n dw -= -iX;\n } else {\n sx = 0;\n }\n if (iY < 0) {\n dy = 0;\n sy = -iY;\n sh -= -iY;\n dh -= -iY;\n } else {\n sy = 0;\n }\n if (dx + dw > canvasWidth) {\n dw = canvasWidth - dx;\n sw = dw;\n }\n if (dy + dh > canvasHeight) {\n dh = canvasHeight - dy;\n sh = dh;\n }\n return [sx, sy, sw, sh, dx, dy, dw, dh];\n};\n\nconst resizeImage = (src, width, height) => new Promise((resolve) => {\n const canvas = document.createElement('canvas');\n canvas.width = width;\n canvas.height = height;\n const ctx = canvas.getContext('2d');\n const img = new Image();\n img.onload = () => {\n ctx.drawImage(img, 0, 0, width, height);\n resolve(ctx.canvas.toDataURL());\n };\n img.crossOrigin = '';\n img.src = src.match(/^http/) ? `${ src }?_=${ new Date().getTime() }` : src;\n});\n\nconst addWallPaper = (\n ctx, src, widthIn, heightIn, dpi, previewX, previewY, previewWidth, previewHeight\n) => new Promise((resolve) => {\n const img = new Image();\n img.onload = () => {\n let x = previewX;\n // TODO: cut last preview image\n while (x < previewX + previewWidth) {\n let y = previewY;\n while (y < previewY + previewHeight) {\n ctx.drawImage(\n img,\n 0, 0, widthIn * dpi, heightIn * dpi,\n (x - previewX) * dpi, (y - previewY) * dpi, widthIn * dpi, heightIn * dpi\n );\n y += heightIn;\n }\n x += widthIn;\n }\n resolve();\n };\n img.crossOrigin = '';\n img.src = src.match(/^http/) ? `${ src }?_=${ new Date().getTime() }` : src;\n});\n\nexport default class Preview extends PureComponent {\n static propTypes = {\n worksExtended: PropTypes.array.isRequired,\n wallPaper: PropTypes.shape({\n x: PropTypes.number,\n y: PropTypes.number,\n src: PropTypes.string\n }),\n previewConfig: PropTypes.shape({\n height: PropTypes.number,\n width: PropTypes.number,\n x: PropTypes.number,\n y: PropTypes.number\n }),\n hangingVariations: PropTypes.arrayOf(PropTypes.shape({\n i0: PropTypes.number.isRequired,\n i1: PropTypes.number.isRequired,\n kinds: PropTypes.arrayOf(PropTypes.string)\n })),\n markPositions: PropTypes.shape({\n top: PropTypes.number.isRequired,\n left: PropTypes.number.isRequired,\n bottom: PropTypes.number.isRequired,\n right: PropTypes.number.isRequired,\n groundLeft: PropTypes.number.isRequired\n }),\n onBuildStarted: PropTypes.func.isRequired,\n onBuildComplete: PropTypes.func.isRequired,\n onClose: PropTypes.func,\n currentColor: PropTypes.string.isRequired,\n customImage: PropTypes.object,\n onlyPlaceHolders: PropTypes.bool,\n display: PropTypes.bool.isRequired,\n wallHeight: PropTypes.number\n };\n\n canvas = React.createRef();\n\n constructor(props) {\n super(props);\n this.state = { previewSrc: null, building: false };\n }\n\n componentDidMount() {\n this.renderPreview();\n }\n\n componentDidUpdate(prevProps) {\n const {\n previewConfig,\n worksExtended,\n currentColor,\n onlyPlaceHolders,\n wallPaper,\n customImage\n } = this.props;\n const {\n previewConfig: previewConfigWas,\n worksExtended: worksExtendedWas,\n currentColor: currentColorWas,\n onlyPlaceHolders: onlyPlaceHoldersWas,\n wallPaper: wallPaperWas,\n customImage: customImageWas\n } = prevProps;\n const compareProps = {\n previewConfig,\n worksExtended,\n currentColor,\n onlyPlaceHolders,\n wallPaper,\n customImage\n };\n const comparePropsWas = {\n previewConfig: previewConfigWas,\n worksExtended: worksExtendedWas,\n currentColor: currentColorWas,\n onlyPlaceHolders: onlyPlaceHoldersWas,\n wallPaper: wallPaperWas,\n customImage: customImageWas\n };\n if (!deepEqual(compareProps, comparePropsWas)) {\n this.renderPreview();\n }\n }\n\n onBuildComplete = (src, previewReady) => {\n const { onBuildComplete } = this.props;\n this.setState({ building: !previewReady, previewSrc: src });\n onBuildComplete(src, previewReady);\n };\n\n onBuildStarted = () => {\n const { onBuildStarted } = this.props;\n onBuildStarted();\n this.setState({ building: true, previewSrc: null });\n }\n\n onImageRendered(imagesLoaded, totalImages, ctx, dpi) {\n const { onlyPlaceHolders } = this.props;\n const res = imagesLoaded + 1;\n if (res === totalImages && this.canvas.current) {\n if (onlyPlaceHolders) {\n this.renderMarks(ctx, dpi);\n }\n this.onBuildComplete(this.canvas.current.toDataURL(), true);\n }\n return res;\n }\n\n addImage(shiftX, shiftY, previewX, previewY, x, y, previewW, previewH,\n url, dpi, ctx, canvasWidth, canvasHeight, skipShadow, onlyPlaceHolders, imageNumber) {\n return new Promise((resolve) => {\n const iX = shiftX + (parseFloat(x) - previewX) * dpi;\n const iY = shiftY + (parseFloat(y) - previewY) * dpi;\n const iW = previewW * dpi;\n const iH = previewH * dpi;\n resizeImage(url.match(/^http/) ? `${ url }?_=${ new Date().getTime() }` : url, iW, iH).then((src) => {\n const img = new Image();\n img.onload = () => {\n ctx.beginPath();\n if (!skipShadow && !onlyPlaceHolders) {\n ctx.shadowOffsetX = 4;\n ctx.shadowOffsetY = 6;\n ctx.shadowColor = 'rgba(0, 0, 0, 0.4)';\n ctx.shadowBlur = 19;\n }\n if (fullyContained(iX, iY, iW, iH, canvasWidth, canvasHeight)) {\n if (onlyPlaceHolders) {\n ctx.fillStyle = '#adadad';\n ctx.fillRect(iX, iY, iW, iH);\n const text = `${ imageNumber + 1 }`;\n const numbersSize = dpi * 5;\n ctx.font = `bold ${ numbersSize }px sans-serif`;\n const dx = parseInt(iW / 2, 10);\n ctx.textBaseline = 'middle';\n ctx.textAlign = 'center';\n ctx.fillStyle = '#fff';\n ctx.fillText(text, iX + dx, iY + parseInt(iH / 2, 10));\n this.positions[imageNumber] = {\n x: iX, y: iY, w: iW, h: iH\n };\n } else {\n ctx.drawImage(img, iX, iY, iW, iH);\n }\n } else {\n const [sx, sy, sw, sh, dx, dy, dw, dh] = cropImage(\n iX, iY, iW, iH, canvasWidth, canvasHeight\n );\n ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);\n }\n ctx.closePath();\n resolve();\n };\n img.crossOrigin = '';\n img.src = src;\n });\n });\n }\n\n renderGroundMark(ctx) {\n const { wallHeight, worksExtended, markPositions: { groundLeft } } = this.props;\n const { height: canvasHeight } = Constants.preview;\n const lowerPos = canvasHeight - MARK_PADDING_PX * 2;\n const mappedWorks = worksExtended.map((w, index) => ({\n x: parseFloat(w.x),\n index\n })).sort((a, b) => Math.sign(a.x - b.x));\n const { index } = mappedWorks[0];\n const leftestWork = worksExtended[index];\n const text = parseFloat((wallHeight || 138) - leftestWork.y);\n const { x, y } = this.positions[index];\n renderMark(groundLeft, groundLeft, y, lowerPos, ctx);\n const mx0 = groundLeft - MARK_PADDING_PX;\n const mx1 = groundLeft + MARK_PADDING_PX;\n renderMark(mx0, mx1, y, y, ctx);\n renderMark(mx0, mx1, lowerPos, lowerPos, ctx);\n renderMark(groundLeft, x, y, y, ctx, CONNECTOR_MARK_COLOR);\n renderCaption(ctx, text, groundLeft - MARK_PADDING_PX, y + (lowerPos - y) / 2, 'right');\n }\n\n renderHangingMark(ctx, dpi, index0, index1, kind) {\n const { markPositions } = this.props;\n let x0 = 0;\n let y0 = 0;\n let x1 = 0;\n let y1 = 0;\n // eslint-disable-next-line no-unused-vars\n let _;\n if (kind === 'top' || kind === 'bottom') {\n y0 = markPositions[kind] * dpi;\n const pos = [\n this.positions[index0].x,\n this.positions[index0].x + this.positions[index0].w,\n this.positions[index1].x,\n this.positions[index1].x + this.positions[index1].w\n ].sort((a, b) => Math.sign(a - b));\n [_, x0, x1, _] = pos;\n renderMark(x0, x1, y0, y0, ctx);\n renderMark(x0, x0, y0 - MARK_PADDING_PX, y0 + MARK_PADDING_PX, ctx);\n renderMark(x1, x1, y0 - MARK_PADDING_PX, y0 + MARK_PADDING_PX, ctx);\n const imageMarkerBottom = (kind === 'top')\n ? Math.max(this.positions[index0].y, this.positions[index1].y)\n : Math.min(\n this.positions[index0].y + this.positions[index0].h,\n this.positions[index1].y + this.positions[index1].h\n );\n renderMark(x0, x0, y0, imageMarkerBottom, ctx, CONNECTOR_MARK_COLOR);\n renderMark(x1, x1, y0, imageMarkerBottom, ctx, CONNECTOR_MARK_COLOR);\n renderCaption(ctx, Math.abs((x1 - x0)) / dpi, x0 + ((x1 - x0) / 2), y0 - 2 * MARK_PADDING_PX, 'center');\n } else {\n x0 = markPositions[kind] * dpi;\n const pos = [\n this.positions[index0].y,\n this.positions[index0].y + this.positions[index0].h,\n this.positions[index1].y,\n this.positions[index1].y + this.positions[index1].h\n ].sort((a, b) => Math.sign(a - b));\n // eslint-disable-next-line no-unused-vars\n [_, y0, y1, _] = pos;\n renderMark(x0, x0, y0, y1, ctx);\n renderMark(x0 - MARK_PADDING_PX, x0 + MARK_PADDING_PX, y0, y0, ctx);\n renderMark(x0 - MARK_PADDING_PX, x0 + MARK_PADDING_PX, y1, y1, ctx);\n const imageMarkerSide = (kind === 'left')\n ? Math.max(this.positions[index0].x, this.positions[index1].x)\n : Math.min(\n this.positions[index0].x + this.positions[index0].w,\n this.positions[index1].x + this.positions[index1].w\n );\n renderMark(imageMarkerSide, x0, y0, y0, ctx, CONNECTOR_MARK_COLOR);\n renderMark(imageMarkerSide, x0, y1, y1, ctx, CONNECTOR_MARK_COLOR);\n renderCaption(\n ctx,\n Math.abs(y1 - y0) / dpi,\n x0 + MARK_PADDING_PX * (kind === 'left' ? -1 : 1),\n y0 + (y1 - y0) / 2,\n kind === 'left' ? 'right' : 'left'\n );\n }\n }\n\n renderMarks(ctx, dpi) {\n const { hangingVariations } = this.props;\n hangingVariations.forEach((v) => {\n v.kinds.forEach((kind) => {\n this.renderHangingMark(ctx, dpi, v.i0, v.i1, kind);\n });\n });\n this.renderGroundMark(ctx);\n }\n\n renderWorks(shiftX, shiftY, dpi, ctx, imagesLoaded, totalImages) {\n let iLoaded = imagesLoaded;\n const { previewConfig, worksExtended, onlyPlaceHolders } = this.props;\n const { x: previewX, y: previewY } = previewConfig;\n const { width: canvasWidth, height: canvasHeight } = Constants.preview;\n\n worksExtended.forEach((w, index) => {\n const {\n zoomPreviewUrl, x, y, previewW, previewH\n } = w;\n this.addImage(\n shiftX, shiftY, previewX, previewY, x, y, previewW, previewH,\n zoomPreviewUrl, dpi, ctx, canvasWidth, canvasHeight, false,\n onlyPlaceHolders, index\n ).then(() => {\n iLoaded = this.onImageRendered(iLoaded, totalImages, ctx, dpi);\n });\n });\n }\n\n renderWallPaper(shiftX, shiftY, dpi, ctx, il, ti) {\n let totalImages = ti;\n let imagesLoaded = il;\n const {\n previewConfig: {\n width: previewWidth, height: previewHeight, x: previewX, y: previewY\n },\n wallPaper\n } = this.props;\n const { src, widthIn, heightIn } = wallPaper || {};\n if (src) {\n totalImages += 1;\n resizeImage(src, widthIn * dpi, heightIn * dpi).then((newSrc) => {\n addWallPaper(ctx, newSrc, widthIn, heightIn, dpi,\n previewX, previewY, previewWidth, previewHeight).then(() => {\n imagesLoaded = this.onImageRendered(imagesLoaded, totalImages, ctx, dpi);\n this.renderCustomImage(shiftX, shiftY, dpi, ctx, imagesLoaded, totalImages);\n });\n });\n } else {\n this.renderCustomImage(shiftX, shiftY, dpi, ctx, imagesLoaded, totalImages);\n }\n }\n\n renderCustomImage(shiftX, shiftY, dpi, ctx, il, ti) {\n let totalImages = ti;\n let imagesLoaded = il;\n const { previewConfig, customImage, onlyPlaceHolders } = this.props;\n const { x: previewX, y: previewY } = previewConfig;\n const { width: canvasWidth, height: canvasHeight } = Constants.preview;\n if (customImage && customImage.src) {\n totalImages += 1;\n const {\n widthIn, heightIn, posX, posY, src\n } = customImage;\n resizeImage(src, widthIn * dpi, heightIn * dpi).then((newSrc) => {\n this.addImage(\n shiftX, shiftY, previewX, previewY, posX, posY, widthIn, heightIn,\n newSrc, dpi, ctx, canvasWidth, canvasHeight, true,\n onlyPlaceHolders, -1\n ).then(() => {\n imagesLoaded = this.onImageRendered(imagesLoaded, totalImages, ctx, dpi);\n this.renderWorks(shiftX, shiftY, dpi, ctx, imagesLoaded, totalImages);\n });\n });\n } else {\n this.renderWorks(shiftX, shiftY, dpi, ctx, imagesLoaded, totalImages);\n }\n }\n\n renderPreview() {\n const { building } = this.state;\n if (building) { return; }\n\n const {\n previewConfig, worksExtended, currentColor, onlyPlaceHolders\n } = this.props;\n const { width: canvasWidth, height: canvasHeight } = Constants.preview;\n this.onBuildStarted();\n this.positions = [];\n const {\n width: previewWidth, height: previewHeight\n } = previewConfig;\n\n if (!canvasWidth || !worksExtended.length || worksExtended.find((w) => !w.zoomPreviewUrl)) {\n this.onBuildComplete('data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==', false);\n return;\n }\n\n const dpiX = canvasWidth / previewWidth;\n const dpiY = canvasHeight / previewHeight;\n const dpi = Math.min(dpiX, dpiY);\n const shiftX = (canvasWidth - previewWidth * dpi) / 2;\n const shiftY = (canvasHeight - previewHeight * dpi) / 2;\n\n const ctx = this.canvas.current.getContext('2d');\n\n ctx.beginPath();\n fillBackrround(ctx, currentColor, canvasWidth, canvasHeight);\n if (onlyPlaceHolders) {\n ctx.strokeStyle = 'black';\n ctx.fillStyle = 'black';\n ctx.moveTo(0, canvasHeight - 3);\n ctx.lineTo(canvasWidth, canvasHeight - 3);\n ctx.stroke();\n ctx.textBaseline = 'bottom';\n ctx.textAlign = 'left';\n ctx.font = 'bold 12px sans-serif';\n ctx.fillText('Floor', 3, canvasHeight - 3);\n }\n ctx.closePath();\n this.renderWallPaper(shiftX, shiftY, dpi, ctx, 0, worksExtended.length);\n }\n\n render() {\n const { onClose, display } = this.props;\n const { width, height } = Constants.preview;\n const { previewSrc } = this.state;\n let preview = null;\n if (display) {\n preview = previewSrc ? (\n \n
\n \n {\n worksExtended.map((work, index) => renderWork(\n work, index, removeFromCanvas, addToCart, currency\n ))\n }\n
\n \n \n GO BACK TO WALL TO EDIT PREVIEW\n \n
\n ) : null;\n\n return (\n \n
\n );\n }\n}\n","import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\nimport { Button, TextArea, Input } from 'semantic-ui-react';\nimport * as classes from './classes.module.scss';\n\nexport default class EditDescription extends PureComponent {\n static propTypes = {\n description: PropTypes.string,\n name: PropTypes.string,\n updateAttributes: PropTypes.func.isRequired,\n onCancel: PropTypes.func.isRequired\n };\n\n constructor(props) {\n super(props);\n const { name, description } = props;\n this.state = { newDescription: description, newName: name };\n this.textarea = React.createRef();\n }\n\n componentDidMount() {\n this.textarea.current.focus();\n }\n\n onChangeDescription = (event) => this.setState({ newDescription: event.target.value });\n\n onChangeName = (event) => this.setState({ newName: event.target.value });\n\n onSave = () => {\n const { newDescription, newName } = this.state;\n const { updateAttributes, onCancel } = this.props;\n updateAttributes({\n name: newName,\n description: newDescription\n });\n onCancel();\n };\n\n render() {\n const { newDescription, newName } = this.state;\n const { onCancel } = this.props;\n return (\n \n { preview }\n
\n \n Wall Title:\n
\n );\n }\n}\n","import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\nimport * as classes from './classes.module.scss';\n\nexport default class UploadLogo extends PureComponent {\n static propTypes = {\n setLogo: PropTypes.func.isRequired,\n onCancel: PropTypes.func.isRequired\n };\n\n input = React.createRef();\n\n componentDidMount() {\n this.input.current.click();\n }\n\n onFileSelected = (e) => {\n const { setLogo, onCancel } = this.props;\n const reader = new FileReader();\n const file = e.target.files[0];\n reader.addEventListener('load', () => {\n setLogo(reader.result);\n onCancel();\n }, false);\n reader.readAsDataURL(file);\n }\n\n render() {\n return (\n \n \n \n
\n \n \n UPLOAD LOGO\n
\n );\n }\n}\n","import React, { useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport copy from 'clipboard-copy';\nimport { onWallShared } from 'arts/config/analytics';\nimport * as classes from './classes.module.scss';\n\nconst CopyText = ({ text, numItemsWall }) => {\n const ref = useRef(null);\n const copyLink = () => {\n onWallShared(numItemsWall);\n copy(text);\n };\n return (\n <>\n \n \n \n );\n};\n\nCopyText.propTypes = {\n text: PropTypes.string.isRequired,\n numItemsWall: PropTypes.number.isRequired\n};\n\nexport default CopyText;\n","import React, { useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n Button\n} from 'semantic-ui-react';\nimport Select from 'react-select';\nimport * as exportClasses from '../export/classes.module.scss';\nimport * as classes from './classes.module.scss';\nimport TagEditor from '../../../shared/tag_editor';\n\nconst mapValues = (collection) => collection.map(v => ({ value: v.id, label: v.name }));\nconst mapSelectedValues = (ids, collection) => collection\n .filter(v => ids.indexOf(v.id) > -1)\n .map(v => ({ value: v.id, label: v.name }));\n\nconst Attributes = ({\n onDone, updateAttributes, keywordList, colorList, associatedRoomIds, associatedHomeDecorStyleIds\n}) => {\n // console.log('attrs');\n //\n const setAtts = useCallback(\n (key) => (values) => updateAttributes({ [key]: values })\n );\n\n const setKeywords = setAtts('keywordList');\n const setColors = setAtts('colorList');\n\n const setIds = useCallback(\n (key) => (values) => updateAttributes({ [key]: values.map(v => v.value) })\n );\n\n const onRoomIds = setIds('associatedRoomIds');\n const onStyleIds = setIds('associatedHomeDecorStyleIds');\n\n return (\n \n \n Done\n \n
\n );\n};\n\nAttributes.propTypes = {\n onDone: PropTypes.func.isRequired,\n updateAttributes: PropTypes.func.isRequired,\n keywordList: PropTypes.arrayOf(PropTypes.string).isRequired,\n colorList: PropTypes.arrayOf(PropTypes.string).isRequired,\n associatedRoomIds: PropTypes.arrayOf(PropTypes.number).isRequired,\n associatedHomeDecorStyleIds: PropTypes.arrayOf(PropTypes.number).isRequired\n};\n\nexport default Attributes;\n","// extracted by mini-css-extract-plugin\nvar _1 = \"eI0gKMQGNOV7sTSGAJ9N\";\nvar _2 = \"nqvMlKT9lrm_inXI7u03\";\nexport { _1 as \"form\", _2 as \"root\" }\n","import { connect } from 'react-redux';\nimport Attributes from './attributes';\nimport { updateAttributes } from '../../actions/canvas';\n\nconst mapStateToProps = (state) => {\n const {\n canvas: {\n keywordList, colorList, associatedRoomIds, associatedHomeDecorStyleIds\n }\n } = state;\n\n return {\n keywordList, colorList, associatedRoomIds, associatedHomeDecorStyleIds\n };\n};\n\nexport default connect(mapStateToProps, { updateAttributes })(Attributes);\n","import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\nimport { Button, Checkbox, Loader } from 'semantic-ui-react';\nimport classnames from 'classnames';\nimport { onWallSaved, onWallShared } from 'arts/config/analytics';\nimport PanelLayout from '../panel/layout';\nimport * as shared from '../assets/shared.module.scss';\nimport * as classes from './classes.module.scss';\nimport Const from '../../config/const';\nimport WorkDetails from '../info/work_details';\nimport Preview from './preview';\nimport EditDescription from './edit_description';\nimport UploadLogo from './upload_logo';\nimport CopyText from './copy_text';\nimport Attributes from '../attributes';\n\nexport default class Export extends PureComponent {\n static propTypes = {\n closePanel: PropTypes.func.isRequired,\n savePreview: PropTypes.func.isRequired,\n publish: PropTypes.func.isRequired,\n showSharing: PropTypes.func.isRequired,\n updateAttributes: PropTypes.func.isRequired,\n setLogo: PropTypes.func.isRequired,\n resetLogo: PropTypes.func.isRequired,\n name: PropTypes.string,\n description: PropTypes.string,\n worksExtended: PropTypes.array.isRequired,\n totalPrice: PropTypes.number.isRequired,\n currency: PropTypes.string.isRequired,\n wallId: PropTypes.number.isRequired,\n // savingWall\n savingPictures: PropTypes.bool.isRequired,\n // exporting\n publishing: PropTypes.bool.isRequired,\n savingPreview: PropTypes.bool.isRequired,\n previewSaved: PropTypes.bool.isRequired,\n previewSavingError: PropTypes.object,\n previewSrc: PropTypes.string,\n logoSrc: PropTypes.string,\n // sharing\n sharingUrl: PropTypes.string\n };\n\n constructor(props) {\n super(props);\n this.state = {\n previewReady: false,\n previewReadyTransparent: false,\n showPrice: true,\n src: null,\n srcTransparent: null,\n editingDescription: false,\n uploadingLogo: false,\n editingAttributes: false\n };\n }\n\n componentDidUpdate({ publishing: prevPublishing }) {\n const { publishing } = this.props;\n if (publishing !== prevPublishing && !publishing) {\n // eslint-disable-next-line no-alert\n alert('Wall published');\n }\n }\n\n closePanel = () => {\n const { closePanel } = this.props;\n closePanel(Const.panelKinds.export);\n }\n\n savePreview = () => {\n const { savePreview, worksExtended } = this.props;\n const { src, srcTransparent, previewTimeStamp } = this.state;\n const itemsCount = (worksExtended || []).length;\n onWallSaved(itemsCount);\n savePreview(src, srcTransparent, previewTimeStamp);\n };\n\n onShareWall = () => {\n const { showSharing, worksExtended } = this.props;\n const itemsCount = (worksExtended || []).length;\n onWallShared(itemsCount);\n showSharing();\n };\n\n onBuildComplete = (src, previewReady) => {\n const newState = { previewReady, src };\n if (previewReady && src) {\n newState.previewTimeStamp = new Date().getTime();\n }\n this.setState(newState);\n };\n\n onBuildCompleteTransparent = (srcTransparent, previewReadyTransparent) => {\n const newState = { previewReadyTransparent, srcTransparent };\n this.setState(newState);\n };\n\n onBuildStarted = () => this.setState({ previewReady: false });\n\n onBuildStartedTransparent = () => this.setState({ previewReadyTransparent: false });\n\n onTogglePrice = () => this.setState((state) => ({ showPrice: !state.showPrice }));\n\n onEditDescription = () => this.setState({ editingDescription: true });\n\n onCancelEditingDescription = () => this.setState({ editingDescription: false });\n\n onUploadLogo = () => {\n const { logoSrc, resetLogo } = this.props;\n if (logoSrc) {\n resetLogo();\n return;\n }\n this.setState({ uploadingLogo: true });\n }\n\n onCancelUploadingLogo = () => this.setState({ uploadingLogo: false });\n\n exportPdf = () => {\n const { showPrice } = this.state;\n const { logoSrc } = this.props;\n document.querySelector('#pdf_form input[name=prices]').value = showPrice ? 'true' : 'false';\n document.querySelector('#pdf_form input[name=pdf_logo]').value = logoSrc || '';\n document.querySelector('#pdf_form').submit();\n };\n\n startEditingAttributes = () => this.setState({ editingAttributes: true });\n\n stopEditingAttributes = () => this.setState({ editingAttributes: false });\n\n renderWorks() {\n const { worksExtended, currency } = this.props;\n const { showPrice } = this.state;\n return worksExtended.map((w, index) => (\n \n ({ value: v, label: v })) }\n onChange={ setColors }\n />\n ({ value: v, label: v })) }\n onChange={ setKeywords }\n />\n
\n Colors
\nKeywords
\nRooms
\nDecor Styles
\n\n
\n ));\n }\n\n renderActions() {\n const {\n previewReady, showPrice, previewReadyTransparent, editingAttributes\n } = this.state;\n const {\n totalPrice, savingPreview, previewSavingError, previewSrc,\n publish, publishing, savingPictures, sharingUrl, worksExtended\n } = this.props;\n const disableControls = !totalPrice || !previewReadyTransparent\n || !previewReady || savingPreview || publishing || savingPictures;\n\n let renderStatus = null;\n if (previewSavingError) {\n renderStatus = (\n \n
\n \n \n \n
\n \n
\n \n Error saving preview, please try again.\n
\n );\n } else if (savingPreview) {\n renderStatus = (\n\n
\n );\n } else if (publishing) {\n renderStatus = (\n Saving preview, please wait...
\n\n
\n );\n }\n\n const renderPublish = window.canPublish ? (\n Publishing, please wait...
\n\n \n Export PDF\n \n { renderEditAttributes }\n { renderStatus }\n
\n \n \n Share\n \n { renderPublish }\n
\n \n );\n }\n\n renderLogo() {\n const { logoSrc, setLogo } = this.props;\n const { uploadingLogo } = this.state;\n\n let content = null;\n if (uploadingLogo) {\n content = (\n \n UPLOAD YOUR LOGO\n
\n 200x200px tops, PNG/JPG image\n
\n );\n } else if (logoSrc) {\n content = (\n \n 200x200px tops, PNG/JPG image\n
\n \n
\n );\n }\n\n const hoverTitle = logoSrc ? 'REMOVE LOGO' : 'UPLOAD LOGO';\n const hover = uploadingLogo ? null : (\n \n \n { hoverTitle }\n \n
\n );\n\n return (\n <>\n \n \n { content }\n { hover }\n
\n \n );\n }\n\n render() {\n const {\n name, description, totalPrice, worksExtended, updateAttributes, currency\n } = this.props;\n\n const { showPrice, editingDescription, editingAttributes } = this.state;\n const price = showPrice ? (\n \n Total Price: \n { currency }\n \n { totalPrice.toFixed(2) }\n \n
\n ) : null;\n\n const renderDesc = description ? (\n \n Wall Descripiton: \n { description }\n
\n ) : (\n \n ADD WALL DESCRIPTION\n
\n );\n\n const detailsSection = editingDescription ? (\n \n Wall Title: \n { name }\n
\n { renderDesc }\n \n \n EDIT\n \n
\n \n );\n\n const renderAttributes = (editingAttributes && window.canPublish) ? (\n <>\n \n Attributes\n
\n\n
\n \n
\n \n \n \n Art Details\n \n
\n
\n \n General Info\n
\n\n
\n { renderAttributes }\n \n { detailsSection }\n
\n { window.allowLogo ? this.renderLogo() : null }\n \n \n Art Details\n \n \n \n { worksExtended.length }\n items(s)\n \n { price }\n \n
\n \n { this.renderWorks() }\n
\n \n { this.renderActions() }\n
\n \n
\n );\n};\n\nWorkTitle.propTypes = {\n imageUrl: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n authorName: PropTypes.string.isRequired,\n medium: PropTypes.bool,\n large: PropTypes.bool,\n isHidden: PropTypes.bool,\n children: PropTypes.node\n};\n\nexport default WorkTitle;\n","import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\nimport { Button, Radio, Icon } from 'semantic-ui-react';\nimport {\n FULL_BLEED, MATTE, FLOAT_DECKLED, FLOAT_STRIGHT\n} from 'arts/components/PapersMenu/mounts';\nimport PanelLayout from '../panel/layout';\nimport SelectableFrame from './selectable_frame';\nimport * as shared from '../assets/shared.module.scss';\nimport * as classes from './classes.module.scss';\nimport More from '../assets/more';\nimport Remove from '../assets/remove';\nimport Bag from '../assets/bag';\nimport WorkTitle from './work_title';\nimport Const from '../../config/const';\nimport { sortedHumanSizes } from '../../config/utils';\n\nconst NO_FRAME = 'noFrame';\n\nconst bestOptionFor = (obj, sequence) => {\n for (let i = 0, l = sequence.length; i < l; i += 1) {\n if (obj[sequence[i]]) {\n return sequence[i];\n }\n }\n return sequence[0];\n};\n\nconst buildFrameGroups = (options, frameId) => {\n const res = {\n [NO_FRAME]: options[0]\n };\n options.forEach((o) => {\n if (o.frameId) {\n const matKey = o.mount;\n res[matKey] = res[matKey] || {};\n res[matKey][o.frameCategory] = res[matKey][o.frameCategory] || [];\n res[matKey][o.frameCategory].push(o);\n if (frameId === o.frameId) {\n res.currentMount = matKey;\n res.currentMatColor = o.frameMatColorName;\n }\n }\n });\n res.currentMount = res.currentMount || bestOptionFor(res, ['matte', 'fullBleed', NO_FRAME]);\n // noFrame, 0, 3, currentMount\n return res;\n};\n\nconst filterOptions = (options, matColor) => {\n const useMatColor = matColor || 'White';\n const res = {};\n Object.keys(options).forEach((key) => {\n res[key] = options[key].filter((o) => o.frameMatColorName === useMatColor);\n });\n return res;\n};\n\nexport default class WorkDetails extends PureComponent {\n static propTypes = {\n workId: PropTypes.number,\n workSizeId: PropTypes.number,\n frameId: PropTypes.number,\n index: PropTypes.number,\n workSizes: PropTypes.array,\n setWorkSize: PropTypes.func.isRequired,\n removeFromCanvas: PropTypes.func.isRequired,\n setFrame: PropTypes.func.isRequired,\n hide: PropTypes.func.isRequired,\n showMoreLikeThis: PropTypes.func.isRequired,\n addToCart: PropTypes.func.isRequired,\n framingOptions: PropTypes.array.isRequired,\n landscape: PropTypes.bool,\n imageUrl: PropTypes.string,\n title: PropTypes.string,\n authorName: PropTypes.string,\n isHidden: PropTypes.bool\n };\n\n constructor(props) {\n super(props);\n const { framingOptions, frameId } = props;\n this.state = buildFrameGroups(framingOptions, frameId);\n this.setFrameFromOption = this.setFrameFromOption.bind(this);\n }\n\n componentDidUpdate(prevProps) {\n const { framingOptions, frameId } = this.props;\n if (prevProps.framingOptions !== framingOptions) {\n // eslint-disable-next-line react/no-did-update-set-state\n this.setState(buildFrameGroups(framingOptions, frameId));\n }\n }\n\n setFrameFromOption(frameId, mount, frameMatColorName) {\n const { setFrame, index } = this.props;\n setFrame(frameId, index);\n this.setState({ currentMount: mount, currentMatColor: frameMatColorName });\n }\n\n setMount(mount, frameMatColorName) {\n const {\n frameId, setFrame, index, workSizeId\n } = this.props;\n const newFrameId = this.findFirstMatchingFrameId(\n workSizeId, workSizeId, mount, frameMatColorName\n );\n if (frameId !== newFrameId) {\n setFrame(newFrameId, index);\n }\n this.setState({ currentMount: mount, currentMatColor: frameMatColorName });\n }\n\n setNoFrame = () => {\n const { setFrame, index } = this.props;\n setFrame(null, index);\n this.setState({ currentMatColor: null, currentMount: MATTE });\n };\n\n removeWork = () => {\n const { hide, index, removeFromCanvas } = this.props;\n removeFromCanvas(index);\n hide();\n }\n\n setWorkSize = (newId) => {\n const { currentMount, currentMatColor } = this.state;\n const {\n index, setFrame, setWorkSize, workSizeId\n } = this.props;\n const newFrameId = this.findFirstMatchingFrameId(\n workSizeId, newId, currentMount, currentMatColor\n );\n setWorkSize(newId, index);\n if (newFrameId) {\n setFrame(newFrameId, index);\n }\n }\n\n addToCart = () => {\n const { addToCart, index } = this.props;\n addToCart(index);\n }\n\n showMoreLikeThis = () => {\n const { showMoreLikeThis, workId, index } = this.props;\n showMoreLikeThis(workId, index, Const.moreLikeThisSources.canvas);\n }\n\n findFirstMatchingFrameId(prevWorkSize, newWorkSizeId, mount, frameMatColorName) {\n const {\n frameId, workSizes\n } = this.props;\n const ws = (workSizes || []).find((w) => w.id === prevWorkSize);\n let option;\n if (!frameId) {\n option = ws.options.find((o) => !!o.frameId);\n } else {\n option = ws.options.find((o) => o.frameId === frameId);\n }\n if (!option) {\n return null;\n }\n const { frameName } = option;\n const newWs = (workSizes || []).find((w) => w.id === newWorkSizeId);\n const altOption = newWs.options.find(\n (o) => (\n o.frameName === frameName\n && o.mount === mount\n && o.frameMatColorName === frameMatColorName\n )\n );\n if (altOption) {\n return altOption.frameId;\n }\n const mountAndMatOption = newWs.options.find(\n (o) => (\n o.mount === mount && o.frameMatColorName === frameMatColorName\n )\n );\n if (mountAndMatOption) {\n return mountAndMatOption.frameId;\n }\n const mountOption = newWs.options.find((o) => o.mount === mount);\n if (mountOption) {\n return mountOption.frameId;\n }\n return null;\n }\n\n renderWorkSizes() {\n const {\n workSizes, workSizeId, landscape\n } = this.props;\n return sortedHumanSizes(workSizes || [], landscape).map(([hs, ws]) => (\n \n \n
\n \n \n { hidden }\n { title }\n \n \n by \n { authorName }\n \n { children }\n
\n \n
\n );\n }\n\n renderMountSelection(mount, label) {\n const { framingOptions, frameId } = this.props;\n const { currentMount, currentMatColor } = this.state;\n if (framingOptions.findIndex((o) => o.mount === mount) === -1) {\n // no frames with this kind\n return null;\n }\n const availableMatColors = mount === MATTE\n ? [...new Set(framingOptions.filter(o => o.frameMatColorName).map(o => o.frameMatColorName))]\n : [];\n if (mount === MATTE) {\n return (\n <>\n {\n availableMatColors.map((matColor) => (\n \n { name }\n
\n\n {\n options.map((o) => (\n
\n \n
\n \n { Object.keys(filteredOptions).map((c) => this.renderCategory(c, filteredOptions[c])) }\n
\n \n ) : null;\n\n const renderTitle = imageUrl ? (\n \n
\n \n
\n \n
\n \n \n \n \n \n \n
\n { renderTitle }\n \n { this.renderWorkSizes() }\n
\n { selectFrame }\n \n \n
\n);\n\nexport default BackButton;\n","import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\nimport { Loader } from 'semantic-ui-react';\nimport classnames from 'classnames';\nimport { WorkPropTypes } from '../../config/proptypes';\nimport Work from '../find_works/work';\nimport WorkTitle from '../work_details/work_title';\nimport AddToCanvasButtons from '../find_works/add_to_canvas';\nimport Const from '../../config/const';\nimport * as findClasses from '../find_works/classes.module.scss';\nimport * as detailsClasses from '../work_details/classes.module.scss';\nimport PanelLayout from '../panel/layout';\nimport * as shared from '../assets/shared.module.scss';\nimport * as classes from './classes.module.scss';\nimport PinButton from '../shared/pin';\nimport BackButton from '../shared/back';\n\nexport default class MoreLikeThis extends PureComponent {\n static propTypes = {\n sourceId: PropTypes.number,\n loading: PropTypes.bool.isRequired,\n\n hideMoreLikeThis: PropTypes.func.isRequired,\n loadMoreLikeThis: PropTypes.func.isRequired,\n showMoreLikeThis: PropTypes.func.isRequired,\n addToCanvas: PropTypes.func.isRequired,\n\n original: PropTypes.shape({\n artistName: PropTypes.string,\n authorName: PropTypes.string,\n imageUrl: PropTypes.string,\n title: PropTypes.string,\n id: PropTypes.number,\n workSizesAttributes: PropTypes.object,\n workSizes: PropTypes.array,\n landscape: PropTypes.bool\n }),\n works: PropTypes.arrayOf(PropTypes.shape(WorkPropTypes)),\n\n pinned: PropTypes.bool.isRequired,\n togglePin: PropTypes.func.isRequired,\n showWorks: PropTypes.func.isRequired\n };\n\n constructor(props) {\n super(props);\n this.state = { large: true };\n }\n\n componentDidMount() {\n const { loadMoreLikeThis } = this.props;\n loadMoreLikeThis();\n }\n\n componentDidUpdate({ sourceId: sourceIdWas }) {\n const { sourceId, loadMoreLikeThis } = this.props;\n if (sourceId && sourceId !== sourceIdWas) {\n loadMoreLikeThis();\n }\n }\n\n onToggle = () => this.setState(({ large }) => ({\n large: !large\n }));\n\n addToCanvas = (workSizeId, width, height) => {\n const {\n original: { id }, addToCanvas, hideMoreLikeThis, pinned\n } = this.props;\n addToCanvas({\n workId: id, workSizeId, width, height\n });\n if (!pinned) {\n hideMoreLikeThis();\n }\n };\n\n addToCanvasAndClose = (opts) => {\n const { addToCanvas, hideMoreLikeThis, pinned } = this.props;\n addToCanvas(opts);\n if (!pinned) {\n hideMoreLikeThis();\n }\n };\n\n renderLoader() {\n const { loading } = this.props;\n if (!loading) { return null; }\n return (\n \n
\n );\n }\n\n renderWorks() {\n const { works, showMoreLikeThis } = this.props;\n return (works || []).map((w, index) => (\n \n \n \n\n
\n \n
\n \n \n More like \n "\n { title }\n "\n \n \n «\n \n
\n );\n\n return (\n \n
\n\n \n );\n }\n}\n","// extracted by mini-css-extract-plugin\nvar _1 = \"JBA_rgdDLV0IfMdTDIsa\";\nvar _2 = \"F_DlNVSgYoe21DKUsWQ6\";\nvar _3 = \"srGAmk_enMSM5V2xfVro\";\nvar _4 = \"J0AS9vqNCyAPGphoVXSA\";\nvar _5 = \"J1okO5TTbvH4gJM_YdXg\";\nexport { _1 as \"headerClass\", _2 as \"large\", _3 as \"sizes\", _4 as \"small\", _5 as \"subTitle\" }\n","import { connect } from 'react-redux';\nimport MoreLikeThis from './more_like_this';\nimport {\n hideMoreLikeThis, loadMoreLikeThis, showMoreLikeThis, showWorks\n} from '../../actions/more_like_this';\nimport { addToCanvas } from '../../actions/canvas';\nimport { togglePin } from '../../actions/pin';\n\nconst mapStateToProps = ({ moreLikeThis, pin }) => ({ ...moreLikeThis, ...pin });\n\nexport default connect(mapStateToProps, {\n hideMoreLikeThis, loadMoreLikeThis, showMoreLikeThis, addToCanvas, togglePin, showWorks\n})(MoreLikeThis);\n","import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\nimport { Checkbox } from 'semantic-ui-react';\nimport Const from '../../config/const';\nimport PanelLayout from '../panel/layout';\nimport * as shared from '../assets/shared.module.scss';\n\nexport default class CustomPreviewPanel extends PureComponent {\n static propTypes = {\n custom: PropTypes.bool.isRequired,\n automaticPreview: PropTypes.shape({\n x: PropTypes.number.isRequired,\n y: PropTypes.number.isRequired,\n width: PropTypes.number.isRequired,\n height: PropTypes.number.isRequired\n }).isRequired,\n\n closePanel: PropTypes.func.isRequired,\n setCrop: PropTypes.func.isRequired,\n resetCrop: PropTypes.func.isRequired\n };\n\n closePanel = () => {\n const { closePanel } = this.props;\n closePanel(Const.panelKinds.customPreview);\n };\n\n onToggleCrop = (e, { checked }) => {\n const {\n automaticPreview: {\n x, y, width, height\n },\n setCrop,\n resetCrop\n } = this.props;\n\n if (checked) {\n setCrop({\n x, y, width, height\n });\n return;\n }\n resetCrop();\n };\n\n render() {\n const { custom } = this.props;\n\n return (\n \n
\n \n { this.renderWorks() }\n { this.renderLoader() }\n
\n \n
\n \n );\n }\n}\n","import Constants from '../config/const';\n\nexport const setCrop = ({\n x, y, width, height\n}) => ({\n type: Constants.crop.set,\n x,\n y,\n width,\n height\n});\n\nexport const resetCrop = () => ({ type: Constants.crop.reset });\n","import { connect } from 'react-redux';\nimport CustomPreviewPanel from './custom_preview_panel';\nimport { automaticPreview } from '../../selectors/preview';\nimport { setCrop, resetCrop } from '../../actions/crop';\nimport { closePanel } from '../../actions/panel';\n\nconst mapStateToProps = (state) => {\n const { crop } = state;\n return {\n ...crop,\n automaticPreview: automaticPreview(state)\n };\n};\n\nexport default connect(mapStateToProps, {\n closePanel, setCrop, resetCrop\n})(CustomPreviewPanel);\n","import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport { Loader, Checkbox, Button } from 'semantic-ui-react';\nimport PanelLayout from '../panel/layout';\nimport Preview from '../export/preview';\nimport * as shared from '../assets/shared.module.scss';\nimport * as classes from './styles.module.scss';\nimport Const from '../../config/const';\n\nconst KINDS = ['top', 'bottom', 'left', 'right'];\n\nexport default class Hanging extends PureComponent {\n static propTypes = {\n closePanel: PropTypes.func.isRequired,\n load: PropTypes.func.isRequired,\n update: PropTypes.func.isRequired,\n reset: PropTypes.func.isRequired,\n save: PropTypes.func.isRequired,\n\n worksExtended: PropTypes.array.isRequired,\n previewConfig: PropTypes.shape({\n height: PropTypes.number,\n width: PropTypes.number,\n x: PropTypes.number,\n y: PropTypes.number\n }).isRequired,\n\n loading: PropTypes.bool.isRequired,\n hangingVariations: PropTypes.array,\n markPositions: PropTypes.object,\n wallHeight: PropTypes.number\n };\n\n constructor(props) {\n super(props);\n this.state = { canSave: false, image: null };\n }\n\n componentDidMount() {\n const { load } = this.props;\n load();\n }\n\n onBuildStarted = () => this.setState({ canSave: false, image: null });\n\n onBuildComplete = (image, canSave) => this.setState({ canSave, image });\n\n onChecked(index, kind, checked) {\n const { hangingVariations, update } = this.props;\n const { first, second } = hangingVariations[index];\n if (checked) {\n update(first, second, kind, true);\n } else {\n update(first, second, kind, false);\n }\n }\n\n save = () => {\n const { save } = this.props;\n const { image } = this.state;\n save(image);\n };\n\n // eslint-disable-next-line class-methods-use-this\n renderKind(kind, kinds, index) {\n const isChecked = kinds.includes(kind);\n return (\n \n
\n \n \n { i0 + 1 }\n \n ←\n →\n \n { i1 + 1 }\n \n { KINDS.map((k) => this.renderKind(k, kinds, index)) }\n
\n );\n }\n\n renderContent() {\n const {\n loading, hangingVariations, worksExtended, previewConfig,\n markPositions, reset, wallHeight\n } = this.props;\n\n if (loading || !hangingVariations.length) {\n return (\n \n
\n \n );\n }\n\n render() {\n const { closePanel } = this.props;\n\n return (\n \n
\n \n \n { renderSave }\n
\n \n { hangingVariations.map((hv, index) => this.renderVariation(hv, index)) }\n
\n \n { this.renderContent() }\n
\n \n );\n }\n}\n","// extracted by mini-css-extract-plugin\nvar _1 = \"cVFLze8UWrkLM1xsbaI6\";\nvar _2 = \"HL6xh6bIfxz8rbC88CYL\";\nexport { _1 as \"marks\", _2 as \"scroll\" }\n","import { connect } from 'react-redux';\nimport { closePanel } from '../../actions/panel';\nimport {\n load, update, reset, save\n} from '../../actions/hangings';\nimport { hangingPreview } from '../../selectors/preview';\nimport { workSizeDetails, hangingVariations } from '../../selectors/work_sizes';\nimport Hanging from './hanging';\n\nconst mapStateToProps = (state) => ({\n worksExtended: workSizeDetails(state),\n ...hangingPreview(state),\n hangingVariations: hangingVariations(state),\n ...state.hangings,\n wallHeight: state.canvas.height\n});\n\nexport default connect(mapStateToProps, {\n closePanel, load, update, reset, save\n})(Hanging);\n","import Constants from '../config/const';\nimport { loadHanging, saveHanging, saveHangingImage } from '../config/api';\n\nexport const load = () => (dispatch, getState) => {\n const { canvas: { wallId } } = getState();\n dispatch({ type: Constants.hangings.load });\n loadHanging(wallId).then(({ hangingMarks }) => {\n dispatch({\n type: Constants.hangings.loaded,\n hangingMarks\n });\n });\n};\n\nexport const update = (first, second, kind, isAdd) => ({\n type: Constants.hangings.update, first, second, kind, isAdd\n});\n\nexport const reset = () => ({\n type: Constants.hangings.reset\n});\n\nexport const save = (image) => (dispatch, getState) => {\n const { hangings: { hangingMarks }, canvas: { wallId } } = getState();\n dispatch({ type: Constants.hangings.saving });\n saveHanging(wallId, hangingMarks).then(({ hangingMarks: newMarks }) => {\n saveHangingImage(wallId, image).then(() => {\n dispatch({ type: Constants.hangings.saved, hangingMarks: newMarks });\n });\n });\n};\n","import React, { PureComponent } from 'react';\nimport { Sidebar } from 'semantic-ui-react';\nimport PropTypes from 'prop-types';\nimport AddArt from '../add_art';\nimport AddOther from '../add_other';\nimport GuidesConfig from '../guides_config';\nimport Info from '../info';\nimport Export from '../export';\nimport WorkDetails from '../work_details';\nimport MoreLikeThis from '../more_like_this';\nimport CustomPreviewPanel from '../custom_preview_panel';\nimport Hanging from '../hanging';\nimport Constants from '../../config/const';\nimport * as classes from './classes.module.scss';\n\nconst PANEL_DIRECTION_BY_KIND = {\n [Constants.panelKinds.works]: 'left',\n [Constants.panelKinds.other]: 'left',\n [Constants.panelKinds.grids]: 'left',\n [Constants.panelKinds.export]: 'left',\n [Constants.panelKinds.info]: 'right',\n [Constants.panelKinds.details]:'left',\n [Constants.panelKinds.moreLikeThis]: 'left',\n [Constants.panelKinds.customPreview]: 'right',\n [Constants.panelKinds.hanging]: 'right'\n};\n\nconst PANEL_CONTENT_BY_KIND = {\n [Constants.panelKinds.works]: AddArt,\n [Constants.panelKinds.other]: AddOther,\n [Constants.panelKinds.grids]: GuidesConfig,\n [Constants.panelKinds.export]: Export,\n [Constants.panelKinds.info]: Info,\n [Constants.panelKinds.details]: WorkDetails,\n [Constants.panelKinds.moreLikeThis]: MoreLikeThis,\n [Constants.panelKinds.customPreview]: CustomPreviewPanel,\n [Constants.panelKinds.hanging]: Hanging\n};\n\nconst PANEL_WIDTH_BY_KIND = {\n [Constants.panelKinds.works]: 'very wide',\n [Constants.panelKinds.other]: 'very wide',\n [Constants.panelKinds.grids]: 'thin',\n [Constants.panelKinds.info]: 'thin',\n [Constants.panelKinds.export]: 'very wide',\n [Constants.panelKinds.details]: 'wide',\n [Constants.panelKinds.moreLikeThis]: 'very wide',\n [Constants.panelKinds.customPreview]: 'thin',\n [Constants.panelKinds.hanging]: 'very wide'\n};\n\nconst contentByKind = (doRender, C, options) => {\n if (!C || !doRender) { return null; }\n return \n \n 1"\n \n
\n);\n\nMeter.propTypes = {\n dpi: PropTypes.number.isRequired\n};\n\nexport default Meter;\n","import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\n\nexport default class WorkingArea extends PureComponent {\n static propTypes = {\n x: PropTypes.number.isRequired,\n y: PropTypes.number.isRequired,\n w: PropTypes.number.isRequired,\n h: PropTypes.number.isRequired,\n draggingOpts: PropTypes.object.isRequired,\n works: PropTypes.array.isRequired,\n pixelsToInches: PropTypes.func.isRequired,\n renderWork: PropTypes.func.isRequired,\n setCenter: PropTypes.func.isRequired,\n resetCenter: PropTypes.func.isRequired\n };\n\n componentDidMount() {\n const {\n w, h, pixelsToInches, resetCenter\n } = this.props;\n const { x, y } = pixelsToInches({ x: w, y: h });\n resetCenter(x, y);\n }\n\n componentDidUpdate(prevProps) {\n const {\n x, y, w, h\n } = this.props;\n const {\n x: wasX, y: wasY, w: wasW, h: wasH\n } = prevProps;\n if (x !== wasX || y !== wasY || w !== wasW || h !== wasH) {\n this.setCenter();\n }\n }\n\n setCenter() {\n const {\n x, y, w, h, pixelsToInches, setCenter\n } = this.props;\n const cX = (w / 2) - x;\n const cY = (h / 2) - y;\n const { x: centerX, y: centerY } = pixelsToInches({ x: cX, y: cY });\n const { x: posX, y: posY } = pixelsToInches({ x: -x, y: -y });\n setCenter(centerX, centerY, posX, posY);\n }\n\n render() {\n const {\n works, draggingOpts, renderWork // , x, y\n } = this.props;\n return (\n <>\n { works.map((work, index) => renderWork(draggingOpts, work, index)) }\n \n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Constants from '../../config/const';\nimport * as classes from './classes.module.scss';\n\nconst { whitePos } = Constants.silhouette;\n\nconst WhiteBg = ({\n posX, posY, centerX, centerY, dpi, silhouetteY\n}) => {\n const screenHeight = (centerY - posY) * 2;\n const screenWidth = (centerX - posX) * 2;\n\n const wTop = silhouetteY + whitePos;\n\n if (posY + screenHeight < wTop) {\n return null;\n }\n\n // const whitePosTop = wTop - posY;\n const whitePosLeft = posX;\n const whitePosRight = whitePosLeft + screenWidth;\n\n const style = {\n top: wTop * dpi,\n height: '100%',\n left: whitePosLeft * dpi,\n right: whitePosRight * dpi\n };\n return (\n \n );\n};\n\nWhiteBg.propTypes = {\n dpi: PropTypes.number.isRequired,\n posX: PropTypes.number.isRequired,\n posY: PropTypes.number.isRequired,\n centerX: PropTypes.number.isRequired,\n centerY: PropTypes.number.isRequired,\n silhouetteY: PropTypes.number.isRequired\n};\n\nexport default WhiteBg;\n","import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Image from './image';\nimport * as classes from './classes.module.scss';\n\nexport default class CustomImage extends PureComponent {\n static propTypes = {\n dpi: PropTypes.number.isRequired,\n x: PropTypes.number.isRequired,\n y: PropTypes.number.isRequired,\n widthIn: PropTypes.number.isRequired,\n heightIn: PropTypes.number.isRequired,\n src: PropTypes.string.isRequired,\n dragging: PropTypes.bool.isRequired,\n moveCustomImageTo: PropTypes.func.isRequired\n };\n\n componentDidUpdate(prevProps) {\n const { x, y, moveCustomImageTo } = this.props;\n if (prevProps.x !== x || prevProps.y !== y) {\n moveCustomImageTo({ x, y });\n }\n }\n\n render() {\n const {\n dpi, dragging, src, heightIn, widthIn\n } = this.props;\n return (\n \n { label }\n
\n );\n tick += step;\n tickCm += stepCm;\n }\n return res;\n }\n\n render() {\n return (\n \n { this.renderTicks() }\n
\n );\n }\n}\n","import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport * as classes from './classes.module.scss';\nimport { rulersForDpi } from '../../config/dpi';\n\nexport default class Ruler extends PureComponent {\n static propTypes = {\n pos: PropTypes.number.isRequired,\n center: PropTypes.number.isRequired,\n dpi: PropTypes.number.isRequired,\n maxLastTick: PropTypes.number.isRequired\n };\n\n renderTicks() {\n const {\n pos, dpi, maxLastTick\n } = this.props;\n const {\n step, labelStep, labelStepCm, stepCm\n } = rulersForDpi(dpi);\n const firstTick = Math.max(Math.ceil(pos / step) * step, 0);\n const lastTick = maxLastTick;\n let tick = lastTick;\n let tickCm = Math.round(tick * 2.54);\n let labelTick = maxLastTick - lastTick;\n let labelTickCm = Math.round(labelTick * 2.54);\n const res = [];\n while (tick >= firstTick) {\n let label = null;\n const top = (tick - pos);\n const topCm = tickCm - pos * 2.54;\n let style;\n if (window.currentLocale.unit === 'cm') {\n style = { top: topCm * dpi / 2.54 };\n if (labelTickCm % labelStepCm === 0) {\n label = labelTickCm;\n }\n } else {\n style = { top: top * dpi };\n if (labelTick % labelStep === 0) {\n label = labelTick;\n }\n }\n const className = classnames(\n classes.tickV,\n { [classes.labeledTickV]: label !== null }\n );\n\n res.push(\n \n { label }\n
\n );\n tick -= step;\n tickCm -= stepCm;\n labelTick += step;\n labelTickCm += stepCm;\n }\n return res;\n }\n\n render() {\n return (\n \n { this.renderTicks() }\n
\n );\n }\n}\n","import { connect } from 'react-redux';\nimport HRulerS from './h_ruler';\nimport VRulerS from './v_ruler';\n\nconst mapStateToPropsH = ({\n canvas: {\n posX, centerX, dpi, width\n }\n}) => ({\n pos: posX,\n center: centerX,\n maxLastTick: width,\n dpi\n});\n\nconst mapStateToPropsV = ({\n canvas: {\n posY, centerY, dpi, height\n }\n}) => ({\n pos: posY,\n center: centerY,\n maxLastTick: height,\n dpi\n});\n\nexport const HRuler = connect(mapStateToPropsH)(HRulerS);\nexport const VRuler = connect(mapStateToPropsV)(VRulerS);\n\n// export default connect(mapStateToProps)(Ruler);\n","import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\nimport * as classes from './classes.module.scss';\nimport { rulersForDpi } from '../../config/dpi';\n\nexport default class Guids extends PureComponent {\n static propTypes = {\n posX: PropTypes.number.isRequired,\n centerX: PropTypes.number.isRequired,\n posY: PropTypes.number.isRequired,\n centerY: PropTypes.number.isRequired,\n dpi: PropTypes.number.isRequired,\n guidesVisible: PropTypes.bool.isRequired,\n widthVisible: PropTypes.bool.isRequired,\n heightVisible: PropTypes.bool.isRequired,\n\n width: PropTypes.number.isRequired,\n height: PropTypes.number.isRequired\n };\n\n renderWallGuide(kind, position) {\n const {\n posX, posY, centerX, centerY, dpi, width, height\n } = this.props;\n const viewPortWidth = (centerX - posX) * 2;\n const viewPortHeight = (centerY - posY) * 2;\n let style = null;\n let className = null;\n if (kind === 'vertical' && posX < position && position < posX + viewPortWidth) {\n style = {\n left: (position - posX) * dpi,\n width: 0,\n top: 0,\n height: (height - posY) * dpi\n };\n className = classes.vertical;\n } else if (kind === 'horizontal' && posY < position && position < posY + viewPortHeight) {\n style = {\n left: 0,\n width: (width - posX) * dpi,\n top: (position - posY) * dpi,\n hight: 0\n };\n className = classes.horizontal;\n }\n if (!style) { return null; }\n return (\n \n
\n);\n\nexport default class Canvas extends PureComponent {\n static propTypes = {\n currentColor: PropTypes.string.isRequired,\n dpi: PropTypes.number.isRequired,\n works: PropTypes.array.isRequired,\n moveWorkTo: PropTypes.func.isRequired,\n showWorkDetails: PropTypes.func.isRequired,\n setCenter: PropTypes.func.isRequired,\n recalculateDpis: PropTypes.func.isRequired,\n posX: PropTypes.number.isRequired,\n posY: PropTypes.number.isRequired,\n centerX: PropTypes.number.isRequired,\n centerY: PropTypes.number.isRequired,\n rulerVisible: PropTypes.bool.isRequired,\n silhouette: PropTypes.string.isRequired,\n showSilhouette: PropTypes.bool.isRequired,\n silhouetteX: PropTypes.number.isRequired,\n silhouetteY: PropTypes.number.isRequired,\n customImage: PropTypes.object,\n moveCustomImage: PropTypes.func.isRequired,\n resetCenter: PropTypes.func.isRequired,\n wallPaper: PropTypes.object\n };\n\n constructor(props) {\n super(props);\n const { cWidth, cHeight } = calculateCanvasSize();\n this.state = { w: cWidth, h: cHeight };\n this.workingArea = React.createRef();\n }\n\n onWorkClicked = (index) => {\n const { showWorkDetails } = this.props;\n showWorkDetails(index);\n }\n\n moveWorkTo = ({ x, y, index }) => {\n const { moveWorkTo } = this.props;\n const { x: newX, y: newY } = this.pixelsToInches({ x, y });\n moveWorkTo({ x: newX, y: newY, index });\n }\n\n moveCustomImageTo = ({ x, y }) => {\n const { moveCustomImage } = this.props;\n const { x: newX, y: newY } = this.pixelsToInches({ x, y });\n moveCustomImage({ posX: newX, posY: newY });\n };\n\n pixelsToInches = ({ x, y }) => {\n const { dpi } = this.props;\n return {\n x: x / dpi,\n y: y / dpi\n };\n }\n\n inchesToPixels({ x, y }) {\n const { dpi } = this.props;\n return {\n x: x * dpi,\n y: y * dpi\n };\n }\n\n renderWork = (draggingOpts, work, index) => {\n const { dpi } = this.props;\n const position = this.inchesToPixels(work);\n return (\n Curate and Design Your Walls
\n\n Start by clicking the "Select Art" button in the upper left corner of the toolbar\n
\n { renderOptimial() }\n\n \n Share This Wall \n \n \n \n \n \n \n
\n );\n};\n\nApplication.propTypes = {\n sharingUrl: PropTypes.string,\n previewSrc: PropTypes.string,\n name: PropTypes.string\n};\n\nexport default Application;\n","// extracted by mini-css-extract-plugin\nvar _1 = \"oJ2rvDDYmTFbWCfLlw4a\";\nvar _2 = \"ZB5n29bNu9_l5w3Am5Tb\";\nvar _3 = \"SVGd4udc6U8qWvSmCgSV\";\nvar _4 = \"x_fsfmH4sc2uW0b9ICzM\";\nexport { _1 as \"builder\", _2 as \"content\", _3 as \"input\", _4 as \"modal\" }\n","import { connect } from 'react-redux';\nimport Application from './application';\n\nconst mapStateToProps = ({\n canvas: { sharingUrl, name },\n exporting: { showSharing, previewSrc }\n}) => ({\n sharingUrl: showSharing ? sharingUrl : null,\n previewSrc,\n name\n});\n\nexport default connect(mapStateToProps, {})(Application);\n","import React from 'react';\nimport 'whatwg-fetch';\nimport 'intersection-observer';\nimport { Provider } from 'react-redux';\nimport './semantic_custom.less';\nimport { buildStore } from './config/store';\nimport Application from './components/application';\n\nconst store = buildStore();\n\nconst WallBuilder = () => (\n \n \n \n \n \n \n
\n \n
\n );\n};\n\nTagEditor.propTypes = {\n basePath: PropTypes.string,\n options: PropTypes.arrayOf(PropTypes.shape({\n value: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired\n })),\n onChange: PropTypes.func.isRequired\n};\n\nexport default TagEditor;\n","// extracted by mini-css-extract-plugin\nvar _1 = \"H73e1O1_4649WtWsPR0I\";\nexport { _1 as \"te\" }\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst Image = ({\n widthIn, heightIn, dpi, src, className\n}) => {\n const style = {\n width: widthIn * dpi,\n height: heightIn * dpi\n };\n\n return (\n // eslint-disable-next-line jsx-a11y/img-redundant-alt\n \n
\n );\n};\n\nSilhouette.propTypes = {\n dpi: PropTypes.number.isRequired,\n x: PropTypes.number.isRequired,\n y: PropTypes.number.isRequired,\n silhouette: PropTypes.string.isRequired\n};\n\nexport default Silhouette;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst SvgComponent = ({ fill, ...props }) => (\n \n);\n\nSvgComponent.propTypes = {\n fill: PropTypes.string.isRequired\n};\n\nexport default SvgComponent;\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst SvgComponent = ({ fill, ...props }) => (\n \n);\n\nSvgComponent.propTypes = {\n fill: PropTypes.string.isRequired\n};\n\nexport default SvgComponent;\n","import React, { PureComponent } from 'react';\nimport PropTypes from 'prop-types';\nimport { Loader } from 'semantic-ui-react';\nimport * as classes from './classes.module.scss';\nimport Settings from '../assets/settings';\nimport Trash from '../assets/trash';\nimport WorkPictureImage from './work_picture_image';\n\nexport default class Work extends PureComponent {\n static propTypes = {\n workId: PropTypes.number.isRequired,\n index: PropTypes.number.isRequired,\n x: PropTypes.number.isRequired,\n y: PropTypes.number.isRequired,\n dpi: PropTypes.number.isRequired,\n dragging: PropTypes.bool.isRequired,\n\n title: PropTypes.string,\n workSizeId: PropTypes.number.isRequired,\n frameId: PropTypes.number,\n landscape: PropTypes.bool,\n\n workSizes: PropTypes.array,\n loadWorkDetails: PropTypes.func,\n moveWorkTo: PropTypes.func,\n removeFromCanvas: PropTypes.func,\n onClick: PropTypes.func,\n\n readOnly: PropTypes.bool\n };\n\n componentDidMount() {\n const { workId, workSizes, loadWorkDetails } = this.props;\n if (!(workSizes || []).length) {\n loadWorkDetails(workId);\n }\n }\n\n componentDidUpdate(prevProps) {\n const {\n x, y, moveWorkTo, index\n } = this.props;\n if (!moveWorkTo) {\n return;\n }\n if (prevProps.x !== x || prevProps.y !== y) {\n moveWorkTo({ x, y, index });\n }\n }\n\n onClick = () => {\n const { index, onClick } = this.props;\n onClick(index);\n }\n\n removeWork = (e) => {\n e.preventDefault();\n e.stopPropagation();\n const { index, removeFromCanvas } = this.props;\n removeFromCanvas(index);\n }\n\n findWorkSize() {\n const { workSizeId, workSizes } = this.props;\n const res = (workSizes || []).find((ws) => ws.id === workSizeId);\n return res || (workSizes || [])[0];\n }\n\n findFramedOption() {\n const { frameId } = this.props;\n const workSize = this.findWorkSize();\n if (!workSize) {\n return {};\n }\n const fId = frameId || null;\n const option = workSize.options.find((o) => o.frameId === fId)\n || workSize.options.find((o) => o.frameId === null);\n if (!option) {\n return workSize.options[0];\n }\n return option;\n }\n\n render() {\n const {\n workSizes, title, dragging, readOnly\n } = this.props;\n\n if (!(workSizes || []).length) {\n return