;\n}\n","import {Typography} from '~/common/_pb_components/atoms/Typography';\nimport React from 'react';\nimport './Header.sass';\n\nexport default function Header({title, extra, dark = false}) {\n return (\n
\n {showLeaveModal && (\n {\n setShowLeaveModal(false);\n downgradeIfDismissCheckout();\n navigateToRoute('exit', store, true);\n }}\n saveAndLeave={() => {\n // If step 2 create flow, pass force as a 3rd option: 'saveAndExit' which will save first\n const force =\n currentRoute.meta.creating && currentRoute.id === 2\n ? 'saveAndExit'\n : false;\n setShowLeaveModal(false);\n navigateToRoute('exit', store, force);\n }}\n cancelLeave={() => setShowLeaveModal(false)}\n />\n )}\n {inPremiumPricingVariationC && (\n <>\n {showUpsellModal && (\n toggleUpsellModal(!showUpsellModal)}\n closeOverlay={() => {\n setShowUpsellModal(false);\n setShowExitPremiumPreviewModal(true);\n }}\n onConfirmAction={upgradeToPremium}\n />\n )}\n {showExitPremiumPreviewModal && (\n {\n setShowExitPremiumPreviewModal(false);\n }}\n onConfirmAction={() => {\n store.dispatch({\n type: REVERT_TO_BASIC,\n });\n webViewPendingUpgradeToPremium(false);\n navigate(Sections.CARD_DESIGN);\n setShowExitPremiumPreviewModal(false);\n }}\n />\n )}\n \n )}\n \n );\n};\n","import {PB_QuestionCircleUnfilled} from '~/common/svg/PB_QuestionCircleUnfilled';\nimport {useDispatch} from 'react-redux';\nimport {UPDATE_DESIGN_OPTIONS} from '~/CreateFabricInvitation/reducers/fabricDesign/constants';\nimport {useCallback} from 'react';\n\nexport function OnboardingModalButton({visible}) {\n const dispatch = useDispatch();\n\n const onClickHandler = useCallback(() => {\n dispatch({\n type: UPDATE_DESIGN_OPTIONS,\n payload: {forceShowOnboardingModal: true},\n });\n }, []);\n\n if (!visible) {\n return null;\n }\n\n return (\n
\n \n \n \n
\n );\n}\n","import React from 'react';\nimport {useCurrentRoute} from '~/CreateFabricInvitation/navigation';\nimport {eventStepCount} from '~/CreateFabricInvitation/navigation/createSteps';\nimport './NavHeader.sass';\nimport {useSelector} from 'react-redux';\nimport {getEventStepsType} from '~/common/fabric/EventGuests/components/DisplayCondition/addGuestsCondition';\n\nexport const ProgressBar = (props) => {\n const {id} = useCurrentRoute();\n\n const eventType = useSelector(getEventStepsType);\n const totalSteps = eventStepCount[eventType];\n\n return (\n \n );\n};\n","import React, {createContext, useContext, useEffect, useState} from 'react';\n\nexport const RoktLauncherContext = createContext(null);\nexport const RoktLauncherContextConsumer = RoktLauncherContext.Consumer;\n\nexport function useRoktLauncher() {\n return useContext(RoktLauncherContext);\n}\n\nexport function RoktLauncherContextProvider({\n children,\n accountId,\n sandbox = false,\n}) {\n const [launcher, setLauncher] = useState(null);\n\n useEffect(() => {\n (async () => {\n // Guards against Rokt script being still loaded into the application when the context is created\n await new Promise((resolve) =>\n window.Rokt\n ? resolve()\n : (document.getElementById('rokt-launcher').onload = resolve)\n );\n\n const launcherInstance = await window.Rokt.createLauncher({\n accountId: accountId,\n sandbox: sandbox,\n });\n\n setLauncher(launcherInstance);\n })();\n\n return () => {\n if (launcher) {\n launcher.terminate();\n }\n };\n }, [accountId, sandbox]);\n\n // Return the context provider\n return (\n \n {children}\n \n );\n}\n","import React, {useEffect, useRef} from 'react';\nimport {useStore} from 'react-redux';\nimport {PB_CloseLine} from '~/common/svg/PB_CloseLine';\nimport {Button} from '~/common/_pb_components/atoms/Button';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {UPDATE_EVENT_DETAILS} from '~/CreateFabricInvitation/reducers/details/constants';\nimport {UPDATE_GIFT_OPTIONS} from '~/CreateFabricInvitation/reducers/giftingOptions/constants';\nimport {\n UpsellDesktop,\n UpsellTrays,\n} from '~/CreateFabricInvitation/routes/Upsell/UpsellB';\nimport {useMatchQuery} from '~/common/hooks/useMatchQuery';\nimport {isInPremiumPricingVariationC} from '~/CreateFabricInvitation/utils/experiments';\n\nexport const UpsellModal = ({\n toggleUpsellModal,\n closeOverlay,\n noAutoRestore,\n onConfirmAction,\n}) => {\n const store = useStore();\n const {matches: mobile} = useMatchQuery('(max-width: 48rem)');\n const upsellModalRef = useRef(null);\n\n useEffect(() => {\n if (!upsellModalRef.current || !isInPremiumPricingVariationC()) return;\n\n upsellModalRef.current.style.height =\n upsellModalRef.current.offsetHeight + 'px';\n }, []);\n\n const upgradeToPremium = () => {\n store.dispatch({\n type: UPDATE_EVENT_DETAILS,\n payload: {isPremium: true},\n });\n toggleUpsellModal();\n };\n\n const inPremiumPricingVariationC = isInPremiumPricingVariationC();\n\n return (\n
\n {mobile && inPremiumPricingVariationC ? (\n \n ) : (\n <>\n toggleUpsellModal()}\n />\n \n toggleUpsellModal()}\n >\n \n \n {inPremiumPricingVariationC ? (\n \n ) : (\n <>\n \n UPGRADE\n \n \n Want to remove gift ideas from Amazon?\n \n\n \n When you upgrade to a Premium invitation, you can send your\n invitations without Amazon’s gift suggestions.\n \n \n Plus, all Premium invitations offer your guests an ad-free\n experience.\n \n \n )}\n
\n );\n};\n","import {Typography} from '~/common/_pb_components/atoms/Typography';\nimport React, {useMemo} from 'react';\nimport {FontItem} from '~/CreateFabricInvitation/routes/EventCreateDesign/components/CardEditor/actions/Dropdown/FontItem/FontItem';\nimport {RECOMMENDED_FONTS} from '~/CreateFabricInvitation/routes/EventCreateDesign/constants';\nimport './RecommendedFonts.sass';\n\nexport function RecommendedFonts({onChange, selectedFont}) {\n return (\n
\n {!props.isModal && showHostMessage && !props.forgotPasswordMode && (\n <>\n \n Are you a guest of this event?\n \n \n \n Click here\n {' '}\n to view \"{window.event_title}\".\n \n \n Are you the host?\n \n Sign in to your Evite account to manage your event!\n \n \n )}\n\n
\n {!props.forgotPasswordMode ? (\n <>\n {!props.lgWindow || props.isModal ? (\n \n Welcome back! Sign in to your account.\n \n ) : (\n ''\n )}\n
\n \n \n Continue with Google\n \n \n \n Continue with Facebook\n \n \n \n Continue with Apple\n \n
\n \n ) : (\n \n Enter your email address below and we will send you an email to\n reset your password.\n \n )}\n \n {!props.forgotPasswordMode && (\n \n Or Sign In with Email\n \n )}\n setEmail(e.target.value)}\n placeholder=\"Email address\"\n error={props.forgotPasswordMode && emailError}\n data-qa-id=\"loginModalEmailInput\"\n autoComplete=\"email\"\n />\n {!props.forgotPasswordMode && (\n setPassword(e.target.value)}\n placeholder=\"Password\"\n error={\n loginFailure ? 'Invalid email or password. Try again.' : ''\n }\n data-qa-id=\"loginModalPasswordInput\"\n autoComplete=\"password\"\n />\n )}\n {props.forgotPasswordMode ? (\n
\n );\n};\n","import React from 'react';\nimport {v4} from 'uuid';\nimport PropTypes from 'prop-types';\nimport {toast} from 'react-toastify';\nimport {Typography} from './Typography';\nimport {PB_CloseLine} from '~/common/svg/PB_CloseLine';\n\nexport const toastAlert = (message, options, inToastButtonConfig = {}) => {\n const {icon, type, title, className} = options || {};\n let toastFunc = type ? toast[type] : toast;\n if (!toastFunc) {\n console.log('Error - bad type passed to toastAlert');\n toastFunc = toast;\n }\n const toastId = `toast_${v4()}`;\n\n // This is to disable the default react-toastify icon\n // and use the icon from props inside the body\n if (options.icon) {\n options.icon = '';\n }\n\n return toast(\n toast.dismiss(toastId)}\n buttonText={inToastButtonConfig?.text}\n onButtonClick={inToastButtonConfig?.onClick}\n id={options.id}\n />,\n {\n ...options,\n toastId,\n }\n );\n};\n\nexport const Toast = (props) => (\n \n {props.icon}\n {props.title ? (\n
\n \n {props.title}\n \n \n {props.message}\n \n
\n ) : (\n \n {props.message}\n \n )}\n {props.buttonText && (\n \n )}\n \n \n);\n\nToast.propTypes = {\n className: PropTypes.string,\n icon: PropTypes.node,\n type: PropTypes.oneOf(['success', 'information', 'warning', 'error']),\n message: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,\n title: PropTypes.string,\n buttonText: PropTypes.string,\n onButtonClick: PropTypes.func,\n onDismiss: PropTypes.func,\n};\n","import React from 'react';\nimport styled, {css} from 'styled-components';\nimport PropTypes from 'prop-types';\nimport * as colors from '~sass/pb_styleguide/base/_exports.sass';\n\n//\n// // If there is already an h1 in the page, let's not duplicate it.\n// // variants should ONLY be classes used in pb_styleguide/base/typography.sass\n// // you may add one more class for page-specific margin/positioning.\n// // TODO make rules in the component that enforces this stuff & helps prevent typos\n//\n// // \n// // This text uses an h2 element but looks like an h1!\n// // \n//\n// return (\n// \n// {props.children}\n// \n// )\n// }\n\nexport const Colors = css`\n color: ${({fontColor}) => fontColor || colors.mexican_opal};\n`;\n\nconst StyledDynamicComponent = styled.p`\n ${Colors}\n`;\n\n// const DynamicComponent = ({tag=\"p\", color=$eviteBlue, children, ...props }) => {\n// const WithComponent = StyledDynamicComponent.withComponent(tag, color);\n// return {children};\n// };\n\nexport const Typography = ({className, ...props}) => {\n // If there is already an h1 in the page, let's not duplicate it.\n\n // \n // This text uses an
element but looks like an
\n //
\n\n // todo - There seems to be a race condition preventing color\n // attributes from being respected in some nested components\n // (unless the same color has already been used\n // in a Typog element in a parent component)\n\n return (\n \n {props.children}\n \n );\n};\n\nconst typo_mixins_arr = [\n 'header1',\n 'header2',\n 'header3',\n 'header4',\n 'paragraph1',\n 'paragraph2',\n 'paragraph3',\n 'paragraph4',\n 'list1',\n 'list2',\n 'label1',\n 'label2',\n 'label3',\n 'link',\n 'list1',\n 'list2',\n];\n\nTypography.propTypes = {\n id: PropTypes.string,\n classNames: PropTypes.string,\n size: PropTypes.oneOf(['small', 'medium', 'large']),\n color: PropTypes.oneOf(Object.keys(colors)), // some of the keys here are not colors but good enough...\n variant: PropTypes.oneOf(typo_mixins_arr).isRequired,\n children: PropTypes.oneOfType([\n PropTypes.element,\n PropTypes.node,\n PropTypes.string,\n ]).isRequired,\n 'data-qa-id': PropTypes.string,\n as: PropTypes.string,\n inline: PropTypes.bool,\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport {useMatchQuery} from '~/common/hooks/useMatchQuery';\nimport {largeAndUp} from '~sass/pb_styleguide/base/_exports.sass';\n\nconst LoadingOverlay = (props) => {\n const {matches: isLarge} = useMatchQuery(`(min-width: ${largeAndUp})`);\n\n return (\n <>\n {props.show && (\n \n \n \n
{props.loadingMessage}
\n \n \n )}\n \n );\n};\n\nLoadingOverlay.propTypes = {\n overlayClassName: PropTypes.string,\n className: PropTypes.string,\n loadingMessage: PropTypes.string.isRequired,\n show: PropTypes.bool.isRequired,\n};\n\nexport default LoadingOverlay;\n","import React from 'react';\nimport {useMatchQuery} from '~/common/hooks/useMatchQuery';\nimport {PanelHeaderRow} from '~/common/_pb_components/atoms/PanelHeaderRow';\n\nexport const SlideoutPanel = (props) => {\n const {matches: mdWindow} = useMatchQuery('(min-width: 48rem)', []);\n const {\n isOpen,\n onClose,\n direction = 'right',\n showHeader = true,\n title,\n qaId = 'slideout_panel',\n modalId,\n closeQaId,\n showCover,\n } = props;\n const titleVariant = props.titleVariant || 'list2';\n\n return (\n <>\n onClose()}\n data-qa-id={closeQaId ? closeQaId : `${modalId}-header`}\n />\n \n {showHeader && (\n \n )}\n {props.children}\n \n \n );\n};\n","import React from 'react';\nimport {Footer} from '~/footer/Footer';\n\n/***\n *\n * This wrapper component allows for the Site Footer to be added into specific pages\n * of apps that wouldn't normally include it, such as the Fabric Create Flow's Confirmation page.\n *\n * To show an ad, the app's index.html file needs to include this:\n * \n * ***/\n\nexport const InjectableFooter = (showAd = false) => {\n const adToShow = window.footerAd;\n\n if (adToShow) {\n adToShow.setAttribute('padding-bottom', '60px');\n }\n\n return (\n <>\n
\n \n
\n \n \n );\n};\n","import React from 'react';\nimport {MegaNavAsync} from '~/MegaNav/MegaNavAsync';\n\n/***\n *\n * This wrapper component allows for the MegaNav to be added into specific pages\n * of apps that wouldn't normally include the MegaNav, such as the Fabric Create Flow's Confirmation page.\n *\n * It requires that the app's index.html file include this:\n * {% include 'nav.html' %}\n *\n * ***/\n\nexport const InjectableMegaNav = () => {\n return (\n <>\n \n \n \n \n \n );\n};\n","import React from 'react';\nimport ReactModal from 'react-modal';\n\nconst defaultModalProps = {\n isOpen: true,\n className: 'EviteModal__Content-FullPage',\n overlayClassName: 'EviteModal__Overlay',\n closeTimeoutMS: 200,\n};\n\nReactModal.setAppElement('#pbModalRoot');\n\nexport const Modal = (props) => {\n if (!props.onClose) console.warn('Missing required onClose prop for Modal');\n\n const combinedProps = {\n ...defaultModalProps,\n ...props,\n };\n return ;\n};\n","import React from 'react';\nimport {ResponsiveModal} from '~/common/_pb_components/organisms/ResponsiveModal';\n\nexport const ResetPasswordModal = ({isOpen, setIsOpen, handleClose}) => {\n return (\n setIsOpen(false)}\n onClose={(e) => handleClose(e)}\n modalId=\"pwResetRequired\"\n primaryText={'Close'}\n showSecondary={false}\n className=\"pwResetRequiredModal\"\n />\n );\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport {Button} from '~/common/_pb_components/atoms/Button';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {Overlay} from '~/common/_pb_components/atoms/Overlay';\nimport {Spinner} from '~/common/components/Loader/Spinner';\n\n// Intended for small, single-action content, returns a popup with overlay\n// in both desktop & mobile.\n// Requires isOpen, onClose, as well as the following:\n\n// Requires either children:\n// (will render children with X close button in upper right in an otherwise empty modal)\n// OR: all the below\n// title: (string),\n// body: (string),\n// primaryAction: (func called on primary CTA),\n// modalId: (string identifier for this modal)\n// primaryText: (string for primary CTA text)\n\nexport const ResponsiveModal = (props) => {\n const body = props.body || '';\n const primaryAction = props.primaryAction || props.onClose;\n const secondaryAction = props.secondaryAction || props.onClose;\n const primaryText = props.primaryText || 'Submit';\n const secondaryText = props.secondaryText || 'Cancel';\n const showSpinner = props.showSpinner || false;\n const actionText = props.actionText || 'One moment please...';\n const showSecondary =\n props.showSecondary !== undefined ? props.showSecondary : true;\n let modalId;\n\n let title = showSpinner\n ? actionText\n : props.title || `${props.primaryText}?` || 'Are you sure?';\n\n let children = showSpinner ? : props.children;\n\n const getModalChildren = () => {\n return (\n
\n );\n };\n\n if (!children) children = getModalChildren();\n\n return (\n props.onClose(e)}\n children={children}\n modalId={`responsive-modal ${modalId ? modalId : ''}`}\n title={showSpinner ? actionText : title || null}\n showSpinner={showSpinner}\n />\n );\n};\n\nResponsiveModal.propTypes = {\n isOpen: PropTypes.bool.isRequired,\n onClose: PropTypes.func.isRequired,\n children: PropTypes.any,\n title: PropTypes.string,\n body: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n modalId: PropTypes.string,\n primaryAction: PropTypes.func,\n primaryText: PropTypes.string,\n};\n","import React, {useEffect} from 'react';\nimport PropTypes from 'prop-types';\nimport {Button} from '~/common/_pb_components/atoms/Button';\nimport {Modal} from '~/common/_pb_components/organisms/Modal';\nimport {SlideoutPanel} from '~/common/_pb_components/molecules/SlideoutPanel';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {useMatchQuery} from '~/common/hooks/useMatchQuery';\nimport {Spinner} from '~/common/components/Loader/Spinner';\nimport {PanelHeaderRow} from '~/common/_pb_components/atoms/PanelHeaderRow';\n\n// Intended for more complex modal data, this opens the right-side\n// slideout-panel (used for login/signup) on large screens,\n// and a full-page slide up modal in small screens.\n\n// REQUIRES isOpen, onClose, as well as the following:\n// also REQUIRES either children:\n// (will render children with X close button in upper right in an otherwise empty modal)\n// OR: ALL the below:\n// title: (string),\n// body: (string),\n// primaryAction: (func called on primary CTA),\n\n// Additional optional props:\n// primaryText: (string:Submit - text for primary button,\n// secondaryText: (string:Cancel - text for secondary button)\n// primaryAction: (func:primaryAction - action for primary button),\n// secondaryAction: (func:onClose - action for secondary button)\n// showCover: (bool:False - If true, shows semi-transparent dark overlay when panel is open),\n// modalId: (string:overlay - identifier for this modal, useful for custom qa-id),\n// closeQaId: (string:overlay-header_back_button - for qa-ids on close button/X icon)\n\nexport const ResponsivePanel = (props) => {\n const {matches: mdWindow} = useMatchQuery(`(min-width: 48rem)`);\n const body = props.body || '';\n const primaryAction = props.primaryAction || props.onClose;\n const secondaryAction = props.secondaryAction || props.onClose;\n const primaryText = props.primaryText || 'Submit';\n const secondaryText = props.secondaryText || 'Cancel';\n const showSpinner = props.showSpinner || false;\n const actionText = props.actionText || 'One moment please...';\n const {isOpen, showCover = false} = props;\n const titleVariant = props.titleVariant || 'list2';\n let modalId = props.modalId || 'overlay';\n\n let title = showSpinner\n ? actionText\n : props.title || `${props.primaryText}?` || 'Are you sure?';\n let children = showSpinner ? : props.children;\n\n useEffect(() => {\n if (isOpen) {\n document.body.classList.add('no-scroll');\n } else {\n document.body.classList.remove('no-scroll');\n }\n return () => {\n document.body.classList.remove('no-scroll');\n };\n }, [isOpen]);\n\n const getModalChildren = () => {\n return (\n
\n
\n {body}\n
\n
\n \n {secondaryText}\n \n \n {primaryText}\n \n
\n
\n );\n };\n\n if (!children)\n if (mdWindow) {\n children = getModalChildren();\n } else {\n children = (\n <>\n \n {getModalChildren()}\n \n );\n }\n\n if (!mdWindow) {\n if (props.children) {\n children = (\n <>\n \n {props.children}\n \n );\n }\n return (\n <>\n props.onClose()}\n onClick={() => props.onClose()}\n children={children}\n modalId={`responsive-modal ${modalId ? modalId : ''}`}\n />\n \n );\n }\n\n return (\n props.onClose()}\n closeQaId={`${modalId}-header`}\n children={children}\n modalId={`responsive-modal ${modalId ? modalId : ''}`}\n title={showSpinner ? actionText : title || null}\n showSpinner={showSpinner}\n titleVariant={titleVariant}\n qaId=\"responsive-modal-panel\"\n backArrow={props.backArrow}\n showCover={showCover}\n />\n );\n};\n\nResponsivePanel.propTypes = {\n isOpen: PropTypes.bool.isRequired,\n onClose: PropTypes.func.isRequired,\n children: PropTypes.any,\n title: PropTypes.string,\n body: PropTypes.string,\n modalId: PropTypes.string,\n primaryAction: PropTypes.func,\n primaryText: PropTypes.string,\n};\n","import React from 'react';\nimport {Button} from '~/common/_pb_components/atoms/Button';\nimport {EviteLogo} from '~/common/svg/EviteLogo';\nimport {charcoal} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const SimpleNav = ({prev, next}) => {\n return (\n
\n );\n};\n","/**\n * Default login time-to-live in milliseconds (7 days)\n */\nconst DEFAULT_LOGIN_TTL_MS = 604800000;\n\n/**\n * Save user data to local storage.\n *\n * @param {Object} user - The user object containing user data.\n * @param {string} user.user_id - The user's ID.\n * @param {string} user.full_name - The user's full name.\n * @param {string} user.subscription_plan_name - The user's subscription plan name.\n * @param {string} user.email - The user's email.\n * @param {string} user.avatar_disk - The user's avatar disk.\n * @param {string} user.image_url - The user's image URL.\n * @param {string} user.initials - The user's initials.\n * @param {string} user.first_name - The user's first name.\n */\nexport const saveUserDataToLocalStorage = (user) => {\n const userData = {\n userId: user.user_id || user.userId,\n userName: user.full_name || user.userName,\n email: user.email,\n initials: user.initials,\n firstName: user.first_name || user.firstName,\n // assume we save data only when user is authenticated, unless isAuthenticated is explicitly set to false\n isAuthenticated: user.isAuthenticated !== false,\n subscriptionPlanName:\n user.subscription_plan_name || user.subscriptionPlanName,\n avatarDisk: user.avatar_disk || user.avatarDisk,\n imgUrl: user.image_url || user.imgUrl,\n };\n const userDataObj = {\n content: userData,\n timestamp: Date.now(),\n };\n window.isAuthenticated = userData.isAuthenticated;\n localStorage.setItem('userData', JSON.stringify(userDataObj));\n};\n\n/**\n * Load user data from local storage if it hasn't expired.\n *\n * @param {number} [ttl=DEFAULT_LOGIN_TTL_MS] - Time-to-live in milliseconds.\n * @returns {Object|null} - Returns the user data object if it exists and hasn't expired, otherwise null.\n */\nconst loadUserDataFromLocalStorage = (ttl = DEFAULT_LOGIN_TTL_MS) => {\n const userDataObj = JSON.parse(localStorage.getItem('userData'));\n if (\n window.isAuthenticated !== false &&\n userDataObj &&\n Date.now() - userDataObj.timestamp < ttl\n ) {\n return userDataObj.content;\n } else if (userDataObj) {\n // Delete the stored userData if we are not authenticated due to deleting cookies or the data has expired\n localStorage.removeItem('userData');\n return null;\n }\n};\n\n/**\n * Retrieves user data from the global window object.\n * The function tries to fetch several user-related properties from the window object,\n * and it returns a user data object with default values for any missing properties.\n *\n * @returns {Object} userData - Contains user data fetched from the window object.\n */\nconst getUserDataFromWindow = () => {\n const userData = {\n userId: window.user_id || '',\n userName: window.userName || '',\n email: typeof window.email === 'string' ? window.email : '',\n initials: window.user_initials || '',\n firstName: window.firstName || '',\n isAuthenticated: window.isAuthenticated || false,\n subscriptionPlanName: window.subscriptionPlanName || '',\n avatarDisk: window.user_avatar_disk || '',\n imgUrl: window.user_img_url || '',\n };\n return userData;\n};\n\n/**\n * checkIfAdminIsLoggedIn function.\n * This function checks if the current user is an admin and also if they are not the same as the logged in user.\n *\n * The function works with global `window` object properties `isAdmin` and `user_id`.\n *\n * @param {Object} userData - The user data object. This object should contain the user's unique identification (`userId`).\n * @property {string} userData.userId - The user's unique identification.\n *\n * @returns {boolean} If `isAdmin` property on the `window` object is true and `userId` from `userData` is not equal\n * to `user_id` property on `window` object, function will return `true`, otherwise `false`.\n */\nconst checkIfAdminIsLoggedIn = (userData) => {\n return window.isAdmin ? userData.userId !== window.user_id : false;\n};\n\n/**\n * checkIfUserDataIsValid function.\n * This function checks whether user data should is valid or not. It checks multiple conditions\n * including if the user data exists, is non-empty, if the user is authenticated, has a userId,\n * and if the admin is not logged in.\n *\n * @param {Object} userData - The user data object.\n * @property {boolean} isAuthenticated - Indicates whether the user is authenticated.\n * @property {string} userId - The ID of the user.\n *\n * @returns {boolean} - Returns true if the user data is valid to be saved, false otherwise.\n */\nconst checkIfUserDataIsValid = (userData) => {\n if (!userData || Object.keys(userData).length === 0) {\n // userData is undefined or empty, so no need to check further\n return false;\n }\n\n // Now we can be sure userData exists, and we can check the other conditions\n const isUserAuthenticated = userData.isAuthenticated && userData.userId;\n // Check if an admin is not logged in. This accounts for cstool view as host case\n // (localStorage holds the admin user data): we should get the user data from window\n // variables (host data) and replace userData in localStorage with it\n const isAdminNotLoggedIn = !checkIfAdminIsLoggedIn(userData);\n\n return isUserAuthenticated && isAdminNotLoggedIn;\n};\n\n/**\n * Retrieves user data from either local storage or the global window object, depending on data validity.\n * If the user data is valid and retrieved from the window object, it will be saved to local storage.\n * @returns {Object} An object containing the user data properties.\n */\nexport const getUserData = () => {\n let userData = loadUserDataFromLocalStorage();\n if (!checkIfUserDataIsValid(userData)) {\n // Data from localStorage is not good or is not there, let's get it from window\n userData = getUserDataFromWindow();\n if (checkIfUserDataIsValid(userData)) {\n // Data from window looks good, let's persist it in localStorage\n saveUserDataToLocalStorage(userData);\n } else {\n // Still not good, should be anonymous viewing\n }\n }\n return userData;\n};\n","import React, {useEffect, useRef, useState} from 'react';\nimport {useCanvas} from '~/common/canvas/hooks/useCanvas';\nimport {initAligningGuidelines} from './controls/align_lines';\nimport {useOutsideAlerter} from '~/CreateFabricInvitation/routes/EventCreateDesign/hooks/useOutsideAlerter';\n\nconst calcCanvasRation = (cs, canvasWrapper) => {\n const paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);\n const paddingY = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);\n\n const borderX =\n parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);\n const borderY =\n parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);\n\n const width = canvasWrapper.offsetWidth - paddingX - borderX;\n const height = canvasWrapper.offsetHeight - paddingY - borderY;\n\n const rationHeight = width * 1.36;\n\n return rationHeight > height\n ? {height, width: height * 0.735}\n : {width, height: rationHeight};\n};\nexport const Canvas = ({\n configJson,\n onChange,\n setCanvas: setCanvasElem,\n setActiveObjects,\n onLoad,\n saveSnapshot,\n className = '',\n parentNode = '',\n}) => {\n const canvasEl = useRef(null);\n const canvasRef = useRef();\n const canvasWrapperRef = useRef(null);\n\n const onClickOutsideCanvas = () => {\n const canvasInstance = canvasRef.current;\n if (canvasInstance) {\n const activeObject = canvasInstance?.getActiveObject();\n activeObject?.exitEditing?.();\n canvasInstance?.renderAll();\n }\n };\n\n useOutsideAlerter(canvasWrapperRef, onClickOutsideCanvas);\n\n const [loading, setLoading] = useState(false);\n\n const saveCanvas = (canvasInstance) => {\n setCanvasElem(canvasInstance);\n canvasRef.current = canvasInstance;\n };\n\n const setCurrentDimensions = () => {\n const canvasSizer = document.getElementById(parentNode);\n\n const canvas = canvasRef.current;\n const canvasWrapper = canvasSizer || canvasWrapperRef.current;\n\n if (canvasWrapper && canvas) {\n const cs = getComputedStyle(canvasWrapper);\n\n if (canvasWrapper.offsetWidth > 0 && canvasWrapper.offsetHeight > 0) {\n const {width, height} = calcCanvasRation(cs, canvasWrapper);\n const scale = width / canvas.getWidth();\n const zoom = canvas.getZoom() * scale;\n canvas.setDimensions({width, height});\n canvas.setViewportTransform([zoom, 0, 0, zoom, 0, 0]);\n }\n }\n };\n\n useEffect(() => {\n const canvasInstance = useCanvas(canvasEl.current, configJson, onLoad);\n canvasEl.current.fabric = canvasInstance;\n\n initAligningGuidelines(canvasInstance);\n\n if (!evite.detects.isMobile) {\n window.addEventListener('resize', setCurrentDimensions);\n }\n\n //used for automatic tests\n window.canvasElementSelector = (index = 1) => {\n const objects = canvasInstance.getObjects();\n canvasInstance.setActiveObject(objects[objects.length - index]);\n canvasInstance.renderAll();\n return objects.length;\n };\n\n const onChangeHandler = () => {\n const objectTextFilter = (object) => object.type === 'textbox';\n if (!loading && !canvasInstance.isEmpty()) {\n const fabricJson = canvasInstance.toJSON([\n '_originalObject',\n 'letterCasing',\n '_originalText',\n ]);\n onChange(\n {...fabricJson},\n configJson.objects.filter(objectTextFilter).length\n );\n }\n };\n\n const onSelectionEvent = () => {\n setActiveObjects(canvasInstance.getActiveObjects());\n };\n\n const onDeselectionEvent = () => {\n setActiveObjects(null);\n };\n\n const onObjectMoving = (e) => {\n const obj = e.target;\n const canvasWidth = canvasInstance.getWidth() / canvasInstance.getZoom();\n const canvasHeight =\n canvasInstance.getHeight() / canvasInstance.getZoom();\n\n if (obj.height > canvasHeight || obj.width > canvasWidth) {\n return;\n }\n obj.setCoords();\n };\n\n canvasInstance.on({\n 'object:modified': onChangeHandler,\n 'object:added': onChangeHandler,\n 'object:removed': onChangeHandler,\n 'selection:updated': onSelectionEvent,\n 'selection:created': onSelectionEvent,\n 'selection:cleared': onDeselectionEvent,\n 'object:moving': onObjectMoving,\n });\n\n saveCanvas(canvasInstance);\n\n setCurrentDimensions();\n\n return () => {\n const snapshot = canvasInstance.toDataURL({\n enableRetinaScaling: true,\n });\n saveSnapshot && saveSnapshot(snapshot);\n canvasInstance.dispose();\n Raven.setTagsContext({key: 'diposeTime', value: new Date()});\n window.removeEventListener('resize', setCurrentDimensions);\n };\n }, []);\n\n return (\n
\n \n
\n );\n};\n","import React, {useEffect, useRef, useState} from 'react';\nimport {initAligningGuidelines} from './controls/align_lines';\nimport fabric from './fabric';\n\nexport const CanvasStickers = ({configJson, onChange, setCanvas, onLoad}) => {\n const [loading, setLoading] = useState(false);\n const canvasEl = useRef(null);\n\n useEffect(() => {\n const canvasInstance = new fabric.Canvas(canvasEl.current, {\n width: 0,\n height: 0,\n includeDefaultValues: false,\n selection: !evite.detects.isMobile,\n });\n\n canvasInstance.setZoom(0.5);\n\n initAligningGuidelines(canvasInstance);\n\n const setCurrentDimensions = () => {\n const canvasSizer = document.getElementById('canvas__wrapper__stickers');\n\n if (canvasSizer) {\n const width = canvasSizer.offsetWidth;\n const height = canvasSizer.offsetHeight;\n const scale = width / canvasInstance.getWidth();\n const zoom = canvasInstance.getZoom() * scale;\n canvasInstance.setDimensions({width, height});\n canvasInstance.setViewportTransform([zoom, 0, 0, zoom, 0, 0]);\n }\n };\n\n canvasInstance.setCurrentDimensions = setCurrentDimensions;\n\n window.addEventListener('resize', setCurrentDimensions, false);\n\n const onChangeHandler = () => {\n if (!loading)\n onChange(\n canvasInstance.toJSON([\n 'dataUrl',\n 'delay',\n 'frameWidth',\n 'framesLength',\n ])\n );\n };\n\n canvasInstance.on({\n 'object:modified': onChangeHandler,\n 'object:added': onChangeHandler,\n 'object:removed': onChangeHandler,\n });\n\n const loadCanvas = (configJson) => {\n setLoading(true);\n const reviver = async (json, obj) => {\n if (obj.type === 'gif') {\n fabric.util.requestAnimFrame(function render() {\n canvasInstance?.renderAll();\n fabric.util.requestAnimFrame(render);\n });\n }\n\n setLoading(false);\n onLoad && onLoad();\n setCurrentDimensions();\n };\n canvasInstance.loadFromJSON(configJson, null, reviver);\n };\n configJson && loadCanvas(configJson);\n\n setCanvas(canvasInstance);\n\n return () => {\n canvasInstance.dispose();\n window.removeEventListener('resize', setCurrentDimensions);\n };\n }, []);\n\n return ;\n};\n","import React from 'react';\nimport {useCanvasImage} from '~/common/canvas/hooks/useCanvasImage';\nimport './Card.sass';\nimport {useMatchQuery} from '~/common/hooks/useMatchQuery';\nimport {useNavigator} from '~/CreateFabricInvitation/routes/EventCreateDesign/components/NavBottom/useNavigator';\nimport {largishAndUp} from '~sass/pb_styleguide/base/_exports.sass';\nimport {Sections} from '~/CreateFabricInvitation/routes/EventCreateDesign/constants';\nimport {useSelector} from 'react-redux';\n\nexport const Card = ({\n className = '',\n fabricArt,\n imageRef,\n redirectTo,\n isFree = false,\n}) => {\n const {image, loading} = useCanvasImage(fabricArt);\n const backgroundImage = fabricArt?.backgroundImage ?? {};\n const {matches: isDesktop} = useMatchQuery(`(min-width: ${largishAndUp})`);\n const isMobile = !isDesktop;\n\n const isUyo = useSelector((state) => {\n const hasKeyword = !!state.coverData?.template?.keywords?.some(\n (item) => item.toLowerCase() === 'uyo'\n );\n const hasTitleUyo = !!state.coverData?.template?.name?.includes('uyo');\n const hasImgId = !!state.fabricDesign?.uyoImageId;\n\n return hasKeyword || hasImgId || hasTitleUyo;\n });\n\n const navigate = useNavigator({\n isMobile,\n disableAutoOpenEditor: redirectTo === Sections.CARD_DESIGN,\n });\n\n return (\n <>\n {loading && (\n \n )}\n navigate(redirectTo) : undefined\n }\n src={image}\n className={`fabric_user_card ${\n redirectTo ? 'fabric_user_card--clickable' : ''\n } ${className}\n ${\n redirectTo && loading\n ? 'envelope_image__wrapper--clickable--disabled'\n : ''\n }\n `}\n style={{\n backgroundImage:\n (isUyo && window.location.href.indexOf('/customize/') > -1) ||\n (!isUyo &&\n `url(${backgroundImage?.src ||\n backgroundImage?.originalUrl ||\n ''})`),\n height: isMobile && isFree && 'calc(512px - 2rem)',\n width: isMobile && isFree && 'auto',\n backgroundSize: '100% 100%',\n backgroundRepeat: 'no-repeat',\n }}\n ref={imageRef}\n />\n \n );\n};\n","import {fabric} from 'fabric';\nimport {gifToSprite} from './GifToSprite';\n\nconst generateImage = ({\n dataUrl,\n delay,\n frameWidth,\n framesLength,\n imgOptions,\n}) => {\n const [PLAY, PAUSE, STOP] = [0, 1, 2];\n\n return new Promise((resolve) => {\n fabric.Gif.fromURL(\n dataUrl,\n (img) => {\n const sprite = img.getElement();\n let framesIndex = 0;\n let start = performance.now();\n let status = PLAY;\n\n img.width = frameWidth;\n img.height = sprite.naturalHeight;\n img.mode = 'image';\n img.top = 0;\n img.left = 0;\n img.delay = delay;\n img.frameWidth = frameWidth;\n img.framesLength = framesLength;\n\n img._render = function(ctx) {\n if (status === PAUSE || (status === STOP && framesIndex === 0))\n return;\n const now = performance.now();\n const delta = now - start;\n if (delta > delay) {\n start = now;\n framesIndex++;\n }\n if (framesIndex === framesLength || status === STOP) framesIndex = 0;\n ctx.drawImage(\n sprite,\n frameWidth * framesIndex,\n 0,\n frameWidth,\n sprite.height,\n -this.width / 2,\n -this.height / 2,\n frameWidth,\n sprite.height\n );\n };\n img.play = function() {\n status = PLAY;\n this.dirty = true;\n };\n img.pause = function() {\n status = PAUSE;\n this.dirty = false;\n };\n img.stop = function() {\n status = STOP;\n this.dirty = false;\n };\n img.getStatus = () => ['Playing', 'Paused', 'Stopped'][status];\n\n img.play();\n resolve(img);\n },\n imgOptions\n );\n });\n};\n\nexport const fabricGif = async (\n gif,\n imgOptions,\n maxWidth,\n maxHeight,\n maxDuration\n) => {\n const {dataUrl, delay, frameWidth, framesLength} = await gifToSprite(\n gif,\n maxWidth,\n maxHeight,\n maxDuration\n );\n\n return generateImage({dataUrl, delay, frameWidth, framesLength, imgOptions});\n};\n\nexport const fabricGifFromBase64 = async (\n dataUrl,\n delay,\n frameWidth,\n framesLength,\n imgOptions\n) => {\n return generateImage({dataUrl, delay, frameWidth, framesLength, imgOptions});\n};\n","import {decompressFrames, parseGIF} from 'gifuct-js';\n\nexport const gifToSprite = async (gif, maxWidth, maxHeight, maxDuration) => {\n let arrayBuffer;\n let error;\n let frames;\n\n // if the gif is an input file, get the arrayBuffer with FileReader\n if (gif.type) {\n const reader = new FileReader();\n try {\n arrayBuffer = await new Promise((resolve, reject) => {\n reader.onload = () => resolve(reader.result);\n reader.onerror = () => reject(reader.error);\n reader.readAsArrayBuffer(gif);\n });\n } catch (err) {\n error = err;\n }\n } else {\n try {\n arrayBuffer = await fetch(gif).then((resp) => resp.arrayBuffer());\n } catch (err) {\n error = err;\n }\n }\n\n // Parse and decompress the gif arrayBuffer to frames with the \"gifuct-js\" library\n if (!error) frames = decompressFrames(parseGIF(arrayBuffer), true);\n if (!error && (!frames || !frames.length)) error = 'No_frame_error';\n if (error) {\n console.error(error);\n return {error};\n }\n\n const dataCanvas = document.createElement('canvas');\n const dataCtx = dataCanvas.getContext('2d');\n const frameCanvas = document.createElement('canvas');\n const frameCtx = frameCanvas.getContext('2d');\n const spriteCanvas = document.createElement('canvas');\n const spriteCtx = spriteCanvas.getContext('2d');\n\n let [width, height, delay] = [\n frames[0].dims.width,\n frames[0].dims.height,\n frames.reduce((acc, cur) => (acc = !acc ? cur.delay : acc), 0),\n ];\n\n const duration = frames.length * delay;\n maxDuration = maxDuration || duration;\n if (duration > maxDuration) frames.splice(Math.ceil(maxDuration / delay));\n\n maxWidth = maxWidth || width;\n maxHeight = maxHeight || height;\n const scale = Math.min(maxWidth / width, maxHeight / height);\n width = width * scale;\n height = height * scale;\n\n frameCanvas.width = width;\n frameCanvas.height = height;\n spriteCanvas.width = width * frames.length;\n spriteCanvas.height = height;\n\n frames.forEach((frame, i) => {\n const frameImageData = dataCtx.createImageData(\n frame.dims.width,\n frame.dims.height\n );\n frameImageData.data.set(frame.patch);\n dataCanvas.width = frame.dims.width;\n dataCanvas.height = frame.dims.height;\n dataCtx.putImageData(frameImageData, 0, 0);\n\n if (frame.disposalType === 2) frameCtx.clearRect(0, 0, width, height);\n frameCtx.drawImage(\n dataCanvas,\n frame.dims.left * scale,\n frame.dims.top * scale,\n frame.dims.width * scale,\n frame.dims.height * scale\n );\n\n spriteCtx.drawImage(frameCanvas, width * i, 0);\n });\n\n const dataUrl = spriteCanvas.toDataURL();\n\n dataCanvas.remove();\n frameCanvas.remove();\n spriteCanvas.remove();\n\n return {\n dataUrl,\n frameWidth: width,\n framesLength: frames.length,\n delay,\n };\n};\n","import {fabric} from 'fabric';\n\n/**\n * Should objects be aligned by a bounding box?\n * [Bug] Scaled objects sometimes can not be aligned by edges\n *\n */\nexport function initAligningGuidelines(canvas) {\n let ctx = canvas.getSelectionContext(),\n aligningLineOffset = 5,\n aligningLineMargin = 4,\n aligningLineWidth = 1,\n aligningLineColor = 'rgb(255, 0, 0)',\n viewportTransform = canvas.viewportTransform,\n zoom = 1;\n\n function drawVerticalLine(coords) {\n drawLine(\n coords.x1 + 0.5,\n coords.y1 > coords.y2 ? coords.y2 : coords.y1,\n coords.x1 + 0.5,\n coords.y2 > coords.y1 ? coords.y2 : coords.y1\n );\n }\n\n function drawHorizontalLine(coords) {\n drawLine(\n coords.x1 > coords.x2 ? coords.x2 : coords.x1,\n coords.y1 + 0.5,\n coords.x2 > coords.x1 ? coords.x2 : coords.x1,\n coords.y1 + 0.5\n );\n }\n\n function drawLine(x1, y1, x2, y2) {\n ctx.save();\n ctx.lineWidth = aligningLineWidth;\n ctx.strokeStyle = aligningLineColor;\n ctx.beginPath();\n if (viewportTransform) {\n ctx.moveTo(\n (x1 + viewportTransform[4]) * zoom,\n (y1 + viewportTransform[5]) * zoom\n );\n ctx.lineTo(\n (x2 + viewportTransform[4]) * zoom,\n (y2 + viewportTransform[5]) * zoom\n );\n }\n ctx.stroke();\n ctx.restore();\n }\n\n function isInRange(value1, value2) {\n value1 = Math.round(value1);\n value2 = Math.round(value2);\n for (\n let i = value1 - aligningLineMargin, len = value1 + aligningLineMargin;\n i <= len;\n i++\n ) {\n if (i === value2) {\n return true;\n }\n }\n return false;\n }\n\n let verticalLines = [],\n horizontalLines = [];\n\n canvas.on('mouse:down', function() {\n viewportTransform = canvas.viewportTransform;\n zoom = canvas.getZoom();\n });\n\n canvas.on('object:moving', function(e) {\n let activeObject = e.target;\n if (!activeObject || !viewportTransform) return;\n\n let canvasObjects = canvas.getObjects();\n let activeObjectCenter = activeObject.getCenterPoint(),\n activeObjectLeft = activeObjectCenter.x,\n activeObjectTop = activeObjectCenter.y,\n activeObjectBoundingRect = activeObject.getBoundingRect(),\n activeObjectHeight =\n activeObjectBoundingRect.height / viewportTransform[3],\n activeObjectWidth = activeObjectBoundingRect.width / viewportTransform[0],\n horizontalInTheRange = false,\n verticalInTheRange = false,\n transform = canvas.viewportTransform;\n\n if (!transform) return;\n\n // It should be trivial to DRY this up by encapsulating (repeating) creation of x1, x2, y1, and y2 into functions,\n // but we're not doing it here for perf. reasons -- as this a function that's invoked on every mouse move\n\n for (let i = canvasObjects.length; i--; ) {\n if (canvasObjects[i] === activeObject) continue;\n\n let objectCenter = canvasObjects[i].getCenterPoint(),\n objectLeft = objectCenter.x,\n objectTop = objectCenter.y,\n objectBoundingRect = canvasObjects[i].getBoundingRect(),\n objectHeight = objectBoundingRect.height / viewportTransform[3],\n objectWidth = objectBoundingRect.width / viewportTransform[0];\n\n // snap by the horizontal center line\n if (isInRange(objectLeft, activeObjectLeft)) {\n verticalInTheRange = true;\n verticalLines.push({\n x1: objectLeft,\n y1:\n objectTop < activeObjectTop\n ? objectTop - objectHeight / 2 - aligningLineOffset\n : objectTop + objectHeight / 2 + aligningLineOffset,\n y2:\n activeObjectTop > objectTop\n ? activeObjectTop + activeObjectHeight / 2 + aligningLineOffset\n : activeObjectTop - activeObjectHeight / 2 - aligningLineOffset,\n });\n activeObject.setPositionByOrigin(\n new fabric.Point(objectLeft, activeObjectTop),\n 'center',\n 'center'\n );\n }\n\n // snap by the left edge\n if (\n isInRange(\n objectLeft - objectWidth / 2,\n activeObjectLeft - activeObjectWidth / 2\n )\n ) {\n verticalInTheRange = true;\n verticalLines.push({\n x1: objectLeft - objectWidth / 2,\n y1:\n objectTop < activeObjectTop\n ? objectTop - objectHeight / 2 - aligningLineOffset\n : objectTop + objectHeight / 2 + aligningLineOffset,\n y2:\n activeObjectTop > objectTop\n ? activeObjectTop + activeObjectHeight / 2 + aligningLineOffset\n : activeObjectTop - activeObjectHeight / 2 - aligningLineOffset,\n });\n activeObject.setPositionByOrigin(\n new fabric.Point(\n objectLeft - objectWidth / 2 + activeObjectWidth / 2,\n activeObjectTop\n ),\n 'center',\n 'center'\n );\n }\n\n // snap by the right edge\n if (\n isInRange(\n objectLeft + objectWidth / 2,\n activeObjectLeft + activeObjectWidth / 2\n )\n ) {\n verticalInTheRange = true;\n verticalLines.push({\n x1: objectLeft + objectWidth / 2,\n y1:\n objectTop < activeObjectTop\n ? objectTop - objectHeight / 2 - aligningLineOffset\n : objectTop + objectHeight / 2 + aligningLineOffset,\n y2:\n activeObjectTop > objectTop\n ? activeObjectTop + activeObjectHeight / 2 + aligningLineOffset\n : activeObjectTop - activeObjectHeight / 2 - aligningLineOffset,\n });\n activeObject.setPositionByOrigin(\n new fabric.Point(\n objectLeft + objectWidth / 2 - activeObjectWidth / 2,\n activeObjectTop\n ),\n 'center',\n 'center'\n );\n }\n\n // snap by the vertical center line\n if (isInRange(objectTop, activeObjectTop)) {\n horizontalInTheRange = true;\n horizontalLines.push({\n y1: objectTop,\n x1:\n objectLeft < activeObjectLeft\n ? objectLeft - objectWidth / 2 - aligningLineOffset\n : objectLeft + objectWidth / 2 + aligningLineOffset,\n x2:\n activeObjectLeft > objectLeft\n ? activeObjectLeft + activeObjectWidth / 2 + aligningLineOffset\n : activeObjectLeft - activeObjectWidth / 2 - aligningLineOffset,\n });\n activeObject.setPositionByOrigin(\n new fabric.Point(activeObjectLeft, objectTop),\n 'center',\n 'center'\n );\n }\n\n // snap by the top edge\n if (\n isInRange(\n objectTop - objectHeight / 2,\n activeObjectTop - activeObjectHeight / 2\n )\n ) {\n horizontalInTheRange = true;\n horizontalLines.push({\n y1: objectTop - objectHeight / 2,\n x1:\n objectLeft < activeObjectLeft\n ? objectLeft - objectWidth / 2 - aligningLineOffset\n : objectLeft + objectWidth / 2 + aligningLineOffset,\n x2:\n activeObjectLeft > objectLeft\n ? activeObjectLeft + activeObjectWidth / 2 + aligningLineOffset\n : activeObjectLeft - activeObjectWidth / 2 - aligningLineOffset,\n });\n activeObject.setPositionByOrigin(\n new fabric.Point(\n activeObjectLeft,\n objectTop - objectHeight / 2 + activeObjectHeight / 2\n ),\n 'center',\n 'center'\n );\n }\n\n // snap by the bottom edge\n if (\n isInRange(\n objectTop + objectHeight / 2,\n activeObjectTop + activeObjectHeight / 2\n )\n ) {\n horizontalInTheRange = true;\n horizontalLines.push({\n y1: objectTop + objectHeight / 2,\n x1:\n objectLeft < activeObjectLeft\n ? objectLeft - objectWidth / 2 - aligningLineOffset\n : objectLeft + objectWidth / 2 + aligningLineOffset,\n x2:\n activeObjectLeft > objectLeft\n ? activeObjectLeft + activeObjectWidth / 2 + aligningLineOffset\n : activeObjectLeft - activeObjectWidth / 2 - aligningLineOffset,\n });\n activeObject.setPositionByOrigin(\n new fabric.Point(\n activeObjectLeft,\n objectTop + objectHeight / 2 - activeObjectHeight / 2\n ),\n 'center',\n 'center'\n );\n }\n }\n\n if (!horizontalInTheRange) {\n horizontalLines.length = 0;\n }\n\n if (!verticalInTheRange) {\n verticalLines.length = 0;\n }\n });\n\n canvas.on('before:render', function() {\n canvas.clearContext(ctx);\n });\n\n canvas.on('after:render', function() {\n for (let i = verticalLines.length; i--; ) {\n drawVerticalLine(verticalLines[i]);\n }\n for (let i = horizontalLines.length; i--; ) {\n drawHorizontalLine(horizontalLines[i]);\n }\n\n verticalLines.length = horizontalLines.length = 0;\n });\n\n canvas.on('mouse:up', function() {\n verticalLines.length = horizontalLines.length = 0;\n canvas.renderAll();\n });\n}\n","import {renderIcon} from '~/common/canvas/renderIcon';\nimport PB_Duplicate from '~/common/svg/icons/PB_Duplicate.svg';\nimport {PB_AlertLine} from '~/common/svg/PB_AlertLine';\nimport {toastAlert} from '~/common/_pb_components/atoms/Toast';\nimport React from 'react';\n\nexport const cloneControl = () => {\n const cloneObject = (eventData, transform) => {\n const target = transform.target;\n const canvas = target.canvas;\n const textsQty = canvas.getObjects().filter((obj) => obj.type === 'textbox')\n .length;\n if (textsQty < 8) {\n target.clone(function(cloned) {\n canvas.add(\n cloned.set({\n left: target.left + 50,\n top: target.top + 50,\n letterCasing: target?.letterCasing,\n _originalObject: JSON.parse(JSON.stringify(target)),\n })\n );\n canvas.setActiveObject(cloned);\n });\n } else {\n toastAlert('Maximum number of text boxes has been reached', {\n type: 'error',\n icon: ,\n position: 'top-right',\n autoClose: 5000,\n hideProgressBar: true,\n closeOnClick: true,\n pauseOnHover: true,\n draggable: true,\n progress: undefined,\n });\n }\n };\n\n const padding = 9;\n\n return new fabric.Control({\n x: 0,\n y: -0.5,\n offsetX: 22,\n offsetY: -16 - padding,\n cursorStyle: 'pointer',\n mouseUpHandler: cloneObject,\n render: renderIcon({icon: PB_Duplicate, padding}),\n cornerSize: 16,\n touchSizeX: 32,\n touchSizeY: 32,\n sizeX: 30,\n sizeY: 30,\n });\n};\n","import React from 'react';\nimport {PB_AlertLine} from '~/common/svg/PB_AlertLine';\nimport {renderIcon} from '~/common/canvas/renderIcon';\nimport PB_Delete from '~/common/svg/icons/PB_Delete.svg';\nimport {toastAlert} from '~/common/_pb_components/atoms/Toast';\n\nexport const removeControl = ({offsetX} = {}) => {\n const removeObject = (eventData, obj) => {\n const canvas = obj.target.canvas;\n const allObjects = canvas.getObjects();\n const allActiveObjects = canvas.getActiveObjects();\n\n const filterTextBoxes = (arr = []) =>\n arr?.filter((obj) => obj?.type === 'textbox');\n\n const containPicture = allActiveObjects?.some(\n (obj) => obj.type !== 'textbox'\n );\n const texts = filterTextBoxes(allObjects);\n const textObjectsToBeRemoved = filterTextBoxes(allActiveObjects);\n\n if (containPicture || texts.length - textObjectsToBeRemoved.length >= 1) {\n allActiveObjects?.map((textObj) => canvas.remove(textObj));\n canvas.discardActiveObject().renderAll();\n } else {\n toastAlert('Must have at least 1 text box', {\n type: 'error',\n icon: ,\n position: 'top-right',\n autoClose: 5000,\n hideProgressBar: true,\n closeOnClick: true,\n pauseOnHover: true,\n draggable: true,\n progress: undefined,\n });\n }\n };\n\n const padding = 9;\n\n return new fabric.Control({\n x: 0,\n y: -0.5,\n offsetX: offsetX ?? -22,\n offsetY: -16 - padding,\n cursorStyle: 'pointer',\n mouseUpHandler: removeObject,\n render: renderIcon({icon: PB_Delete, padding}),\n cornerSize: 16,\n touchSizeX: 32,\n touchSizeY: 32,\n sizeX: 30,\n sizeY: 30,\n });\n};\n","import {renderIcon} from '~/common/canvas/renderIcon';\nimport PB_Rotation from '~/common/svg/icons/PB_Rotation.svg';\n\nexport const rotationControl = () => {\n return new fabric.Control({\n x: 0,\n y: 0.5,\n offsetX: 0,\n offsetY: 20,\n cornerSize: 12,\n touchSizeX: 24,\n touchSizeY: 24,\n withConnection: false,\n actionName: 'rotate',\n cursorStyle: 'pointer',\n render: renderIcon({icon: PB_Rotation, padding: 4}),\n actionHandler: fabric.controlsUtils.rotationWithSnapping,\n });\n};\n","import {fabric} from 'fabric';\n\nfabric.util.object.extend(fabric.Textbox, {\n fromObject: async function(object, callback) {\n const styles = fabric.util.stylesFromArray(object.styles, object.text);\n const objCopy = Object.assign({}, object, {styles: styles});\n\n try {\n const promises = Array.from(document.fonts.values())\n .filter(({family}) => family === object.fontFamily)\n .map((font) => font.load());\n await Promise.allSettled(promises);\n } catch (error) {\n console.log(\n `${object.fontFamily} Error loading font: ${error}. Ignoring and moving on...`\n );\n } finally {\n return fabric.Object._fromObject('Textbox', objCopy, callback, 'text');\n }\n },\n});\n","import {fabric} from 'fabric';\nimport {fabricGif} from '~/common/canvas/animation/gif/Gif';\n\nfabric.Gif = fabric.util.createClass(fabric.Image, {\n type: 'gif',\n originalUrl: '',\n initialize: function(options, extra) {\n options || (options = {});\n this.callSuper('initialize', options, extra);\n },\n\n toObject: function(propertiesToInclude) {\n const {src, ...object} = this.callSuper(\n 'toObject',\n ['originalUrl'].concat(propertiesToInclude)\n );\n return object;\n },\n});\n\nfabric.Gif.fromURL = (url, callback, imgOptions) => {\n fabric.util.loadImage(url, function(img, isError) {\n callback && callback(new fabric.Gif(img, imgOptions), isError);\n });\n};\n\nfabric.Gif.fromObject = (object, callback) => {\n return fabricGif(\n object.originalUrl,\n {originalUrl: object.originalUrl},\n object.frameWidth\n ).then((gif) => {\n gif.set({...object});\n callback(gif, false);\n });\n};\n","export * from './letter_casing';\nexport * from './gif';\nexport * from './fonts';\nexport * from './uyo_image';\n","import {fabric} from 'fabric';\n\nconst capitalize = (text) => {\n const words = text.split(' ');\n return words\n .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())\n .join(' ');\n};\n\nexport const letterCasing = {\n capitalize,\n upper: (text) => text.toUpperCase(),\n lower: (text) => text.toLowerCase(),\n};\n\nconst letterCasingHandler = (operation, text) => {\n return operation ? letterCasing[operation](text) : text;\n};\n\nfabric.util.object.extend(fabric.Textbox.prototype, {\n enterEditing: function() {\n if (this.hiddenTextarea) {\n this.text = this.hiddenTextarea.value;\n } else {\n this.text = this._originalText ?? this.text;\n }\n this.callSuper('enterEditing');\n },\n exitEditing: function() {\n this._originalText = this.text;\n this.text = letterCasingHandler(this.letterCasing, this.text);\n this.callSuper('exitEditing');\n },\n});\n","import {fabric} from 'fabric';\n\nfabric.UYOImage = fabric.util.createClass(fabric.Image, {\n type: 'uYOImage',\n isError: false,\n});\n\nconst loadImage = (url, callback, options) => {\n fabric.util.loadImage(\n url,\n function(img, isError) {\n const uyoImage = new fabric.UYOImage(img, {...options, isError});\n callback && callback(uyoImage);\n },\n null,\n 'anonymous'\n );\n};\n\nfabric.UYOImage.fromURL = loadImage;\n\nfabric.UYOImage.fromObject = (object, callback) => {\n return loadImage(object.src, callback, object);\n};\n","import {fabric} from 'fabric';\nimport {removeControl} from '~/common/canvas/controls/remove';\nimport {cloneControl} from '~/common/canvas/controls/clone';\nimport {rotationControl} from '~/common/canvas/controls/rotation';\nimport * as colors from '~sass/pb_styleguide/base/_exports.sass';\nimport './Canvas.sass';\nimport './customs';\n\nfabric.Object.prototype.setControlsVisibility({\n tl: true, //top-left\n mt: false, // middle-top\n tr: true, //top-right\n ml: true, //middle-left\n mr: true, //middle-right\n bl: true, // bottom-left\n mb: false, //middle-bottom\n br: true, //bottom-right\n mtr: true, // rotate icon\n});\n\nfabric.Textbox.prototype.set({\n hoverCursor: 'pointer',\n moveCursor: 'default',\n touchCornerSize: 40,\n editingBorderColor: colors.tanzanite,\n});\n\nfabric.Image.prototype.set({\n hoverCursor: 'pointer',\n moveCursor: 'default',\n touchCornerSize: 40,\n editingBorderColor: colors.tanzanite,\n});\n\nfabric.Object.prototype.controls.tl.offsetX = -1;\nfabric.Object.prototype.controls.tl.offsetY = -1;\nfabric.Object.prototype.controls.tr.offsetX = 1;\nfabric.Object.prototype.controls.tr.offsetY = -1;\nfabric.Object.prototype.controls.bl.offsetX = -1;\nfabric.Object.prototype.controls.bl.offsetY = 1;\nfabric.Object.prototype.controls.br.offsetX = 1;\nfabric.Object.prototype.controls.br.offsetY = 1;\n\nfabric.Textbox.prototype.controls.mtr = rotationControl();\nfabric.Textbox.prototype.controls.remove = removeControl();\nfabric.Textbox.prototype.controls.clone = cloneControl();\n\nfabric.Image.prototype.controls.mtr = rotationControl();\nfabric.Image.prototype.controls.remove = removeControl({offsetX: 0});\n\nfabric.Object.prototype.set({\n cornerSize: 9,\n borderColor: colors.tanzanite,\n transparentCorners: false,\n cornerStrokeColor: colors.tanzanite,\n cornerColor: colors.white,\n});\n\nconst _renderBackgroundOrOverlay =\n fabric.StaticCanvas.prototype._renderBackgroundOrOverlay;\n\nfabric.StaticCanvas.prototype._renderBackgroundOrOverlay = function(\n ctx,\n property\n) {\n if (property !== 'background') {\n return _renderBackgroundOrOverlay.call(this, ctx, property);\n }\n\n if (this.backgroundImage) {\n const {originalUrl, _originalElement} = this.backgroundImage;\n\n ctx.canvas.style.backgroundImage = `url(${originalUrl ||\n _originalElement.src})`;\n ctx.canvas.style.backgroundSize = '100%';\n ctx.canvas.style.backgroundRepeat = 'no-repeat';\n }\n};\n\nexport default fabric;\n","import fabric from '~/common/canvas/fabric';\nimport {\n DEFAULT_CARD_ZOOM,\n DEFAULT_HEIGHT_DESKTOP,\n DEFAULT_WIDTH_DESKTOP,\n} from '~/CreateFabricInvitation/routes/EventCreateDesign/constants';\n\nexport const useCanvas = (canvasEl, configJson, callback) => {\n const canvasInstance = new fabric.Canvas(canvasEl, {\n width: DEFAULT_WIDTH_DESKTOP,\n height: DEFAULT_HEIGHT_DESKTOP,\n includeDefaultValues: false,\n preserveObjectStacking: true,\n selection: !evite.detects.isMobile,\n });\n\n canvasInstance.setZoom(DEFAULT_CARD_ZOOM);\n\n const loadCanvas = (configJson) => {\n configJson?.objects?.forEach((obj) => {\n if (['image', 'uYOImage'].indexOf(obj.type) > -1) {\n obj.crossOrigin = 'anonymous';\n }\n });\n\n const reviver = (json, obj) => {\n obj._originalObject = JSON.parse(JSON.stringify(obj));\n obj.selectable = obj.type === 'textbox';\n };\n canvasInstance.loadFromJSON(configJson, callback, reviver);\n };\n\n configJson && loadCanvas(configJson);\n\n return canvasInstance;\n};\n","import {useEffect, useMemo, useState} from 'react';\nimport {useCanvas} from '~/common/canvas/hooks/useCanvas';\n\nexport const useCanvasImage = (fabricArt) => {\n const [image, setImage] = useState();\n const [loaded, setLoaded] = useState(!fabricArt);\n\n const canvas = useMemo(\n () =>\n useCanvas(null, fabricArt, () => {\n setLoaded(true);\n const snapshot = canvas.toDataURL({\n enableRetinaScaling: true,\n });\n setImage(snapshot);\n }),\n [fabricArt]\n );\n\n useEffect(() => {\n return () => {\n canvas.setDimensions({width: 1, height: 1});\n canvas.clear();\n canvas.dispose();\n };\n }, []);\n\n return {image, loading: !loaded};\n};\n","import {fabric} from 'fabric';\nimport {silver, cloud} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport function renderIcon({icon, fillStyle = silver, padding = 2}) {\n const img = document.createElement('img');\n img.src = icon;\n return function renderIcon(ctx, left, top, styleOverride, fabricObject) {\n const size = this.cornerSize;\n\n ctx.save();\n ctx.beginPath();\n ctx.arc(left, top, size / 2 + padding, 0, 2 * Math.PI, false);\n ctx.fillStyle = fillStyle;\n ctx.fill();\n ctx.strokeStyle = cloud;\n ctx.lineWidth = 1;\n ctx.stroke();\n ctx.restore();\n\n ctx.save();\n ctx.translate(left, top);\n ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));\n ctx.drawImage(img, -size / 2, -size / 2, size, size);\n ctx.restore();\n };\n}\n","export const Spinner = (props) => {\n return (\n \n );\n};\n","import * as constants from './constants';\n\nexport const showLoginModal = () => {\n return {\n type: constants.SHOW_LOGIN_MODAL,\n };\n};\n\nexport const hideLoginModal = () => {\n return {\n type: constants.HIDE_LOGIN_MODAL,\n };\n};\n\nexport const userLoggedIn = (\n userId,\n userName,\n subscriptionPlanName,\n email,\n avatarDisk,\n imgUrl,\n initials,\n firstName\n) => {\n return {\n type: constants.USER_LOGGED_IN,\n userId,\n userName,\n subscriptionPlanName,\n email,\n avatarDisk,\n imgUrl,\n initials,\n firstName,\n };\n};\n","export const SHOW_LOGIN_MODAL = 'evite/*/LOGIN_MODAL/SHOW';\nexport const HIDE_LOGIN_MODAL = 'evite/*/LOGIN_MODAL/HIDE';\nexport const USER_LOGGED_IN = 'evite/*/LOGIN_MODAL/USER_LOGGED_IN';\n","export * from './constants.js';\nexport * from './reducer.js';\nexport * from './actions.js';\n","import * as constants from './constants';\n\nlet initialState = {\n showLoginModal: false,\n};\n\nexport const reducer = (state = initialState, action = {}) => {\n switch (action.type) {\n case constants.USER_LOGGED_IN:\n case constants.HIDE_LOGIN_MODAL: {\n return {\n showLoginModal: false,\n };\n }\n case constants.SHOW_LOGIN_MODAL: {\n return {\n showLoginModal: true,\n };\n }\n default: {\n return state;\n }\n }\n};\n","// Should align with BE's core/events/constants.py so we maintain a complete list\n\nexport const ORIGIN_DICT = {\n AG: 3, // American Greeting\n CEC: 4, // Chuck E. Cheese\n CMM: 5,\n AOLMAIL: 6,\n VISAFT: 7,\n YMAIL: 8,\n EVT: 10, // Old/original evite.com java site\n NEO: 11, // Current core site\n EVITE: 11, // Current core site\n SPD: 11, // Failed evite rewrite 'spd' aka 'speed'\n IOS: 12, // iPhone Core App\n POSTMARK: 13, // Legacy premium\n // Plans / Evite Me / Evite Go / New Mobile App\n // NOTE none of these events should be loaded into the new system.\n PLANS: 14,\n ANDROID: 15, // Android\n GENESIS: 16, // Rudy's new mobile web\n IOS2: 17, // updated iPhone Core App\n ANDROID2: 18, // updated iPhone Core App\n GIFTING: 19, // Lars' Photo Gifting App\n GREETINGCARD2: 20, // Greeting Card 2.0\n FABRIC: 21, // Fabric Invitation\n FABRICGREETINGCARD: 22, // Fabric Greeting Card\n};\n\n// please add any groupings below if these don't meet future needs\nexport const CARD_ORIGINS = [\n ORIGIN_DICT['FABRICGREETINGCARD'],\n ORIGIN_DICT['GREETINGCARD2'],\n];\nexport const FABRIC_EVENT_ORIGINS = [ORIGIN_DICT['FABRIC']];\nexport const FABRIC_GRC_ORIGINS = [ORIGIN_DICT['FABRICGREETINGCARD']];\nexport const LEGACY_GRC_ORIGINS = [ORIGIN_DICT['GREETINGCARD2']];\nexport const LEGACY_PREMIUM_ORIGINS = [ORIGIN_DICT['POSTMARK']];\n","import React from 'react';\nimport {AsyncComponent} from 'async-component';\n\nexport const EventGuestsAsync = (props) => {\n return (\n {\n return import(\n /* webpackChunkName: \"EventGuests\" */ '~/common/fabric/EventGuests/EventGuests'\n );\n }}\n {...props}\n />\n );\n};\n","import React from 'react';\nimport {UPDATE_GUESTS, UPDATE_GUESTS_UI} from '../reducers/guests/constants';\nimport {\n contactsParams,\n guestListParams,\n paginatedResponseInit,\n} from '../reducers/guests';\nimport {toastAlert} from '~/common/_pb_components/atoms/Toast';\nimport {PB_Checkmark} from '~/common/svg/PB_Checkmark';\nimport {PB_AlertLine} from '~/common/svg/PB_AlertLine';\nimport {Typography} from '~/common/_pb_components/atoms/Typography';\nimport {emeraldWebText} from '~sass/pb_styleguide/base/_exports.sass';\nimport {isEmpty, isEqual, isNil, uniqWith} from 'lodash';\nimport {\n parse_us_phone_number as isPhone,\n valid_email as isEmail,\n} from '~/common/utils';\n\nconst alert = ({title, body, type, icon}) => {\n return toastAlert(\n \n \n {title}\n \n \n {body}\n \n ,\n {\n type,\n icon,\n position: 'top-right',\n autoClose: 2500,\n hideProgressBar: true,\n closeOnClick: true,\n pauseOnHover: true,\n draggable: true,\n progress: undefined,\n }\n );\n};\n\nexport const fetchContactsThunk = (params = {}, returnAll) => async (\n dispatch,\n getState\n) => {\n const eventId = window.evite_event.id;\n const {origin} = window.location;\n const url = new URL(`/ajax/event/${eventId}/guestlist/contacts/`, origin);\n\n if (returnAll) {\n params.page = 1;\n params.per_page = Number.MAX_SAFE_INTEGER;\n }\n\n const searchParams = new URLSearchParams({\n ...selectContactsParams(getState()),\n ...params,\n });\n url.search = searchParams.toString();\n\n const resp = await evite.fetch(url, {\n method: 'get',\n credentials: 'include',\n headers: {Accept: 'application/json'},\n });\n\n const {contacts, letters, all_are_guests, contact_groups} = await resp.json();\n\n if (returnAll) {\n return contacts;\n } else {\n dispatch({\n type: UPDATE_GUESTS,\n payload: {contacts, letters, all_are_guests, contact_groups},\n });\n }\n};\n\nexport const fetchGuestsListThunk = (params = {}, getAll = false) => async (\n dispatch,\n getState\n) => {\n const {origin} = window.location;\n const eventId = window.evite_event.id;\n const {guestListParams} = getState().guests;\n const updatedParams = {\n ...guestListParams,\n ...params,\n };\n\n if (getAll) {\n updatedParams.page = 1;\n updatedParams.per_page = Number.MAX_SAFE_INTEGER;\n }\n\n if (!isNil(params)) {\n dispatch({\n type: UPDATE_GUESTS,\n payload: {\n guestListParams: updatedParams,\n },\n });\n }\n\n // ajax_event_pagination\n const url = new URL(`/ajax/event/${eventId}/guestlist/draft/`, origin);\n const searchParams = new URLSearchParams(updatedParams);\n url.search = searchParams.toString();\n\n try {\n const resp = await evite.fetch(url, {\n method: 'get',\n credentials: 'include',\n headers: {Accept: 'application/json'},\n });\n\n const {guests} = await resp.json();\n\n const url2 = new URL(`/ajax/event/${eventId}/guestlist/sent/`, origin);\n const searchParams2 = new URLSearchParams(updatedParams);\n url2.search = searchParams2.toString();\n\n const resp2 = await evite.fetch(url2, {\n method: 'GET',\n credentials: 'include',\n headers: {Accept: 'application/json'},\n });\n\n const sent = await resp2.json();\n dispatch({type: UPDATE_GUESTS, payload: {guests, sent: sent?.guests}});\n } catch (e) {\n dispatch({\n type: UPDATE_GUESTS,\n payload: {guests: paginatedResponseInit, sent: paginatedResponseInit},\n });\n }\n};\n\nexport const checkIfContainsRecipients = async () => {\n const {origin} = window.location;\n const eventId = window.evite_event.id;\n\n const url = new URL(`/ajax/event/${eventId}/guestlist/draft/`, origin);\n const searchParams = new URLSearchParams({...guestListParams, per_page: 1});\n url.search = searchParams.toString();\n\n const resp = await evite.fetch(url, {\n method: 'get',\n credentials: 'include',\n headers: {Accept: 'application/json'},\n });\n\n const {\n guests: {count},\n } = await resp.json();\n\n return !!count;\n};\n\nexport const editGuestThunk = (guest) => async (dispatch) => {\n const eventId = window.evite_event.id;\n const url = `/ajax/event/${eventId}/guestlist/draft/`;\n\n try {\n await evite.fetch(url, {\n method: 'PATCH',\n credentials: 'include',\n body: JSON.stringify(guest),\n headers: {Accept: 'application/json'},\n });\n dispatch(fetchContactsThunk());\n dispatch(fetchGuestsListThunk());\n dispatch({type: UPDATE_GUESTS_UI, payload: {editing: null}});\n } catch (e) {\n evite.error('Error in posting guest');\n evite.error(e);\n return [];\n }\n};\n\nexport const selectContactsParams = (state) => {\n const {contact_group_id, contactsParams} = state?.guests;\n return {\n ...contactsParams,\n contact_group_id: contact_group_id,\n };\n};\n\nexport const addGuestsThunk = (guests = []) => async (dispatch, getState) => {\n const eventId = window.evite_event.id;\n const {ui} = getState().guests;\n\n const url = `/ajax/event/${eventId}/guestlist/draft/`;\n const {request: req, adding} = ui;\n\n try {\n dispatch({\n type: UPDATE_GUESTS_UI,\n payload: {\n adding: [...adding, guests?.[0]?.id],\n request: {...req, pending: true},\n },\n });\n await evite.fetch(url, {\n method: 'post',\n credentials: 'include',\n body: JSON.stringify(guests),\n headers: {Accept: 'application/json'},\n });\n await dispatch(fetchGuestsListThunk());\n\n await dispatch(fetchContactsThunk());\n await dispatch(fetchGuestsImportThunk());\n\n dispatch({\n type: UPDATE_GUESTS_UI,\n payload: {adding: [], request: {...req, pending: false}},\n });\n } catch (e) {\n evite.error('Error in posting guest');\n evite.error(e);\n return [];\n }\n};\n\nexport const deleteGuestThunk = (guestId) => async (dispatch, getState) => {\n const {\n ui,\n guests: {page, current_page},\n } = getState().guests;\n const eventId = window.evite_event.id;\n const url = `/ajax/event/${eventId}/guestlist/draft/${guestId}`;\n const {request: req, deleting} = ui;\n\n try {\n dispatch({\n type: UPDATE_GUESTS_UI,\n payload: {\n deleting: [...deleting, guestId],\n request: {...req, pending: true},\n },\n });\n await evite.fetch(url, {\n method: 'delete',\n credentials: 'include',\n headers: {Accept: 'application/json'},\n });\n\n let curr_page = Number(current_page);\n const previousPage = curr_page - 1;\n if (page?.length - 1 <= 0) {\n if (previousPage <= 0) {\n curr_page = 1;\n } else {\n curr_page = previousPage;\n }\n }\n await dispatch(fetchGuestsListThunk({page: curr_page}));\n\n await dispatch(fetchContactsThunk());\n await dispatch(fetchGuestsImportThunk());\n\n const payload = {deleting: [], request: {...req, pending: false}};\n dispatch({type: UPDATE_GUESTS_UI, payload});\n } catch (e) {\n evite.error('Error in posting guest');\n evite.error(e);\n }\n};\n\nexport const saveNewContactToGuestThunk = (contact) => async (\n dispatch,\n getState\n) => {\n const url = '/ajax/profile/contacts';\n const {fabricGreetingCard} = getState().guests;\n const label = fabricGreetingCard ? 'Recipient' : 'Guest';\n\n try {\n const resp = await evite.fetch(url, {\n method: 'PUT',\n credentials: 'include',\n body: JSON.stringify(contact),\n headers: {Accept: 'application/json'},\n });\n const guest = await resp.json();\n const guests = [\n {\n ...guest,\n invite_method: contact.phone ? 'sms' : 'email',\n phone: contact.phone,\n selected: true,\n import_method: 'manually_added',\n },\n ];\n await dispatch(addGuestsThunk(guests));\n dispatch({type: UPDATE_GUESTS, payload: {q: ''}});\n await dispatch({\n type: UPDATE_GUESTS_UI,\n payload: {adding: [], name: '', email: '', phone: '', creating: false},\n });\n\n alert({\n title: 'Success',\n body: `1 ${label} Added.`,\n type: 'success',\n icon: ,\n });\n } catch (e) {\n evite.error('Error in creating contact');\n evite.error(e);\n }\n};\n\nexport const uploadGuests = (file) => async (dispatch) => {\n const eventId = window.evite_event.id;\n\n const token = window.evite.cookie('csrftoken');\n const body = new FormData();\n\n body.append('csrfmiddlewaretoken', token);\n body.append('csv-upload', file);\n\n const url = '/profile/contacts/import/csv';\n const url2 = `/event/${eventId}/guests/csv/draft`;\n\n const headers = {\n 'X-CSRFToken': token,\n accept: 'application/json, */*',\n };\n\n await fetch(url, {method: 'POST', headers, body});\n await fetch(url2, {method: 'POST', headers, body});\n dispatch(fetchContactsThunk());\n dispatch(fetchGuestsListThunk());\n dispatch({type: UPDATE_GUESTS_UI, payload: {uploading: false}});\n};\n\nexport const selectImportParams = (state) => {\n const {contactsParams} = state?.guests;\n\n return {\n ...contactsParams,\n q: contactsParams.import_search_string,\n };\n};\n\nexport const fetchGuestsImportThunk = (\n params = {},\n returnAll = false\n) => async (dispatch, getState) => {\n const {origin} = window.location;\n const eventId = window.evite_event.id;\n\n const url = new URL(`/ajax/event/${eventId}/guestlist/import/`, origin);\n\n if (returnAll) {\n params.page = 1;\n params.per_page = Number.MAX_SAFE_INTEGER;\n }\n\n const searchParams = new URLSearchParams({\n ...selectImportParams(getState()),\n ...params,\n });\n\n url.search = searchParams.toString();\n\n const resp = await evite.fetch(url, {\n method: 'get',\n credentials: 'include',\n headers: {Accept: 'application/json'},\n });\n const {guests: imports, letters} = await resp.json();\n\n dispatch({type: UPDATE_GUESTS_UI, payload: {loadingAddressBook: false}});\n if (returnAll) {\n return imports;\n } else {\n dispatch({type: UPDATE_GUESTS, payload: {imports, letters}});\n }\n};\n\nexport const deleteImportsThunk = () => async (dispatch) => {\n const eventId = window.evite_event.id;\n\n const url = `/ajax/event/${eventId}/guestlist/import/all`;\n\n await fetch(url, {\n method: 'DELETE',\n credentials: 'include',\n headers: {Accept: 'application/json'},\n });\n\n dispatch({type: UPDATE_GUESTS, payload: {imports: paginatedResponseInit}});\n dispatch({\n type: UPDATE_GUESTS_UI,\n payload: {importing: false, googleAddressBook: false},\n });\n};\n\nexport const deleteAllContactsFromGuestlistThunk = () => async (\n dispatch,\n getState\n) => {\n const {origin} = window.location;\n const id = window.evite_event.id;\n const deleteContactsFromListUrl = new URL(\n `/ajax/event/${id}/guestlist/contacts/group-delete/draft/`,\n origin\n );\n await fetch(deleteContactsFromListUrl, {\n method: 'post',\n credentials: 'include',\n headers: {Accept: 'application/json'},\n });\n\n const deleteImportsFromListUrl = new URL(\n `/ajax/event/${id}/guestlist/import/group-delete/draft/`,\n origin\n );\n await fetch(deleteImportsFromListUrl, {\n method: 'post',\n credentials: 'include',\n headers: {Accept: 'application/json'},\n });\n\n const deleteAllDraftContactsFromListUrl = new URL(\n `ajax/event/${id}/guestlist/draft/all`,\n origin\n );\n await fetch(deleteAllDraftContactsFromListUrl, {\n method: 'DELETE',\n credentials: 'include',\n headers: {Accept: 'application/json'},\n });\n\n dispatch(fetchContactsThunk());\n await dispatch(fetchGuestsListThunk({page: 1, q: ''}));\n};\n\nexport const toggleAllContactsThunk = (contacts) => async (\n dispatch,\n getState\n) => {\n const {guestsToBeAdded} = getState().guests;\n\n const guests = contacts\n ?.filter((contact) => {\n return !(\n contact?.selected === true ||\n contact?.invited === true ||\n contact?.is_invited === true\n );\n })\n ?.map((contact) => ({\n ...contact,\n invite_method:\n contact?.invite_method || (contact.email ? 'email' : 'sms'),\n }));\n\n const newGuestsToBeAdded = uniqWith([...guestsToBeAdded, ...guests], isEqual);\n\n dispatch({\n type: UPDATE_GUESTS,\n payload: {\n guestsToBeAdded: newGuestsToBeAdded,\n },\n });\n};\n\nexport const fetchEventsThunk = (paginationParams = {}) => async (\n dispatch,\n getState\n) => {\n const {origin} = window.location;\n const {\n fabricGreetingCard,\n eventsParams: {sort, ...params},\n } = getState().guests;\n\n // ajax_event_pagination\n const url = new URL(`/ajax/profile/events/get`, origin);\n\n const sortTypes = {\n event_date_desc: {\n property: 'event_date',\n order: 'desc',\n },\n event_date_asc: {\n property: 'event_date',\n order: 'asc',\n },\n title_desc: {\n property: 'title',\n order: 'desc',\n },\n title_asc: {\n property: 'title',\n order: 'asc',\n },\n };\n\n const resp = await evite.fetch(url, {\n method: 'POST',\n credentials: 'include',\n headers: {\n Accept: 'application/json',\n 'X-CSRFToken': evite.cookie('csrftoken'),\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n ...params,\n ...paginationParams,\n sort: sortTypes[sort],\n }),\n });\n\n const events = await resp.json();\n\n dispatch({\n type: UPDATE_GUESTS,\n payload: {events},\n });\n\n console.log(events);\n};\n\nexport const selectAllContacts = () => async (dispatch) => {\n const {page} = await dispatch(fetchContactsThunk({}, true));\n await dispatch(toggleAllContactsThunk(page));\n};\n\nexport const selectAllImportContacts = () => async (dispatch) => {\n const {page} = await dispatch(fetchGuestsImportThunk({}, true));\n await dispatch(toggleAllContactsThunk(page));\n};\n\nexport const selectAllEventGuests = () => async (dispatch) => {\n const {page} = await dispatch(fetchEventGuestListThunk({}, true));\n await dispatch(toggleAllContactsThunk(page));\n};\n\nexport const fetchEventGuestListThunk = (\n paginationParams = {},\n returnAll\n) => async (dispatch, getState) => {\n const {origin} = window.location;\n const eventId = window.evite_event.id;\n const params = getState().guests.eventGuestListParams;\n\n if (!isNil(paginationParams)) {\n dispatch({\n type: UPDATE_GUESTS,\n payload: {\n eventGuestListParams: {\n ...params,\n ...paginationParams,\n },\n },\n });\n }\n\n if (!params?.source_event_id) {\n return;\n }\n\n // ajax_event_pagination\n const url = new URL(`/ajax/event/${eventId}/guestlist/import/event/`, origin);\n\n const body = {...params, ...paginationParams};\n\n if (body.rsvp === 'all') {\n body.rsvp = null;\n }\n\n if (returnAll) {\n body.page = 1;\n body.per_page = Number.MAX_SAFE_INTEGER;\n }\n\n const resp = await evite.fetch(url, {\n method: 'POST',\n credentials: 'include',\n headers: {\n Accept: 'application/json',\n 'X-CSRFToken': evite.cookie('csrftoken'),\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(body),\n });\n\n let eventGuestList = await resp.json();\n\n if (resp.status !== 200) {\n eventGuestList = paginatedResponseInit;\n }\n\n if (returnAll) {\n return eventGuestList;\n } else {\n await dispatch({\n type: UPDATE_GUESTS,\n payload: {\n eventGuestList,\n },\n });\n }\n};\n\nexport const addBulkGuestsThunk = () => async (dispatch, getState) => {\n dispatch({\n type: UPDATE_GUESTS,\n payload: {\n addingGuest: true,\n },\n });\n const eventId = window.evite_event.id;\n const {guestsToBeAdded, fabricGreetingCard} = getState().guests;\n const url = `/ajax/event/${eventId}/guestlist/draft/`;\n\n const cleanGuestsToBeAdded = () => {\n dispatch({\n type: UPDATE_GUESTS,\n payload: {\n guestsToBeAdded: [],\n addingGuest: false,\n contactsParams,\n contact_group_id: '',\n },\n });\n dispatch({\n type: UPDATE_GUESTS_UI,\n payload: {eventGuestList: false},\n });\n };\n\n const validGuestsToBeAdded = guestsToBeAdded?.filter((contact) => {\n return !!(\n (contact.invite_method === 'email' && isEmail(contact.email).is_valid) ||\n (contact.invite_method === 'sms' && isPhone(contact.phone).is_valid)\n );\n });\n\n const label = fabricGreetingCard ? 'Recipient' : 'Guest';\n\n if (validGuestsToBeAdded?.length === 0) {\n cleanGuestsToBeAdded();\n\n return alert({\n title: 'Fail',\n body: `0 ${label} Added.`,\n type: 'error',\n icon: ,\n });\n }\n\n const response = await evite.fetch(url, {\n method: 'post',\n credentials: 'include',\n body: JSON.stringify(validGuestsToBeAdded),\n headers: {Accept: 'application/json'},\n });\n const data = await response.json();\n\n if (!response.ok) {\n let e = data.message || `Unknown error when adding ${label}`;\n evite.error('Failed Response', e);\n return alert({\n title: 'Fail',\n body: e,\n type: 'error',\n icon: ,\n });\n }\n\n const validGuestsAdded = data.guests;\n\n await dispatch(fetchGuestsListThunk());\n await dispatch(fetchContactsThunk());\n cleanGuestsToBeAdded();\n if (!isEmpty(validGuestsAdded))\n alert({\n title: 'Success',\n body: (\n <>\n {validGuestsAdded?.length} {label}\n {validGuestsAdded?.length > 1 ? 's ' : ' '}\n Added.\n \n ),\n type: 'success',\n icon: ,\n });\n};\n","export const eventStepsType = {\n PREMIUM: 'premium',\n FREEMIUM: 'freemium',\n FREEMIUM_WITH_GUESTS: 'freemium_with_guests',\n FREE: 'free',\n FREE_WITH_GUESTS: 'free_with_guests',\n};\n\nexport const isWebview = () => {\n return !!(\n window?.webkit?.messageHandlers?.fabricCreateOnNav ||\n window?.webview?.fabricCreateOnNav\n );\n};\n\nexport const addGuestsPreCondition = (state, preConditions = []) => {\n return [...preConditions, !state.fabricTemplate?.premium, !isWebview()].every(\n Boolean\n );\n};\n\nexport const getEventStepsType = (state) => {\n const hasGuests = state.guests?.guests?.count > 0;\n const {pathname} = window.location;\n if (!addGuestsPreCondition(state)) {\n return eventStepsType.PREMIUM;\n } else if (hasGuests || pathname.includes('guests')) {\n return state.details.isPremium\n ? eventStepsType.FREEMIUM_WITH_GUESTS\n : eventStepsType.FREE_WITH_GUESTS;\n }\n return state.details.isPremium\n ? eventStepsType.FREEMIUM\n : eventStepsType.FREE;\n};\n","export const UPDATE_GUESTS = '/EventGuests/*/UpdateGuests';\nexport const UPDATE_GUESTS_UI = '/EventGuests/*/UpdateGuestsUI';\nexport const UPDATE_CONTACT_GROUP_ID = '/EventGuests/*/UpdateContactGroupId';\n","export * from './reducer';\n","import {\n UPDATE_GUESTS,\n UPDATE_GUESTS_UI,\n UPDATE_CONTACT_GROUP_ID,\n} from './constants';\n\nexport const alphabet = 'a b c d e f g h i j k l m n o p q r s t u v w x y z #'.split(\n ' '\n);\n\nexport const paginatedResponseInit = {\n page: [],\n current_page: '1',\n has_next: false,\n count: 0,\n num_pages: 0,\n};\n\nexport const eventGuestListResponseInit = {\n ...paginatedResponseInit,\n summary: {\n maybe_count: 0,\n no_count: 0,\n undecided_count: 0,\n yes_count: 0,\n },\n};\n\nexport const guestListParams = {\n q: '',\n search_by: 'all',\n search_type: 'contains',\n sort_by: 'name',\n reverse: false,\n per_page: 25,\n page: 1,\n};\n\nexport const contactsParams = {\n ...guestListParams,\n per_page: 55,\n sort_by: 'name',\n import_search_string: '',\n};\n\nconst initialState = {\n contacts: paginatedResponseInit,\n guests: paginatedResponseInit,\n events: paginatedResponseInit,\n imports: paginatedResponseInit,\n sent: paginatedResponseInit,\n eventGuestList: eventGuestListResponseInit,\n guestsToBeAdded: [],\n addingGuest: false,\n import_search_string: '',\n eventGuestListParams: {\n source_event_id: null,\n per_page: 55,\n page: 1,\n rsvp: null, // all | yes | no | undecided\n search_param: '',\n },\n eventsParams: {\n page: 1,\n events_per_page: 8,\n search_string: null,\n sort: 'event_date_desc',\n search_param: '',\n past_events_only: false,\n },\n guestListParams,\n letters: alphabet,\n contactsParams,\n contact_group_id: '',\n ui: {\n adding: [],\n creating: false,\n deleting: [],\n editing: null,\n uploading: false,\n guestOptions: false,\n eviteGuestList: false,\n eviteAddressBook: false,\n googleAddressBook: false,\n newGuestContact: false,\n eventGuestList: false,\n eventsListScroll: false,\n name: '',\n email: '',\n phone: '',\n request: {pending: false, error: false},\n importing: false,\n loadingAddressBook: false,\n },\n showShareableLinkBanner: true,\n eventId: null,\n fabricGreetingCard: false,\n hasGiftCard: false,\n};\n\nexport const selectAddingOrDeleting = (state, props) => {\n const {guests} = state;\n const {adding, deleting, request} = guests.ui;\n const {pending} = request;\n\n return (\n pending && (adding.includes(props.id) || deleting.includes(props.guest_id))\n );\n};\n\nexport const reducer = (state = initialState, action = {}) => {\n switch (action.type) {\n case UPDATE_CONTACT_GROUP_ID:\n return {...state, contact_group_id: action.payload.contact_group_id};\n case UPDATE_GUESTS:\n return {...state, ...action.payload};\n case UPDATE_GUESTS_UI:\n return {...state, ui: {...state.ui, ...action.payload}};\n default:\n return state;\n }\n};\n","export * from './constants';\nexport * from './reducer';\nexport * from './selectors';\n","import {INIT_APP} from '~/common/fabric/constants';\nimport {USER_LOGGED_IN} from '~/common/components/LoginModal/reducer';\n\nconst initialState = {\n userId: '',\n userName: '',\n subscriptionPlanName: '',\n email: '',\n emailMd5: '',\n emailSha256: '',\n avatarDisk: '',\n imgUrl: '',\n initials: '',\n firstName: '',\n is_authenticated: '',\n phoneNumber: '',\n};\n\nexport function reducer(state = initialState, action = {}) {\n switch (action.type) {\n case INIT_APP:\n const user = action.payload.user;\n const cd = window.client_data;\n if (!user) return state;\n return {\n ...state,\n userId: user.userId,\n userName: user.userName,\n subscriptionPlanName: user.subscriptionPlanName,\n email: user.email,\n emailMd5: cd.evc_h,\n emailSha256: cd.evc_s256l,\n avatarDisk: user.avatarDisk,\n imgUrl: user.imgUrl,\n initials: user.initials,\n firstName: user.firstName,\n is_authenticated: user.isAuthenticated,\n phoneNumber: window.user_phone_number,\n };\n case USER_LOGGED_IN:\n return {\n ...state,\n userId: action.userId,\n userName: action.userName,\n subscriptionPlanName: action.subscriptionPlanName,\n email: action.email,\n emailMd5: action.emailMd5,\n emailSha256: action.emailSha256,\n avatarDisk: action.avatarDisk,\n imgUrl: action.imgUrl,\n initials: action.initials,\n firstName: action.firstName,\n phoneNumber: action.user_phone_number,\n is_authenticated: true,\n };\n default:\n return state;\n }\n}\n","export const userIsLoggedIn = (state) => {\n return !!state.user.userId;\n};\n\nexport const selectUserName = (state) => {\n return state.user.userName;\n};\n\nexport const getLoggedUserId = ({user}) => user.userId;\n\nexport const selectUserEmail = (state) => {\n return state.user.email;\n};\n\nexport const selectUserSha256 = (state) => {\n return state.user.emailSha256;\n};\n\nexport const selectUserFirstName = (state) => {\n return state.user.firstName;\n};\n\nexport const selectUserPhoneNumber = (state) => {\n return state?.user?.phoneNumber || '';\n};\n","export const INIT_APP = 'CreateFabric/*/Init';\n","import {useCallback, useEffect, useState} from 'react';\n\nexport const useMatchQuery = (query, listeners = []) => {\n const windowSizeQuery = window.matchMedia(query);\n const [matches, setMatches] = useState(windowSizeQuery.matches);\n\n const handleWindowResize = useCallback((windowSizeQuery) => {\n setMatches(windowSizeQuery.matches);\n }, []);\n\n listeners.push(handleWindowResize);\n\n // support older browser versions\n windowSizeQuery.addEventListener ||= (_, action) =>\n windowSizeQuery.addListener(action);\n windowSizeQuery.removeEventListener ||= (_, action) =>\n windowSizeQuery.removeListener(action);\n\n useEffect(() => {\n listeners.forEach((listener) => {\n listener(windowSizeQuery);\n windowSizeQuery.addEventListener('change', listener);\n });\n return () =>\n listeners.forEach((listener) =>\n windowSizeQuery.removeEventListener('change', listener)\n );\n }, []);\n\n return {windowSizeQuery, matches};\n};\n","import {useRef, useEffect} from 'react';\n\nexport const usePrevious = (value) => {\n const ref = useRef();\n useEffect(() => {\n ref.current = value;\n });\n return ref.current;\n};\n","__webpack_public_path__ = process.env.ASSET_PATH;\n","import urls from 'urls';\n\nconst GCS_PATH_IDS = {\n anonymous_image: 'anonymous_image',\n event_video: 'event_video',\n event_custom_logo: 'event_custom_logo',\n video_preview_image: 'preview_image',\n user_profile_photo: 'user_profile_photo',\n event_photo_insert: 'event_photo_insert',\n event_custom_image: 'event_custom_image',\n premium_custom_stamp: 'premium_custom_stamp',\n feed_photos: 'feed_photos',\n};\n\n/*\nAPI by GCS_PATH_ID:\nanonymous_image: Anonymous Image. Used to temporarily hold a UYO/DYO image during no-login event create flow, Step 1.\nevent_custom_logo: Event custom logo image\n\tevent_id: event ID\npremium_custom_stamp: Premium Event Custom Stamp Image\n\tevent_id: event ID\nevent_photo_insert: Event photo-insert image\n\tevent_id: event ID\n\timage_id: Required. Send an EMPTY STRING for new upload, or a valid id to replace.\nevent_custom_image: Event Custom (UYO/DYO) image\n\tevent_id: event ID\nevent_video: Video invitation segment\n\tvideo_id: Video invitation ID\n\tevent_context: event context name\n\tinput_name: video input name (must match the name of an input defined by the pipeline referenced by ths video template\nevent_video_with_render: Video invitation segment, with render-video as a post-upload action\n\tvideo_id: Video invitation ID\n\tevent_context: event context name\n\tinput_name: video input name (must match the name of an input defined by the pipeline referenced by ths video template\nfeed_photos: Upload a photo related to a post in the feed for one event\n\tevent_id: event ID\n\tphoto_id: PhotoDS ID referenced within the post\nuser_profile_photo: Upload a user-profile photo\n\tuser_id: user ID\npreview_image: Preview image for one video segment\n\tvideo_id: Video invitation ID\n\tevent_context: event context name\nvideo_template_asset: Video Template Asset\n\tvideo_template_id: video template ID\n\tevent_context: event context name\n\tinput_name: video input name (must match the name of an input defined by the pipeline referenced by ths video template\n */\n\nfunction getImageKeyFromPath(gcsPath) {\n if (gcsPath) {\n // The last part of the path.\n let m = gcsPath.match(/\\w+$/);\n return m ? m[0] : null;\n }\n}\n\n/**\n * Upload an image to GCS.\n * Wraps the request and upload parts of the upload process.\n *\n * @param gcsPathId like 'event_custom_logo', 'premium_custom_stamp', etc.\n * @param params obj should match the gcsPathId (see 'API by GPS_PATH_ID')\n * @param image, must be a Blob\n * @param redirect true for automatic 'finishing' of images\n * @returns {Promise<{gcsPath: *, url: *}>}\n */\nasync function gcsUploadImage({\n gcsPathId,\n params = {},\n image,\n redirect = true,\n forceImageKey = null,\n}) {\n const body = {\n redirect,\n mimetype: image.type ? image.type : 'image/jpeg',\n };\n\n console.log('Making uploadRequest with:', {gcsPathId, params, image});\n const uploadRequest = await request_access(gcsPathId, params, body);\n console.log('Got upload uploadRequest:', uploadRequest);\n\n if (uploadRequest instanceof Error) {\n console.log('FAILED TO GET VALID uploadRequest.');\n throw uploadRequest;\n }\n await upload_file_gcs(uploadRequest, image);\n\n // const eventId = params ? params.event_id : '';\n // const imageKey = gcsPath.includes('anonymous')\n // ? getImageKeyFromPath(gcsPath)\n // : eventId;\n\n const gcsPath = uploadRequest['gcs_path'];\n const imageKey =\n gcsPathId == GCS_PATH_IDS.anonymous_image ||\n gcsPathId == GCS_PATH_IDS.event_photo_insert\n ? getImageKeyFromPath(gcsPath)\n : forceImageKey;\n\n const results = {\n url: uploadRequest['access_url'],\n gcsPath: gcsPath,\n imageKey: imageKey,\n };\n console.log('Returning gcs upload results:', results);\n return results;\n}\n\n/**\n * The first step of the upload process, returns an uploadRequest object.\n * @param gcsPathId\n * @param params obj should match the gcsPathId (see 'API by GPS_PATH_ID')\n * @param body obj containing the image and its mime type\n * @returns {Promise}\n */\nconst request_access = async (gcsPathId, params, body) => {\n // Path validation\n if (Object.values(GCS_PATH_IDS).includes(gcsPathId)) {\n const url = urls.get('ajax_upload_request', {\n upload_path: gcsPathId,\n ...params, //we add any extra needed param\n });\n\n // console.log('Upload access request: ', {url, body});\n const response = await evite.fetch(url, {\n method: 'POST',\n body: JSON.stringify(body),\n });\n if (!response.ok) {\n const {status, statusText} = response;\n return new Error(`ACCESS REQUEST FAILURE: ${status}, ${statusText}`);\n }\n const json = await response.json();\n return json;\n }\n return new Error('path does not exist');\n};\n\n/**\n * Sends the cropped canvas image to be resized and uploaded to gcs in the backend\n * @param gcsPathId like 'event_custom_logo', 'premium_custom_stamp', etc.\n * @param params obj should match the gcsPathId (see 'API by GPS_PATH_ID')\n * @param image the cropped canvas image in base64\n * @param imageType the image mimetype\n * @param width the desired width of the resized image\n * @param height the desired height of the resized image\n * @param redirect true for automatic 'finishing' of images\n * @param forceImageKey the custom image id if from an existing event, otherwise null\n * @returns {Promise}\n */\nconst resizeImageAndUploadToGcs = async ({\n gcsPathId,\n params = {},\n image,\n imageType,\n width,\n height,\n redirect = true,\n forceImageKey = null,\n}) => {\n if (!Object.values(GCS_PATH_IDS).includes(gcsPathId)) {\n return new Error('path does not exist');\n }\n const url = urls.get('ajax_resize_upload_image', {\n upload_path: gcsPathId,\n ...params, //we add any extra needed param\n });\n\n let dimensions = {width: width, height: height};\n // Fill in the form data to be sent in the ajax call\n let form_data = new FormData();\n form_data.append('image', image);\n form_data.append('dimensions', JSON.stringify(dimensions));\n form_data.append('redirect', redirect);\n form_data.append('mimetype', imageType);\n form_data.append('upload_path', gcsPathId);\n form_data.append('force_image_key', forceImageKey);\n const response = await evite.fetch(url, {\n method: 'POST',\n body: form_data,\n });\n if (!response.ok) {\n const {status, statusText} = response;\n return new Error(\n `RESIZE AND UPLOAD IMAGE FAILURE: ${status}, ${statusText}`\n );\n }\n const results = await response.json();\n return results;\n};\n\n/**\n * Upload image file with uploadRequest object.\n * @param uploadRequest\n * @param file\n * @param onProgress\n * @param customXHR\n * @returns {Promise<*>}\n */\nconst upload_file_gcs = async (uploadRequest, file, onProgress, customXHR) => {\n const data = new FormData();\n const xhr = customXHR || new XMLHttpRequest();\n const {upload_url, upload_form} = uploadRequest;\n for (const [key, value] of Object.entries(upload_form)) {\n data.append(key, value);\n }\n data.append('file', file, file.name);\n return new Promise((resolve, reject) => {\n xhr.open('POST', upload_url);\n if (onProgress && xhr.upload) {\n try {\n if (evite.detects.isIE || evite.detects.isEdge) {\n xhr.onprogress = onProgress;\n } else {\n xhr.upload.onprogress = onProgress;\n }\n } catch (e) {\n console.error(e);\n }\n }\n xhr.addEventListener('error', (e) => {\n reject(e);\n });\n xhr.addEventListener('load', (res) => {\n const {\n target: {status},\n } = res;\n if (status == 200 || status == 201 || status == 204) {\n resolve(true);\n } else {\n console.error('error uploading file, status: ', status);\n reject('error uploading file, status: ', status);\n }\n });\n xhr.send(data);\n });\n};\n\n// we normally don't use it, because we normally send redirect=true on the request_access, and this will call it for us\nconst upload_gcs_finish = async (gcs_path) => {\n const url = urls.get('ajax_upload_finish') + gcs_path;\n const response = await evite.fetch(url, {\n method: 'POST',\n });\n if (response.ok) {\n return true;\n }\n return new Error('error while calling ajax_upload_finish');\n};\n\nexport {\n GCS_PATH_IDS,\n getImageKeyFromPath,\n request_access,\n upload_file_gcs,\n upload_gcs_finish,\n gcsUploadImage,\n resizeImageAndUploadToGcs,\n};\n","import React from 'react';\nimport {charcoal} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const CardDesign = (props) => {\n const {color = charcoal, className = '', ratio = 1} = props;\n\n // default dimensions\n const width = 18;\n const height = 20;\n\n // Use ratio to calculate width and height\n const style = {height: `${ratio * height}px`, width: `${ratio * width}px`};\n\n return (\n \n \n \n );\n};\n","import React from 'react';\nimport {charcoal} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const DiagonalLines = (props) => {\n const {color = charcoal, className = '', ratio = 1} = props;\n\n // default dimensions\n const width = 24;\n const height = 24;\n\n // Use ratio to calculate width and height\n const style = {height: `${ratio * height}px`, width: `${ratio * width}px`};\n\n return (\n \n \n \n \n \n \n \n \n \n );\n};\n","import React from 'react';\nimport {roseWebText} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const Diamond = (props) => {\n const {color = roseWebText, className = '', ratio = 1, dataId} = props;\n\n // default dimensions\n const width = 14;\n const height = 14;\n\n const style = {\n height: `${ratio * height}px`,\n width: `${ratio * width}px`,\n };\n\n return (\n \n \n \n );\n};\n","import React from 'react';\nimport {roseWebText, ghost} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const DiamondFill = (props) => {\n const {\n color = roseWebText,\n bgColor = ghost,\n className = '',\n ratio = 1,\n dataId,\n } = props;\n\n // default dimensions\n const width = 64;\n const height = 64;\n\n const style = {\n height: `${ratio * height}px`,\n width: `${ratio * width}px`,\n };\n\n return (\n \n \n \n \n );\n};\n","import React from 'react';\nimport {white} from '~sass/reinvention_styleguide/base/_exports.sass';\n\nexport const EviteLogo = (props) => {\n const {color = white, ratio = 1, className} = props;\n\n // default dimensions (not sure where this size came from, but ratio .2155 makes it 119.98 x 52.66 for our footer\n const width = 85;\n const height = 32;\n\n // Use ratio to calculate width and height\n const style = {height: `${ratio * height}px`, width: `${ratio * width}px`};\n\n return (\n \n \n \n \n \n );\n};\n","import React from 'react';\nimport {charcoal} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const Mail = (props) => {\n const {color = charcoal, className = '', ratio = 1} = props;\n\n // default dimensions\n const width = 24;\n const height = 24;\n\n // Use ratio to calculate width and height\n const style = {height: `${ratio * height}px`, width: `${ratio * width}px`};\n\n return (\n \n \n \n \n \n \n \n \n \n );\n};\n","import React from 'react';\nimport {charcoal} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const PB_AlertLine = (props) => {\n const {color = charcoal, className = '', ratio = 1} = props;\n\n // default dimensions\n const width = 32;\n const height = 32;\n\n // Use ratio to calculate width and height\n const style = {height: `${ratio * height}px`, width: `${ratio * width}px`};\n\n return (\n \n \n \n );\n};\n","import React from 'react';\nimport {charcoal} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const PB_Arrow = (props) => {\n const {\n color = charcoal,\n className = '',\n ratio = 1,\n direction = 'right',\n } = props;\n\n // default dimensions\n const width = 32;\n const height = 32;\n\n const rotateFromRight = (direction) => {\n switch (direction) {\n case 'right':\n return 0;\n case 'left':\n return 180;\n case 'down':\n return 90;\n case 'up':\n return 270;\n }\n };\n\n // Use ratio to calculate width and height\n const style = {\n transform: `rotate( ${rotateFromRight(direction)}deg)`,\n height: `${ratio * height}px`,\n width: `${ratio * width}px`,\n };\n\n return (\n \n \n \n );\n};\n","import React from 'react';\nimport {charcoal} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const PB_Checkmark = (props) => {\n const {color = charcoal, className = '', ratio = 1} = props;\n\n // default dimensions\n const width = 32;\n const height = 32;\n\n // Use ratio to calculate width and height\n const style = {height: `${ratio * height}px`, width: `${ratio * width}px`};\n\n return (\n \n \n \n );\n};\n","import React from 'react';\nimport {charcoal} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const PB_Chevron = (props) => {\n const {\n color = charcoal,\n className = '',\n ratio = 1,\n direction = 'right',\n } = props;\n\n // default dimensions\n const width = 32;\n const height = 32;\n\n // Use ratio to calculate width and height\n const rotateFromRight = (direction) => {\n switch (direction) {\n case 'right':\n return 0;\n case 'left':\n return 180;\n case 'down':\n return 90;\n case 'up':\n return 270;\n }\n };\n\n // Use ratio to calculate width and height\n const style = {\n transform: `rotate( ${rotateFromRight(direction)}deg)`,\n height: `${ratio * height}px`,\n width: `${ratio * width}px`,\n };\n\n return (\n \n \n \n );\n};\n","import React from 'react';\nimport {charcoal} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const PB_CloseLine = (props) => {\n const {color = charcoal, className = '', ratio = 1} = props;\n\n // default dimensions\n const width = 32;\n const height = 32;\n\n // Use ratio to calculate width and height\n const style = {\n height: `${ratio * height}px`,\n width: `${ratio * width}px`,\n ...props.style,\n };\n\n return (\n \n \n \n );\n};\n","import React from 'react';\nimport {charcoal} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const PB_EyeDrop = (props) => {\n const {color = charcoal, className = '', ratio = 1} = props;\n\n // default dimensions\n const width = 40;\n const height = 40;\n\n // Use ratio to calculate width and height\n const style = {height: `${ratio * height}px`, width: `${ratio * width}px`};\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n","import React from 'react';\nimport {charcoal} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const PB_Font = (props) => {\n const {\n color = charcoal,\n className = '',\n ratio = 1,\n width = 12,\n height = 18,\n } = props;\n\n // Use ratio to calculate width and height\n const style = {height: `${ratio * height}px`, width: `${ratio * width}px`};\n\n return (\n \n \n \n );\n};\n","import React from 'react';\nimport {charcoal} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const PB_FontSize = (props) => {\n const {\n color = charcoal,\n className = '',\n ratio = 1,\n width = 22,\n height = 14,\n } = props;\n\n // Use ratio to calculate width and height\n const style = {height: `${ratio * height}px`, width: `${ratio * width}px`};\n\n return (\n \n \n \n \n );\n};\n","import React from 'react';\nimport {charcoal} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const PB_Info = (props) => {\n const {color = charcoal, className = '', ratio = 1} = props;\n\n // default dimensions\n const width = 14;\n const height = 14;\n\n // Use ratio to calculate width and height\n const style = {height: `${ratio * height}px`, width: `${ratio * width}px`};\n\n return (\n \n \n \n );\n};\n","import React from 'react';\nimport {charcoal} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const PB_Keyboard = (props) => {\n const {\n color = charcoal,\n className = '',\n ratio = 1,\n width = 18,\n height = 18,\n } = props;\n\n // Use ratio to calculate width and height\n const style = {height: `${ratio * height}px`, width: `${ratio * width}px`};\n\n return (\n \n \n \n \n );\n};\n","import React from 'react';\nimport {charcoal} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const PB_LeftAlign = (props) => {\n const {\n color = charcoal,\n className = '',\n ratio = 1,\n width = 32,\n height = 32,\n } = props;\n\n // Use ratio to calculate width and height\n const style = {height: `${ratio * height}px`, width: `${ratio * width}px`};\n\n return (\n \n \n \n \n \n \n );\n};\n","import React from 'react';\nimport {charcoal} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const PB_LineHeight = (props) => {\n const {\n color = charcoal,\n className = '',\n ratio = 1,\n width = 16,\n height = 16,\n } = props;\n\n // Use ratio to calculate width and height\n const style = {height: `${ratio * height}px`, width: `${ratio * width}px`};\n\n return (\n \n \n \n );\n};\n","import React from 'react';\nimport {charcoal} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const PB_MiddleAlign = (props) => {\n const {\n color = charcoal,\n className = '',\n ratio = 1,\n width = 32,\n height = 32,\n } = props;\n\n // Use ratio to calculate width and height\n const style = {height: `${ratio * height}px`, width: `${ratio * width}px`};\n\n return (\n \n \n \n \n \n \n );\n};\n","import React from 'react';\nimport {charcoal} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const PB_Minus = (props) => {\n const {color = charcoal, className = '', ratio = 1} = props;\n\n // default dimensions\n const width = 32;\n const height = 32;\n\n // Use ratio to calculate width and height\n const style = {height: `${ratio * height}px`, width: `${ratio * width}px`};\n\n return (\n \n \n \n );\n};\n","import React from 'react';\nimport {charcoal} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const PB_Plus = (props) => {\n const {color = charcoal, className = '', ratio = 1} = props;\n\n // default dimensions\n const width = 32;\n const height = 32;\n\n // Use ratio to calculate width and height\n const style = {height: `${ratio * height}px`, width: `${ratio * width}px`};\n\n return (\n \n \n \n );\n};\n","import React from 'react';\nimport {charcoal} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const PB_QuestionCircleUnfilled = (props) => {\n const {color = charcoal, ratio = 1} = props;\n\n // default dimensions\n const width = 20;\n const height = 20;\n\n // Use ratio to calculate width and height\n const style = {height: `${ratio * height}px`, width: `${ratio * width}px`};\n\n return (\n \n \n \n );\n};\n","import React from 'react';\nimport {charcoal} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const PB_RightAlign = (props) => {\n const {\n color = charcoal,\n className = '',\n ratio = 1,\n width = 32,\n height = 32,\n } = props;\n\n // Use ratio to calculate width and height\n const style = {height: `${ratio * height}px`, width: `${ratio * width}px`};\n\n return (\n \n \n \n \n \n \n );\n};\n","import React from 'react';\nimport {charcoal} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const PB_Rotation = (props) => {\n const {color = charcoal, className = '', ratio = 1} = props;\n\n // default dimensions\n const width = 41;\n const height = 40;\n\n // Use ratio to calculate width and height\n const style = {height: `${ratio * height}px`, width: `${ratio * width}px`};\n\n return (\n \n \n \n \n \n );\n};\n","import React from 'react';\nimport {fog} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const PB_SocialFb = (props) => {\n const {color = fog, ratio = 1, className} = props;\n\n // default dimensions\n const width = 32;\n const height = 32;\n\n // Use ratio to calculate width and height\n const style = {height: `${ratio * height}px`, width: `${ratio * width}px`};\n\n return (\n \n \n \n );\n};\n","import React from 'react';\nimport {fog} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const PB_SocialIg = (props) => {\n const {color = fog, ratio = 1, className} = props;\n\n // default dimensions\n const width = 32;\n const height = 32;\n\n // Use ratio to calculate width and height\n const style = {height: `${ratio * height}px`, width: `${ratio * width}px`};\n\n return (\n \n \n \n );\n};\n","import React from 'react';\nimport {fog} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const PB_SocialPin = (props) => {\n const {color = fog, ratio = 1, className} = props;\n\n // default dimensions\n const width = 32;\n const height = 32;\n\n // Use ratio to calculate width and height\n const style = {height: `${ratio * height}px`, width: `${ratio * width}px`};\n\n return (\n \n \n \n );\n};\n","import React from 'react';\nimport {fog} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const PB_SocialTwi = (props) => {\n const {color = fog, ratio = 1, className} = props;\n\n // default dimensions\n const width = 32;\n const height = 32;\n\n // Use ratio to calculate width and height\n const style = {height: `${ratio * height}px`, width: `${ratio * width}px`};\n\n return (\n \n \n \n );\n};\n","import React from 'react';\nimport {fog} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const PB_SocialYt = (props) => {\n const {color = fog, ratio = 1, className} = props;\n\n // default dimensions\n const width = 32;\n const height = 32;\n\n // Use ratio to calculate width and height\n const style = {height: `${ratio * height}px`, width: `${ratio * width}px`};\n\n return (\n \n \n \n );\n};\n","import React from 'react';\nimport {charcoal} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const PB_TextColor = (props) => {\n const {\n color = charcoal,\n className = '',\n ratio = 1,\n width = 20,\n height = 20,\n } = props;\n\n // Use ratio to calculate width and height\n const style = {height: `${ratio * height}px`, width: `${ratio * width}px`};\n\n return (\n \n \n \n \n );\n};\n","import React from 'react';\nimport {charcoal} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const PB_TextFormat = (props) => {\n const {\n color = charcoal,\n className = '',\n ratio = 1,\n width = 28.79,\n height = 11.2,\n } = props;\n\n // Use ratio to calculate width and height\n const style = {height: `${ratio * height}px`, width: `${ratio * width}px`};\n\n return (\n \n \n \n \n \n \n \n \n );\n};\n","import * as React from 'react';\nimport {charcoal} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const PB_UploadSquare = (props) => {\n const {color = charcoal, className = '', ratio = 1} = props;\n\n // default dimensions\n const width = 41;\n const height = 41;\n\n // Use ratio to calculate width and height\n const style = {height: `${ratio * height}px`, width: `${ratio * width}px`};\n\n return (\n \n \n \n \n \n );\n};\n","import React from 'react';\nimport {charcoal} from '~sass/pb_styleguide/base/_exports.sass';\n\nexport const PostStamp = (props) => {\n const {color = charcoal, className = '', ratio = 1} = props;\n\n // default dimensions\n const width = 24;\n const height = 24;\n\n // Use ratio to calculate width and height\n const style = {height: `${ratio * height}px`, width: `${ratio * width}px`};\n\n return (\n \n \n \n \n \n \n \n \n \n );\n};\n","import XDate from 'xdate';\nimport history from '../create/history';\n\nexport function pluralize(label, count) {\n label = count === 1 ? label : `${label}s`;\n return `${count} ${label}`;\n}\n\nexport function capitalizeFirstLetter(string) {\n return string.charAt(0).toUpperCase() + string.slice(1);\n}\n\nexport function insertAfter(newNode, node) {\n node.parentNode.insertBefore(newNode, node.nextSibling);\n}\n\nexport function insertBefore(newNode, node) {\n node.parentNode.insertBefore(newNode, node);\n}\n\nexport function htmlFromString(string) {\n let div = document.createElement('div');\n div.innerHTML = string;\n return div.firstChild;\n}\n\nexport function isEmpty(obj) {\n return Object.keys(obj).length === 0;\n}\n\n// open the specified url in a popup window, with optional\n// umm, options\nexport function popupWindow(url, options = null) {\n const defaultOptions = {\n width: 640,\n height: 320,\n resizable: 'yes',\n scrollbars: 'no',\n toolbar: 'no',\n dependent: 'no',\n window_name: 'DependentWindow',\n location_bar: 'no',\n status_bar: 'no',\n align: 'topcenter',\n };\n\n const opts = Object.assign({}, defaultOptions, options || {});\n let left_position = 1;\n let top_position = 1;\n\n if (opts.align === 'center') {\n left_position = screen.width ? (screen.width - opts.width) / 2 : 0;\n top_position = screen.height ? (screen.height - opts.height) / 2 : 0;\n } else if (opts.align === 'topright') {\n left_position = screen.width ? screen.width - opts.width : 0;\n top_position = 1;\n } else if (opts.align === 'topcenter') {\n left_position = screen.width ? (screen.width - opts.width) / 2 : 0;\n top_position = 1;\n }\n\n let align_value = `top=${top_position},left=${left_position}`;\n let win = eval(\n `window.open(url, '${opts.window_name}','width=${opts.width},height=${opts.height},resizable=${opts.resizable},scrollbars=` +\n opts.scrollbars +\n ',toolbar=' +\n opts.toolbar +\n ',dependent=' +\n opts.dependent +\n `,screenX=1,screenY=1,${align_value},location=${opts.location_bar},status=${opts.status_bar}')`\n );\n win.focus();\n}\n\nconst MAX_EMAIL_LENGTH = 254;\n\n/**\n * valid_email(email)\n *\n * - says whether the provided email address is valid or not, and if not,\n * why\n * - returns an Object with three attributes:\n * {\n * is_valid: ,\n * error_code: \n * error_message: \n * }\n * - possible error codes (strings):\n * - 'email_empty'\n * - 'email_invalid'\n * - 'email_too_long'\n * - callers can use those error codes to provide their own,\n * context-specific error messaging\n *\n **/\nexport function valid_email(email) {\n if (!Boolean(email)) {\n return {\n is_valid: false,\n error_code: 'email_empty',\n error_message: 'Email address is required',\n };\n }\n\n const email_invalid_message = 'The email address is invalid';\n const ret_email_invalid = {\n is_valid: false,\n error_code: 'email_invalid',\n error_message: email_invalid_message,\n };\n\n // W3C HTML5 Validation\n if (\n !/^[a-zA-Z0-9.!#$%&'*+\\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/i.test(\n email\n )\n ) {\n return ret_email_invalid;\n }\n\n // can't start with a dash\n if (/^\\-/i.test(email)) {\n return ret_email_invalid;\n }\n\n // require a tld\n if (email.split('@')[1].split('.').length < 2) {\n return ret_email_invalid;\n }\n\n if (email.length > MAX_EMAIL_LENGTH) {\n return {\n is_valid: false,\n error_code: 'email_too_long',\n error_message: `The email address is too long. Max length is ${MAX_EMAIL_LENGTH} characters.`,\n };\n }\n\n if (email.search(/\\.\\./g) != -1) {\n return {\n is_valid: false,\n error_code: 'two_consecutive_dots_not_allowed',\n error_message: `Two consecutive dots are not allowed in an email address.`,\n };\n }\n\n if (email.search(/.*\\.@/g) != -1) {\n return {\n is_valid: false,\n error_code: 'cannot_end_with_period',\n error_message: `Email address cannot end with a dot.`,\n };\n }\n\n if (\n [\n 'abuse@evite.com',\n 'postmaster@evite.com',\n 'hostmaster@evite.com',\n 'webmaster@evite.com',\n ].includes(email.toLowerCase())\n ) {\n return {\n is_valid: false,\n error_code: 'not_valid_email_for_guest',\n error_message: `Email address cannot be used`,\n };\n }\n if ((email.match(/.*@.*\\.com.com$/g) || []).length > 1) {\n return {\n is_valid: false,\n error_code: 'cannot_have_more_than_one_dot_com',\n error_message: `Email address cannot have more than one .com parts`,\n };\n }\n\n return {is_valid: true, error_code: '', error_message: ''};\n}\n\n/**\n * parse_us_phone_number(phone_number_text)\n *\n * (also works for canadian phone numbers)\n *\n * - pulls out a 10-digit number sequence (string) from the text entered,\n * if possible\n * - if an 11-digit sequence is found and the first is a 1 (old school\n * for \"long distance\"), the first digit (1) is discarded\n * - returns an Object with three attributes:\n * {\n * is_valid: ,\n * formatted: \n * digits: \n * }\n *\n * Examples:\n * - parse_us_phone_number(' 310.123-4567 ') returns:\n * {\n * \"is_valid\": true,\n * \"formatted\": \"(310) 123-4567\",\n * \"digits\": \"3101234567\"\n * }\n * - parse_us_phone_number('3456 tom ugh') returns:\n * {\n * \"is_valid\": false,\n * \"formatted\": \"\",\n * \"digits\": \"3456\"\n * }\n *\n **/\nexport function parse_us_phone_number(phone_number_text) {\n let digits = _get_digits_from(phone_number_text);\n const is_standard_length = digits.length === 10;\n const is_1_prefixed_standard_length =\n digits.length === 11 && digits.charAt(0) === '1';\n if (\n !(is_standard_length || is_1_prefixed_standard_length) ||\n phone_number_text.indexOf('@') > 0\n ) {\n return {\n is_valid: false,\n formatted: '',\n digits,\n };\n }\n if (is_1_prefixed_standard_length) {\n digits = digits.slice(1, 11); // toss the leading 1\n }\n // TODO should this also make sure a 10-digit digit sequence is a valid\n // phone number, or is that overkill?\n return {\n is_valid: true,\n formatted: _format_to_us_phone_number(digits),\n digits,\n };\n}\n\nexport function normalize_phone_number(phone_number_string) {\n // Returns the original string if it doesn't validate\n let parsed = parse_us_phone_number(phone_number_string);\n if (parsed.is_valid) return '+1' + parsed.digits;\n return phone_number_string;\n}\n\n// return just the digit characters from the given string\nexport function _get_digits_from(string_with_digits) {\n const allDigitChars = string_with_digits.match(/\\d+/g) || [];\n return allDigitChars.join('');\n}\n\nexport function pretty_format_phone_number(phone_digits_string) {\n // Returns a pretty formatted phone number, or the original if it is not a normalized phone number\n if (!phone_digits_string) return phone_digits_string;\n let digits = phone_digits_string.trim();\n if (digits[0] === '+') digits = digits.slice(1);\n if (digits[0] === '1' && digits.length === 11) digits = digits.slice(1);\n if (digits.match(/\\D/) || digits.length !== 10)\n // Not a proper phone number, so return the original string\n return phone_digits_string;\n return _format_to_us_phone_number(digits);\n}\n\n// Ex: \"3101234567\" ==> \"(310) 123-4567\"\nfunction _format_to_us_phone_number(digits) {\n return (\n '(' +\n digits.slice(0, 3) +\n ') ' +\n digits.slice(3, 6) +\n '-' +\n digits.slice(6, 10)\n );\n}\n\nexport function getURLParameter(name) {\n // mocks\n let search = window.mock_location_search || window.location.search;\n const regex = new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)');\n let matches = regex.exec(search) || [null, ''];\n let data = decodeURIComponent(matches[1].replace(/\\+/g, '%20'));\n if (data) return data;\n return null;\n}\n\n/**\n * checks if the url contains a certain string\n * @param url\n * @param str\n */\nexport function hasStringInUrl(url, str) {\n const urlArr = url.split('/');\n if (urlArr.length) {\n return urlArr.includes(str);\n }\n return false;\n}\n\n/**\n * stolen from the plugin jquery.parseParams\n *\n * @param query the url query (minus the ?)\n * @returns object of url parameters\n */\nexport function parseParams(query) {\n const re = /([^&=]+)=?([^&]*)/g;\n const decodeRE = /\\+/g; // Regex for replacing addition symbol with a space\n function decode(str) {\n return decodeURIComponent(str.replace(decodeRE, ' '));\n }\n\n let params = {},\n e;\n while ((e = re.exec(query))) {\n let k = decode(e[1]),\n v = decode(e[2]);\n if (k.substring(k.length - 2) === '[]') {\n k = k.substring(0, k.length - 2);\n }\n (params[k] || (params[k] = [])).push(v);\n }\n for (let key in params) {\n if (params[key].length === 1) {\n params[key] = params[key][0];\n }\n }\n return params;\n}\n\nexport function stringifyParams(params) {\n let paramList = [];\n for (let key in params) {\n if (params.hasOwnProperty(key)) {\n if (typeof params[key] == 'object') {\n for (let i = 0; i < params[key].length; ++i) {\n let value = encodeURIComponent(params[key][i]);\n paramList.push(`${key}=${value}`);\n }\n } else {\n let value = encodeURIComponent(params[key]);\n paramList.push(`${key}=${value}`);\n }\n }\n }\n paramList.sort();\n return Array.from(new Set(paramList).values()).join('&');\n}\n\nexport const addParamsToUrl = (url, params) => {\n // adds the given parameters (string like \"color=red&size=medium\"\n // or object like {color: \"red\", size: \"medium\"}) and adds to the\n // given url (which can have params already or not)\n const paramsType = typeof params;\n switch (paramsType) {\n case 'string':\n if (!url.includes('?')) {\n url += '?';\n }\n\n const [path, currentQuery] = url.split('?');\n let paramsToAdd = currentQuery ? currentQuery + '&' + params : params;\n url = path + '?' + stringifyParams(parseParams(paramsToAdd));\n break;\n\n case 'object':\n const keyNames = Object.keys(params);\n for (let idx in keyNames) {\n const key = keyNames[idx];\n const val = params[key] || '';\n url = addParamsToUrl(url, `${key}=${val}`);\n }\n break;\n\n default:\n throw \"Unsupported data type! addParamsToUrl() only supports strings and objects for the 'params' argument.\";\n }\n return url;\n};\n\nexport function isFunction(value) {\n return typeof value === 'function' || value instanceof Function;\n}\n\n/**\n * server side expects offset timezones in formats like -0700\n *\n * * the sign must always be present\n * * server does not expect a : to separate minutes and hours\n *\n * @param date\n * @returns {string}\n */\nexport function formatTimezoneOffset(date = null) {\n date = date || new Date();\n\n // I had code to do this, but it seems with the native date object very difficult\n // to figure out the offset reliably given that getTimezoneOffset returns the local\n // offset no matter what\n date = new XDate(date);\n\n let result = date.toString('zzz');\n if (result === 'Z') {\n result = '+0000';\n }\n return result.replace(':', '');\n}\n\nexport function isJson(str) {\n try {\n JSON.parse(str);\n } catch (e) {\n return false;\n }\n return true;\n}\n\nexport function isStringEmptyOrAllWhitespace(inputString) {\n return !/\\S/.test(inputString);\n}\n\nexport function numberWithCommas(x) {\n return x.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\n}\n\nexport function areEqual(array, otherArray) {\n const s = new Set(array);\n return (\n otherArray.length === array.length && otherArray.every((e) => s.has(e))\n );\n}\n\nexport function isValidURL(url_string) {\n return /^(?:(?:(?:https?|ftp):)?\\/\\/)(?:\\S+(?::\\S*)?@)?(?:(?!(?:10|127)(?:\\.\\d{1,3}){3})(?!(?:169\\.254|192\\.168)(?:\\.\\d{1,3}){2})(?!172\\.(?:1[6-9]|2\\d|3[0-1])(?:\\.\\d{1,3}){2})(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[1-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]-*)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]-*)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))(?::\\d{2,5})?(?:[/?#]\\S*)?$/i.test(\n url_string\n );\n}\n\nfunction pad(value) {\n return value < 10 ? '0' + value : value;\n}\n\nfunction createUtcOffsetFromDate(date) {\n var sign = date.getTimezoneOffset() > 0 ? '-' : '+';\n var offset = Math.abs(date.getTimezoneOffset());\n var hours = pad(Math.floor(offset / 60));\n var minutes = pad(offset % 60);\n return sign + hours + ':' + minutes;\n}\n\nexport function getTimezone() {\n const TIMEZONES = window.TIMEZONES;\n const localUtcOffset = createUtcOffsetFromDate(new Date());\n let timezoneId;\n let timezoneAbbr;\n\n for (let i = 0; i < TIMEZONES.length; i++) {\n const utc_offset = TIMEZONES[i].utc_offset;\n\n if (localUtcOffset === utc_offset) {\n timezoneId = TIMEZONES[i].timezone_id;\n timezoneAbbr = TIMEZONES[i].timezone_abbr;\n return {timezoneId, timezoneAbbr};\n }\n }\n}\n\nexport const hasRegistry = (registriesData) => {\n return !!(\n window.has_gift_registries ||\n (registriesData?.registry_urls?.length &&\n registriesData?.registry_name?.length)\n );\n};\n\nexport function registryUrl(registry, qa_id) {\n // EVT-25885 some data has been corrupted when registry toggled off then on; it was saved only with a name.\n // Prevents guests from seeing blank RSVP success page.\n if (!registry) return null;\n\n const {url} = registry;\n\n // If amazon & asc_campaign then add qa-id if possible\n if (\n !qa_id ||\n qa_id.length == 0 ||\n url.indexOf('amazon') == -1 ||\n url.indexOf('asc_source=') == -1\n )\n return url;\n\n // Note that this assumes the last http get argument is asc_source and appends to it\n return url + '%7C' + qa_id;\n}\n\nexport function changePage(newPage) {\n // Change the current url\n history.push(newPage);\n\n // Tell Google Analytics about being on a new page\n dataLayer.push({event: 'pageview', page_title: 'drryl', page_path: newPage});\n}\n\nexport function virtualPageview(newPage, pageTitle) {\n dataLayer.push({\n event: 'pageview',\n page_title: pageTitle,\n page_path: newPage,\n });\n}\n\n/**\n * This function recursively deletes a property from an object, no matter how deeply it's nested.\n *\n * @param {Object} obj - The object from which to delete the property.\n * @param {string} propertyName - The name of the property to delete.\n */\nexport function removeNestedProperty(obj, propertyName) {\n for (let prop in obj) {\n if (prop === propertyName) {\n delete obj[prop];\n } else if (typeof obj[prop] === 'object') {\n removeNestedProperty(obj[prop], propertyName);\n }\n }\n}\n","import * as c from '../constants/event-origins';\n\n// This file intended to hold all event util functions shared across various apps\n\nexport const getUsedAsTypeName = (used_as) => {\n // Logic should match the corresponding backend function, _get_used_as_type_name\n\n if (used_as === 'save_the_date') {\n return 'Save the Date';\n } else if (used_as === 'card') {\n return 'Card';\n } else return 'Invitation';\n};\n\n// ORIGIN-BASED HELPERS\nexport const isGreetingCard = (origin) => {\n return c.CARD_ORIGINS.includes(origin);\n};\n\nexport const isLegacyGreetingCard = (origin) => {\n return c.LEGACY_GRC_ORIGINS.includes(origin);\n};\n\nexport const isFabricGreetingCard = (origin) => {\n return c.FABRIC_GRC_ORIGINS.includes(origin);\n};\n\nexport const isFabric = (origin) => {\n return c.FABRIC_EVENT_ORIGINS.includes(origin);\n};\n\nexport const isLegacyPremium = (origin) => {\n return c.LEGACY_PREMIUM_ORIGINS.includes(origin);\n};\n\n// EVENT STATUS HELPERS\nexport const isPast = (status) => {\n return status === 'past';\n};\n\nexport const isDraft = (status) => {\n return status === 'draft';\n};\n\nexport const isCanceled = (status) => {\n return status === 'cancelled';\n};\n\n// GUEST vs HOST, GID vs UID HELPERS\n","import {createBrowserHistory} from 'history';\n\nconst history = createBrowserHistory();\nexport default history;\n","import XDate from 'xdate';\n\nexport const cityAddressLine = (event) => {\n let line = '';\n\n if (event.city) line += `${event.city}, `;\n\n if (event.state) line += event.state;\n\n if (event.zip_code) line += ` ${event.zip_code}`;\n\n return line;\n};\n\nexport const cityZip = (event) => {\n let cityZip = '';\n if (event.city) {\n cityZip += event.city;\n if (event.state || event.zip_code) cityZip += ', ';\n }\n if (event.state) {\n cityZip += event.state;\n if (event.zip_code) cityZip += ' ';\n }\n if (event.zip_code) cityZip += ' ' + event.zip_code;\n return cityZip;\n};\n\n// convert to a valid ISO string format from a date string\n// that is formatted like \"20171114T193000\"\nexport const convertToIso = (dateTimeStr) => {\n const isAlreadyFormatted =\n !dateTimeStr || (dateTimeStr && dateTimeStr.split('-').length > 2);\n if (isAlreadyFormatted) return dateTimeStr;\n\n const eviteDatePattern = /(\\d{4})(\\d{2})(\\d{2})T(\\d{2})(\\d{2})(\\d{2})/;\n return dateTimeStr.replace(\n eviteDatePattern,\n (match, year, month, date, hour, min, sec) => {\n return `${year}-${month}-${date}T${hour}:${min}:${sec}`;\n }\n );\n};\n\nexport const templateDates = (\n _startDateTime,\n _endDateTime,\n timezone,\n dateFormat,\n timeFormat\n) => {\n let startDateTime = new XDate(_startDateTime || '');\n let endDateTime = new XDate(_endDateTime || '');\n const dateFormatStr = dateFormat || 'dddd, MMMM d ';\n const timeFormatStr = timeFormat || 'h:mm TT';\n\n const isValidStart = startDateTime.toString('i') !== 'Invalid Date';\n const isValidEnd = endDateTime.toString('i') !== 'Invalid Date';\n\n let startDateStr;\n let startTimeStr = '';\n let datesLineOne = '';\n if (isValidStart) {\n startDateStr = startDateTime.toString(dateFormatStr);\n if (_startDateTime.length >= 16)\n startTimeStr = startDateTime.toString(timeFormatStr);\n datesLineOne = `${startDateStr} at ${startTimeStr} ${\n !isValidEnd ? ' ' + timezone : ''\n }`;\n }\n\n let datesLineTwo = '';\n if (isValidEnd) {\n datesLineOne = datesLineOne.replace(' at', ' from');\n\n const endDateStr = endDateTime.toString(dateFormatStr);\n const endTimeStr =\n _endDateTime.length >= 16 ? endDateTime.toString(timeFormatStr) : '';\n\n if (isValidStart && startDateStr === endDateStr) {\n datesLineTwo = ' to ' + endTimeStr + ' ' + timezone;\n } else {\n datesLineTwo = ' to ' + endDateStr + ' at ' + endTimeStr + ' ' + timezone;\n }\n }\n // Monday, May 10 from 6:00 PM to 10:00 PM PT\n // Monday, May 10 from 10:00 PM to Tuesday, May 11 at 2:00 AM PT\n return {start_formatted: datesLineOne, end_formatted: datesLineTwo};\n};\n\nexport const inviteStatus = () => {\n // Use 'Sent' for cards, and 'Invited' for invitations\n if (window.is_invite === false) return 'Sent';\n return 'Invited';\n};\n\nexport const guestTitle = () => {\n // Use 'Recipient' for cards, and 'Guest' for invitations\n if (window.is_invite === false) return 'Recipient';\n return 'Guest';\n};\n\nexport function formatCents(cents) {\n let neg = '';\n if (cents < 0) {\n neg = '-';\n cents *= -1;\n }\n cents = (cents < 10 ? '0' : '') + cents;\n return `${neg}$${cents.substring(0, cents.length - 2)}.${cents.substring(\n cents.length - 2\n )}`;\n}\n\n/*\n Display the year only if it is not the current year,\n and end date only if its a different day.\n*/\nexport function dateTimesWithCurrentYear(event) {\n if (!event.start_datetime) return {start_formatted: '', end_formatted: ''};\n\n try {\n const currentYear = new Date().getFullYear();\n const startYear = Number.parseInt(event.start_datetime.substring(0, 4), 10);\n const dateFormat =\n currentYear === startYear ? 'dddd, MMMM d' : 'dddd, MMMM d, yyyy';\n const timezone = event.known_timezone_abbr;\n\n let {start_formatted, end_formatted} = templateDates(\n convertToIso(event.start_datetime),\n convertToIso(event.end_datetime),\n timezone,\n dateFormat\n );\n return {start_formatted, end_formatted};\n } catch (e) {\n evite.warn('Failed to parse date: ' + e);\n }\n}\n","import React from 'react';\nimport {shallowEqual, useSelector} from 'react-redux';\n\nexport const BlockThisHost = () => {\n const isMobile = evite.detects.isMobile;\n const eventId = window.event_id || '';\n\n const {isHost, guestId} = useSelector(({user: s}) => {\n return {isHost: s.isHost, guestId: s.guestId};\n }, shallowEqual);\n\n if (!guestId || isHost) return null;\n\n const hostUserId = useSelector((state) => {\n return state.eventDetails?.hostUserId ?? null;\n });\n\n const url = `/profile/block_host/?host_user_id=${hostUserId}&event_id=${eventId}&gid=${guestId}`;\n\n return (\n \n Don't want to receive Evite communication from this person?{' '}\n Block this host\n \n );\n};\n","import React from 'react';\nimport urls from 'urls';\nimport {SocialButtons} from '~/footer/SocialButtons';\nimport {MobileApps} from '~/footer/MobileApps';\nimport {LegalCopy} from '~/footer/LegalCopy';\nimport {BlockThisHost} from '~/footer/BlockThisHost';\nimport {NewsletterSignup} from '~/footer/NewsletterSignup';\nimport * as utils from '~/ViewInvitation/utils';\n\nexport const Footer = () => {\n const preview = utils.isPreview();\n const cmsUrl = urls.get('content_pages');\n\n return (\n
\n );\n};\n","import React from 'react';\nimport urls from 'urls';\n\nexport const LegalCopy = () => {\n const currentYear = new Date().getFullYear();\n return (\n <>\n
\n Evite® and Life's Better Together™ are trademarks\n of Evite, Inc. in the United States and other countries. The Evite logo\n and all other Evite-related trademarks are trademarks of Evite, Inc.\n Please use this mark only to refer to our services.\n
`;\n\n if (!this.settings.parse) {\n container.querySelector('.wrapper').appendChild(this.settings.body);\n }\n\n let self = this;\n function respondToPopup(e) {\n self.close();\n let name = e.currentTarget.innerText\n .split(' ')\n .join('')\n .replace(/[^\\w\\s]/gi, ''); // remove spaces and special characters\n let on_response = self.settings[`on${name}`];\n if (on_response) {\n on_response(name, e);\n } else if (self.settings.onResponse) {\n self.settings.onResponse.apply(self, [e, self, name]);\n }\n }\n const buttonsEl = container.querySelectorAll('.modal-footer button')\n .length\n ? container.querySelectorAll('.modal-footer button')\n : container.querySelectorAll('.modal-footer a');\n for (let key of Object.keys(this.settings.buttons)) {\n buttonsEl[key].addEventListener('click', respondToPopup);\n }\n resolve(true);\n });\n }\n\n parseDependencies = () => {\n let scripts = Array.from(this.modalHead.querySelectorAll('script'));\n let links = Array.from(this.modalHead.querySelectorAll('link'));\n let styles = links.filter((link) => link.type === 'text/css');\n styles.forEach((style) => {\n style.className = 'eviteModalStyle';\n document.head.appendChild(style);\n });\n\n scripts.forEach((script) => {\n let scriptTag;\n let src = script.getAttribute('src');\n if (src) {\n scriptTag = buildScriptTag({\n src: src,\n type: 'text/javascript',\n async: true,\n className: 'eviteModalScript',\n onLoad: () => false,\n });\n } else {\n scriptTag = buildScriptTag({\n type: 'text/javascript',\n innerHTML: script.innerHTML,\n className: 'eviteModalScript',\n onLoad: () => false,\n });\n }\n document.head.appendChild(scriptTag);\n });\n\n return this;\n };\n\n buildRemote() {\n return new Promise((resolve, reject) => {\n this.fetchContent()\n .then((text) => this.parseContent(text))\n .then((page) => this.injectContent(page))\n .then(this.parseDependencies)\n .then(resolve)\n .catch((msg) => reject(msg));\n });\n }\n\n buildFromResponse = (serverResponse) => {\n const page = this.parseContent(serverResponse);\n this.injectContent(page);\n this.parseDependencies();\n };\n\n close = () => {\n return new Promise((resolve, reject) => {\n if (this.open) {\n this.modal.close().then(() => {\n this.open = false;\n const modalDom = document.getElementById(`eviteModal-${this.id}`);\n const styles = document.querySelectorAll('.eviteModalStyle');\n const scripts = document.querySelectorAll('.eviteModalScript');\n Array.from(styles).forEach((el) => el.parentNode.removeChild(el));\n Array.from(scripts).forEach((el) => el.parentNode.removeChild(el));\n if (modalDom) modalDom.parentNode.removeChild(modalDom);\n resolve();\n });\n }\n });\n };\n\n respond = (options, settings, event) => {\n this.modal.respond(options, settings, event);\n };\n\n show(htmlResponse) {\n document.querySelector('body').appendChild(this.target);\n this.modal.initialize(this);\n if (htmlResponse && !this.settings.popup) {\n this.buildFromResponse(htmlResponse);\n this.modal.open(`#eviteModal-${this.id}`);\n this.open = true;\n return;\n }\n if (this.settings.popup) {\n this.buildPopup().then(() => {\n this.modal.open(`#eviteModal-${this.id}`);\n this.open = true;\n if (this.settings.overwrites && this.settings.overwrites.length) {\n this.overwrites();\n }\n });\n } else {\n this.buildRemote().then(() => {\n this.modal.open(`#eviteModal-${this.id}`);\n this.open = true;\n if (this.settings.overwrites && this.settings.overwrites.length) {\n this.overwrites();\n }\n });\n }\n }\n}\n\nexport default EviteModal;\n","import EviteModal from './evite_modal';\nimport CaptchaDialog from './captcha_modal';\nimport PopupModal from './popup_modal';\nimport ModalWarning from './warning_modal';\nimport ModalAjaxError from './ajax_error_modal';\nimport LoadingModal from './loading_modal';\nimport SendMessageModal from './send_message_modal';\nimport ModalDialog from './dialog_modal';\nimport AuthModal from './auth_modal';\n\nexport {\n EviteModal,\n AuthModal,\n CaptchaDialog,\n PopupModal,\n ModalWarning,\n ModalAjaxError,\n LoadingModal,\n ModalDialog,\n SendMessageModal,\n};\n","import {htmlFromString} from '../common/utils';\nimport ModalBase from './base';\n\nclass LoadingModal {\n loadingModalDefaults = {\n message: 'Loading...',\n allowClose: false,\n clickOutside: false,\n width:\n Math.min(\n window.screen.width - Math.ceil(window.screen.width * 0.05),\n 420\n ) + 'px',\n };\n open = false;\n\n constructor(settings = {}) {\n if (typeof settings === 'string') {\n settings = {message: settings};\n }\n this.settings = {\n ...this.loadingModalDefaults,\n ...settings,\n };\n const contents = htmlFromString(\n `
${this.settings.message}
`\n );\n contents.querySelector('.loadingContainer').style.cssText = `\n background: white;\n width: ${this.settings.width};\n height: 233px;\n border: 1px solid #A8A8A8;\n border-radius: 6px;\n overflow: hidden;`;\n\n this.target = contents;\n return this;\n }\n\n close = () => {\n if (this.open) {\n this.open = false;\n const modalDom = document.getElementById('loadingModal');\n if (modalDom) {\n // Use this instead of remove for ie11 support\n modalDom.parentNode.removeChild(modalDom);\n }\n }\n return ModalBase.getInstance().close();\n };\n\n show = (message) => {\n return new Promise((resolve, reject) => {\n document.querySelector('body').appendChild(this.target);\n let modal = ModalBase.getInstance();\n modal.initialize(this);\n this.setMessage(message);\n modal.open(`#loadingModal`);\n this.open = true;\n resolve();\n });\n };\n\n setMessage = (message) => {\n if (message && this.target.querySelector('.loader')) {\n this.target.querySelector('.loader').innerHTML = message;\n }\n };\n}\n\nexport default LoadingModal;\n","import EviteModal from './evite_modal';\n\nexport class PopupModal {\n settings = {\n buttons: ['Cancel', 'Yes'],\n buttonMarkup: '',\n html: false,\n title: null,\n body: '',\n width: '520px',\n popup: true,\n };\n\n constructor(settings) {\n return new EviteModal(Object.assign({}, this.settings, settings));\n }\n}\n\nexport default PopupModal;\n","import EviteModal from './evite_modal';\nimport urls from 'urls';\n\nclass SendMessageModal {\n settings = {\n clickOutside: false,\n allowClose: false,\n width: '800px',\n title: 'Send a Message',\n cancel: 'Cancel',\n subject: 'Message about {subject}',\n className: 'send-message-modal',\n dataQaId: 'send-message-modal',\n message: '',\n guests: [],\n };\n\n constructor(settings) {\n this.settings = {\n ...this.settings,\n ...settings,\n };\n this.settings.url_parameters = {\n subject: this.settings.subject,\n message: this.settings.message,\n title: this.settings.title,\n cancel: this.settings.cancel,\n template: this.settings.template,\n };\n this.settings.url = urls.get('send_message_modal', {\n event_id: settings.event_id || window.event_id,\n });\n return new EviteModal(this.settings);\n }\n}\n\nexport default SendMessageModal;\n","import {EviteModal} from './index';\nimport urls from 'urls';\n\nclass ModalWarning {\n settings = {\n url: urls.get('modal_warning'),\n buttons: ['Okay'],\n title: null,\n html: false,\n width: '480px',\n dialog: {},\n url_parameters: {},\n };\n\n constructor(settings) {\n this.settings = Object.assign({}, this.settings, settings);\n this.settings.url_parameters.dialog = {\n body: settings.body || '',\n title: settings.title || this.settings.title,\n buttons: settings.buttons || this.settings.buttons,\n html: settings.html || this.settings.html,\n };\n\n return new EviteModal(this.settings);\n }\n}\n\nexport default ModalWarning;\n","/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\tvar nativeCodeString = '[native code]';\n\n\tfunction classNames() {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tif (arg.length) {\n\t\t\t\t\tvar inner = classNames.apply(null, arg);\n\t\t\t\t\tif (inner) {\n\t\t\t\t\t\tclasses.push(inner);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\t\t\tclasses.push(arg.toString());\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e))for(t=0;t body.scrollHeight\n d.documentElement[\"scroll\".concat(name)],\n // quirks : documentElement.scrollHeight 最大等于可视窗口多一点？\n d.body[\"scroll\".concat(name)], domUtils[\"viewport\".concat(name)](d));\n };\n domUtils[\"viewport\".concat(name)] = function (win) {\n // pc browser includes scrollbar in window.innerWidth\n var prop = \"client\".concat(name);\n var doc = win.document;\n var body = doc.body;\n var documentElement = doc.documentElement;\n var documentElementProp = documentElement[prop];\n // 标准模式取 documentElement\n // backcompat 取 body\n return doc.compatMode === 'CSS1Compat' && documentElementProp || body && body[prop] || documentElementProp;\n };\n});\n\n/*\n 得到元素的大小信息\n @param elem\n @param name\n @param {String} [extra] 'padding' : (css width) + padding\n 'border' : (css width) + padding + border\n 'margin' : (css width) + padding + border + margin\n */\nfunction getWH(elem, name, ex) {\n var extra = ex;\n if (isWindow(elem)) {\n return name === 'width' ? domUtils.viewportWidth(elem) : domUtils.viewportHeight(elem);\n } else if (elem.nodeType === 9) {\n return name === 'width' ? domUtils.docWidth(elem) : domUtils.docHeight(elem);\n }\n var which = name === 'width' ? ['Left', 'Right'] : ['Top', 'Bottom'];\n var borderBoxValue = name === 'width' ? Math.floor(elem.getBoundingClientRect().width) : Math.floor(elem.getBoundingClientRect().height);\n var isBorderBox = isBorderBoxFn(elem);\n var cssBoxValue = 0;\n if (borderBoxValue === null || borderBoxValue === undefined || borderBoxValue <= 0) {\n borderBoxValue = undefined;\n // Fall back to computed then un computed css if necessary\n cssBoxValue = getComputedStyleX(elem, name);\n if (cssBoxValue === null || cssBoxValue === undefined || Number(cssBoxValue) < 0) {\n cssBoxValue = elem.style[name] || 0;\n }\n // Normalize '', auto, and prepare for extra\n cssBoxValue = Math.floor(parseFloat(cssBoxValue)) || 0;\n }\n if (extra === undefined) {\n extra = isBorderBox ? BORDER_INDEX : CONTENT_INDEX;\n }\n var borderBoxValueOrIsBorderBox = borderBoxValue !== undefined || isBorderBox;\n var val = borderBoxValue || cssBoxValue;\n if (extra === CONTENT_INDEX) {\n if (borderBoxValueOrIsBorderBox) {\n return val - getPBMWidth(elem, ['border', 'padding'], which);\n }\n return cssBoxValue;\n } else if (borderBoxValueOrIsBorderBox) {\n if (extra === BORDER_INDEX) {\n return val;\n }\n return val + (extra === PADDING_INDEX ? -getPBMWidth(elem, ['border'], which) : getPBMWidth(elem, ['margin'], which));\n }\n return cssBoxValue + getPBMWidth(elem, BOX_MODELS.slice(extra), which);\n}\nvar cssShow = {\n position: 'absolute',\n visibility: 'hidden',\n display: 'block'\n};\n\n// fix #119 : https://github.com/kissyteam/kissy/issues/119\nfunction getWHIgnoreDisplay() {\n for (var _len = arguments.length, args = new Array(_len), _key2 = 0; _key2 < _len; _key2++) {\n args[_key2] = arguments[_key2];\n }\n var val;\n var elem = args[0];\n // in case elem is window\n // elem.offsetWidth === undefined\n if (elem.offsetWidth !== 0) {\n val = getWH.apply(undefined, args);\n } else {\n swap(elem, cssShow, function () {\n val = getWH.apply(undefined, args);\n });\n }\n return val;\n}\neach(['width', 'height'], function (name) {\n var first = name.charAt(0).toUpperCase() + name.slice(1);\n domUtils[\"outer\".concat(first)] = function (el, includeMargin) {\n return el && getWHIgnoreDisplay(el, name, includeMargin ? MARGIN_INDEX : BORDER_INDEX);\n };\n var which = name === 'width' ? ['Left', 'Right'] : ['Top', 'Bottom'];\n domUtils[name] = function (elem, v) {\n var val = v;\n if (val !== undefined) {\n if (elem) {\n var isBorderBox = isBorderBoxFn(elem);\n if (isBorderBox) {\n val += getPBMWidth(elem, ['padding', 'border'], which);\n }\n return css(elem, name, val);\n }\n return undefined;\n }\n return elem && getWHIgnoreDisplay(elem, name, CONTENT_INDEX);\n };\n});\nfunction mix(to, from) {\n for (var i in from) {\n if (from.hasOwnProperty(i)) {\n to[i] = from[i];\n }\n }\n return to;\n}\nvar utils = {\n getWindow: function getWindow(node) {\n if (node && node.document && node.setTimeout) {\n return node;\n }\n var doc = node.ownerDocument || node;\n return doc.defaultView || doc.parentWindow;\n },\n getDocument: getDocument,\n offset: function offset(el, value, option) {\n if (typeof value !== 'undefined') {\n setOffset(el, value, option || {});\n } else {\n return getOffset(el);\n }\n },\n isWindow: isWindow,\n each: each,\n css: css,\n clone: function clone(obj) {\n var i;\n var ret = {};\n for (i in obj) {\n if (obj.hasOwnProperty(i)) {\n ret[i] = obj[i];\n }\n }\n var overflow = obj.overflow;\n if (overflow) {\n for (i in obj) {\n if (obj.hasOwnProperty(i)) {\n ret.overflow[i] = obj.overflow[i];\n }\n }\n }\n return ret;\n },\n mix: mix,\n getWindowScrollLeft: function getWindowScrollLeft(w) {\n return getScrollLeft(w);\n },\n getWindowScrollTop: function getWindowScrollTop(w) {\n return getScrollTop(w);\n },\n merge: function merge() {\n var ret = {};\n for (var i = 0; i < arguments.length; i++) {\n utils.mix(ret, i < 0 || arguments.length <= i ? undefined : arguments[i]);\n }\n return ret;\n },\n viewportWidth: 0,\n viewportHeight: 0\n};\nmix(utils, domUtils);\n\n/**\n * 得到会导致元素显示不全的祖先元素\n */\nvar getParent = utils.getParent;\nfunction getOffsetParent(element) {\n if (utils.isWindow(element) || element.nodeType === 9) {\n return null;\n }\n // ie 这个也不是完全可行\n /*\n
\n
\n 元素 6 高 100px 宽 50px \n
\n
\n */\n // element.offsetParent does the right thing in ie7 and below. Return parent with layout!\n // In other browsers it only includes elements with position absolute, relative or\n // fixed, not elements with overflow set to auto or scroll.\n // if (UA.ie && ieMode < 8) {\n // return element.offsetParent;\n // }\n // 统一的 offsetParent 方法\n var doc = utils.getDocument(element);\n var body = doc.body;\n var parent;\n var positionStyle = utils.css(element, 'position');\n var skipStatic = positionStyle === 'fixed' || positionStyle === 'absolute';\n if (!skipStatic) {\n return element.nodeName.toLowerCase() === 'html' ? null : getParent(element);\n }\n for (parent = getParent(element); parent && parent !== body && parent.nodeType !== 9; parent = getParent(parent)) {\n positionStyle = utils.css(parent, 'position');\n if (positionStyle !== 'static') {\n return parent;\n }\n }\n return null;\n}\n\nvar getParent$1 = utils.getParent;\nfunction isAncestorFixed(element) {\n if (utils.isWindow(element) || element.nodeType === 9) {\n return false;\n }\n var doc = utils.getDocument(element);\n var body = doc.body;\n var parent = null;\n for (parent = getParent$1(element);\n // 修复元素位于 document.documentElement 下导致崩溃问题\n parent && parent !== body && parent !== doc; parent = getParent$1(parent)) {\n var positionStyle = utils.css(parent, 'position');\n if (positionStyle === 'fixed') {\n return true;\n }\n }\n return false;\n}\n\n/**\n * 获得元素的显示部分的区域\n */\nfunction getVisibleRectForElement(element, alwaysByViewport) {\n var visibleRect = {\n left: 0,\n right: Infinity,\n top: 0,\n bottom: Infinity\n };\n var el = getOffsetParent(element);\n var doc = utils.getDocument(element);\n var win = doc.defaultView || doc.parentWindow;\n var body = doc.body;\n var documentElement = doc.documentElement;\n\n // Determine the size of the visible rect by climbing the dom accounting for\n // all scrollable containers.\n while (el) {\n // clientWidth is zero for inline block elements in ie.\n if ((navigator.userAgent.indexOf('MSIE') === -1 || el.clientWidth !== 0) &&\n // body may have overflow set on it, yet we still get the entire\n // viewport. In some browsers, el.offsetParent may be\n // document.documentElement, so check for that too.\n el !== body && el !== documentElement && utils.css(el, 'overflow') !== 'visible') {\n var pos = utils.offset(el);\n // add border\n pos.left += el.clientLeft;\n pos.top += el.clientTop;\n visibleRect.top = Math.max(visibleRect.top, pos.top);\n visibleRect.right = Math.min(visibleRect.right,\n // consider area without scrollBar\n pos.left + el.clientWidth);\n visibleRect.bottom = Math.min(visibleRect.bottom, pos.top + el.clientHeight);\n visibleRect.left = Math.max(visibleRect.left, pos.left);\n } else if (el === body || el === documentElement) {\n break;\n }\n el = getOffsetParent(el);\n }\n\n // Set element position to fixed\n // make sure absolute element itself don't affect it's visible area\n // https://github.com/ant-design/ant-design/issues/7601\n var originalPosition = null;\n if (!utils.isWindow(element) && element.nodeType !== 9) {\n originalPosition = element.style.position;\n var position = utils.css(element, 'position');\n if (position === 'absolute') {\n element.style.position = 'fixed';\n }\n }\n var scrollX = utils.getWindowScrollLeft(win);\n var scrollY = utils.getWindowScrollTop(win);\n var viewportWidth = utils.viewportWidth(win);\n var viewportHeight = utils.viewportHeight(win);\n var documentWidth = documentElement.scrollWidth;\n var documentHeight = documentElement.scrollHeight;\n\n // scrollXXX on html is sync with body which means overflow: hidden on body gets wrong scrollXXX.\n // We should cut this ourself.\n var bodyStyle = window.getComputedStyle(body);\n if (bodyStyle.overflowX === 'hidden') {\n documentWidth = win.innerWidth;\n }\n if (bodyStyle.overflowY === 'hidden') {\n documentHeight = win.innerHeight;\n }\n\n // Reset element position after calculate the visible area\n if (element.style) {\n element.style.position = originalPosition;\n }\n if (alwaysByViewport || isAncestorFixed(element)) {\n // Clip by viewport's size.\n visibleRect.left = Math.max(visibleRect.left, scrollX);\n visibleRect.top = Math.max(visibleRect.top, scrollY);\n visibleRect.right = Math.min(visibleRect.right, scrollX + viewportWidth);\n visibleRect.bottom = Math.min(visibleRect.bottom, scrollY + viewportHeight);\n } else {\n // Clip by document's size.\n var maxVisibleWidth = Math.max(documentWidth, scrollX + viewportWidth);\n visibleRect.right = Math.min(visibleRect.right, maxVisibleWidth);\n var maxVisibleHeight = Math.max(documentHeight, scrollY + viewportHeight);\n visibleRect.bottom = Math.min(visibleRect.bottom, maxVisibleHeight);\n }\n return visibleRect.top >= 0 && visibleRect.left >= 0 && visibleRect.bottom > visibleRect.top && visibleRect.right > visibleRect.left ? visibleRect : null;\n}\n\nfunction adjustForViewport(elFuturePos, elRegion, visibleRect, overflow) {\n var pos = utils.clone(elFuturePos);\n var size = {\n width: elRegion.width,\n height: elRegion.height\n };\n if (overflow.adjustX && pos.left < visibleRect.left) {\n pos.left = visibleRect.left;\n }\n\n // Left edge inside and right edge outside viewport, try to resize it.\n if (overflow.resizeWidth && pos.left >= visibleRect.left && pos.left + size.width > visibleRect.right) {\n size.width -= pos.left + size.width - visibleRect.right;\n }\n\n // Right edge outside viewport, try to move it.\n if (overflow.adjustX && pos.left + size.width > visibleRect.right) {\n // 保证左边界和可视区域左边界对齐\n pos.left = Math.max(visibleRect.right - size.width, visibleRect.left);\n }\n\n // Top edge outside viewport, try to move it.\n if (overflow.adjustY && pos.top < visibleRect.top) {\n pos.top = visibleRect.top;\n }\n\n // Top edge inside and bottom edge outside viewport, try to resize it.\n if (overflow.resizeHeight && pos.top >= visibleRect.top && pos.top + size.height > visibleRect.bottom) {\n size.height -= pos.top + size.height - visibleRect.bottom;\n }\n\n // Bottom edge outside viewport, try to move it.\n if (overflow.adjustY && pos.top + size.height > visibleRect.bottom) {\n // 保证上边界和可视区域上边界对齐\n pos.top = Math.max(visibleRect.bottom - size.height, visibleRect.top);\n }\n return utils.mix(pos, size);\n}\n\nfunction getRegion(node) {\n var offset;\n var w;\n var h;\n if (!utils.isWindow(node) && node.nodeType !== 9) {\n offset = utils.offset(node);\n w = utils.outerWidth(node);\n h = utils.outerHeight(node);\n } else {\n var win = utils.getWindow(node);\n offset = {\n left: utils.getWindowScrollLeft(win),\n top: utils.getWindowScrollTop(win)\n };\n w = utils.viewportWidth(win);\n h = utils.viewportHeight(win);\n }\n offset.width = w;\n offset.height = h;\n return offset;\n}\n\n/**\n * 获取 node 上的 align 对齐点 相对于页面的坐标\n */\n\nfunction getAlignOffset(region, align) {\n var V = align.charAt(0);\n var H = align.charAt(1);\n var w = region.width;\n var h = region.height;\n var x = region.left;\n var y = region.top;\n if (V === 'c') {\n y += h / 2;\n } else if (V === 'b') {\n y += h;\n }\n if (H === 'c') {\n x += w / 2;\n } else if (H === 'r') {\n x += w;\n }\n return {\n left: x,\n top: y\n };\n}\n\nfunction getElFuturePos(elRegion, refNodeRegion, points, offset, targetOffset) {\n var p1 = getAlignOffset(refNodeRegion, points[1]);\n var p2 = getAlignOffset(elRegion, points[0]);\n var diff = [p2.left - p1.left, p2.top - p1.top];\n return {\n left: Math.round(elRegion.left - diff[0] + offset[0] - targetOffset[0]),\n top: Math.round(elRegion.top - diff[1] + offset[1] - targetOffset[1])\n };\n}\n\n/**\n * align dom node flexibly\n * @author yiminghe@gmail.com\n */\n\n// http://yiminghe.iteye.com/blog/1124720\n\nfunction isFailX(elFuturePos, elRegion, visibleRect) {\n return elFuturePos.left < visibleRect.left || elFuturePos.left + elRegion.width > visibleRect.right;\n}\nfunction isFailY(elFuturePos, elRegion, visibleRect) {\n return elFuturePos.top < visibleRect.top || elFuturePos.top + elRegion.height > visibleRect.bottom;\n}\nfunction isCompleteFailX(elFuturePos, elRegion, visibleRect) {\n return elFuturePos.left > visibleRect.right || elFuturePos.left + elRegion.width < visibleRect.left;\n}\nfunction isCompleteFailY(elFuturePos, elRegion, visibleRect) {\n return elFuturePos.top > visibleRect.bottom || elFuturePos.top + elRegion.height < visibleRect.top;\n}\nfunction flip(points, reg, map) {\n var ret = [];\n utils.each(points, function (p) {\n ret.push(p.replace(reg, function (m) {\n return map[m];\n }));\n });\n return ret;\n}\nfunction flipOffset(offset, index) {\n offset[index] = -offset[index];\n return offset;\n}\nfunction convertOffset(str, offsetLen) {\n var n;\n if (/%$/.test(str)) {\n n = parseInt(str.substring(0, str.length - 1), 10) / 100 * offsetLen;\n } else {\n n = parseInt(str, 10);\n }\n return n || 0;\n}\nfunction normalizeOffset(offset, el) {\n offset[0] = convertOffset(offset[0], el.width);\n offset[1] = convertOffset(offset[1], el.height);\n}\n\n/**\n * @param el\n * @param tgtRegion 参照节点所占的区域: { left, top, width, height }\n * @param align\n */\nfunction doAlign(el, tgtRegion, align, isTgtRegionVisible) {\n var points = align.points;\n var offset = align.offset || [0, 0];\n var targetOffset = align.targetOffset || [0, 0];\n var overflow = align.overflow;\n var source = align.source || el;\n offset = [].concat(offset);\n targetOffset = [].concat(targetOffset);\n overflow = overflow || {};\n var newOverflowCfg = {};\n var fail = 0;\n var alwaysByViewport = !!(overflow && overflow.alwaysByViewport);\n // 当前节点可以被放置的显示区域\n var visibleRect = getVisibleRectForElement(source, alwaysByViewport);\n // 当前节点所占的区域, left/top/width/height\n var elRegion = getRegion(source);\n // 将 offset 转换成数值，支持百分比\n normalizeOffset(offset, elRegion);\n normalizeOffset(targetOffset, tgtRegion);\n // 当前节点将要被放置的位置\n var elFuturePos = getElFuturePos(elRegion, tgtRegion, points, offset, targetOffset);\n // 当前节点将要所处的区域\n var newElRegion = utils.merge(elRegion, elFuturePos);\n\n // 如果可视区域不能完全放置当前节点时允许调整\n if (visibleRect && (overflow.adjustX || overflow.adjustY) && isTgtRegionVisible) {\n if (overflow.adjustX) {\n // 如果横向不能放下\n if (isFailX(elFuturePos, elRegion, visibleRect)) {\n // 对齐位置反下\n var newPoints = flip(points, /[lr]/gi, {\n l: 'r',\n r: 'l'\n });\n // 偏移量也反下\n var newOffset = flipOffset(offset, 0);\n var newTargetOffset = flipOffset(targetOffset, 0);\n var newElFuturePos = getElFuturePos(elRegion, tgtRegion, newPoints, newOffset, newTargetOffset);\n if (!isCompleteFailX(newElFuturePos, elRegion, visibleRect)) {\n fail = 1;\n points = newPoints;\n offset = newOffset;\n targetOffset = newTargetOffset;\n }\n }\n }\n if (overflow.adjustY) {\n // 如果纵向不能放下\n if (isFailY(elFuturePos, elRegion, visibleRect)) {\n // 对齐位置反下\n var _newPoints = flip(points, /[tb]/gi, {\n t: 'b',\n b: 't'\n });\n // 偏移量也反下\n var _newOffset = flipOffset(offset, 1);\n var _newTargetOffset = flipOffset(targetOffset, 1);\n var _newElFuturePos = getElFuturePos(elRegion, tgtRegion, _newPoints, _newOffset, _newTargetOffset);\n if (!isCompleteFailY(_newElFuturePos, elRegion, visibleRect)) {\n fail = 1;\n points = _newPoints;\n offset = _newOffset;\n targetOffset = _newTargetOffset;\n }\n }\n }\n\n // 如果失败，重新计算当前节点将要被放置的位置\n if (fail) {\n elFuturePos = getElFuturePos(elRegion, tgtRegion, points, offset, targetOffset);\n utils.mix(newElRegion, elFuturePos);\n }\n var isStillFailX = isFailX(elFuturePos, elRegion, visibleRect);\n var isStillFailY = isFailY(elFuturePos, elRegion, visibleRect);\n // 检查反下后的位置是否可以放下了，如果仍然放不下：\n // 1. 复原修改过的定位参数\n if (isStillFailX || isStillFailY) {\n var _newPoints2 = points;\n\n // 重置对应部分的翻转逻辑\n if (isStillFailX) {\n _newPoints2 = flip(points, /[lr]/gi, {\n l: 'r',\n r: 'l'\n });\n }\n if (isStillFailY) {\n _newPoints2 = flip(points, /[tb]/gi, {\n t: 'b',\n b: 't'\n });\n }\n points = _newPoints2;\n offset = align.offset || [0, 0];\n targetOffset = align.targetOffset || [0, 0];\n }\n // 2. 只有指定了可以调整当前方向才调整\n newOverflowCfg.adjustX = overflow.adjustX && isStillFailX;\n newOverflowCfg.adjustY = overflow.adjustY && isStillFailY;\n\n // 确实要调整，甚至可能会调整高度宽度\n if (newOverflowCfg.adjustX || newOverflowCfg.adjustY) {\n newElRegion = adjustForViewport(elFuturePos, elRegion, visibleRect, newOverflowCfg);\n }\n }\n\n // need judge to in case set fixed with in css on height auto element\n if (newElRegion.width !== elRegion.width) {\n utils.css(source, 'width', utils.width(source) + newElRegion.width - elRegion.width);\n }\n if (newElRegion.height !== elRegion.height) {\n utils.css(source, 'height', utils.height(source) + newElRegion.height - elRegion.height);\n }\n\n // https://github.com/kissyteam/kissy/issues/190\n // 相对于屏幕位置没变，而 left/top 变了\n // 例如
\n utils.offset(source, {\n left: newElRegion.left,\n top: newElRegion.top\n }, {\n useCssRight: align.useCssRight,\n useCssBottom: align.useCssBottom,\n useCssTransform: align.useCssTransform,\n ignoreShake: align.ignoreShake\n });\n return {\n points: points,\n offset: offset,\n targetOffset: targetOffset,\n overflow: newOverflowCfg\n };\n}\n/**\n * 2012-04-26 yiminghe@gmail.com\n * - 优化智能对齐算法\n * - 慎用 resizeXX\n *\n * 2011-07-13 yiminghe@gmail.com note:\n * - 增加智能对齐，以及大小调整选项\n **/\n\nfunction isOutOfVisibleRect(target, alwaysByViewport) {\n var visibleRect = getVisibleRectForElement(target, alwaysByViewport);\n var targetRegion = getRegion(target);\n return !visibleRect || targetRegion.left + targetRegion.width <= visibleRect.left || targetRegion.top + targetRegion.height <= visibleRect.top || targetRegion.left >= visibleRect.right || targetRegion.top >= visibleRect.bottom;\n}\nfunction alignElement(el, refNode, align) {\n var target = align.target || refNode;\n var refNodeRegion = getRegion(target);\n var isTargetNotOutOfVisible = !isOutOfVisibleRect(target, align.overflow && align.overflow.alwaysByViewport);\n return doAlign(el, refNodeRegion, align, isTargetNotOutOfVisible);\n}\nalignElement.__getOffsetParent = getOffsetParent;\nalignElement.__getVisibleRectForElement = getVisibleRectForElement;\n\n/**\n * `tgtPoint`: { pageX, pageY } or { clientX, clientY }.\n * If client position provided, will internal convert to page position.\n */\n\nfunction alignPoint(el, tgtPoint, align) {\n var pageX;\n var pageY;\n var doc = utils.getDocument(el);\n var win = doc.defaultView || doc.parentWindow;\n var scrollX = utils.getWindowScrollLeft(win);\n var scrollY = utils.getWindowScrollTop(win);\n var viewportWidth = utils.viewportWidth(win);\n var viewportHeight = utils.viewportHeight(win);\n if ('pageX' in tgtPoint) {\n pageX = tgtPoint.pageX;\n } else {\n pageX = scrollX + tgtPoint.clientX;\n }\n if ('pageY' in tgtPoint) {\n pageY = tgtPoint.pageY;\n } else {\n pageY = scrollY + tgtPoint.clientY;\n }\n var tgtRegion = {\n left: pageX,\n top: pageY,\n width: 0,\n height: 0\n };\n var pointInView = pageX >= 0 && pageX <= scrollX + viewportWidth && pageY >= 0 && pageY <= scrollY + viewportHeight;\n\n // Provide default target point\n var points = [align.points[0], 'cc'];\n return doAlign(el, tgtRegion, _objectSpread2(_objectSpread2({}, align), {}, {\n points: points\n }), pointInView);\n}\n\nexport default alignElement;\nexport { alignElement, alignPoint };\n//# sourceMappingURL=index.js.map\n","/*!\n Copyright (c) 2015 Jed Watson.\n Based on code that is Copyright 2013-2015, Facebook, Inc.\n All rights reserved.\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar canUseDOM = !!(\n\t\ttypeof window !== 'undefined' &&\n\t\twindow.document &&\n\t\twindow.document.createElement\n\t);\n\n\tvar ExecutionEnvironment = {\n\n\t\tcanUseDOM: canUseDOM,\n\n\t\tcanUseWorkers: typeof Worker !== 'undefined',\n\n\t\tcanUseEventListeners:\n\t\t\tcanUseDOM && !!(window.addEventListener || window.attachEvent),\n\n\t\tcanUseViewport: canUseDOM && !!window.screen\n\n\t};\n\n\tif (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\tdefine(function () {\n\t\t\treturn ExecutionEnvironment;\n\t\t});\n\t} else if (typeof module !== 'undefined' && module.exports) {\n\t\tmodule.exports = ExecutionEnvironment;\n\t} else {\n\t\twindow.ExecutionEnvironment = ExecutionEnvironment;\n\t}\n\n}());\n","/* build: `node build.js modules=ALL exclude=gestures,accessors,erasing requirejs minifier=uglifyjs` */\n/*! Fabric.js Copyright 2008-2015, Printio (Juriy Zaytsev, Maxim Chernyak) */\n\nvar fabric = fabric || { version: '5.2.4' };\nif (typeof exports !== 'undefined') {\n exports.fabric = fabric;\n}\n/* _AMD_START_ */\nelse if (typeof define === 'function' && define.amd) {\n define([], function() { return fabric; });\n}\n/* _AMD_END_ */\nif (typeof document !== 'undefined' && typeof window !== 'undefined') {\n if (document instanceof (typeof HTMLDocument !== 'undefined' ? HTMLDocument : Document)) {\n fabric.document = document;\n }\n else {\n fabric.document = document.implementation.createHTMLDocument('');\n }\n fabric.window = window;\n}\nelse {\n // assume we're running under node.js when document/window are not present\n var jsdom = require('jsdom');\n var virtualWindow = new jsdom.JSDOM(\n decodeURIComponent('%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E'),\n {\n features: {\n FetchExternalResources: ['img']\n },\n resources: 'usable'\n }).window;\n fabric.document = virtualWindow.document;\n fabric.jsdomImplForWrapper = require('jsdom/lib/jsdom/living/generated/utils').implForWrapper;\n fabric.nodeCanvas = require('jsdom/lib/jsdom/utils').Canvas;\n fabric.window = virtualWindow;\n DOMParser = fabric.window.DOMParser;\n}\n\n/**\n * True when in environment that supports touch events\n * @type boolean\n */\nfabric.isTouchSupported = 'ontouchstart' in fabric.window || 'ontouchstart' in fabric.document ||\n (fabric.window && fabric.window.navigator && fabric.window.navigator.maxTouchPoints > 0);\n\n/**\n * True when in environment that's probably Node.js\n * @type boolean\n */\nfabric.isLikelyNode = typeof Buffer !== 'undefined' &&\n typeof window === 'undefined';\n\n/* _FROM_SVG_START_ */\n/**\n * Attributes parsed from all SVG elements\n * @type array\n */\nfabric.SHARED_ATTRIBUTES = [\n 'display',\n 'transform',\n 'fill', 'fill-opacity', 'fill-rule',\n 'opacity',\n 'stroke', 'stroke-dasharray', 'stroke-linecap', 'stroke-dashoffset',\n 'stroke-linejoin', 'stroke-miterlimit',\n 'stroke-opacity', 'stroke-width',\n 'id', 'paint-order', 'vector-effect',\n 'instantiated_by_use', 'clip-path',\n];\n/* _FROM_SVG_END_ */\n\n/**\n * Pixel per Inch as a default value set to 96. Can be changed for more realistic conversion.\n */\nfabric.DPI = 96;\nfabric.reNum = '(?:[-+]?(?:\\\\d+|\\\\d*\\\\.\\\\d+)(?:[eE][-+]?\\\\d+)?)';\nfabric.commaWsp = '(?:\\\\s+,?\\\\s*|,\\\\s*)';\nfabric.rePathCommand = /([-+]?((\\d+\\.\\d+)|((\\d+)|(\\.\\d+)))(?:[eE][-+]?\\d+)?)/ig;\nfabric.reNonWord = /[ \\n\\.,;!\\?\\-]/;\nfabric.fontPaths = { };\nfabric.iMatrix = [1, 0, 0, 1, 0, 0];\nfabric.svgNS = 'http://www.w3.org/2000/svg';\n\n/**\n * Pixel limit for cache canvases. 1Mpx , 4Mpx should be fine.\n * @since 1.7.14\n * @type Number\n * @default\n */\nfabric.perfLimitSizeTotal = 2097152;\n\n/**\n * Pixel limit for cache canvases width or height. IE fixes the maximum at 5000\n * @since 1.7.14\n * @type Number\n * @default\n */\nfabric.maxCacheSideLimit = 4096;\n\n/**\n * Lowest pixel limit for cache canvases, set at 256PX\n * @since 1.7.14\n * @type Number\n * @default\n */\nfabric.minCacheSideLimit = 256;\n\n/**\n * Cache Object for widths of chars in text rendering.\n */\nfabric.charWidthsCache = { };\n\n/**\n * if webgl is enabled and available, textureSize will determine the size\n * of the canvas backend\n * @since 2.0.0\n * @type Number\n * @default\n */\nfabric.textureSize = 2048;\n\n/**\n * When 'true', style information is not retained when copy/pasting text, making\n * pasted text use destination style.\n * Defaults to 'false'.\n * @type Boolean\n * @default\n */\nfabric.disableStyleCopyPaste = false;\n\n/**\n * Enable webgl for filtering picture is available\n * A filtering backend will be initialized, this will both take memory and\n * time since a default 2048x2048 canvas will be created for the gl context\n * @since 2.0.0\n * @type Boolean\n * @default\n */\nfabric.enableGLFiltering = true;\n\n/**\n * Device Pixel Ratio\n * @see https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/SettingUptheCanvas/SettingUptheCanvas.html\n */\nfabric.devicePixelRatio = fabric.window.devicePixelRatio ||\n fabric.window.webkitDevicePixelRatio ||\n fabric.window.mozDevicePixelRatio ||\n 1;\n/**\n * Browser-specific constant to adjust CanvasRenderingContext2D.shadowBlur value,\n * which is unitless and not rendered equally across browsers.\n *\n * Values that work quite well (as of October 2017) are:\n * - Chrome: 1.5\n * - Edge: 1.75\n * - Firefox: 0.9\n * - Safari: 0.95\n *\n * @since 2.0.0\n * @type Number\n * @default 1\n */\nfabric.browserShadowBlurConstant = 1;\n\n/**\n * This object contains the result of arc to bezier conversion for faster retrieving if the same arc needs to be converted again.\n * It was an internal variable, is accessible since version 2.3.4\n */\nfabric.arcToSegmentsCache = { };\n\n/**\n * This object keeps the results of the boundsOfCurve calculation mapped by the joined arguments necessary to calculate it.\n * It does speed up calculation, if you parse and add always the same paths, but in case of heavy usage of freedrawing\n * you do not get any speed benefit and you get a big object in memory.\n * The object was a private variable before, while now is appended to the lib so that you have access to it and you\n * can eventually clear it.\n * It was an internal variable, is accessible since version 2.3.4\n */\nfabric.boundsOfCurveCache = { };\n\n/**\n * If disabled boundsOfCurveCache is not used. For apps that make heavy usage of pencil drawing probably disabling it is better\n * @default true\n */\nfabric.cachesBoundsOfCurve = true;\n\n/**\n * Skip performance testing of setupGLContext and force the use of putImageData that seems to be the one that works best on\n * Chrome + old hardware. if your users are experiencing empty images after filtering you may try to force this to true\n * this has to be set before instantiating the filtering backend ( before filtering the first image )\n * @type Boolean\n * @default false\n */\nfabric.forceGLPutImageData = false;\n\nfabric.initFilterBackend = function() {\n if (fabric.enableGLFiltering && fabric.isWebglSupported && fabric.isWebglSupported(fabric.textureSize)) {\n console.log('max texture size: ' + fabric.maxTextureSize);\n return (new fabric.WebglFilterBackend({ tileSize: fabric.textureSize }));\n }\n else if (fabric.Canvas2dFilterBackend) {\n return (new fabric.Canvas2dFilterBackend());\n }\n};\n\n\nif (typeof document !== 'undefined' && typeof window !== 'undefined') {\n // ensure globality even if entire library were function wrapped (as in Meteor.js packaging system)\n window.fabric = fabric;\n}\n\n\n(function() {\n\n /**\n * @private\n * @param {String} eventName\n * @param {Function} handler\n */\n function _removeEventListener(eventName, handler) {\n if (!this.__eventListeners[eventName]) {\n return;\n }\n var eventListener = this.__eventListeners[eventName];\n if (handler) {\n eventListener[eventListener.indexOf(handler)] = false;\n }\n else {\n fabric.util.array.fill(eventListener, false);\n }\n }\n\n /**\n * Observes specified event\n * @memberOf fabric.Observable\n * @alias on\n * @param {String|Object} eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})\n * @param {Function} handler Function that receives a notification when an event of the specified type occurs\n * @return {Self} thisArg\n * @chainable\n */\n function on(eventName, handler) {\n if (!this.__eventListeners) {\n this.__eventListeners = { };\n }\n // one object with key/value pairs was passed\n if (arguments.length === 1) {\n for (var prop in eventName) {\n this.on(prop, eventName[prop]);\n }\n }\n else {\n if (!this.__eventListeners[eventName]) {\n this.__eventListeners[eventName] = [];\n }\n this.__eventListeners[eventName].push(handler);\n }\n return this;\n }\n\n function _once(eventName, handler) {\n var _handler = function () {\n handler.apply(this, arguments);\n this.off(eventName, _handler);\n }.bind(this);\n this.on(eventName, _handler);\n }\n\n function once(eventName, handler) {\n // one object with key/value pairs was passed\n if (arguments.length === 1) {\n for (var prop in eventName) {\n _once.call(this, prop, eventName[prop]);\n }\n }\n else {\n _once.call(this, eventName, handler);\n }\n return this;\n }\n\n /**\n * Stops event observing for a particular event handler. Calling this method\n * without arguments removes all handlers for all events\n * @memberOf fabric.Observable\n * @alias off\n * @param {String|Object} eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})\n * @param {Function} handler Function to be deleted from EventListeners\n * @return {Self} thisArg\n * @chainable\n */\n function off(eventName, handler) {\n if (!this.__eventListeners) {\n return this;\n }\n\n // remove all key/value pairs (event name -> event handler)\n if (arguments.length === 0) {\n for (eventName in this.__eventListeners) {\n _removeEventListener.call(this, eventName);\n }\n }\n // one object with key/value pairs was passed\n else if (arguments.length === 1 && typeof arguments[0] === 'object') {\n for (var prop in eventName) {\n _removeEventListener.call(this, prop, eventName[prop]);\n }\n }\n else {\n _removeEventListener.call(this, eventName, handler);\n }\n return this;\n }\n\n /**\n * Fires event with an optional options object\n * @memberOf fabric.Observable\n * @param {String} eventName Event name to fire\n * @param {Object} [options] Options object\n * @return {Self} thisArg\n * @chainable\n */\n function fire(eventName, options) {\n if (!this.__eventListeners) {\n return this;\n }\n\n var listenersForEvent = this.__eventListeners[eventName];\n if (!listenersForEvent) {\n return this;\n }\n\n for (var i = 0, len = listenersForEvent.length; i < len; i++) {\n listenersForEvent[i] && listenersForEvent[i].call(this, options || { });\n }\n this.__eventListeners[eventName] = listenersForEvent.filter(function(value) {\n return value !== false;\n });\n return this;\n }\n\n /**\n * @namespace fabric.Observable\n * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#events}\n * @see {@link http://fabricjs.com/events|Events demo}\n */\n fabric.Observable = {\n fire: fire,\n on: on,\n once: once,\n off: off,\n };\n})();\n\n\n/**\n * @namespace fabric.Collection\n */\nfabric.Collection = {\n\n _objects: [],\n\n /**\n * Adds objects to collection, Canvas or Group, then renders canvas\n * (if `renderOnAddRemove` is not `false`).\n * in case of Group no changes to bounding box are made.\n * Objects should be instances of (or inherit from) fabric.Object\n * Use of this function is highly discouraged for groups.\n * you can add a bunch of objects with the add method but then you NEED\n * to run a addWithUpdate call for the Group class or position/bbox will be wrong.\n * @param {...fabric.Object} object Zero or more fabric instances\n * @return {Self} thisArg\n * @chainable\n */\n add: function () {\n this._objects.push.apply(this._objects, arguments);\n if (this._onObjectAdded) {\n for (var i = 0, length = arguments.length; i < length; i++) {\n this._onObjectAdded(arguments[i]);\n }\n }\n this.renderOnAddRemove && this.requestRenderAll();\n return this;\n },\n\n /**\n * Inserts an object into collection at specified index, then renders canvas (if `renderOnAddRemove` is not `false`)\n * An object should be an instance of (or inherit from) fabric.Object\n * Use of this function is highly discouraged for groups.\n * you can add a bunch of objects with the insertAt method but then you NEED\n * to run a addWithUpdate call for the Group class or position/bbox will be wrong.\n * @param {Object} object Object to insert\n * @param {Number} index Index to insert object at\n * @param {Boolean} nonSplicing When `true`, no splicing (shifting) of objects occurs\n * @return {Self} thisArg\n * @chainable\n */\n insertAt: function (object, index, nonSplicing) {\n var objects = this._objects;\n if (nonSplicing) {\n objects[index] = object;\n }\n else {\n objects.splice(index, 0, object);\n }\n this._onObjectAdded && this._onObjectAdded(object);\n this.renderOnAddRemove && this.requestRenderAll();\n return this;\n },\n\n /**\n * Removes objects from a collection, then renders canvas (if `renderOnAddRemove` is not `false`)\n * @param {...fabric.Object} object Zero or more fabric instances\n * @return {Self} thisArg\n * @chainable\n */\n remove: function() {\n var objects = this._objects,\n index, somethingRemoved = false;\n\n for (var i = 0, length = arguments.length; i < length; i++) {\n index = objects.indexOf(arguments[i]);\n\n // only call onObjectRemoved if an object was actually removed\n if (index !== -1) {\n somethingRemoved = true;\n objects.splice(index, 1);\n this._onObjectRemoved && this._onObjectRemoved(arguments[i]);\n }\n }\n\n this.renderOnAddRemove && somethingRemoved && this.requestRenderAll();\n return this;\n },\n\n /**\n * Executes given function for each object in this group\n * @param {Function} callback\n * Callback invoked with current object as first argument,\n * index - as second and an array of all objects - as third.\n * Callback is invoked in a context of Global Object (e.g. `window`)\n * when no `context` argument is given\n *\n * @param {Object} context Context (aka thisObject)\n * @return {Self} thisArg\n * @chainable\n */\n forEachObject: function(callback, context) {\n var objects = this.getObjects();\n for (var i = 0, len = objects.length; i < len; i++) {\n callback.call(context, objects[i], i, objects);\n }\n return this;\n },\n\n /**\n * Returns an array of children objects of this instance\n * Type parameter introduced in 1.3.10\n * since 2.3.5 this method return always a COPY of the array;\n * @param {String} [type] When specified, only objects of this type are returned\n * @return {Array}\n */\n getObjects: function(type) {\n if (typeof type === 'undefined') {\n return this._objects.concat();\n }\n return this._objects.filter(function(o) {\n return o.type === type;\n });\n },\n\n /**\n * Returns object at specified index\n * @param {Number} index\n * @return {Self} thisArg\n */\n item: function (index) {\n return this._objects[index];\n },\n\n /**\n * Returns true if collection contains no objects\n * @return {Boolean} true if collection is empty\n */\n isEmpty: function () {\n return this._objects.length === 0;\n },\n\n /**\n * Returns a size of a collection (i.e: length of an array containing its objects)\n * @return {Number} Collection size\n */\n size: function() {\n return this._objects.length;\n },\n\n /**\n * Returns true if collection contains an object\n * @param {Object} object Object to check against\n * @param {Boolean} [deep=false] `true` to check all descendants, `false` to check only `_objects`\n * @return {Boolean} `true` if collection contains an object\n */\n contains: function (object, deep) {\n if (this._objects.indexOf(object) > -1) {\n return true;\n }\n else if (deep) {\n return this._objects.some(function (obj) {\n return typeof obj.contains === 'function' && obj.contains(object, true);\n });\n }\n return false;\n },\n\n /**\n * Returns number representation of a collection complexity\n * @return {Number} complexity\n */\n complexity: function () {\n return this._objects.reduce(function (memo, current) {\n memo += current.complexity ? current.complexity() : 0;\n return memo;\n }, 0);\n }\n};\n\n\n/**\n * @namespace fabric.CommonMethods\n */\nfabric.CommonMethods = {\n\n /**\n * Sets object's properties from options\n * @param {Object} [options] Options object\n */\n _setOptions: function(options) {\n for (var prop in options) {\n this.set(prop, options[prop]);\n }\n },\n\n /**\n * @private\n * @param {Object} [filler] Options object\n * @param {String} [property] property to set the Gradient to\n */\n _initGradient: function(filler, property) {\n if (filler && filler.colorStops && !(filler instanceof fabric.Gradient)) {\n this.set(property, new fabric.Gradient(filler));\n }\n },\n\n /**\n * @private\n * @param {Object} [filler] Options object\n * @param {String} [property] property to set the Pattern to\n * @param {Function} [callback] callback to invoke after pattern load\n */\n _initPattern: function(filler, property, callback) {\n if (filler && filler.source && !(filler instanceof fabric.Pattern)) {\n this.set(property, new fabric.Pattern(filler, callback));\n }\n else {\n callback && callback();\n }\n },\n\n /**\n * @private\n */\n _setObject: function(obj) {\n for (var prop in obj) {\n this._set(prop, obj[prop]);\n }\n },\n\n /**\n * Sets property to a given value. When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls. If you need to update those, call `setCoords()`.\n * @param {String|Object} key Property name or object (if object, iterate over the object properties)\n * @param {Object|Function} value Property value (if function, the value is passed into it and its return value is used as a new one)\n * @return {fabric.Object} thisArg\n * @chainable\n */\n set: function(key, value) {\n if (typeof key === 'object') {\n this._setObject(key);\n }\n else {\n this._set(key, value);\n }\n return this;\n },\n\n _set: function(key, value) {\n this[key] = value;\n },\n\n /**\n * Toggles specified property from `true` to `false` or from `false` to `true`\n * @param {String} property Property to toggle\n * @return {fabric.Object} thisArg\n * @chainable\n */\n toggle: function(property) {\n var value = this.get(property);\n if (typeof value === 'boolean') {\n this.set(property, !value);\n }\n return this;\n },\n\n /**\n * Basic getter\n * @param {String} property Property name\n * @return {*} value of a property\n */\n get: function(property) {\n return this[property];\n }\n};\n\n\n(function(global) {\n\n var sqrt = Math.sqrt,\n atan2 = Math.atan2,\n pow = Math.pow,\n PiBy180 = Math.PI / 180,\n PiBy2 = Math.PI / 2;\n\n /**\n * @namespace fabric.util\n */\n fabric.util = {\n\n /**\n * Calculate the cos of an angle, avoiding returning floats for known results\n * @static\n * @memberOf fabric.util\n * @param {Number} angle the angle in radians or in degree\n * @return {Number}\n */\n cos: function(angle) {\n if (angle === 0) { return 1; }\n if (angle < 0) {\n // cos(a) = cos(-a)\n angle = -angle;\n }\n var angleSlice = angle / PiBy2;\n switch (angleSlice) {\n case 1: case 3: return 0;\n case 2: return -1;\n }\n return Math.cos(angle);\n },\n\n /**\n * Calculate the sin of an angle, avoiding returning floats for known results\n * @static\n * @memberOf fabric.util\n * @param {Number} angle the angle in radians or in degree\n * @return {Number}\n */\n sin: function(angle) {\n if (angle === 0) { return 0; }\n var angleSlice = angle / PiBy2, sign = 1;\n if (angle < 0) {\n // sin(-a) = -sin(a)\n sign = -1;\n }\n switch (angleSlice) {\n case 1: return sign;\n case 2: return 0;\n case 3: return -sign;\n }\n return Math.sin(angle);\n },\n\n /**\n * Removes value from an array.\n * Presence of value (and its position in an array) is determined via `Array.prototype.indexOf`\n * @static\n * @memberOf fabric.util\n * @param {Array} array\n * @param {*} value\n * @return {Array} original array\n */\n removeFromArray: function(array, value) {\n var idx = array.indexOf(value);\n if (idx !== -1) {\n array.splice(idx, 1);\n }\n return array;\n },\n\n /**\n * Returns random number between 2 specified ones.\n * @static\n * @memberOf fabric.util\n * @param {Number} min lower limit\n * @param {Number} max upper limit\n * @return {Number} random value (between min and max)\n */\n getRandomInt: function(min, max) {\n return Math.floor(Math.random() * (max - min + 1)) + min;\n },\n\n /**\n * Transforms degrees to radians.\n * @static\n * @memberOf fabric.util\n * @param {Number} degrees value in degrees\n * @return {Number} value in radians\n */\n degreesToRadians: function(degrees) {\n return degrees * PiBy180;\n },\n\n /**\n * Transforms radians to degrees.\n * @static\n * @memberOf fabric.util\n * @param {Number} radians value in radians\n * @return {Number} value in degrees\n */\n radiansToDegrees: function(radians) {\n return radians / PiBy180;\n },\n\n /**\n * Rotates `point` around `origin` with `radians`\n * @static\n * @memberOf fabric.util\n * @param {fabric.Point} point The point to rotate\n * @param {fabric.Point} origin The origin of the rotation\n * @param {Number} radians The radians of the angle for the rotation\n * @return {fabric.Point} The new rotated point\n */\n rotatePoint: function(point, origin, radians) {\n var newPoint = new fabric.Point(point.x - origin.x, point.y - origin.y),\n v = fabric.util.rotateVector(newPoint, radians);\n return new fabric.Point(v.x, v.y).addEquals(origin);\n },\n\n /**\n * Rotates `vector` with `radians`\n * @static\n * @memberOf fabric.util\n * @param {Object} vector The vector to rotate (x and y)\n * @param {Number} radians The radians of the angle for the rotation\n * @return {Object} The new rotated point\n */\n rotateVector: function(vector, radians) {\n var sin = fabric.util.sin(radians),\n cos = fabric.util.cos(radians),\n rx = vector.x * cos - vector.y * sin,\n ry = vector.x * sin + vector.y * cos;\n return {\n x: rx,\n y: ry\n };\n },\n\n /**\n * Creates a vetor from points represented as a point\n * @static\n * @memberOf fabric.util\n *\n * @typedef {Object} Point\n * @property {number} x\n * @property {number} y\n *\n * @param {Point} from\n * @param {Point} to\n * @returns {Point} vector\n */\n createVector: function (from, to) {\n return new fabric.Point(to.x - from.x, to.y - from.y);\n },\n\n /**\n * Calculates angle between 2 vectors using dot product\n * @static\n * @memberOf fabric.util\n * @param {Point} a\n * @param {Point} b\n * @returns the angle in radian between the vectors\n */\n calcAngleBetweenVectors: function (a, b) {\n return Math.acos((a.x * b.x + a.y * b.y) / (Math.hypot(a.x, a.y) * Math.hypot(b.x, b.y)));\n },\n\n /**\n * @static\n * @memberOf fabric.util\n * @param {Point} v\n * @returns {Point} vector representing the unit vector of pointing to the direction of `v`\n */\n getHatVector: function (v) {\n return new fabric.Point(v.x, v.y).multiply(1 / Math.hypot(v.x, v.y));\n },\n\n /**\n * @static\n * @memberOf fabric.util\n * @param {Point} A\n * @param {Point} B\n * @param {Point} C\n * @returns {{ vector: Point, angle: number }} vector representing the bisector of A and A's angle\n */\n getBisector: function (A, B, C) {\n var AB = fabric.util.createVector(A, B), AC = fabric.util.createVector(A, C);\n var alpha = fabric.util.calcAngleBetweenVectors(AB, AC);\n // check if alpha is relative to AB->BC\n var ro = fabric.util.calcAngleBetweenVectors(fabric.util.rotateVector(AB, alpha), AC);\n var phi = alpha * (ro === 0 ? 1 : -1) / 2;\n return {\n vector: fabric.util.getHatVector(fabric.util.rotateVector(AB, phi)),\n angle: alpha\n };\n },\n\n /**\n * Project stroke width on points returning 2 projections for each point as follows:\n * - `miter`: 2 points corresponding to the outer boundary and the inner boundary of stroke.\n * - `bevel`: 2 points corresponding to the bevel boundaries, tangent to the bisector.\n * - `round`: same as `bevel`\n * Used to calculate object's bounding box\n * @static\n * @memberOf fabric.util\n * @param {Point[]} points\n * @param {Object} options\n * @param {number} options.strokeWidth\n * @param {'miter'|'bevel'|'round'} options.strokeLineJoin\n * @param {number} options.strokeMiterLimit https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit\n * @param {boolean} options.strokeUniform\n * @param {number} options.scaleX\n * @param {number} options.scaleY\n * @param {boolean} [openPath] whether the shape is open or not, affects the calculations of the first and last points\n * @returns {fabric.Point[]} array of size 2n/4n of all suspected points\n */\n projectStrokeOnPoints: function (points, options, openPath) {\n var coords = [], s = options.strokeWidth / 2,\n strokeUniformScalar = options.strokeUniform ?\n new fabric.Point(1 / options.scaleX, 1 / options.scaleY) : new fabric.Point(1, 1),\n getStrokeHatVector = function (v) {\n var scalar = s / (Math.hypot(v.x, v.y));\n return new fabric.Point(v.x * scalar * strokeUniformScalar.x, v.y * scalar * strokeUniformScalar.y);\n };\n if (points.length <= 1) {return coords;}\n points.forEach(function (p, index) {\n var A = new fabric.Point(p.x, p.y), B, C;\n if (index === 0) {\n C = points[index + 1];\n B = openPath ? getStrokeHatVector(fabric.util.createVector(C, A)).addEquals(A) : points[points.length - 1];\n }\n else if (index === points.length - 1) {\n B = points[index - 1];\n C = openPath ? getStrokeHatVector(fabric.util.createVector(B, A)).addEquals(A) : points[0];\n }\n else {\n B = points[index - 1];\n C = points[index + 1];\n }\n var bisector = fabric.util.getBisector(A, B, C),\n bisectorVector = bisector.vector,\n alpha = bisector.angle,\n scalar,\n miterVector;\n if (options.strokeLineJoin === 'miter') {\n scalar = -s / Math.sin(alpha / 2);\n miterVector = new fabric.Point(\n bisectorVector.x * scalar * strokeUniformScalar.x,\n bisectorVector.y * scalar * strokeUniformScalar.y\n );\n if (Math.hypot(miterVector.x, miterVector.y) / s <= options.strokeMiterLimit) {\n coords.push(A.add(miterVector));\n coords.push(A.subtract(miterVector));\n return;\n }\n }\n scalar = -s * Math.SQRT2;\n miterVector = new fabric.Point(\n bisectorVector.x * scalar * strokeUniformScalar.x,\n bisectorVector.y * scalar * strokeUniformScalar.y\n );\n coords.push(A.add(miterVector));\n coords.push(A.subtract(miterVector));\n });\n return coords;\n },\n\n /**\n * Apply transform t to point p\n * @static\n * @memberOf fabric.util\n * @param {fabric.Point} p The point to transform\n * @param {Array} t The transform\n * @param {Boolean} [ignoreOffset] Indicates that the offset should not be applied\n * @return {fabric.Point} The transformed point\n */\n transformPoint: function(p, t, ignoreOffset) {\n if (ignoreOffset) {\n return new fabric.Point(\n t[0] * p.x + t[2] * p.y,\n t[1] * p.x + t[3] * p.y\n );\n }\n return new fabric.Point(\n t[0] * p.x + t[2] * p.y + t[4],\n t[1] * p.x + t[3] * p.y + t[5]\n );\n },\n\n /**\n * Returns coordinates of points's bounding rectangle (left, top, width, height)\n * @param {Array} points 4 points array\n * @param {Array} [transform] an array of 6 numbers representing a 2x3 transform matrix\n * @return {Object} Object with left, top, width, height properties\n */\n makeBoundingBoxFromPoints: function(points, transform) {\n if (transform) {\n for (var i = 0; i < points.length; i++) {\n points[i] = fabric.util.transformPoint(points[i], transform);\n }\n }\n var xPoints = [points[0].x, points[1].x, points[2].x, points[3].x],\n minX = fabric.util.array.min(xPoints),\n maxX = fabric.util.array.max(xPoints),\n width = maxX - minX,\n yPoints = [points[0].y, points[1].y, points[2].y, points[3].y],\n minY = fabric.util.array.min(yPoints),\n maxY = fabric.util.array.max(yPoints),\n height = maxY - minY;\n\n return {\n left: minX,\n top: minY,\n width: width,\n height: height\n };\n },\n\n /**\n * Invert transformation t\n * @static\n * @memberOf fabric.util\n * @param {Array} t The transform\n * @return {Array} The inverted transform\n */\n invertTransform: function(t) {\n var a = 1 / (t[0] * t[3] - t[1] * t[2]),\n r = [a * t[3], -a * t[1], -a * t[2], a * t[0]],\n o = fabric.util.transformPoint({ x: t[4], y: t[5] }, r, true);\n r[4] = -o.x;\n r[5] = -o.y;\n return r;\n },\n\n /**\n * A wrapper around Number#toFixed, which contrary to native method returns number, not string.\n * @static\n * @memberOf fabric.util\n * @param {Number|String} number number to operate on\n * @param {Number} fractionDigits number of fraction digits to \"leave\"\n * @return {Number}\n */\n toFixed: function(number, fractionDigits) {\n return parseFloat(Number(number).toFixed(fractionDigits));\n },\n\n /**\n * Converts from attribute value to pixel value if applicable.\n * Returns converted pixels or original value not converted.\n * @param {Number|String} value number to operate on\n * @param {Number} fontSize\n * @return {Number|String}\n */\n parseUnit: function(value, fontSize) {\n var unit = /\\D{0,2}$/.exec(value),\n number = parseFloat(value);\n if (!fontSize) {\n fontSize = fabric.Text.DEFAULT_SVG_FONT_SIZE;\n }\n switch (unit[0]) {\n case 'mm':\n return number * fabric.DPI / 25.4;\n\n case 'cm':\n return number * fabric.DPI / 2.54;\n\n case 'in':\n return number * fabric.DPI;\n\n case 'pt':\n return number * fabric.DPI / 72; // or * 4 / 3\n\n case 'pc':\n return number * fabric.DPI / 72 * 12; // or * 16\n\n case 'em':\n return number * fontSize;\n\n default:\n return number;\n }\n },\n\n /**\n * Function which always returns `false`.\n * @static\n * @memberOf fabric.util\n * @return {Boolean}\n */\n falseFunction: function() {\n return false;\n },\n\n /**\n * Returns klass \"Class\" object of given namespace\n * @memberOf fabric.util\n * @param {String} type Type of object (eg. 'circle')\n * @param {String} namespace Namespace to get klass \"Class\" object from\n * @return {Object} klass \"Class\"\n */\n getKlass: function(type, namespace) {\n // capitalize first letter only\n type = fabric.util.string.camelize(type.charAt(0).toUpperCase() + type.slice(1));\n return fabric.util.resolveNamespace(namespace)[type];\n },\n\n /**\n * Returns array of attributes for given svg that fabric parses\n * @memberOf fabric.util\n * @param {String} type Type of svg element (eg. 'circle')\n * @return {Array} string names of supported attributes\n */\n getSvgAttributes: function(type) {\n var attributes = [\n 'instantiated_by_use',\n 'style',\n 'id',\n 'class'\n ];\n switch (type) {\n case 'linearGradient':\n attributes = attributes.concat(['x1', 'y1', 'x2', 'y2', 'gradientUnits', 'gradientTransform']);\n break;\n case 'radialGradient':\n attributes = attributes.concat(['gradientUnits', 'gradientTransform', 'cx', 'cy', 'r', 'fx', 'fy', 'fr']);\n break;\n case 'stop':\n attributes = attributes.concat(['offset', 'stop-color', 'stop-opacity']);\n break;\n }\n return attributes;\n },\n\n /**\n * Returns object of given namespace\n * @memberOf fabric.util\n * @param {String} namespace Namespace string e.g. 'fabric.Image.filter' or 'fabric'\n * @return {Object} Object for given namespace (default fabric)\n */\n resolveNamespace: function(namespace) {\n if (!namespace) {\n return fabric;\n }\n\n var parts = namespace.split('.'),\n len = parts.length, i,\n obj = global || fabric.window;\n\n for (i = 0; i < len; ++i) {\n obj = obj[parts[i]];\n }\n\n return obj;\n },\n\n /**\n * Loads image element from given url and passes it to a callback\n * @memberOf fabric.util\n * @param {String} url URL representing an image\n * @param {Function} callback Callback; invoked with loaded image\n * @param {*} [context] Context to invoke callback in\n * @param {Object} [crossOrigin] crossOrigin value to set image element to\n */\n loadImage: function(url, callback, context, crossOrigin) {\n if (!url) {\n callback && callback.call(context, url);\n return;\n }\n\n var img = fabric.util.createImage();\n\n /** @ignore */\n var onLoadCallback = function () {\n callback && callback.call(context, img, false);\n img = img.onload = img.onerror = null;\n };\n\n img.onload = onLoadCallback;\n /** @ignore */\n img.onerror = function() {\n fabric.log('Error loading ' + img.src);\n callback && callback.call(context, null, true);\n img = img.onload = img.onerror = null;\n };\n\n // data-urls appear to be buggy with crossOrigin\n // https://github.com/kangax/fabric.js/commit/d0abb90f1cd5c5ef9d2a94d3fb21a22330da3e0a#commitcomment-4513767\n // see https://code.google.com/p/chromium/issues/detail?id=315152\n // https://bugzilla.mozilla.org/show_bug.cgi?id=935069\n // crossOrigin null is the same as not set.\n if (url.indexOf('data') !== 0 &&\n crossOrigin !== undefined &&\n crossOrigin !== null) {\n img.crossOrigin = crossOrigin;\n }\n\n // IE10 / IE11-Fix: SVG contents from data: URI\n // will only be available if the IMG is present\n // in the DOM (and visible)\n if (url.substring(0,14) === 'data:image/svg') {\n img.onload = null;\n fabric.util.loadImageInDom(img, onLoadCallback);\n }\n\n img.src = url;\n },\n\n /**\n * Attaches SVG image with data: URL to the dom\n * @memberOf fabric.util\n * @param {Object} img Image object with data:image/svg src\n * @param {Function} callback Callback; invoked with loaded image\n * @return {Object} DOM element (div containing the SVG image)\n */\n loadImageInDom: function(img, onLoadCallback) {\n var div = fabric.document.createElement('div');\n div.style.width = div.style.height = '1px';\n div.style.left = div.style.top = '-100%';\n div.style.position = 'absolute';\n div.appendChild(img);\n fabric.document.querySelector('body').appendChild(div);\n /**\n * Wrap in function to:\n * 1. Call existing callback\n * 2. Cleanup DOM\n */\n img.onload = function () {\n onLoadCallback();\n div.parentNode.removeChild(div);\n div = null;\n };\n },\n\n /**\n * Creates corresponding fabric instances from their object representations\n * @static\n * @memberOf fabric.util\n * @param {Array} objects Objects to enliven\n * @param {Function} callback Callback to invoke when all objects are created\n * @param {String} namespace Namespace to get klass \"Class\" object from\n * @param {Function} reviver Method for further parsing of object elements,\n * called after each fabric object created.\n */\n enlivenObjects: function(objects, callback, namespace, reviver) {\n objects = objects || [];\n\n var enlivenedObjects = [],\n numLoadedObjects = 0,\n numTotalObjects = objects.length;\n\n function onLoaded() {\n if (++numLoadedObjects === numTotalObjects) {\n callback && callback(enlivenedObjects.filter(function(obj) {\n // filter out undefined objects (objects that gave error)\n return obj;\n }));\n }\n }\n\n if (!numTotalObjects) {\n callback && callback(enlivenedObjects);\n return;\n }\n\n objects.forEach(function (o, index) {\n // if sparse array\n if (!o || !o.type) {\n onLoaded();\n return;\n }\n var klass = fabric.util.getKlass(o.type, namespace);\n klass.fromObject(o, function (obj, error) {\n error || (enlivenedObjects[index] = obj);\n reviver && reviver(o, obj, error);\n onLoaded();\n });\n });\n },\n\n /**\n * Creates corresponding fabric instances residing in an object, e.g. `clipPath`\n * @see {@link fabric.Object.ENLIVEN_PROPS}\n * @param {Object} object\n * @param {Object} [context] assign enlived props to this object (pass null to skip this)\n * @param {(objects:fabric.Object[]) => void} callback\n */\n enlivenObjectEnlivables: function (object, context, callback) {\n var enlivenProps = fabric.Object.ENLIVEN_PROPS.filter(function (key) { return !!object[key]; });\n fabric.util.enlivenObjects(enlivenProps.map(function (key) { return object[key]; }), function (enlivedProps) {\n var objects = {};\n enlivenProps.forEach(function (key, index) {\n objects[key] = enlivedProps[index];\n context && (context[key] = enlivedProps[index]);\n });\n callback && callback(objects);\n });\n },\n\n /**\n * Create and wait for loading of patterns\n * @static\n * @memberOf fabric.util\n * @param {Array} patterns Objects to enliven\n * @param {Function} callback Callback to invoke when all objects are created\n * called after each fabric object created.\n */\n enlivenPatterns: function(patterns, callback) {\n patterns = patterns || [];\n\n function onLoaded() {\n if (++numLoadedPatterns === numPatterns) {\n callback && callback(enlivenedPatterns);\n }\n }\n\n var enlivenedPatterns = [],\n numLoadedPatterns = 0,\n numPatterns = patterns.length;\n\n if (!numPatterns) {\n callback && callback(enlivenedPatterns);\n return;\n }\n\n patterns.forEach(function (p, index) {\n if (p && p.source) {\n new fabric.Pattern(p, function(pattern) {\n enlivenedPatterns[index] = pattern;\n onLoaded();\n });\n }\n else {\n enlivenedPatterns[index] = p;\n onLoaded();\n }\n });\n },\n\n /**\n * Groups SVG elements (usually those retrieved from SVG document)\n * @static\n * @memberOf fabric.util\n * @param {Array} elements SVG elements to group\n * @param {Object} [options] Options object\n * @param {String} path Value to set sourcePath to\n * @return {fabric.Object|fabric.Group}\n */\n groupSVGElements: function(elements, options, path) {\n var object;\n if (elements && elements.length === 1) {\n if (typeof path !== 'undefined') {\n elements[0].sourcePath = path;\n }\n return elements[0];\n }\n if (options) {\n if (options.width && options.height) {\n options.centerPoint = {\n x: options.width / 2,\n y: options.height / 2\n };\n }\n else {\n delete options.width;\n delete options.height;\n }\n }\n object = new fabric.Group(elements, options);\n if (typeof path !== 'undefined') {\n object.sourcePath = path;\n }\n return object;\n },\n\n /**\n * Populates an object with properties of another object\n * @static\n * @memberOf fabric.util\n * @param {Object} source Source object\n * @param {Object} destination Destination object\n * @return {Array} properties Properties names to include\n */\n populateWithProperties: function(source, destination, properties) {\n if (properties && Array.isArray(properties)) {\n for (var i = 0, len = properties.length; i < len; i++) {\n if (properties[i] in source) {\n destination[properties[i]] = source[properties[i]];\n }\n }\n }\n },\n\n /**\n * Creates canvas element\n * @static\n * @memberOf fabric.util\n * @return {CanvasElement} initialized canvas element\n */\n createCanvasElement: function() {\n return fabric.document.createElement('canvas');\n },\n\n /**\n * Creates a canvas element that is a copy of another and is also painted\n * @param {CanvasElement} canvas to copy size and content of\n * @static\n * @memberOf fabric.util\n * @return {CanvasElement} initialized canvas element\n */\n copyCanvasElement: function(canvas) {\n var newCanvas = fabric.util.createCanvasElement();\n newCanvas.width = canvas.width;\n newCanvas.height = canvas.height;\n newCanvas.getContext('2d').drawImage(canvas, 0, 0);\n return newCanvas;\n },\n\n /**\n * since 2.6.0 moved from canvas instance to utility.\n * @param {CanvasElement} canvasEl to copy size and content of\n * @param {String} format 'jpeg' or 'png', in some browsers 'webp' is ok too\n * @param {Number} quality <= 1 and > 0\n * @static\n * @memberOf fabric.util\n * @return {String} data url\n */\n toDataURL: function(canvasEl, format, quality) {\n return canvasEl.toDataURL('image/' + format, quality);\n },\n\n /**\n * Creates image element (works on client and node)\n * @static\n * @memberOf fabric.util\n * @return {HTMLImageElement} HTML image element\n */\n createImage: function() {\n return fabric.document.createElement('img');\n },\n\n /**\n * Multiply matrix A by matrix B to nest transformations\n * @static\n * @memberOf fabric.util\n * @param {Array} a First transformMatrix\n * @param {Array} b Second transformMatrix\n * @param {Boolean} is2x2 flag to multiply matrices as 2x2 matrices\n * @return {Array} The product of the two transform matrices\n */\n multiplyTransformMatrices: function(a, b, is2x2) {\n // Matrix multiply a * b\n return [\n a[0] * b[0] + a[2] * b[1],\n a[1] * b[0] + a[3] * b[1],\n a[0] * b[2] + a[2] * b[3],\n a[1] * b[2] + a[3] * b[3],\n is2x2 ? 0 : a[0] * b[4] + a[2] * b[5] + a[4],\n is2x2 ? 0 : a[1] * b[4] + a[3] * b[5] + a[5]\n ];\n },\n\n /**\n * Decomposes standard 2x3 matrix into transform components\n * @static\n * @memberOf fabric.util\n * @param {Array} a transformMatrix\n * @return {Object} Components of transform\n */\n qrDecompose: function(a) {\n var angle = atan2(a[1], a[0]),\n denom = pow(a[0], 2) + pow(a[1], 2),\n scaleX = sqrt(denom),\n scaleY = (a[0] * a[3] - a[2] * a[1]) / scaleX,\n skewX = atan2(a[0] * a[2] + a[1] * a [3], denom);\n return {\n angle: angle / PiBy180,\n scaleX: scaleX,\n scaleY: scaleY,\n skewX: skewX / PiBy180,\n skewY: 0,\n translateX: a[4],\n translateY: a[5]\n };\n },\n\n /**\n * Returns a transform matrix starting from an object of the same kind of\n * the one returned from qrDecompose, useful also if you want to calculate some\n * transformations from an object that is not enlived yet\n * @static\n * @memberOf fabric.util\n * @param {Object} options\n * @param {Number} [options.angle] angle in degrees\n * @return {Number[]} transform matrix\n */\n calcRotateMatrix: function(options) {\n if (!options.angle) {\n return fabric.iMatrix.concat();\n }\n var theta = fabric.util.degreesToRadians(options.angle),\n cos = fabric.util.cos(theta),\n sin = fabric.util.sin(theta);\n return [cos, sin, -sin, cos, 0, 0];\n },\n\n /**\n * Returns a transform matrix starting from an object of the same kind of\n * the one returned from qrDecompose, useful also if you want to calculate some\n * transformations from an object that is not enlived yet.\n * is called DimensionsTransformMatrix because those properties are the one that influence\n * the size of the resulting box of the object.\n * @static\n * @memberOf fabric.util\n * @param {Object} options\n * @param {Number} [options.scaleX]\n * @param {Number} [options.scaleY]\n * @param {Boolean} [options.flipX]\n * @param {Boolean} [options.flipY]\n * @param {Number} [options.skewX]\n * @param {Number} [options.skewY]\n * @return {Number[]} transform matrix\n */\n calcDimensionsMatrix: function(options) {\n var scaleX = typeof options.scaleX === 'undefined' ? 1 : options.scaleX,\n scaleY = typeof options.scaleY === 'undefined' ? 1 : options.scaleY,\n scaleMatrix = [\n options.flipX ? -scaleX : scaleX,\n 0,\n 0,\n options.flipY ? -scaleY : scaleY,\n 0,\n 0],\n multiply = fabric.util.multiplyTransformMatrices,\n degreesToRadians = fabric.util.degreesToRadians;\n if (options.skewX) {\n scaleMatrix = multiply(\n scaleMatrix,\n [1, 0, Math.tan(degreesToRadians(options.skewX)), 1],\n true);\n }\n if (options.skewY) {\n scaleMatrix = multiply(\n scaleMatrix,\n [1, Math.tan(degreesToRadians(options.skewY)), 0, 1],\n true);\n }\n return scaleMatrix;\n },\n\n /**\n * Returns a transform matrix starting from an object of the same kind of\n * the one returned from qrDecompose, useful also if you want to calculate some\n * transformations from an object that is not enlived yet\n * @static\n * @memberOf fabric.util\n * @param {Object} options\n * @param {Number} [options.angle]\n * @param {Number} [options.scaleX]\n * @param {Number} [options.scaleY]\n * @param {Boolean} [options.flipX]\n * @param {Boolean} [options.flipY]\n * @param {Number} [options.skewX]\n * @param {Number} [options.skewX]\n * @param {Number} [options.translateX]\n * @param {Number} [options.translateY]\n * @return {Number[]} transform matrix\n */\n composeMatrix: function(options) {\n var matrix = [1, 0, 0, 1, options.translateX || 0, options.translateY || 0],\n multiply = fabric.util.multiplyTransformMatrices;\n if (options.angle) {\n matrix = multiply(matrix, fabric.util.calcRotateMatrix(options));\n }\n if (options.scaleX !== 1 || options.scaleY !== 1 ||\n options.skewX || options.skewY || options.flipX || options.flipY) {\n matrix = multiply(matrix, fabric.util.calcDimensionsMatrix(options));\n }\n return matrix;\n },\n\n /**\n * reset an object transform state to neutral. Top and left are not accounted for\n * @static\n * @memberOf fabric.util\n * @param {fabric.Object} target object to transform\n */\n resetObjectTransform: function (target) {\n target.scaleX = 1;\n target.scaleY = 1;\n target.skewX = 0;\n target.skewY = 0;\n target.flipX = false;\n target.flipY = false;\n target.rotate(0);\n },\n\n /**\n * Extract Object transform values\n * @static\n * @memberOf fabric.util\n * @param {fabric.Object} target object to read from\n * @return {Object} Components of transform\n */\n saveObjectTransform: function (target) {\n return {\n scaleX: target.scaleX,\n scaleY: target.scaleY,\n skewX: target.skewX,\n skewY: target.skewY,\n angle: target.angle,\n left: target.left,\n flipX: target.flipX,\n flipY: target.flipY,\n top: target.top\n };\n },\n\n /**\n * Returns true if context has transparent pixel\n * at specified location (taking tolerance into account)\n * @param {CanvasRenderingContext2D} ctx context\n * @param {Number} x x coordinate\n * @param {Number} y y coordinate\n * @param {Number} tolerance Tolerance\n */\n isTransparent: function(ctx, x, y, tolerance) {\n\n // If tolerance is > 0 adjust start coords to take into account.\n // If moves off Canvas fix to 0\n if (tolerance > 0) {\n if (x > tolerance) {\n x -= tolerance;\n }\n else {\n x = 0;\n }\n if (y > tolerance) {\n y -= tolerance;\n }\n else {\n y = 0;\n }\n }\n\n var _isTransparent = true, i, temp,\n imageData = ctx.getImageData(x, y, (tolerance * 2) || 1, (tolerance * 2) || 1),\n l = imageData.data.length;\n\n // Split image data - for tolerance > 1, pixelDataSize = 4;\n for (i = 3; i < l; i += 4) {\n temp = imageData.data[i];\n _isTransparent = temp <= 0;\n if (_isTransparent === false) {\n break; // Stop if colour found\n }\n }\n\n imageData = null;\n\n return _isTransparent;\n },\n\n /**\n * Parse preserveAspectRatio attribute from element\n * @param {string} attribute to be parsed\n * @return {Object} an object containing align and meetOrSlice attribute\n */\n parsePreserveAspectRatioAttribute: function(attribute) {\n var meetOrSlice = 'meet', alignX = 'Mid', alignY = 'Mid',\n aspectRatioAttrs = attribute.split(' '), align;\n\n if (aspectRatioAttrs && aspectRatioAttrs.length) {\n meetOrSlice = aspectRatioAttrs.pop();\n if (meetOrSlice !== 'meet' && meetOrSlice !== 'slice') {\n align = meetOrSlice;\n meetOrSlice = 'meet';\n }\n else if (aspectRatioAttrs.length) {\n align = aspectRatioAttrs.pop();\n }\n }\n //divide align in alignX and alignY\n alignX = align !== 'none' ? align.slice(1, 4) : 'none';\n alignY = align !== 'none' ? align.slice(5, 8) : 'none';\n return {\n meetOrSlice: meetOrSlice,\n alignX: alignX,\n alignY: alignY\n };\n },\n\n /**\n * Clear char widths cache for the given font family or all the cache if no\n * fontFamily is specified.\n * Use it if you know you are loading fonts in a lazy way and you are not waiting\n * for custom fonts to load properly when adding text objects to the canvas.\n * If a text object is added when its own font is not loaded yet, you will get wrong\n * measurement and so wrong bounding boxes.\n * After the font cache is cleared, either change the textObject text content or call\n * initDimensions() to trigger a recalculation\n * @memberOf fabric.util\n * @param {String} [fontFamily] font family to clear\n */\n clearFabricFontCache: function(fontFamily) {\n fontFamily = (fontFamily || '').toLowerCase();\n if (!fontFamily) {\n fabric.charWidthsCache = { };\n }\n else if (fabric.charWidthsCache[fontFamily]) {\n delete fabric.charWidthsCache[fontFamily];\n }\n },\n\n /**\n * Given current aspect ratio, determines the max width and height that can\n * respect the total allowed area for the cache.\n * @memberOf fabric.util\n * @param {Number} ar aspect ratio\n * @param {Number} maximumArea Maximum area you want to achieve\n * @return {Object.x} Limited dimensions by X\n * @return {Object.y} Limited dimensions by Y\n */\n limitDimsByArea: function(ar, maximumArea) {\n var roughWidth = Math.sqrt(maximumArea * ar),\n perfLimitSizeY = Math.floor(maximumArea / roughWidth);\n return { x: Math.floor(roughWidth), y: perfLimitSizeY };\n },\n\n capValue: function(min, value, max) {\n return Math.max(min, Math.min(value, max));\n },\n\n /**\n * Finds the scale for the object source to fit inside the object destination,\n * keeping aspect ratio intact.\n * respect the total allowed area for the cache.\n * @memberOf fabric.util\n * @param {Object | fabric.Object} source\n * @param {Number} source.height natural unscaled height of the object\n * @param {Number} source.width natural unscaled width of the object\n * @param {Object | fabric.Object} destination\n * @param {Number} destination.height natural unscaled height of the object\n * @param {Number} destination.width natural unscaled width of the object\n * @return {Number} scale factor to apply to source to fit into destination\n */\n findScaleToFit: function(source, destination) {\n return Math.min(destination.width / source.width, destination.height / source.height);\n },\n\n /**\n * Finds the scale for the object source to cover entirely the object destination,\n * keeping aspect ratio intact.\n * respect the total allowed area for the cache.\n * @memberOf fabric.util\n * @param {Object | fabric.Object} source\n * @param {Number} source.height natural unscaled height of the object\n * @param {Number} source.width natural unscaled width of the object\n * @param {Object | fabric.Object} destination\n * @param {Number} destination.height natural unscaled height of the object\n * @param {Number} destination.width natural unscaled width of the object\n * @return {Number} scale factor to apply to source to cover destination\n */\n findScaleToCover: function(source, destination) {\n return Math.max(destination.width / source.width, destination.height / source.height);\n },\n\n /**\n * given an array of 6 number returns something like `\"matrix(...numbers)\"`\n * @memberOf fabric.util\n * @param {Array} transform an array with 6 numbers\n * @return {String} transform matrix for svg\n * @return {Object.y} Limited dimensions by Y\n */\n matrixToSVG: function(transform) {\n return 'matrix(' + transform.map(function(value) {\n return fabric.util.toFixed(value, fabric.Object.NUM_FRACTION_DIGITS);\n }).join(' ') + ')';\n },\n\n /**\n * given an object and a transform, apply the inverse transform to the object,\n * this is equivalent to remove from that object that transformation, so that\n * added in a space with the removed transform, the object will be the same as before.\n * Removing from an object a transform that scale by 2 is like scaling it by 1/2.\n * Removing from an object a transfrom that rotate by 30deg is like rotating by 30deg\n * in the opposite direction.\n * This util is used to add objects inside transformed groups or nested groups.\n * @memberOf fabric.util\n * @param {fabric.Object} object the object you want to transform\n * @param {Array} transform the destination transform\n */\n removeTransformFromObject: function(object, transform) {\n var inverted = fabric.util.invertTransform(transform),\n finalTransform = fabric.util.multiplyTransformMatrices(inverted, object.calcOwnMatrix());\n fabric.util.applyTransformToObject(object, finalTransform);\n },\n\n /**\n * given an object and a transform, apply the transform to the object.\n * this is equivalent to change the space where the object is drawn.\n * Adding to an object a transform that scale by 2 is like scaling it by 2.\n * This is used when removing an object from an active selection for example.\n * @memberOf fabric.util\n * @param {fabric.Object} object the object you want to transform\n * @param {Array} transform the destination transform\n */\n addTransformToObject: function(object, transform) {\n fabric.util.applyTransformToObject(\n object,\n fabric.util.multiplyTransformMatrices(transform, object.calcOwnMatrix())\n );\n },\n\n /**\n * discard an object transform state and apply the one from the matrix.\n * @memberOf fabric.util\n * @param {fabric.Object} object the object you want to transform\n * @param {Array} transform the destination transform\n */\n applyTransformToObject: function(object, transform) {\n var options = fabric.util.qrDecompose(transform),\n center = new fabric.Point(options.translateX, options.translateY);\n object.flipX = false;\n object.flipY = false;\n object.set('scaleX', options.scaleX);\n object.set('scaleY', options.scaleY);\n object.skewX = options.skewX;\n object.skewY = options.skewY;\n object.angle = options.angle;\n object.setPositionByOrigin(center, 'center', 'center');\n },\n\n /**\n * given a width and height, return the size of the bounding box\n * that can contains the box with width/height with applied transform\n * described in options.\n * Use to calculate the boxes around objects for controls.\n * @memberOf fabric.util\n * @param {Number} width\n * @param {Number} height\n * @param {Object} options\n * @param {Number} options.scaleX\n * @param {Number} options.scaleY\n * @param {Number} options.skewX\n * @param {Number} options.skewY\n * @return {Object.x} width of containing\n * @return {Object.y} height of containing\n */\n sizeAfterTransform: function(width, height, options) {\n var dimX = width / 2, dimY = height / 2,\n points = [\n {\n x: -dimX,\n y: -dimY\n },\n {\n x: dimX,\n y: -dimY\n },\n {\n x: -dimX,\n y: dimY\n },\n {\n x: dimX,\n y: dimY\n }],\n transformMatrix = fabric.util.calcDimensionsMatrix(options),\n bbox = fabric.util.makeBoundingBoxFromPoints(points, transformMatrix);\n return {\n x: bbox.width,\n y: bbox.height,\n };\n },\n\n /**\n * Merges 2 clip paths into one visually equal clip path\n *\n * **IMPORTANT**:\\\n * Does **NOT** clone the arguments, clone them proir if necessary.\n *\n * Creates a wrapper (group) that contains one clip path and is clipped by the other so content is kept where both overlap.\n * Use this method if both the clip paths may have nested clip paths of their own, so assigning one to the other's clip path property is not possible.\n *\n * In order to handle the `inverted` property we follow logic described in the following cases:\\\n * **(1)** both clip paths are inverted - the clip paths pass the inverted prop to the wrapper and loose it themselves.\\\n * **(2)** one is inverted and the other isn't - the wrapper shouldn't become inverted and the inverted clip path must clip the non inverted one to produce an identical visual effect.\\\n * **(3)** both clip paths are not inverted - wrapper and clip paths remain unchanged.\n *\n * @memberOf fabric.util\n * @param {fabric.Object} c1\n * @param {fabric.Object} c2\n * @returns {fabric.Object} merged clip path\n */\n mergeClipPaths: function (c1, c2) {\n var a = c1, b = c2;\n if (a.inverted && !b.inverted) {\n // case (2)\n a = c2;\n b = c1;\n }\n // `b` becomes `a`'s clip path so we transform `b` to `a` coordinate plane\n fabric.util.applyTransformToObject(\n b,\n fabric.util.multiplyTransformMatrices(\n fabric.util.invertTransform(a.calcTransformMatrix()),\n b.calcTransformMatrix()\n )\n );\n // assign the `inverted` prop to the wrapping group\n var inverted = a.inverted && b.inverted;\n if (inverted) {\n // case (1)\n a.inverted = b.inverted = false;\n }\n return new fabric.Group([a], { clipPath: b, inverted: inverted });\n },\n\n /**\n * @memberOf fabric.util\n * @param {Object} prevStyle first style to compare\n * @param {Object} thisStyle second style to compare\n * @param {boolean} forTextSpans whether to check overline, underline, and line-through properties\n * @return {boolean} true if the style changed\n */\n hasStyleChanged: function(prevStyle, thisStyle, forTextSpans) {\n forTextSpans = forTextSpans || false;\n return (prevStyle.fill !== thisStyle.fill ||\n prevStyle.stroke !== thisStyle.stroke ||\n prevStyle.strokeWidth !== thisStyle.strokeWidth ||\n prevStyle.fontSize !== thisStyle.fontSize ||\n prevStyle.fontFamily !== thisStyle.fontFamily ||\n prevStyle.fontWeight !== thisStyle.fontWeight ||\n prevStyle.fontStyle !== thisStyle.fontStyle ||\n prevStyle.deltaY !== thisStyle.deltaY) ||\n (forTextSpans &&\n (prevStyle.overline !== thisStyle.overline ||\n prevStyle.underline !== thisStyle.underline ||\n prevStyle.linethrough !== thisStyle.linethrough));\n },\n\n /**\n * Returns the array form of a text object's inline styles property with styles grouped in ranges\n * rather than per character. This format is less verbose, and is better suited for storage\n * so it is used in serialization (not during runtime).\n * @memberOf fabric.util\n * @param {object} styles per character styles for a text object\n * @param {String} text the text string that the styles are applied to\n * @return {{start: number, end: number, style: object}[]}\n */\n stylesToArray: function(styles, text) {\n // clone style structure to prevent mutation\n var styles = fabric.util.object.clone(styles, true),\n textLines = text.split('\\n'),\n charIndex = -1, prevStyle = {}, stylesArray = [];\n //loop through each textLine\n for (var i = 0; i < textLines.length; i++) {\n if (!styles[i]) {\n //no styles exist for this line, so add the line's length to the charIndex total\n charIndex += textLines[i].length;\n continue;\n }\n //loop through each character of the current line\n for (var c = 0; c < textLines[i].length; c++) {\n charIndex++;\n var thisStyle = styles[i][c];\n //check if style exists for this character\n if (thisStyle) {\n var styleChanged = fabric.util.hasStyleChanged(prevStyle, thisStyle, true);\n if (styleChanged) {\n stylesArray.push({\n start: charIndex,\n end: charIndex + 1,\n style: thisStyle\n });\n }\n else {\n //if style is the same as previous character, increase end index\n stylesArray[stylesArray.length - 1].end++;\n }\n }\n prevStyle = thisStyle || {};\n }\n }\n return stylesArray;\n },\n\n /**\n * Returns the object form of the styles property with styles that are assigned per\n * character rather than grouped by range. This format is more verbose, and is\n * only used during runtime (not for serialization/storage)\n * @memberOf fabric.util\n * @param {Array} styles the serialized form of a text object's styles\n * @param {String} text the text string that the styles are applied to\n * @return {Object}\n */\n stylesFromArray: function(styles, text) {\n if (!Array.isArray(styles)) {\n return styles;\n }\n var textLines = text.split('\\n'),\n charIndex = -1, styleIndex = 0, stylesObject = {};\n //loop through each textLine\n for (var i = 0; i < textLines.length; i++) {\n //loop through each character of the current line\n for (var c = 0; c < textLines[i].length; c++) {\n charIndex++;\n //check if there's a style collection that includes the current character\n if (styles[styleIndex]\n && styles[styleIndex].start <= charIndex\n && charIndex < styles[styleIndex].end) {\n //create object for line index if it doesn't exist\n stylesObject[i] = stylesObject[i] || {};\n //assign a style at this character's index\n stylesObject[i][c] = Object.assign({}, styles[styleIndex].style);\n //if character is at the end of the current style collection, move to the next\n if (charIndex === styles[styleIndex].end - 1) {\n styleIndex++;\n }\n }\n }\n }\n return stylesObject;\n }\n };\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function() {\n var _join = Array.prototype.join,\n commandLengths = {\n m: 2,\n l: 2,\n h: 1,\n v: 1,\n c: 6,\n s: 4,\n q: 4,\n t: 2,\n a: 7\n },\n repeatedCommands = {\n m: 'l',\n M: 'L'\n };\n function segmentToBezier(th2, th3, cosTh, sinTh, rx, ry, cx1, cy1, mT, fromX, fromY) {\n var costh2 = fabric.util.cos(th2),\n sinth2 = fabric.util.sin(th2),\n costh3 = fabric.util.cos(th3),\n sinth3 = fabric.util.sin(th3),\n toX = cosTh * rx * costh3 - sinTh * ry * sinth3 + cx1,\n toY = sinTh * rx * costh3 + cosTh * ry * sinth3 + cy1,\n cp1X = fromX + mT * ( -cosTh * rx * sinth2 - sinTh * ry * costh2),\n cp1Y = fromY + mT * ( -sinTh * rx * sinth2 + cosTh * ry * costh2),\n cp2X = toX + mT * ( cosTh * rx * sinth3 + sinTh * ry * costh3),\n cp2Y = toY + mT * ( sinTh * rx * sinth3 - cosTh * ry * costh3);\n\n return ['C',\n cp1X, cp1Y,\n cp2X, cp2Y,\n toX, toY\n ];\n }\n\n /* Adapted from http://dxr.mozilla.org/mozilla-central/source/content/svg/content/src/nsSVGPathDataParser.cpp\n * by Andrea Bogazzi code is under MPL. if you don't have a copy of the license you can take it here\n * http://mozilla.org/MPL/2.0/\n */\n function arcToSegments(toX, toY, rx, ry, large, sweep, rotateX) {\n var PI = Math.PI, th = rotateX * PI / 180,\n sinTh = fabric.util.sin(th),\n cosTh = fabric.util.cos(th),\n fromX = 0, fromY = 0;\n\n rx = Math.abs(rx);\n ry = Math.abs(ry);\n\n var px = -cosTh * toX * 0.5 - sinTh * toY * 0.5,\n py = -cosTh * toY * 0.5 + sinTh * toX * 0.5,\n rx2 = rx * rx, ry2 = ry * ry, py2 = py * py, px2 = px * px,\n pl = rx2 * ry2 - rx2 * py2 - ry2 * px2,\n root = 0;\n\n if (pl < 0) {\n var s = Math.sqrt(1 - pl / (rx2 * ry2));\n rx *= s;\n ry *= s;\n }\n else {\n root = (large === sweep ? -1.0 : 1.0) *\n Math.sqrt( pl / (rx2 * py2 + ry2 * px2));\n }\n\n var cx = root * rx * py / ry,\n cy = -root * ry * px / rx,\n cx1 = cosTh * cx - sinTh * cy + toX * 0.5,\n cy1 = sinTh * cx + cosTh * cy + toY * 0.5,\n mTheta = calcVectorAngle(1, 0, (px - cx) / rx, (py - cy) / ry),\n dtheta = calcVectorAngle((px - cx) / rx, (py - cy) / ry, (-px - cx) / rx, (-py - cy) / ry);\n\n if (sweep === 0 && dtheta > 0) {\n dtheta -= 2 * PI;\n }\n else if (sweep === 1 && dtheta < 0) {\n dtheta += 2 * PI;\n }\n\n // Convert into cubic bezier segments <= 90deg\n var segments = Math.ceil(Math.abs(dtheta / PI * 2)),\n result = [], mDelta = dtheta / segments,\n mT = 8 / 3 * Math.sin(mDelta / 4) * Math.sin(mDelta / 4) / Math.sin(mDelta / 2),\n th3 = mTheta + mDelta;\n\n for (var i = 0; i < segments; i++) {\n result[i] = segmentToBezier(mTheta, th3, cosTh, sinTh, rx, ry, cx1, cy1, mT, fromX, fromY);\n fromX = result[i][5];\n fromY = result[i][6];\n mTheta = th3;\n th3 += mDelta;\n }\n return result;\n }\n\n /*\n * Private\n */\n function calcVectorAngle(ux, uy, vx, vy) {\n var ta = Math.atan2(uy, ux),\n tb = Math.atan2(vy, vx);\n if (tb >= ta) {\n return tb - ta;\n }\n else {\n return 2 * Math.PI - (ta - tb);\n }\n }\n\n /**\n * Calculate bounding box of a beziercurve\n * @param {Number} x0 starting point\n * @param {Number} y0\n * @param {Number} x1 first control point\n * @param {Number} y1\n * @param {Number} x2 secondo control point\n * @param {Number} y2\n * @param {Number} x3 end of bezier\n * @param {Number} y3\n */\n // taken from http://jsbin.com/ivomiq/56/edit no credits available for that.\n // TODO: can we normalize this with the starting points set at 0 and then translated the bbox?\n function getBoundsOfCurve(x0, y0, x1, y1, x2, y2, x3, y3) {\n var argsString;\n if (fabric.cachesBoundsOfCurve) {\n argsString = _join.call(arguments);\n if (fabric.boundsOfCurveCache[argsString]) {\n return fabric.boundsOfCurveCache[argsString];\n }\n }\n\n var sqrt = Math.sqrt,\n min = Math.min, max = Math.max,\n abs = Math.abs, tvalues = [],\n bounds = [[], []],\n a, b, c, t, t1, t2, b2ac, sqrtb2ac;\n\n b = 6 * x0 - 12 * x1 + 6 * x2;\n a = -3 * x0 + 9 * x1 - 9 * x2 + 3 * x3;\n c = 3 * x1 - 3 * x0;\n\n for (var i = 0; i < 2; ++i) {\n if (i > 0) {\n b = 6 * y0 - 12 * y1 + 6 * y2;\n a = -3 * y0 + 9 * y1 - 9 * y2 + 3 * y3;\n c = 3 * y1 - 3 * y0;\n }\n\n if (abs(a) < 1e-12) {\n if (abs(b) < 1e-12) {\n continue;\n }\n t = -c / b;\n if (0 < t && t < 1) {\n tvalues.push(t);\n }\n continue;\n }\n b2ac = b * b - 4 * c * a;\n if (b2ac < 0) {\n continue;\n }\n sqrtb2ac = sqrt(b2ac);\n t1 = (-b + sqrtb2ac) / (2 * a);\n if (0 < t1 && t1 < 1) {\n tvalues.push(t1);\n }\n t2 = (-b - sqrtb2ac) / (2 * a);\n if (0 < t2 && t2 < 1) {\n tvalues.push(t2);\n }\n }\n\n var x, y, j = tvalues.length, jlen = j, mt;\n while (j--) {\n t = tvalues[j];\n mt = 1 - t;\n x = (mt * mt * mt * x0) + (3 * mt * mt * t * x1) + (3 * mt * t * t * x2) + (t * t * t * x3);\n bounds[0][j] = x;\n\n y = (mt * mt * mt * y0) + (3 * mt * mt * t * y1) + (3 * mt * t * t * y2) + (t * t * t * y3);\n bounds[1][j] = y;\n }\n\n bounds[0][jlen] = x0;\n bounds[1][jlen] = y0;\n bounds[0][jlen + 1] = x3;\n bounds[1][jlen + 1] = y3;\n var result = [\n {\n x: min.apply(null, bounds[0]),\n y: min.apply(null, bounds[1])\n },\n {\n x: max.apply(null, bounds[0]),\n y: max.apply(null, bounds[1])\n }\n ];\n if (fabric.cachesBoundsOfCurve) {\n fabric.boundsOfCurveCache[argsString] = result;\n }\n return result;\n }\n\n /**\n * Converts arc to a bunch of bezier curves\n * @param {Number} fx starting point x\n * @param {Number} fy starting point y\n * @param {Array} coords Arc command\n */\n function fromArcToBeziers(fx, fy, coords) {\n var rx = coords[1],\n ry = coords[2],\n rot = coords[3],\n large = coords[4],\n sweep = coords[5],\n tx = coords[6],\n ty = coords[7],\n segsNorm = arcToSegments(tx - fx, ty - fy, rx, ry, large, sweep, rot);\n\n for (var i = 0, len = segsNorm.length; i < len; i++) {\n segsNorm[i][1] += fx;\n segsNorm[i][2] += fy;\n segsNorm[i][3] += fx;\n segsNorm[i][4] += fy;\n segsNorm[i][5] += fx;\n segsNorm[i][6] += fy;\n }\n return segsNorm;\n };\n\n /**\n * This function take a parsed SVG path and make it simpler for fabricJS logic.\n * simplification consist of: only UPPERCASE absolute commands ( relative converted to absolute )\n * S converted in C, T converted in Q, A converted in C.\n * @param {Array} path the array of commands of a parsed svg path for fabric.Path\n * @return {Array} the simplified array of commands of a parsed svg path for fabric.Path\n */\n function makePathSimpler(path) {\n // x and y represent the last point of the path. the previous command point.\n // we add them to each relative command to make it an absolute comment.\n // we also swap the v V h H with L, because are easier to transform.\n var x = 0, y = 0, len = path.length,\n // x1 and y1 represent the last point of the subpath. the subpath is started with\n // m or M command. When a z or Z command is drawn, x and y need to be resetted to\n // the last x1 and y1.\n x1 = 0, y1 = 0, current, i, converted,\n // previous will host the letter of the previous command, to handle S and T.\n // controlX and controlY will host the previous reflected control point\n destinationPath = [], previous, controlX, controlY;\n for (i = 0; i < len; ++i) {\n converted = false;\n current = path[i].slice(0);\n switch (current[0]) { // first letter\n case 'l': // lineto, relative\n current[0] = 'L';\n current[1] += x;\n current[2] += y;\n // falls through\n case 'L':\n x = current[1];\n y = current[2];\n break;\n case 'h': // horizontal lineto, relative\n current[1] += x;\n // falls through\n case 'H':\n current[0] = 'L';\n current[2] = y;\n x = current[1];\n break;\n case 'v': // vertical lineto, relative\n current[1] += y;\n // falls through\n case 'V':\n current[0] = 'L';\n y = current[1];\n current[1] = x;\n current[2] = y;\n break;\n case 'm': // moveTo, relative\n current[0] = 'M';\n current[1] += x;\n current[2] += y;\n // falls through\n case 'M':\n x = current[1];\n y = current[2];\n x1 = current[1];\n y1 = current[2];\n break;\n case 'c': // bezierCurveTo, relative\n current[0] = 'C';\n current[1] += x;\n current[2] += y;\n current[3] += x;\n current[4] += y;\n current[5] += x;\n current[6] += y;\n // falls through\n case 'C':\n controlX = current[3];\n controlY = current[4];\n x = current[5];\n y = current[6];\n break;\n case 's': // shorthand cubic bezierCurveTo, relative\n current[0] = 'S';\n current[1] += x;\n current[2] += y;\n current[3] += x;\n current[4] += y;\n // falls through\n case 'S':\n // would be sScC but since we are swapping sSc for C, we check just that.\n if (previous === 'C') {\n // calculate reflection of previous control points\n controlX = 2 * x - controlX;\n controlY = 2 * y - controlY;\n }\n else {\n // If there is no previous command or if the previous command was not a C, c, S, or s,\n // the control point is coincident with the current point\n controlX = x;\n controlY = y;\n }\n x = current[3];\n y = current[4];\n current[0] = 'C';\n current[5] = current[3];\n current[6] = current[4];\n current[3] = current[1];\n current[4] = current[2];\n current[1] = controlX;\n current[2] = controlY;\n // current[3] and current[4] are NOW the second control point.\n // we keep it for the next reflection.\n controlX = current[3];\n controlY = current[4];\n break;\n case 'q': // quadraticCurveTo, relative\n current[0] = 'Q';\n current[1] += x;\n current[2] += y;\n current[3] += x;\n current[4] += y;\n // falls through\n case 'Q':\n controlX = current[1];\n controlY = current[2];\n x = current[3];\n y = current[4];\n break;\n case 't': // shorthand quadraticCurveTo, relative\n current[0] = 'T';\n current[1] += x;\n current[2] += y;\n // falls through\n case 'T':\n if (previous === 'Q') {\n // calculate reflection of previous control point\n controlX = 2 * x - controlX;\n controlY = 2 * y - controlY;\n }\n else {\n // If there is no previous command or if the previous command was not a Q, q, T or t,\n // assume the control point is coincident with the current point\n controlX = x;\n controlY = y;\n }\n current[0] = 'Q';\n x = current[1];\n y = current[2];\n current[1] = controlX;\n current[2] = controlY;\n current[3] = x;\n current[4] = y;\n break;\n case 'a':\n current[0] = 'A';\n current[6] += x;\n current[7] += y;\n // falls through\n case 'A':\n converted = true;\n destinationPath = destinationPath.concat(fromArcToBeziers(x, y, current));\n x = current[6];\n y = current[7];\n break;\n case 'z':\n case 'Z':\n x = x1;\n y = y1;\n break;\n default:\n }\n if (!converted) {\n destinationPath.push(current);\n }\n previous = current[0];\n }\n return destinationPath;\n };\n\n /**\n * Calc length from point x1,y1 to x2,y2\n * @param {Number} x1 starting point x\n * @param {Number} y1 starting point y\n * @param {Number} x2 starting point x\n * @param {Number} y2 starting point y\n * @return {Number} length of segment\n */\n function calcLineLength(x1, y1, x2, y2) {\n return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));\n }\n\n // functions for the Cubic beizer\n // taken from: https://github.com/konvajs/konva/blob/7.0.5/src/shapes/Path.ts#L350\n function CB1(t) {\n return t * t * t;\n }\n function CB2(t) {\n return 3 * t * t * (1 - t);\n }\n function CB3(t) {\n return 3 * t * (1 - t) * (1 - t);\n }\n function CB4(t) {\n return (1 - t) * (1 - t) * (1 - t);\n }\n\n function getPointOnCubicBezierIterator(p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y) {\n return function(pct) {\n var c1 = CB1(pct), c2 = CB2(pct), c3 = CB3(pct), c4 = CB4(pct);\n return {\n x: p4x * c1 + p3x * c2 + p2x * c3 + p1x * c4,\n y: p4y * c1 + p3y * c2 + p2y * c3 + p1y * c4\n };\n };\n }\n\n function getTangentCubicIterator(p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y) {\n return function (pct) {\n var invT = 1 - pct,\n tangentX = (3 * invT * invT * (p2x - p1x)) + (6 * invT * pct * (p3x - p2x)) +\n (3 * pct * pct * (p4x - p3x)),\n tangentY = (3 * invT * invT * (p2y - p1y)) + (6 * invT * pct * (p3y - p2y)) +\n (3 * pct * pct * (p4y - p3y));\n return Math.atan2(tangentY, tangentX);\n };\n }\n\n function QB1(t) {\n return t * t;\n }\n\n function QB2(t) {\n return 2 * t * (1 - t);\n }\n\n function QB3(t) {\n return (1 - t) * (1 - t);\n }\n\n function getPointOnQuadraticBezierIterator(p1x, p1y, p2x, p2y, p3x, p3y) {\n return function(pct) {\n var c1 = QB1(pct), c2 = QB2(pct), c3 = QB3(pct);\n return {\n x: p3x * c1 + p2x * c2 + p1x * c3,\n y: p3y * c1 + p2y * c2 + p1y * c3\n };\n };\n }\n\n function getTangentQuadraticIterator(p1x, p1y, p2x, p2y, p3x, p3y) {\n return function (pct) {\n var invT = 1 - pct,\n tangentX = (2 * invT * (p2x - p1x)) + (2 * pct * (p3x - p2x)),\n tangentY = (2 * invT * (p2y - p1y)) + (2 * pct * (p3y - p2y));\n return Math.atan2(tangentY, tangentX);\n };\n }\n\n\n // this will run over a path segment ( a cubic or quadratic segment) and approximate it\n // with 100 segemnts. This will good enough to calculate the length of the curve\n function pathIterator(iterator, x1, y1) {\n var tempP = { x: x1, y: y1 }, p, tmpLen = 0, perc;\n for (perc = 1; perc <= 100; perc += 1) {\n p = iterator(perc / 100);\n tmpLen += calcLineLength(tempP.x, tempP.y, p.x, p.y);\n tempP = p;\n }\n return tmpLen;\n }\n\n /**\n * Given a pathInfo, and a distance in pixels, find the percentage from 0 to 1\n * that correspond to that pixels run over the path.\n * The percentage will be then used to find the correct point on the canvas for the path.\n * @param {Array} segInfo fabricJS collection of information on a parsed path\n * @param {Number} distance from starting point, in pixels.\n * @return {Object} info object with x and y ( the point on canvas ) and angle, the tangent on that point;\n */\n function findPercentageForDistance(segInfo, distance) {\n var perc = 0, tmpLen = 0, iterator = segInfo.iterator, tempP = { x: segInfo.x, y: segInfo.y },\n p, nextLen, nextStep = 0.01, angleFinder = segInfo.angleFinder, lastPerc;\n // nextStep > 0.0001 covers 0.00015625 that 1/64th of 1/100\n // the path\n while (tmpLen < distance && nextStep > 0.0001) {\n p = iterator(perc);\n lastPerc = perc;\n nextLen = calcLineLength(tempP.x, tempP.y, p.x, p.y);\n // compare tmpLen each cycle with distance, decide next perc to test.\n if ((nextLen + tmpLen) > distance) {\n // we discard this step and we make smaller steps.\n perc -= nextStep;\n nextStep /= 2;\n }\n else {\n tempP = p;\n perc += nextStep;\n tmpLen += nextLen;\n }\n }\n p.angle = angleFinder(lastPerc);\n return p;\n }\n\n /**\n * Run over a parsed and simplifed path and extrac some informations.\n * informations are length of each command and starting point\n * @param {Array} path fabricJS parsed path commands\n * @return {Array} path commands informations\n */\n function getPathSegmentsInfo(path) {\n var totalLength = 0, len = path.length, current,\n //x2 and y2 are the coords of segment start\n //x1 and y1 are the coords of the current point\n x1 = 0, y1 = 0, x2 = 0, y2 = 0, info = [], iterator, tempInfo, angleFinder;\n for (var i = 0; i < len; i++) {\n current = path[i];\n tempInfo = {\n x: x1,\n y: y1,\n command: current[0],\n };\n switch (current[0]) { //first letter\n case 'M':\n tempInfo.length = 0;\n x2 = x1 = current[1];\n y2 = y1 = current[2];\n break;\n case 'L':\n tempInfo.length = calcLineLength(x1, y1, current[1], current[2]);\n x1 = current[1];\n y1 = current[2];\n break;\n case 'C':\n iterator = getPointOnCubicBezierIterator(\n x1,\n y1,\n current[1],\n current[2],\n current[3],\n current[4],\n current[5],\n current[6]\n );\n angleFinder = getTangentCubicIterator(\n x1,\n y1,\n current[1],\n current[2],\n current[3],\n current[4],\n current[5],\n current[6]\n );\n tempInfo.iterator = iterator;\n tempInfo.angleFinder = angleFinder;\n tempInfo.length = pathIterator(iterator, x1, y1);\n x1 = current[5];\n y1 = current[6];\n break;\n case 'Q':\n iterator = getPointOnQuadraticBezierIterator(\n x1,\n y1,\n current[1],\n current[2],\n current[3],\n current[4]\n );\n angleFinder = getTangentQuadraticIterator(\n x1,\n y1,\n current[1],\n current[2],\n current[3],\n current[4]\n );\n tempInfo.iterator = iterator;\n tempInfo.angleFinder = angleFinder;\n tempInfo.length = pathIterator(iterator, x1, y1);\n x1 = current[3];\n y1 = current[4];\n break;\n case 'Z':\n case 'z':\n // we add those in order to ease calculations later\n tempInfo.destX = x2;\n tempInfo.destY = y2;\n tempInfo.length = calcLineLength(x1, y1, x2, y2);\n x1 = x2;\n y1 = y2;\n break;\n }\n totalLength += tempInfo.length;\n info.push(tempInfo);\n }\n info.push({ length: totalLength, x: x1, y: y1 });\n return info;\n }\n\n function getPointOnPath(path, distance, infos) {\n if (!infos) {\n infos = getPathSegmentsInfo(path);\n }\n var i = 0;\n while ((distance - infos[i].length > 0) && i < (infos.length - 2)) {\n distance -= infos[i].length;\n i++;\n }\n // var distance = infos[infos.length - 1] * perc;\n var segInfo = infos[i], segPercent = distance / segInfo.length,\n command = segInfo.command, segment = path[i], info;\n\n switch (command) {\n case 'M':\n return { x: segInfo.x, y: segInfo.y, angle: 0 };\n case 'Z':\n case 'z':\n info = new fabric.Point(segInfo.x, segInfo.y).lerp(\n new fabric.Point(segInfo.destX, segInfo.destY),\n segPercent\n );\n info.angle = Math.atan2(segInfo.destY - segInfo.y, segInfo.destX - segInfo.x);\n return info;\n case 'L':\n info = new fabric.Point(segInfo.x, segInfo.y).lerp(\n new fabric.Point(segment[1], segment[2]),\n segPercent\n );\n info.angle = Math.atan2(segment[2] - segInfo.y, segment[1] - segInfo.x);\n return info;\n case 'C':\n return findPercentageForDistance(segInfo, distance);\n case 'Q':\n return findPercentageForDistance(segInfo, distance);\n }\n }\n\n /**\n *\n * @param {string} pathString\n * @return {(string|number)[][]} An array of SVG path commands\n * @example
Usage
\n * parsePath('M 3 4 Q 3 5 2 1 4 0 Q 9 12 2 1 4 0') === [\n * ['M', 3, 4],\n * ['Q', 3, 5, 2, 1, 4, 0],\n * ['Q', 9, 12, 2, 1, 4, 0],\n * ];\n *\n */\n function parsePath(pathString) {\n var result = [],\n coords = [],\n currentPath,\n parsed,\n re = fabric.rePathCommand,\n rNumber = '[-+]?(?:\\\\d*\\\\.\\\\d+|\\\\d+\\\\.?)(?:[eE][-+]?\\\\d+)?\\\\s*',\n rNumberCommaWsp = '(' + rNumber + ')' + fabric.commaWsp,\n rFlagCommaWsp = '([01])' + fabric.commaWsp + '?',\n rArcSeq = rNumberCommaWsp + '?' + rNumberCommaWsp + '?' + rNumberCommaWsp + rFlagCommaWsp + rFlagCommaWsp +\n rNumberCommaWsp + '?(' + rNumber + ')',\n regArcArgumentSequence = new RegExp(rArcSeq, 'g'),\n match,\n coordsStr,\n // one of commands (m,M,l,L,q,Q,c,C,etc.) followed by non-command characters (i.e. command values)\n path;\n if (!pathString || !pathString.match) {\n return result;\n }\n path = pathString.match(/[mzlhvcsqta][^mzlhvcsqta]*/gi);\n\n for (var i = 0, coordsParsed, len = path.length; i < len; i++) {\n currentPath = path[i];\n\n coordsStr = currentPath.slice(1).trim();\n coords.length = 0;\n\n var command = currentPath.charAt(0);\n coordsParsed = [command];\n\n if (command.toLowerCase() === 'a') {\n // arcs have special flags that apparently don't require spaces so handle special\n for (var args; (args = regArcArgumentSequence.exec(coordsStr));) {\n for (var j = 1; j < args.length; j++) {\n coords.push(args[j]);\n }\n }\n }\n else {\n while ((match = re.exec(coordsStr))) {\n coords.push(match[0]);\n }\n }\n\n for (var j = 0, jlen = coords.length; j < jlen; j++) {\n parsed = parseFloat(coords[j]);\n if (!isNaN(parsed)) {\n coordsParsed.push(parsed);\n }\n }\n\n var commandLength = commandLengths[command.toLowerCase()],\n repeatedCommand = repeatedCommands[command] || command;\n\n if (coordsParsed.length - 1 > commandLength) {\n for (var k = 1, klen = coordsParsed.length; k < klen; k += commandLength) {\n result.push([command].concat(coordsParsed.slice(k, k + commandLength)));\n command = repeatedCommand;\n }\n }\n else {\n result.push(coordsParsed);\n }\n }\n\n return result;\n };\n\n /**\n *\n * Converts points to a smooth SVG path\n * @param {{ x: number,y: number }[]} points Array of points\n * @param {number} [correction] Apply a correction to the path (usually we use `width / 1000`). If value is undefined 0 is used as the correction value.\n * @return {(string|number)[][]} An array of SVG path commands\n */\n function getSmoothPathFromPoints(points, correction) {\n var path = [], i,\n p1 = new fabric.Point(points[0].x, points[0].y),\n p2 = new fabric.Point(points[1].x, points[1].y),\n len = points.length, multSignX = 1, multSignY = 0, manyPoints = len > 2;\n correction = correction || 0;\n\n if (manyPoints) {\n multSignX = points[2].x < p2.x ? -1 : points[2].x === p2.x ? 0 : 1;\n multSignY = points[2].y < p2.y ? -1 : points[2].y === p2.y ? 0 : 1;\n }\n path.push(['M', p1.x - multSignX * correction, p1.y - multSignY * correction]);\n for (i = 1; i < len; i++) {\n if (!p1.eq(p2)) {\n var midPoint = p1.midPointFrom(p2);\n // p1 is our bezier control point\n // midpoint is our endpoint\n // start point is p(i-1) value.\n path.push(['Q', p1.x, p1.y, midPoint.x, midPoint.y]);\n }\n p1 = points[i];\n if ((i + 1) < points.length) {\n p2 = points[i + 1];\n }\n }\n if (manyPoints) {\n multSignX = p1.x > points[i - 2].x ? 1 : p1.x === points[i - 2].x ? 0 : -1;\n multSignY = p1.y > points[i - 2].y ? 1 : p1.y === points[i - 2].y ? 0 : -1;\n }\n path.push(['L', p1.x + multSignX * correction, p1.y + multSignY * correction]);\n return path;\n }\n /**\n * Transform a path by transforming each segment.\n * it has to be a simplified path or it won't work.\n * WARNING: this depends from pathOffset for correct operation\n * @param {Array} path fabricJS parsed and simplified path commands\n * @param {Array} transform matrix that represent the transformation\n * @param {Object} [pathOffset] the fabric.Path pathOffset\n * @param {Number} pathOffset.x\n * @param {Number} pathOffset.y\n * @returns {Array} the transformed path\n */\n function transformPath(path, transform, pathOffset) {\n if (pathOffset) {\n transform = fabric.util.multiplyTransformMatrices(\n transform,\n [1, 0, 0, 1, -pathOffset.x, -pathOffset.y]\n );\n }\n return path.map(function(pathSegment) {\n var newSegment = pathSegment.slice(0), point = {};\n for (var i = 1; i < pathSegment.length - 1; i += 2) {\n point.x = pathSegment[i];\n point.y = pathSegment[i + 1];\n point = fabric.util.transformPoint(point, transform);\n newSegment[i] = point.x;\n newSegment[i + 1] = point.y;\n }\n return newSegment;\n });\n }\n\n /**\n * Join path commands to go back to svg format\n * @param {Array} pathData fabricJS parsed path commands\n * @return {String} joined path 'M 0 0 L 20 30'\n */\n fabric.util.joinPath = function(pathData) {\n return pathData.map(function (segment) { return segment.join(' '); }).join(' ');\n };\n fabric.util.parsePath = parsePath;\n fabric.util.makePathSimpler = makePathSimpler;\n fabric.util.getSmoothPathFromPoints = getSmoothPathFromPoints;\n fabric.util.getPathSegmentsInfo = getPathSegmentsInfo;\n fabric.util.getBoundsOfCurve = getBoundsOfCurve;\n fabric.util.getPointOnPath = getPointOnPath;\n fabric.util.transformPath = transformPath;\n})();\n\n\n(function() {\n\n var slice = Array.prototype.slice;\n\n /**\n * Invokes method on all items in a given array\n * @memberOf fabric.util.array\n * @param {Array} array Array to iterate over\n * @param {String} method Name of a method to invoke\n * @return {Array}\n */\n function invoke(array, method) {\n var args = slice.call(arguments, 2), result = [];\n for (var i = 0, len = array.length; i < len; i++) {\n result[i] = args.length ? array[i][method].apply(array[i], args) : array[i][method].call(array[i]);\n }\n return result;\n }\n\n /**\n * Finds maximum value in array (not necessarily \"first\" one)\n * @memberOf fabric.util.array\n * @param {Array} array Array to iterate over\n * @param {String} byProperty\n * @return {*}\n */\n function max(array, byProperty) {\n return find(array, byProperty, function(value1, value2) {\n return value1 >= value2;\n });\n }\n\n /**\n * Finds minimum value in array (not necessarily \"first\" one)\n * @memberOf fabric.util.array\n * @param {Array} array Array to iterate over\n * @param {String} byProperty\n * @return {*}\n */\n function min(array, byProperty) {\n return find(array, byProperty, function(value1, value2) {\n return value1 < value2;\n });\n }\n\n /**\n * @private\n */\n function fill(array, value) {\n var k = array.length;\n while (k--) {\n array[k] = value;\n }\n return array;\n }\n\n /**\n * @private\n */\n function find(array, byProperty, condition) {\n if (!array || array.length === 0) {\n return;\n }\n\n var i = array.length - 1,\n result = byProperty ? array[i][byProperty] : array[i];\n if (byProperty) {\n while (i--) {\n if (condition(array[i][byProperty], result)) {\n result = array[i][byProperty];\n }\n }\n }\n else {\n while (i--) {\n if (condition(array[i], result)) {\n result = array[i];\n }\n }\n }\n return result;\n }\n\n /**\n * @namespace fabric.util.array\n */\n fabric.util.array = {\n fill: fill,\n invoke: invoke,\n min: min,\n max: max\n };\n\n})();\n\n\n(function() {\n /**\n * Copies all enumerable properties of one js object to another\n * this does not and cannot compete with generic utils.\n * Does not clone or extend fabric.Object subclasses.\n * This is mostly for internal use and has extra handling for fabricJS objects\n * it skips the canvas and group properties in deep cloning.\n * @memberOf fabric.util.object\n * @param {Object} destination Where to copy to\n * @param {Object} source Where to copy from\n * @param {Boolean} [deep] Whether to extend nested objects\n * @return {Object}\n */\n\n function extend(destination, source, deep) {\n // JScript DontEnum bug is not taken care of\n // the deep clone is for internal use, is not meant to avoid\n // javascript traps or cloning html element or self referenced objects.\n if (deep) {\n if (!fabric.isLikelyNode && source instanceof Element) {\n // avoid cloning deep images, canvases,\n destination = source;\n }\n else if (source instanceof Array) {\n destination = [];\n for (var i = 0, len = source.length; i < len; i++) {\n destination[i] = extend({ }, source[i], deep);\n }\n }\n else if (source && typeof source === 'object') {\n for (var property in source) {\n if (property === 'canvas' || property === 'group') {\n // we do not want to clone this props at all.\n // we want to keep the keys in the copy\n destination[property] = null;\n }\n else if (source.hasOwnProperty(property)) {\n destination[property] = extend({ }, source[property], deep);\n }\n }\n }\n else {\n // this sounds odd for an extend but is ok for recursive use\n destination = source;\n }\n }\n else {\n for (var property in source) {\n destination[property] = source[property];\n }\n }\n return destination;\n }\n\n /**\n * Creates an empty object and copies all enumerable properties of another object to it\n * This method is mostly for internal use, and not intended for duplicating shapes in canvas. \n * @memberOf fabric.util.object\n * @param {Object} object Object to clone\n * @param {Boolean} [deep] Whether to clone nested objects\n * @return {Object}\n */\n\n //TODO: this function return an empty object if you try to clone null\n function clone(object, deep) {\n return extend({ }, object, deep);\n }\n\n /** @namespace fabric.util.object */\n fabric.util.object = {\n extend: extend,\n clone: clone\n };\n fabric.util.object.extend(fabric.util, fabric.Observable);\n})();\n\n\n(function() {\n\n /**\n * Camelizes a string\n * @memberOf fabric.util.string\n * @param {String} string String to camelize\n * @return {String} Camelized version of a string\n */\n function camelize(string) {\n return string.replace(/-+(.)?/g, function(match, character) {\n return character ? character.toUpperCase() : '';\n });\n }\n\n /**\n * Capitalizes a string\n * @memberOf fabric.util.string\n * @param {String} string String to capitalize\n * @param {Boolean} [firstLetterOnly] If true only first letter is capitalized\n * and other letters stay untouched, if false first letter is capitalized\n * and other letters are converted to lowercase.\n * @return {String} Capitalized version of a string\n */\n function capitalize(string, firstLetterOnly) {\n return string.charAt(0).toUpperCase() +\n (firstLetterOnly ? string.slice(1) : string.slice(1).toLowerCase());\n }\n\n /**\n * Escapes XML in a string\n * @memberOf fabric.util.string\n * @param {String} string String to escape\n * @return {String} Escaped version of a string\n */\n function escapeXml(string) {\n return string.replace(/&/g, '&')\n .replace(/\"/g, '"')\n .replace(/'/g, ''')\n .replace(//g, '>');\n }\n\n /**\n * Divide a string in the user perceived single units\n * @memberOf fabric.util.string\n * @param {String} textstring String to escape\n * @return {Array} array containing the graphemes\n */\n function graphemeSplit(textstring) {\n var i = 0, chr, graphemes = [];\n for (i = 0, chr; i < textstring.length; i++) {\n if ((chr = getWholeChar(textstring, i)) === false) {\n continue;\n }\n graphemes.push(chr);\n }\n return graphemes;\n }\n\n // taken from mdn in the charAt doc page.\n function getWholeChar(str, i) {\n var code = str.charCodeAt(i);\n\n if (isNaN(code)) {\n return ''; // Position not found\n }\n if (code < 0xD800 || code > 0xDFFF) {\n return str.charAt(i);\n }\n\n // High surrogate (could change last hex to 0xDB7F to treat high private\n // surrogates as single characters)\n if (0xD800 <= code && code <= 0xDBFF) {\n if (str.length <= (i + 1)) {\n throw 'High surrogate without following low surrogate';\n }\n var next = str.charCodeAt(i + 1);\n if (0xDC00 > next || next > 0xDFFF) {\n throw 'High surrogate without following low surrogate';\n }\n return str.charAt(i) + str.charAt(i + 1);\n }\n // Low surrogate (0xDC00 <= code && code <= 0xDFFF)\n if (i === 0) {\n throw 'Low surrogate without preceding high surrogate';\n }\n var prev = str.charCodeAt(i - 1);\n\n // (could change last hex to 0xDB7F to treat high private\n // surrogates as single characters)\n if (0xD800 > prev || prev > 0xDBFF) {\n throw 'Low surrogate without preceding high surrogate';\n }\n // We can pass over low surrogates now as the second component\n // in a pair which we have already processed\n return false;\n }\n\n\n /**\n * String utilities\n * @namespace fabric.util.string\n */\n fabric.util.string = {\n camelize: camelize,\n capitalize: capitalize,\n escapeXml: escapeXml,\n graphemeSplit: graphemeSplit\n };\n})();\n\n\n(function() {\n\n var slice = Array.prototype.slice, emptyFunction = function() { },\n\n IS_DONTENUM_BUGGY = (function() {\n for (var p in { toString: 1 }) {\n if (p === 'toString') {\n return false;\n }\n }\n return true;\n })(),\n\n /** @ignore */\n addMethods = function(klass, source, parent) {\n for (var property in source) {\n\n if (property in klass.prototype &&\n typeof klass.prototype[property] === 'function' &&\n (source[property] + '').indexOf('callSuper') > -1) {\n\n klass.prototype[property] = (function(property) {\n return function() {\n\n var superclass = this.constructor.superclass;\n this.constructor.superclass = parent;\n var returnValue = source[property].apply(this, arguments);\n this.constructor.superclass = superclass;\n\n if (property !== 'initialize') {\n return returnValue;\n }\n };\n })(property);\n }\n else {\n klass.prototype[property] = source[property];\n }\n\n if (IS_DONTENUM_BUGGY) {\n if (source.toString !== Object.prototype.toString) {\n klass.prototype.toString = source.toString;\n }\n if (source.valueOf !== Object.prototype.valueOf) {\n klass.prototype.valueOf = source.valueOf;\n }\n }\n }\n };\n\n function Subclass() { }\n\n function callSuper(methodName) {\n var parentMethod = null,\n _this = this;\n\n // climb prototype chain to find method not equal to callee's method\n while (_this.constructor.superclass) {\n var superClassMethod = _this.constructor.superclass.prototype[methodName];\n if (_this[methodName] !== superClassMethod) {\n parentMethod = superClassMethod;\n break;\n }\n // eslint-disable-next-line\n _this = _this.constructor.superclass.prototype;\n }\n\n if (!parentMethod) {\n return console.log('tried to callSuper ' + methodName + ', method not found in prototype chain', this);\n }\n\n return (arguments.length > 1)\n ? parentMethod.apply(this, slice.call(arguments, 1))\n : parentMethod.call(this);\n }\n\n /**\n * Helper for creation of \"classes\".\n * @memberOf fabric.util\n * @param {Function} [parent] optional \"Class\" to inherit from\n * @param {Object} [properties] Properties shared by all instances of this class\n * (be careful modifying objects defined here as this would affect all instances)\n */\n function createClass() {\n var parent = null,\n properties = slice.call(arguments, 0);\n\n if (typeof properties[0] === 'function') {\n parent = properties.shift();\n }\n function klass() {\n this.initialize.apply(this, arguments);\n }\n\n klass.superclass = parent;\n klass.subclasses = [];\n\n if (parent) {\n Subclass.prototype = parent.prototype;\n klass.prototype = new Subclass();\n parent.subclasses.push(klass);\n }\n for (var i = 0, length = properties.length; i < length; i++) {\n addMethods(klass, properties[i], parent);\n }\n if (!klass.prototype.initialize) {\n klass.prototype.initialize = emptyFunction;\n }\n klass.prototype.constructor = klass;\n klass.prototype.callSuper = callSuper;\n return klass;\n }\n\n fabric.util.createClass = createClass;\n})();\n\n\n(function () {\n // since ie11 can use addEventListener but they do not support options, i need to check\n var couldUseAttachEvent = !!fabric.document.createElement('div').attachEvent,\n touchEvents = ['touchstart', 'touchmove', 'touchend'];\n /**\n * Adds an event listener to an element\n * @function\n * @memberOf fabric.util\n * @param {HTMLElement} element\n * @param {String} eventName\n * @param {Function} handler\n */\n fabric.util.addListener = function(element, eventName, handler, options) {\n element && element.addEventListener(eventName, handler, couldUseAttachEvent ? false : options);\n };\n\n /**\n * Removes an event listener from an element\n * @function\n * @memberOf fabric.util\n * @param {HTMLElement} element\n * @param {String} eventName\n * @param {Function} handler\n */\n fabric.util.removeListener = function(element, eventName, handler, options) {\n element && element.removeEventListener(eventName, handler, couldUseAttachEvent ? false : options);\n };\n\n function getTouchInfo(event) {\n var touchProp = event.changedTouches;\n if (touchProp && touchProp[0]) {\n return touchProp[0];\n }\n return event;\n }\n\n fabric.util.getPointer = function(event) {\n var element = event.target,\n scroll = fabric.util.getScrollLeftTop(element),\n _evt = getTouchInfo(event);\n return {\n x: _evt.clientX + scroll.left,\n y: _evt.clientY + scroll.top\n };\n };\n\n fabric.util.isTouchEvent = function(event) {\n return touchEvents.indexOf(event.type) > -1 || event.pointerType === 'touch';\n };\n})();\n\n\n(function () {\n\n /**\n * Cross-browser wrapper for setting element's style\n * @memberOf fabric.util\n * @param {HTMLElement} element\n * @param {Object} styles\n * @return {HTMLElement} Element that was passed as a first argument\n */\n function setStyle(element, styles) {\n var elementStyle = element.style;\n if (!elementStyle) {\n return element;\n }\n if (typeof styles === 'string') {\n element.style.cssText += ';' + styles;\n return styles.indexOf('opacity') > -1\n ? setOpacity(element, styles.match(/opacity:\\s*(\\d?\\.?\\d*)/)[1])\n : element;\n }\n for (var property in styles) {\n if (property === 'opacity') {\n setOpacity(element, styles[property]);\n }\n else {\n var normalizedProperty = (property === 'float' || property === 'cssFloat')\n ? (typeof elementStyle.styleFloat === 'undefined' ? 'cssFloat' : 'styleFloat')\n : property;\n elementStyle.setProperty(normalizedProperty, styles[property]);\n }\n }\n return element;\n }\n\n var parseEl = fabric.document.createElement('div'),\n supportsOpacity = typeof parseEl.style.opacity === 'string',\n supportsFilters = typeof parseEl.style.filter === 'string',\n reOpacity = /alpha\\s*\\(\\s*opacity\\s*=\\s*([^\\)]+)\\)/,\n\n /** @ignore */\n setOpacity = function (element) { return element; };\n\n if (supportsOpacity) {\n /** @ignore */\n setOpacity = function(element, value) {\n element.style.opacity = value;\n return element;\n };\n }\n else if (supportsFilters) {\n /** @ignore */\n setOpacity = function(element, value) {\n var es = element.style;\n if (element.currentStyle && !element.currentStyle.hasLayout) {\n es.zoom = 1;\n }\n if (reOpacity.test(es.filter)) {\n value = value >= 0.9999 ? '' : ('alpha(opacity=' + (value * 100) + ')');\n es.filter = es.filter.replace(reOpacity, value);\n }\n else {\n es.filter += ' alpha(opacity=' + (value * 100) + ')';\n }\n return element;\n };\n }\n\n fabric.util.setStyle = setStyle;\n\n})();\n\n\n(function() {\n\n var _slice = Array.prototype.slice;\n\n /**\n * Takes id and returns an element with that id (if one exists in a document)\n * @memberOf fabric.util\n * @param {String|HTMLElement} id\n * @return {HTMLElement|null}\n */\n function getById(id) {\n return typeof id === 'string' ? fabric.document.getElementById(id) : id;\n }\n\n var sliceCanConvertNodelists,\n /**\n * Converts an array-like object (e.g. arguments or NodeList) to an array\n * @memberOf fabric.util\n * @param {Object} arrayLike\n * @return {Array}\n */\n toArray = function(arrayLike) {\n return _slice.call(arrayLike, 0);\n };\n\n try {\n sliceCanConvertNodelists = toArray(fabric.document.childNodes) instanceof Array;\n }\n catch (err) { }\n\n if (!sliceCanConvertNodelists) {\n toArray = function(arrayLike) {\n var arr = new Array(arrayLike.length), i = arrayLike.length;\n while (i--) {\n arr[i] = arrayLike[i];\n }\n return arr;\n };\n }\n\n /**\n * Creates specified element with specified attributes\n * @memberOf fabric.util\n * @param {String} tagName Type of an element to create\n * @param {Object} [attributes] Attributes to set on an element\n * @return {HTMLElement} Newly created element\n */\n function makeElement(tagName, attributes) {\n var el = fabric.document.createElement(tagName);\n for (var prop in attributes) {\n if (prop === 'class') {\n el.className = attributes[prop];\n }\n else if (prop === 'for') {\n el.htmlFor = attributes[prop];\n }\n else {\n el.setAttribute(prop, attributes[prop]);\n }\n }\n return el;\n }\n\n /**\n * Adds class to an element\n * @memberOf fabric.util\n * @param {HTMLElement} element Element to add class to\n * @param {String} className Class to add to an element\n */\n function addClass(element, className) {\n if (element && (' ' + element.className + ' ').indexOf(' ' + className + ' ') === -1) {\n element.className += (element.className ? ' ' : '') + className;\n }\n }\n\n /**\n * Wraps element with another element\n * @memberOf fabric.util\n * @param {HTMLElement} element Element to wrap\n * @param {HTMLElement|String} wrapper Element to wrap with\n * @param {Object} [attributes] Attributes to set on a wrapper\n * @return {HTMLElement} wrapper\n */\n function wrapElement(element, wrapper, attributes) {\n if (typeof wrapper === 'string') {\n wrapper = makeElement(wrapper, attributes);\n }\n if (element.parentNode) {\n element.parentNode.replaceChild(wrapper, element);\n }\n wrapper.appendChild(element);\n return wrapper;\n }\n\n /**\n * Returns element scroll offsets\n * @memberOf fabric.util\n * @param {HTMLElement} element Element to operate on\n * @return {Object} Object with left/top values\n */\n function getScrollLeftTop(element) {\n\n var left = 0,\n top = 0,\n docElement = fabric.document.documentElement,\n body = fabric.document.body || {\n scrollLeft: 0, scrollTop: 0\n };\n\n // While loop checks (and then sets element to) .parentNode OR .host\n // to account for ShadowDOM. We still want to traverse up out of ShadowDOM,\n // but the .parentNode of a root ShadowDOM node will always be null, instead\n // it should be accessed through .host. See http://stackoverflow.com/a/24765528/4383938\n while (element && (element.parentNode || element.host)) {\n\n // Set element to element parent, or 'host' in case of ShadowDOM\n element = element.parentNode || element.host;\n\n if (element === fabric.document) {\n left = body.scrollLeft || docElement.scrollLeft || 0;\n top = body.scrollTop || docElement.scrollTop || 0;\n }\n else {\n left += element.scrollLeft || 0;\n top += element.scrollTop || 0;\n }\n\n if (element.nodeType === 1 && element.style.position === 'fixed') {\n break;\n }\n }\n\n return { left: left, top: top };\n }\n\n /**\n * Returns offset for a given element\n * @function\n * @memberOf fabric.util\n * @param {HTMLElement} element Element to get offset for\n * @return {Object} Object with \"left\" and \"top\" properties\n */\n function getElementOffset(element) {\n var docElem,\n doc = element && element.ownerDocument,\n box = { left: 0, top: 0 },\n offset = { left: 0, top: 0 },\n scrollLeftTop,\n offsetAttributes = {\n borderLeftWidth: 'left',\n borderTopWidth: 'top',\n paddingLeft: 'left',\n paddingTop: 'top'\n };\n\n if (!doc) {\n return offset;\n }\n\n for (var attr in offsetAttributes) {\n offset[offsetAttributes[attr]] += parseInt(getElementStyle(element, attr), 10) || 0;\n }\n\n docElem = doc.documentElement;\n if ( typeof element.getBoundingClientRect !== 'undefined' ) {\n box = element.getBoundingClientRect();\n }\n\n scrollLeftTop = getScrollLeftTop(element);\n\n return {\n left: box.left + scrollLeftTop.left - (docElem.clientLeft || 0) + offset.left,\n top: box.top + scrollLeftTop.top - (docElem.clientTop || 0) + offset.top\n };\n }\n\n /**\n * Returns style attribute value of a given element\n * @memberOf fabric.util\n * @param {HTMLElement} element Element to get style attribute for\n * @param {String} attr Style attribute to get for element\n * @return {String} Style attribute value of the given element.\n */\n var getElementStyle;\n if (fabric.document.defaultView && fabric.document.defaultView.getComputedStyle) {\n getElementStyle = function(element, attr) {\n var style = fabric.document.defaultView.getComputedStyle(element, null);\n return style ? style[attr] : undefined;\n };\n }\n else {\n getElementStyle = function(element, attr) {\n var value = element.style[attr];\n if (!value && element.currentStyle) {\n value = element.currentStyle[attr];\n }\n return value;\n };\n }\n\n (function () {\n var style = fabric.document.documentElement.style,\n selectProp = 'userSelect' in style\n ? 'userSelect'\n : 'MozUserSelect' in style\n ? 'MozUserSelect'\n : 'WebkitUserSelect' in style\n ? 'WebkitUserSelect'\n : 'KhtmlUserSelect' in style\n ? 'KhtmlUserSelect'\n : '';\n\n /**\n * Makes element unselectable\n * @memberOf fabric.util\n * @param {HTMLElement} element Element to make unselectable\n * @return {HTMLElement} Element that was passed in\n */\n function makeElementUnselectable(element) {\n if (typeof element.onselectstart !== 'undefined') {\n element.onselectstart = fabric.util.falseFunction;\n }\n if (selectProp) {\n element.style[selectProp] = 'none';\n }\n else if (typeof element.unselectable === 'string') {\n element.unselectable = 'on';\n }\n return element;\n }\n\n /**\n * Makes element selectable\n * @memberOf fabric.util\n * @param {HTMLElement} element Element to make selectable\n * @return {HTMLElement} Element that was passed in\n */\n function makeElementSelectable(element) {\n if (typeof element.onselectstart !== 'undefined') {\n element.onselectstart = null;\n }\n if (selectProp) {\n element.style[selectProp] = '';\n }\n else if (typeof element.unselectable === 'string') {\n element.unselectable = '';\n }\n return element;\n }\n\n fabric.util.makeElementUnselectable = makeElementUnselectable;\n fabric.util.makeElementSelectable = makeElementSelectable;\n })();\n\n function getNodeCanvas(element) {\n var impl = fabric.jsdomImplForWrapper(element);\n return impl._canvas || impl._image;\n };\n\n function cleanUpJsdomNode(element) {\n if (!fabric.isLikelyNode) {\n return;\n }\n var impl = fabric.jsdomImplForWrapper(element);\n if (impl) {\n impl._image = null;\n impl._canvas = null;\n // unsure if necessary\n impl._currentSrc = null;\n impl._attributes = null;\n impl._classList = null;\n }\n }\n\n function setImageSmoothing(ctx, value) {\n ctx.imageSmoothingEnabled = ctx.imageSmoothingEnabled || ctx.webkitImageSmoothingEnabled\n || ctx.mozImageSmoothingEnabled || ctx.msImageSmoothingEnabled || ctx.oImageSmoothingEnabled;\n ctx.imageSmoothingEnabled = value;\n }\n\n /**\n * setImageSmoothing sets the context imageSmoothingEnabled property.\n * Used by canvas and by ImageObject.\n * @memberOf fabric.util\n * @since 4.0.0\n * @param {HTMLRenderingContext2D} ctx to set on\n * @param {Boolean} value true or false\n */\n fabric.util.setImageSmoothing = setImageSmoothing;\n fabric.util.getById = getById;\n fabric.util.toArray = toArray;\n fabric.util.addClass = addClass;\n fabric.util.makeElement = makeElement;\n fabric.util.wrapElement = wrapElement;\n fabric.util.getScrollLeftTop = getScrollLeftTop;\n fabric.util.getElementOffset = getElementOffset;\n fabric.util.getNodeCanvas = getNodeCanvas;\n fabric.util.cleanUpJsdomNode = cleanUpJsdomNode;\n\n})();\n\n\n(function() {\n\n function addParamToUrl(url, param) {\n return url + (/\\?/.test(url) ? '&' : '?') + param;\n }\n\n function emptyFn() { }\n\n /**\n * Cross-browser abstraction for sending XMLHttpRequest\n * @memberOf fabric.util\n * @param {String} url URL to send XMLHttpRequest to\n * @param {Object} [options] Options object\n * @param {String} [options.method=\"GET\"]\n * @param {String} [options.parameters] parameters to append to url in GET or in body\n * @param {String} [options.body] body to send with POST or PUT request\n * @param {Function} options.onComplete Callback to invoke when request is completed\n * @return {XMLHttpRequest} request\n */\n function request(url, options) {\n options || (options = { });\n\n var method = options.method ? options.method.toUpperCase() : 'GET',\n onComplete = options.onComplete || function() { },\n xhr = new fabric.window.XMLHttpRequest(),\n body = options.body || options.parameters;\n\n /** @ignore */\n xhr.onreadystatechange = function() {\n if (xhr.readyState === 4) {\n onComplete(xhr);\n xhr.onreadystatechange = emptyFn;\n }\n };\n\n if (method === 'GET') {\n body = null;\n if (typeof options.parameters === 'string') {\n url = addParamToUrl(url, options.parameters);\n }\n }\n\n xhr.open(method, url, true);\n\n if (method === 'POST' || method === 'PUT') {\n xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');\n }\n\n xhr.send(body);\n return xhr;\n }\n\n fabric.util.request = request;\n})();\n\n\n/**\n * Wrapper around `console.log` (when available)\n * @param {*} [values] Values to log\n */\nfabric.log = console.log;\n\n/**\n * Wrapper around `console.warn` (when available)\n * @param {*} [values] Values to log as a warning\n */\nfabric.warn = console.warn;\n\n\n(function () {\n\n var extend = fabric.util.object.extend,\n clone = fabric.util.object.clone;\n\n /**\n * @typedef {Object} AnimationOptions\n * Animation of a value or list of values.\n * When using lists, think of something like this:\n * fabric.util.animate({\n * startValue: [1, 2, 3],\n * endValue: [2, 4, 6],\n * onChange: function([a, b, c]) {\n * canvas.zoomToPoint({x: b, y: c}, a)\n * canvas.renderAll()\n * }\n * });\n * @example\n * @property {Function} [onChange] Callback; invoked on every value change\n * @property {Function} [onComplete] Callback; invoked when value change is completed\n * @example\n * // Note: startValue, endValue, and byValue must match the type\n * var animationOptions = { startValue: 0, endValue: 1, byValue: 0.25 }\n * var animationOptions = { startValue: [0, 1], endValue: [1, 2], byValue: [0.25, 0.25] }\n * @property {number | number[]} [startValue=0] Starting value\n * @property {number | number[]} [endValue=100] Ending value\n * @property {number | number[]} [byValue=100] Value to modify the property by\n * @property {Function} [easing] Easing function\n * @property {Number} [duration=500] Duration of change (in ms)\n * @property {Function} [abort] Additional function with logic. If returns true, animation aborts.\n *\n * @typedef {() => void} CancelFunction\n *\n * @typedef {Object} AnimationCurrentState\n * @property {number | number[]} currentValue value in range [`startValue`, `endValue`]\n * @property {number} completionRate value in range [0, 1]\n * @property {number} durationRate value in range [0, 1]\n *\n * @typedef {(AnimationOptions & AnimationCurrentState & { cancel: CancelFunction }} AnimationContext\n */\n\n /**\n * Array holding all running animations\n * @memberof fabric\n * @type {AnimationContext[]}\n */\n var RUNNING_ANIMATIONS = [];\n fabric.util.object.extend(RUNNING_ANIMATIONS, {\n\n /**\n * cancel all running animations at the next requestAnimFrame\n * @returns {AnimationContext[]}\n */\n cancelAll: function () {\n var animations = this.splice(0);\n animations.forEach(function (animation) {\n animation.cancel();\n });\n return animations;\n },\n\n /**\n * cancel all running animations attached to canvas at the next requestAnimFrame\n * @param {fabric.Canvas} canvas\n * @returns {AnimationContext[]}\n */\n cancelByCanvas: function (canvas) {\n if (!canvas) {\n return [];\n }\n var cancelled = this.filter(function (animation) {\n return typeof animation.target === 'object' && animation.target.canvas === canvas;\n });\n cancelled.forEach(function (animation) {\n animation.cancel();\n });\n return cancelled;\n },\n\n /**\n * cancel all running animations for target at the next requestAnimFrame\n * @param {*} target\n * @returns {AnimationContext[]}\n */\n cancelByTarget: function (target) {\n var cancelled = this.findAnimationsByTarget(target);\n cancelled.forEach(function (animation) {\n animation.cancel();\n });\n return cancelled;\n },\n\n /**\n *\n * @param {CancelFunction} cancelFunc the function returned by animate\n * @returns {number}\n */\n findAnimationIndex: function (cancelFunc) {\n return this.indexOf(this.findAnimation(cancelFunc));\n },\n\n /**\n *\n * @param {CancelFunction} cancelFunc the function returned by animate\n * @returns {AnimationContext | undefined} animation's options object\n */\n findAnimation: function (cancelFunc) {\n return this.find(function (animation) {\n return animation.cancel === cancelFunc;\n });\n },\n\n /**\n *\n * @param {*} target the object that is assigned to the target property of the animation context\n * @returns {AnimationContext[]} array of animation options object associated with target\n */\n findAnimationsByTarget: function (target) {\n if (!target) {\n return [];\n }\n return this.filter(function (animation) {\n return animation.target === target;\n });\n }\n });\n\n function noop() {\n return false;\n }\n\n function defaultEasing(t, b, c, d) {\n return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;\n }\n\n /**\n * Changes value from one to another within certain period of time, invoking callbacks as value is being changed.\n * @memberOf fabric.util\n * @param {AnimationOptions} [options] Animation options\n * @example\n * // Note: startValue, endValue, and byValue must match the type\n * fabric.util.animate({ startValue: 0, endValue: 1, byValue: 0.25 })\n * fabric.util.animate({ startValue: [0, 1], endValue: [1, 2], byValue: [0.25, 0.25] })\n * @returns {CancelFunction} cancel function\n */\n function animate(options) {\n options || (options = {});\n var cancel = false,\n context,\n removeFromRegistry = function () {\n var index = fabric.runningAnimations.indexOf(context);\n return index > -1 && fabric.runningAnimations.splice(index, 1)[0];\n };\n\n context = extend(clone(options), {\n cancel: function () {\n cancel = true;\n return removeFromRegistry();\n },\n currentValue: 'startValue' in options ? options.startValue : 0,\n completionRate: 0,\n durationRate: 0\n });\n fabric.runningAnimations.push(context);\n\n requestAnimFrame(function(timestamp) {\n var start = timestamp || +new Date(),\n duration = options.duration || 500,\n finish = start + duration, time,\n onChange = options.onChange || noop,\n abort = options.abort || noop,\n onComplete = options.onComplete || noop,\n easing = options.easing || defaultEasing,\n isMany = 'startValue' in options ? options.startValue.length > 0 : false,\n startValue = 'startValue' in options ? options.startValue : 0,\n endValue = 'endValue' in options ? options.endValue : 100,\n byValue = options.byValue || (isMany ? startValue.map(function(value, i) {\n return endValue[i] - startValue[i];\n }) : endValue - startValue);\n\n options.onStart && options.onStart();\n\n (function tick(ticktime) {\n time = ticktime || +new Date();\n var currentTime = time > finish ? duration : (time - start),\n timePerc = currentTime / duration,\n current = isMany ? startValue.map(function(_value, i) {\n return easing(currentTime, startValue[i], byValue[i], duration);\n }) : easing(currentTime, startValue, byValue, duration),\n valuePerc = isMany ? Math.abs((current[0] - startValue[0]) / byValue[0])\n : Math.abs((current - startValue) / byValue);\n // update context\n context.currentValue = isMany ? current.slice() : current;\n context.completionRate = valuePerc;\n context.durationRate = timePerc;\n if (cancel) {\n return;\n }\n if (abort(current, valuePerc, timePerc)) {\n removeFromRegistry();\n return;\n }\n if (time > finish) {\n // update context\n context.currentValue = isMany ? endValue.slice() : endValue;\n context.completionRate = 1;\n context.durationRate = 1;\n // execute callbacks\n onChange(isMany ? endValue.slice() : endValue, 1, 1);\n onComplete(endValue, 1, 1);\n removeFromRegistry();\n return;\n }\n else {\n onChange(current, valuePerc, timePerc);\n requestAnimFrame(tick);\n }\n })(start);\n });\n\n return context.cancel;\n }\n\n var _requestAnimFrame = fabric.window.requestAnimationFrame ||\n fabric.window.webkitRequestAnimationFrame ||\n fabric.window.mozRequestAnimationFrame ||\n fabric.window.oRequestAnimationFrame ||\n fabric.window.msRequestAnimationFrame ||\n function(callback) {\n return fabric.window.setTimeout(callback, 1000 / 60);\n };\n\n var _cancelAnimFrame = fabric.window.cancelAnimationFrame || fabric.window.clearTimeout;\n\n /**\n * requestAnimationFrame polyfill based on http://paulirish.com/2011/requestanimationframe-for-smart-animating/\n * In order to get a precise start time, `requestAnimFrame` should be called as an entry into the method\n * @memberOf fabric.util\n * @param {Function} callback Callback to invoke\n * @param {DOMElement} element optional Element to associate with animation\n */\n function requestAnimFrame() {\n return _requestAnimFrame.apply(fabric.window, arguments);\n }\n\n function cancelAnimFrame() {\n return _cancelAnimFrame.apply(fabric.window, arguments);\n }\n\n fabric.util.animate = animate;\n fabric.util.requestAnimFrame = requestAnimFrame;\n fabric.util.cancelAnimFrame = cancelAnimFrame;\n fabric.runningAnimations = RUNNING_ANIMATIONS;\n})();\n\n\n(function() {\n // Calculate an in-between color. Returns a \"rgba()\" string.\n // Credit: Edwin Martin \n // http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors.js\n function calculateColor(begin, end, pos) {\n var color = 'rgba('\n + parseInt((begin[0] + pos * (end[0] - begin[0])), 10) + ','\n + parseInt((begin[1] + pos * (end[1] - begin[1])), 10) + ','\n + parseInt((begin[2] + pos * (end[2] - begin[2])), 10);\n\n color += ',' + (begin && end ? parseFloat(begin[3] + pos * (end[3] - begin[3])) : 1);\n color += ')';\n return color;\n }\n\n /**\n * Changes the color from one to another within certain period of time, invoking callbacks as value is being changed.\n * @memberOf fabric.util\n * @param {String} fromColor The starting color in hex or rgb(a) format.\n * @param {String} toColor The starting color in hex or rgb(a) format.\n * @param {Number} [duration] Duration of change (in ms).\n * @param {Object} [options] Animation options\n * @param {Function} [options.onChange] Callback; invoked on every value change\n * @param {Function} [options.onComplete] Callback; invoked when value change is completed\n * @param {Function} [options.colorEasing] Easing function. Note that this function only take two arguments (currentTime, duration). Thus the regular animation easing functions cannot be used.\n * @param {Function} [options.abort] Additional function with logic. If returns true, onComplete is called.\n * @returns {Function} abort function\n */\n function animateColor(fromColor, toColor, duration, options) {\n var startColor = new fabric.Color(fromColor).getSource(),\n endColor = new fabric.Color(toColor).getSource(),\n originalOnComplete = options.onComplete,\n originalOnChange = options.onChange;\n options = options || {};\n\n return fabric.util.animate(fabric.util.object.extend(options, {\n duration: duration || 500,\n startValue: startColor,\n endValue: endColor,\n byValue: endColor,\n easing: function (currentTime, startValue, byValue, duration) {\n var posValue = options.colorEasing\n ? options.colorEasing(currentTime, duration)\n : 1 - Math.cos(currentTime / duration * (Math.PI / 2));\n return calculateColor(startValue, byValue, posValue);\n },\n // has to take in account for color restoring;\n onComplete: function(current, valuePerc, timePerc) {\n if (originalOnComplete) {\n return originalOnComplete(\n calculateColor(endColor, endColor, 0),\n valuePerc,\n timePerc\n );\n }\n },\n onChange: function(current, valuePerc, timePerc) {\n if (originalOnChange) {\n if (Array.isArray(current)) {\n return originalOnChange(\n calculateColor(current, current, 0),\n valuePerc,\n timePerc\n );\n }\n originalOnChange(current, valuePerc, timePerc);\n }\n }\n }));\n }\n\n fabric.util.animateColor = animateColor;\n\n})();\n\n\n(function() {\n\n function normalize(a, c, p, s) {\n if (a < Math.abs(c)) {\n a = c;\n s = p / 4;\n }\n else {\n //handle the 0/0 case:\n if (c === 0 && a === 0) {\n s = p / (2 * Math.PI) * Math.asin(1);\n }\n else {\n s = p / (2 * Math.PI) * Math.asin(c / a);\n }\n }\n return { a: a, c: c, p: p, s: s };\n }\n\n function elastic(opts, t, d) {\n return opts.a *\n Math.pow(2, 10 * (t -= 1)) *\n Math.sin( (t * d - opts.s) * (2 * Math.PI) / opts.p );\n }\n\n /**\n * Cubic easing out\n * @memberOf fabric.util.ease\n */\n function easeOutCubic(t, b, c, d) {\n return c * ((t = t / d - 1) * t * t + 1) + b;\n }\n\n /**\n * Cubic easing in and out\n * @memberOf fabric.util.ease\n */\n function easeInOutCubic(t, b, c, d) {\n t /= d / 2;\n if (t < 1) {\n return c / 2 * t * t * t + b;\n }\n return c / 2 * ((t -= 2) * t * t + 2) + b;\n }\n\n /**\n * Quartic easing in\n * @memberOf fabric.util.ease\n */\n function easeInQuart(t, b, c, d) {\n return c * (t /= d) * t * t * t + b;\n }\n\n /**\n * Quartic easing out\n * @memberOf fabric.util.ease\n */\n function easeOutQuart(t, b, c, d) {\n return -c * ((t = t / d - 1) * t * t * t - 1) + b;\n }\n\n /**\n * Quartic easing in and out\n * @memberOf fabric.util.ease\n */\n function easeInOutQuart(t, b, c, d) {\n t /= d / 2;\n if (t < 1) {\n return c / 2 * t * t * t * t + b;\n }\n return -c / 2 * ((t -= 2) * t * t * t - 2) + b;\n }\n\n /**\n * Quintic easing in\n * @memberOf fabric.util.ease\n */\n function easeInQuint(t, b, c, d) {\n return c * (t /= d) * t * t * t * t + b;\n }\n\n /**\n * Quintic easing out\n * @memberOf fabric.util.ease\n */\n function easeOutQuint(t, b, c, d) {\n return c * ((t = t / d - 1) * t * t * t * t + 1) + b;\n }\n\n /**\n * Quintic easing in and out\n * @memberOf fabric.util.ease\n */\n function easeInOutQuint(t, b, c, d) {\n t /= d / 2;\n if (t < 1) {\n return c / 2 * t * t * t * t * t + b;\n }\n return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;\n }\n\n /**\n * Sinusoidal easing in\n * @memberOf fabric.util.ease\n */\n function easeInSine(t, b, c, d) {\n return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;\n }\n\n /**\n * Sinusoidal easing out\n * @memberOf fabric.util.ease\n */\n function easeOutSine(t, b, c, d) {\n return c * Math.sin(t / d * (Math.PI / 2)) + b;\n }\n\n /**\n * Sinusoidal easing in and out\n * @memberOf fabric.util.ease\n */\n function easeInOutSine(t, b, c, d) {\n return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;\n }\n\n /**\n * Exponential easing in\n * @memberOf fabric.util.ease\n */\n function easeInExpo(t, b, c, d) {\n return (t === 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;\n }\n\n /**\n * Exponential easing out\n * @memberOf fabric.util.ease\n */\n function easeOutExpo(t, b, c, d) {\n return (t === d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;\n }\n\n /**\n * Exponential easing in and out\n * @memberOf fabric.util.ease\n */\n function easeInOutExpo(t, b, c, d) {\n if (t === 0) {\n return b;\n }\n if (t === d) {\n return b + c;\n }\n t /= d / 2;\n if (t < 1) {\n return c / 2 * Math.pow(2, 10 * (t - 1)) + b;\n }\n return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;\n }\n\n /**\n * Circular easing in\n * @memberOf fabric.util.ease\n */\n function easeInCirc(t, b, c, d) {\n return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;\n }\n\n /**\n * Circular easing out\n * @memberOf fabric.util.ease\n */\n function easeOutCirc(t, b, c, d) {\n return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;\n }\n\n /**\n * Circular easing in and out\n * @memberOf fabric.util.ease\n */\n function easeInOutCirc(t, b, c, d) {\n t /= d / 2;\n if (t < 1) {\n return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;\n }\n return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;\n }\n\n /**\n * Elastic easing in\n * @memberOf fabric.util.ease\n */\n function easeInElastic(t, b, c, d) {\n var s = 1.70158, p = 0, a = c;\n if (t === 0) {\n return b;\n }\n t /= d;\n if (t === 1) {\n return b + c;\n }\n if (!p) {\n p = d * 0.3;\n }\n var opts = normalize(a, c, p, s);\n return -elastic(opts, t, d) + b;\n }\n\n /**\n * Elastic easing out\n * @memberOf fabric.util.ease\n */\n function easeOutElastic(t, b, c, d) {\n var s = 1.70158, p = 0, a = c;\n if (t === 0) {\n return b;\n }\n t /= d;\n if (t === 1) {\n return b + c;\n }\n if (!p) {\n p = d * 0.3;\n }\n var opts = normalize(a, c, p, s);\n return opts.a * Math.pow(2, -10 * t) * Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p ) + opts.c + b;\n }\n\n /**\n * Elastic easing in and out\n * @memberOf fabric.util.ease\n */\n function easeInOutElastic(t, b, c, d) {\n var s = 1.70158, p = 0, a = c;\n if (t === 0) {\n return b;\n }\n t /= d / 2;\n if (t === 2) {\n return b + c;\n }\n if (!p) {\n p = d * (0.3 * 1.5);\n }\n var opts = normalize(a, c, p, s);\n if (t < 1) {\n return -0.5 * elastic(opts, t, d) + b;\n }\n return opts.a * Math.pow(2, -10 * (t -= 1)) *\n Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p ) * 0.5 + opts.c + b;\n }\n\n /**\n * Backwards easing in\n * @memberOf fabric.util.ease\n */\n function easeInBack(t, b, c, d, s) {\n if (s === undefined) {\n s = 1.70158;\n }\n return c * (t /= d) * t * ((s + 1) * t - s) + b;\n }\n\n /**\n * Backwards easing out\n * @memberOf fabric.util.ease\n */\n function easeOutBack(t, b, c, d, s) {\n if (s === undefined) {\n s = 1.70158;\n }\n return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;\n }\n\n /**\n * Backwards easing in and out\n * @memberOf fabric.util.ease\n */\n function easeInOutBack(t, b, c, d, s) {\n if (s === undefined) {\n s = 1.70158;\n }\n t /= d / 2;\n if (t < 1) {\n return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;\n }\n return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;\n }\n\n /**\n * Bouncing easing in\n * @memberOf fabric.util.ease\n */\n function easeInBounce(t, b, c, d) {\n return c - easeOutBounce (d - t, 0, c, d) + b;\n }\n\n /**\n * Bouncing easing out\n * @memberOf fabric.util.ease\n */\n function easeOutBounce(t, b, c, d) {\n if ((t /= d) < (1 / 2.75)) {\n return c * (7.5625 * t * t) + b;\n }\n else if (t < (2 / 2.75)) {\n return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;\n }\n else if (t < (2.5 / 2.75)) {\n return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;\n }\n else {\n return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;\n }\n }\n\n /**\n * Bouncing easing in and out\n * @memberOf fabric.util.ease\n */\n function easeInOutBounce(t, b, c, d) {\n if (t < d / 2) {\n return easeInBounce (t * 2, 0, c, d) * 0.5 + b;\n }\n return easeOutBounce(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;\n }\n\n /**\n * Easing functions\n * See Easing Equations by Robert Penner\n * @namespace fabric.util.ease\n */\n fabric.util.ease = {\n\n /**\n * Quadratic easing in\n * @memberOf fabric.util.ease\n */\n easeInQuad: function(t, b, c, d) {\n return c * (t /= d) * t + b;\n },\n\n /**\n * Quadratic easing out\n * @memberOf fabric.util.ease\n */\n easeOutQuad: function(t, b, c, d) {\n return -c * (t /= d) * (t - 2) + b;\n },\n\n /**\n * Quadratic easing in and out\n * @memberOf fabric.util.ease\n */\n easeInOutQuad: function(t, b, c, d) {\n t /= (d / 2);\n if (t < 1) {\n return c / 2 * t * t + b;\n }\n return -c / 2 * ((--t) * (t - 2) - 1) + b;\n },\n\n /**\n * Cubic easing in\n * @memberOf fabric.util.ease\n */\n easeInCubic: function(t, b, c, d) {\n return c * (t /= d) * t * t + b;\n },\n\n easeOutCubic: easeOutCubic,\n easeInOutCubic: easeInOutCubic,\n easeInQuart: easeInQuart,\n easeOutQuart: easeOutQuart,\n easeInOutQuart: easeInOutQuart,\n easeInQuint: easeInQuint,\n easeOutQuint: easeOutQuint,\n easeInOutQuint: easeInOutQuint,\n easeInSine: easeInSine,\n easeOutSine: easeOutSine,\n easeInOutSine: easeInOutSine,\n easeInExpo: easeInExpo,\n easeOutExpo: easeOutExpo,\n easeInOutExpo: easeInOutExpo,\n easeInCirc: easeInCirc,\n easeOutCirc: easeOutCirc,\n easeInOutCirc: easeInOutCirc,\n easeInElastic: easeInElastic,\n easeOutElastic: easeOutElastic,\n easeInOutElastic: easeInOutElastic,\n easeInBack: easeInBack,\n easeOutBack: easeOutBack,\n easeInOutBack: easeInOutBack,\n easeInBounce: easeInBounce,\n easeOutBounce: easeOutBounce,\n easeInOutBounce: easeInOutBounce\n };\n\n})();\n\n\n(function(global) {\n\n 'use strict';\n\n /**\n * @name fabric\n * @namespace\n */\n\n var fabric = global.fabric || (global.fabric = { }),\n extend = fabric.util.object.extend,\n clone = fabric.util.object.clone,\n toFixed = fabric.util.toFixed,\n parseUnit = fabric.util.parseUnit,\n multiplyTransformMatrices = fabric.util.multiplyTransformMatrices,\n\n svgValidTagNames = ['path', 'circle', 'polygon', 'polyline', 'ellipse', 'rect', 'line',\n 'image', 'text'],\n svgViewBoxElements = ['symbol', 'image', 'marker', 'pattern', 'view', 'svg'],\n svgInvalidAncestors = ['pattern', 'defs', 'symbol', 'metadata', 'clipPath', 'mask', 'desc'],\n svgValidParents = ['symbol', 'g', 'a', 'svg', 'clipPath', 'defs'],\n\n attributesMap = {\n cx: 'left',\n x: 'left',\n r: 'radius',\n cy: 'top',\n y: 'top',\n display: 'visible',\n visibility: 'visible',\n transform: 'transformMatrix',\n 'fill-opacity': 'fillOpacity',\n 'fill-rule': 'fillRule',\n 'font-family': 'fontFamily',\n 'font-size': 'fontSize',\n 'font-style': 'fontStyle',\n 'font-weight': 'fontWeight',\n 'letter-spacing': 'charSpacing',\n 'paint-order': 'paintFirst',\n 'stroke-dasharray': 'strokeDashArray',\n 'stroke-dashoffset': 'strokeDashOffset',\n 'stroke-linecap': 'strokeLineCap',\n 'stroke-linejoin': 'strokeLineJoin',\n 'stroke-miterlimit': 'strokeMiterLimit',\n 'stroke-opacity': 'strokeOpacity',\n 'stroke-width': 'strokeWidth',\n 'text-decoration': 'textDecoration',\n 'text-anchor': 'textAnchor',\n opacity: 'opacity',\n 'clip-path': 'clipPath',\n 'clip-rule': 'clipRule',\n 'vector-effect': 'strokeUniform',\n 'image-rendering': 'imageSmoothing',\n },\n\n colorAttributes = {\n stroke: 'strokeOpacity',\n fill: 'fillOpacity'\n },\n\n fSize = 'font-size', cPath = 'clip-path';\n\n fabric.svgValidTagNamesRegEx = getSvgRegex(svgValidTagNames);\n fabric.svgViewBoxElementsRegEx = getSvgRegex(svgViewBoxElements);\n fabric.svgInvalidAncestorsRegEx = getSvgRegex(svgInvalidAncestors);\n fabric.svgValidParentsRegEx = getSvgRegex(svgValidParents);\n\n fabric.cssRules = { };\n fabric.gradientDefs = { };\n fabric.clipPaths = { };\n\n function normalizeAttr(attr) {\n // transform attribute names\n if (attr in attributesMap) {\n return attributesMap[attr];\n }\n return attr;\n }\n\n function normalizeValue(attr, value, parentAttributes, fontSize) {\n var isArray = Array.isArray(value), parsed;\n\n if ((attr === 'fill' || attr === 'stroke') && value === 'none') {\n value = '';\n }\n else if (attr === 'strokeUniform') {\n return (value === 'non-scaling-stroke');\n }\n else if (attr === 'strokeDashArray') {\n if (value === 'none') {\n value = null;\n }\n else {\n value = value.replace(/,/g, ' ').split(/\\s+/).map(parseFloat);\n }\n }\n else if (attr === 'transformMatrix') {\n if (parentAttributes && parentAttributes.transformMatrix) {\n value = multiplyTransformMatrices(\n parentAttributes.transformMatrix, fabric.parseTransformAttribute(value));\n }\n else {\n value = fabric.parseTransformAttribute(value);\n }\n }\n else if (attr === 'visible') {\n value = value !== 'none' && value !== 'hidden';\n // display=none on parent element always takes precedence over child element\n if (parentAttributes && parentAttributes.visible === false) {\n value = false;\n }\n }\n else if (attr === 'opacity') {\n value = parseFloat(value);\n if (parentAttributes && typeof parentAttributes.opacity !== 'undefined') {\n value *= parentAttributes.opacity;\n }\n }\n else if (attr === 'textAnchor' /* text-anchor */) {\n value = value === 'start' ? 'left' : value === 'end' ? 'right' : 'center';\n }\n else if (attr === 'charSpacing') {\n // parseUnit returns px and we convert it to em\n parsed = parseUnit(value, fontSize) / fontSize * 1000;\n }\n else if (attr === 'paintFirst') {\n var fillIndex = value.indexOf('fill');\n var strokeIndex = value.indexOf('stroke');\n var value = 'fill';\n if (fillIndex > -1 && strokeIndex > -1 && strokeIndex < fillIndex) {\n value = 'stroke';\n }\n else if (fillIndex === -1 && strokeIndex > -1) {\n value = 'stroke';\n }\n }\n else if (attr === 'href' || attr === 'xlink:href' || attr === 'font') {\n return value;\n }\n else if (attr === 'imageSmoothing') {\n return (value === 'optimizeQuality');\n }\n else {\n parsed = isArray ? value.map(parseUnit) : parseUnit(value, fontSize);\n }\n\n return (!isArray && isNaN(parsed) ? value : parsed);\n }\n\n /**\n * @private\n */\n function getSvgRegex(arr) {\n return new RegExp('^(' + arr.join('|') + ')\\\\b', 'i');\n }\n\n /**\n * @private\n * @param {Object} attributes Array of attributes to parse\n */\n function _setStrokeFillOpacity(attributes) {\n for (var attr in colorAttributes) {\n\n if (typeof attributes[colorAttributes[attr]] === 'undefined' || attributes[attr] === '') {\n continue;\n }\n\n if (typeof attributes[attr] === 'undefined') {\n if (!fabric.Object.prototype[attr]) {\n continue;\n }\n attributes[attr] = fabric.Object.prototype[attr];\n }\n\n if (attributes[attr].indexOf('url(') === 0) {\n continue;\n }\n\n var color = new fabric.Color(attributes[attr]);\n attributes[attr] = color.setAlpha(toFixed(color.getAlpha() * attributes[colorAttributes[attr]], 2)).toRgba();\n }\n return attributes;\n }\n\n /**\n * @private\n */\n function _getMultipleNodes(doc, nodeNames) {\n var nodeName, nodeArray = [], nodeList, i, len;\n for (i = 0, len = nodeNames.length; i < len; i++) {\n nodeName = nodeNames[i];\n nodeList = doc.getElementsByTagName(nodeName);\n nodeArray = nodeArray.concat(Array.prototype.slice.call(nodeList));\n }\n return nodeArray;\n }\n\n /**\n * Parses \"transform\" attribute, returning an array of values\n * @static\n * @function\n * @memberOf fabric\n * @param {String} attributeValue String containing attribute value\n * @return {Array} Array of 6 elements representing transformation matrix\n */\n fabric.parseTransformAttribute = (function() {\n function rotateMatrix(matrix, args) {\n var cos = fabric.util.cos(args[0]), sin = fabric.util.sin(args[0]),\n x = 0, y = 0;\n if (args.length === 3) {\n x = args[1];\n y = args[2];\n }\n\n matrix[0] = cos;\n matrix[1] = sin;\n matrix[2] = -sin;\n matrix[3] = cos;\n matrix[4] = x - (cos * x - sin * y);\n matrix[5] = y - (sin * x + cos * y);\n }\n\n function scaleMatrix(matrix, args) {\n var multiplierX = args[0],\n multiplierY = (args.length === 2) ? args[1] : args[0];\n\n matrix[0] = multiplierX;\n matrix[3] = multiplierY;\n }\n\n function skewMatrix(matrix, args, pos) {\n matrix[pos] = Math.tan(fabric.util.degreesToRadians(args[0]));\n }\n\n function translateMatrix(matrix, args) {\n matrix[4] = args[0];\n if (args.length === 2) {\n matrix[5] = args[1];\n }\n }\n\n // identity matrix\n var iMatrix = fabric.iMatrix,\n\n // == begin transform regexp\n number = fabric.reNum,\n\n commaWsp = fabric.commaWsp,\n\n skewX = '(?:(skewX)\\\\s*\\\\(\\\\s*(' + number + ')\\\\s*\\\\))',\n\n skewY = '(?:(skewY)\\\\s*\\\\(\\\\s*(' + number + ')\\\\s*\\\\))',\n\n rotate = '(?:(rotate)\\\\s*\\\\(\\\\s*(' + number + ')(?:' +\n commaWsp + '(' + number + ')' +\n commaWsp + '(' + number + '))?\\\\s*\\\\))',\n\n scale = '(?:(scale)\\\\s*\\\\(\\\\s*(' + number + ')(?:' +\n commaWsp + '(' + number + '))?\\\\s*\\\\))',\n\n translate = '(?:(translate)\\\\s*\\\\(\\\\s*(' + number + ')(?:' +\n commaWsp + '(' + number + '))?\\\\s*\\\\))',\n\n matrix = '(?:(matrix)\\\\s*\\\\(\\\\s*' +\n '(' + number + ')' + commaWsp +\n '(' + number + ')' + commaWsp +\n '(' + number + ')' + commaWsp +\n '(' + number + ')' + commaWsp +\n '(' + number + ')' + commaWsp +\n '(' + number + ')' +\n '\\\\s*\\\\))',\n\n transform = '(?:' +\n matrix + '|' +\n translate + '|' +\n scale + '|' +\n rotate + '|' +\n skewX + '|' +\n skewY +\n ')',\n\n transforms = '(?:' + transform + '(?:' + commaWsp + '*' + transform + ')*' + ')',\n\n transformList = '^\\\\s*(?:' + transforms + '?)\\\\s*$',\n\n // http://www.w3.org/TR/SVG/coords.html#TransformAttribute\n reTransformList = new RegExp(transformList),\n // == end transform regexp\n\n reTransform = new RegExp(transform, 'g');\n\n return function(attributeValue) {\n\n // start with identity matrix\n var matrix = iMatrix.concat(),\n matrices = [];\n\n // return if no argument was given or\n // an argument does not match transform attribute regexp\n if (!attributeValue || (attributeValue && !reTransformList.test(attributeValue))) {\n return matrix;\n }\n\n attributeValue.replace(reTransform, function(match) {\n\n var m = new RegExp(transform).exec(match).filter(function (match) {\n // match !== '' && match != null\n return (!!match);\n }),\n operation = m[1],\n args = m.slice(2).map(parseFloat);\n\n switch (operation) {\n case 'translate':\n translateMatrix(matrix, args);\n break;\n case 'rotate':\n args[0] = fabric.util.degreesToRadians(args[0]);\n rotateMatrix(matrix, args);\n break;\n case 'scale':\n scaleMatrix(matrix, args);\n break;\n case 'skewX':\n skewMatrix(matrix, args, 2);\n break;\n case 'skewY':\n skewMatrix(matrix, args, 1);\n break;\n case 'matrix':\n matrix = args;\n break;\n }\n\n // snapshot current matrix into matrices array\n matrices.push(matrix.concat());\n // reset\n matrix = iMatrix.concat();\n });\n\n var combinedMatrix = matrices[0];\n while (matrices.length > 1) {\n matrices.shift();\n combinedMatrix = fabric.util.multiplyTransformMatrices(combinedMatrix, matrices[0]);\n }\n return combinedMatrix;\n };\n })();\n\n /**\n * @private\n */\n function parseStyleString(style, oStyle) {\n var attr, value;\n style.replace(/;\\s*$/, '').split(';').forEach(function (chunk) {\n var pair = chunk.split(':');\n\n attr = pair[0].trim().toLowerCase();\n value = pair[1].trim();\n\n oStyle[attr] = value;\n });\n }\n\n /**\n * @private\n */\n function parseStyleObject(style, oStyle) {\n var attr, value;\n for (var prop in style) {\n if (typeof style[prop] === 'undefined') {\n continue;\n }\n\n attr = prop.toLowerCase();\n value = style[prop];\n\n oStyle[attr] = value;\n }\n }\n\n /**\n * @private\n */\n function getGlobalStylesForElement(element, svgUid) {\n var styles = { };\n for (var rule in fabric.cssRules[svgUid]) {\n if (elementMatchesRule(element, rule.split(' '))) {\n for (var property in fabric.cssRules[svgUid][rule]) {\n styles[property] = fabric.cssRules[svgUid][rule][property];\n }\n }\n }\n return styles;\n }\n\n /**\n * @private\n */\n function elementMatchesRule(element, selectors) {\n var firstMatching, parentMatching = true;\n //start from rightmost selector.\n firstMatching = selectorMatches(element, selectors.pop());\n if (firstMatching && selectors.length) {\n parentMatching = doesSomeParentMatch(element, selectors);\n }\n return firstMatching && parentMatching && (selectors.length === 0);\n }\n\n function doesSomeParentMatch(element, selectors) {\n var selector, parentMatching = true;\n while (element.parentNode && element.parentNode.nodeType === 1 && selectors.length) {\n if (parentMatching) {\n selector = selectors.pop();\n }\n element = element.parentNode;\n parentMatching = selectorMatches(element, selector);\n }\n return selectors.length === 0;\n }\n\n /**\n * @private\n */\n function selectorMatches(element, selector) {\n var nodeName = element.nodeName,\n classNames = element.getAttribute('class'),\n id = element.getAttribute('id'), matcher, i;\n // i check if a selector matches slicing away part from it.\n // if i get empty string i should match\n matcher = new RegExp('^' + nodeName, 'i');\n selector = selector.replace(matcher, '');\n if (id && selector.length) {\n matcher = new RegExp('#' + id + '(?![a-zA-Z\\\\-]+)', 'i');\n selector = selector.replace(matcher, '');\n }\n if (classNames && selector.length) {\n classNames = classNames.split(' ');\n for (i = classNames.length; i--;) {\n matcher = new RegExp('\\\\.' + classNames[i] + '(?![a-zA-Z\\\\-]+)', 'i');\n selector = selector.replace(matcher, '');\n }\n }\n return selector.length === 0;\n }\n\n /**\n * @private\n * to support IE8 missing getElementById on SVGdocument and on node xmlDOM\n */\n function elementById(doc, id) {\n var el;\n doc.getElementById && (el = doc.getElementById(id));\n if (el) {\n return el;\n }\n var node, i, len, nodelist = doc.getElementsByTagName('*');\n for (i = 0, len = nodelist.length; i < len; i++) {\n node = nodelist[i];\n if (id === node.getAttribute('id')) {\n return node;\n }\n }\n }\n\n /**\n * @private\n */\n function parseUseDirectives(doc) {\n var nodelist = _getMultipleNodes(doc, ['use', 'svg:use']), i = 0;\n while (nodelist.length && i < nodelist.length) {\n var el = nodelist[i],\n xlinkAttribute = el.getAttribute('xlink:href') || el.getAttribute('href');\n\n if (xlinkAttribute === null) {\n return;\n }\n\n var xlink = xlinkAttribute.slice(1),\n x = el.getAttribute('x') || 0,\n y = el.getAttribute('y') || 0,\n el2 = elementById(doc, xlink).cloneNode(true),\n currentTrans = (el2.getAttribute('transform') || '') + ' translate(' + x + ', ' + y + ')',\n parentNode,\n oldLength = nodelist.length, attr,\n j,\n attrs,\n len,\n namespace = fabric.svgNS;\n\n applyViewboxTransform(el2);\n if (/^svg$/i.test(el2.nodeName)) {\n var el3 = el2.ownerDocument.createElementNS(namespace, 'g');\n for (j = 0, attrs = el2.attributes, len = attrs.length; j < len; j++) {\n attr = attrs.item(j);\n el3.setAttributeNS(namespace, attr.nodeName, attr.nodeValue);\n }\n // el2.firstChild != null\n while (el2.firstChild) {\n el3.appendChild(el2.firstChild);\n }\n el2 = el3;\n }\n\n for (j = 0, attrs = el.attributes, len = attrs.length; j < len; j++) {\n attr = attrs.item(j);\n if (attr.nodeName === 'x' || attr.nodeName === 'y' ||\n attr.nodeName === 'xlink:href' || attr.nodeName === 'href') {\n continue;\n }\n\n if (attr.nodeName === 'transform') {\n currentTrans = attr.nodeValue + ' ' + currentTrans;\n }\n else {\n el2.setAttribute(attr.nodeName, attr.nodeValue);\n }\n }\n\n el2.setAttribute('transform', currentTrans);\n el2.setAttribute('instantiated_by_use', '1');\n el2.removeAttribute('id');\n parentNode = el.parentNode;\n parentNode.replaceChild(el2, el);\n // some browsers do not shorten nodelist after replaceChild (IE8)\n if (nodelist.length === oldLength) {\n i++;\n }\n }\n }\n\n // http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute\n // matches, e.g.: +14.56e-12, etc.\n var reViewBoxAttrValue = new RegExp(\n '^' +\n '\\\\s*(' + fabric.reNum + '+)\\\\s*,?' +\n '\\\\s*(' + fabric.reNum + '+)\\\\s*,?' +\n '\\\\s*(' + fabric.reNum + '+)\\\\s*,?' +\n '\\\\s*(' + fabric.reNum + '+)\\\\s*' +\n '$'\n );\n\n /**\n * Add a element that envelop all child elements and makes the viewbox transformMatrix descend on all elements\n */\n function applyViewboxTransform(element) {\n if (!fabric.svgViewBoxElementsRegEx.test(element.nodeName)) {\n return {};\n }\n var viewBoxAttr = element.getAttribute('viewBox'),\n scaleX = 1,\n scaleY = 1,\n minX = 0,\n minY = 0,\n viewBoxWidth, viewBoxHeight, matrix, el,\n widthAttr = element.getAttribute('width'),\n heightAttr = element.getAttribute('height'),\n x = element.getAttribute('x') || 0,\n y = element.getAttribute('y') || 0,\n preserveAspectRatio = element.getAttribute('preserveAspectRatio') || '',\n missingViewBox = (!viewBoxAttr || !(viewBoxAttr = viewBoxAttr.match(reViewBoxAttrValue))),\n missingDimAttr = (!widthAttr || !heightAttr || widthAttr === '100%' || heightAttr === '100%'),\n toBeParsed = missingViewBox && missingDimAttr,\n parsedDim = { }, translateMatrix = '', widthDiff = 0, heightDiff = 0;\n\n parsedDim.width = 0;\n parsedDim.height = 0;\n parsedDim.toBeParsed = toBeParsed;\n\n if (missingViewBox) {\n if (((x || y) && element.parentNode && element.parentNode.nodeName !== '#document')) {\n translateMatrix = ' translate(' + parseUnit(x) + ' ' + parseUnit(y) + ') ';\n matrix = (element.getAttribute('transform') || '') + translateMatrix;\n element.setAttribute('transform', matrix);\n element.removeAttribute('x');\n element.removeAttribute('y');\n }\n }\n\n if (toBeParsed) {\n return parsedDim;\n }\n\n if (missingViewBox) {\n parsedDim.width = parseUnit(widthAttr);\n parsedDim.height = parseUnit(heightAttr);\n // set a transform for elements that have x y and are inner(only) SVGs\n return parsedDim;\n }\n minX = -parseFloat(viewBoxAttr[1]);\n minY = -parseFloat(viewBoxAttr[2]);\n viewBoxWidth = parseFloat(viewBoxAttr[3]);\n viewBoxHeight = parseFloat(viewBoxAttr[4]);\n parsedDim.minX = minX;\n parsedDim.minY = minY;\n parsedDim.viewBoxWidth = viewBoxWidth;\n parsedDim.viewBoxHeight = viewBoxHeight;\n if (!missingDimAttr) {\n parsedDim.width = parseUnit(widthAttr);\n parsedDim.height = parseUnit(heightAttr);\n scaleX = parsedDim.width / viewBoxWidth;\n scaleY = parsedDim.height / viewBoxHeight;\n }\n else {\n parsedDim.width = viewBoxWidth;\n parsedDim.height = viewBoxHeight;\n }\n\n // default is to preserve aspect ratio\n preserveAspectRatio = fabric.util.parsePreserveAspectRatioAttribute(preserveAspectRatio);\n if (preserveAspectRatio.alignX !== 'none') {\n //translate all container for the effect of Mid, Min, Max\n if (preserveAspectRatio.meetOrSlice === 'meet') {\n scaleY = scaleX = (scaleX > scaleY ? scaleY : scaleX);\n // calculate additional translation to move the viewbox\n }\n if (preserveAspectRatio.meetOrSlice === 'slice') {\n scaleY = scaleX = (scaleX > scaleY ? scaleX : scaleY);\n // calculate additional translation to move the viewbox\n }\n widthDiff = parsedDim.width - viewBoxWidth * scaleX;\n heightDiff = parsedDim.height - viewBoxHeight * scaleX;\n if (preserveAspectRatio.alignX === 'Mid') {\n widthDiff /= 2;\n }\n if (preserveAspectRatio.alignY === 'Mid') {\n heightDiff /= 2;\n }\n if (preserveAspectRatio.alignX === 'Min') {\n widthDiff = 0;\n }\n if (preserveAspectRatio.alignY === 'Min') {\n heightDiff = 0;\n }\n }\n\n if (scaleX === 1 && scaleY === 1 && minX === 0 && minY === 0 && x === 0 && y === 0) {\n return parsedDim;\n }\n if ((x || y) && element.parentNode.nodeName !== '#document') {\n translateMatrix = ' translate(' + parseUnit(x) + ' ' + parseUnit(y) + ') ';\n }\n\n matrix = translateMatrix + ' matrix(' + scaleX +\n ' 0' +\n ' 0 ' +\n scaleY + ' ' +\n (minX * scaleX + widthDiff) + ' ' +\n (minY * scaleY + heightDiff) + ') ';\n // seems unused.\n // parsedDim.viewboxTransform = fabric.parseTransformAttribute(matrix);\n if (element.nodeName === 'svg') {\n el = element.ownerDocument.createElementNS(fabric.svgNS, 'g');\n // element.firstChild != null\n while (element.firstChild) {\n el.appendChild(element.firstChild);\n }\n element.appendChild(el);\n }\n else {\n el = element;\n el.removeAttribute('x');\n el.removeAttribute('y');\n matrix = el.getAttribute('transform') + matrix;\n }\n el.setAttribute('transform', matrix);\n return parsedDim;\n }\n\n function hasAncestorWithNodeName(element, nodeName) {\n while (element && (element = element.parentNode)) {\n if (element.nodeName && nodeName.test(element.nodeName.replace('svg:', ''))\n && !element.getAttribute('instantiated_by_use')) {\n return true;\n }\n }\n return false;\n }\n\n /**\n * Parses an SVG document, converts it to an array of corresponding fabric.* instances and passes them to a callback\n * @static\n * @function\n * @memberOf fabric\n * @param {SVGDocument} doc SVG document to parse\n * @param {Function} callback Callback to call when parsing is finished;\n * It's being passed an array of elements (parsed from a document).\n * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.\n * @param {Object} [parsingOptions] options for parsing document\n * @param {String} [parsingOptions.crossOrigin] crossOrigin settings\n */\n fabric.parseSVGDocument = function(doc, callback, reviver, parsingOptions) {\n if (!doc) {\n return;\n }\n\n parseUseDirectives(doc);\n\n var svgUid = fabric.Object.__uid++, i, len,\n options = applyViewboxTransform(doc),\n descendants = fabric.util.toArray(doc.getElementsByTagName('*'));\n options.crossOrigin = parsingOptions && parsingOptions.crossOrigin;\n options.svgUid = svgUid;\n\n if (descendants.length === 0 && fabric.isLikelyNode) {\n // we're likely in node, where \"o3-xml\" library fails to gEBTN(\"*\")\n // https://github.com/ajaxorg/node-o3-xml/issues/21\n descendants = doc.selectNodes('//*[name(.)!=\"svg\"]');\n var arr = [];\n for (i = 0, len = descendants.length; i < len; i++) {\n arr[i] = descendants[i];\n }\n descendants = arr;\n }\n\n var elements = descendants.filter(function(el) {\n applyViewboxTransform(el);\n return fabric.svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', '')) &&\n !hasAncestorWithNodeName(el, fabric.svgInvalidAncestorsRegEx); // http://www.w3.org/TR/SVG/struct.html#DefsElement\n });\n if (!elements || (elements && !elements.length)) {\n callback && callback([], {});\n return;\n }\n var clipPaths = { };\n descendants.filter(function(el) {\n return el.nodeName.replace('svg:', '') === 'clipPath';\n }).forEach(function(el) {\n var id = el.getAttribute('id');\n clipPaths[id] = fabric.util.toArray(el.getElementsByTagName('*')).filter(function(el) {\n return fabric.svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', ''));\n });\n });\n fabric.gradientDefs[svgUid] = fabric.getGradientDefs(doc);\n fabric.cssRules[svgUid] = fabric.getCSSRules(doc);\n fabric.clipPaths[svgUid] = clipPaths;\n // Precedence of rules: style > class > attribute\n fabric.parseElements(elements, function(instances, elements) {\n if (callback) {\n callback(instances, options, elements, descendants);\n delete fabric.gradientDefs[svgUid];\n delete fabric.cssRules[svgUid];\n delete fabric.clipPaths[svgUid];\n }\n }, clone(options), reviver, parsingOptions);\n };\n\n function recursivelyParseGradientsXlink(doc, gradient) {\n var gradientsAttrs = ['gradientTransform', 'x1', 'x2', 'y1', 'y2', 'gradientUnits', 'cx', 'cy', 'r', 'fx', 'fy'],\n xlinkAttr = 'xlink:href',\n xLink = gradient.getAttribute(xlinkAttr).slice(1),\n referencedGradient = elementById(doc, xLink);\n if (referencedGradient && referencedGradient.getAttribute(xlinkAttr)) {\n recursivelyParseGradientsXlink(doc, referencedGradient);\n }\n gradientsAttrs.forEach(function(attr) {\n if (referencedGradient && !gradient.hasAttribute(attr) && referencedGradient.hasAttribute(attr)) {\n gradient.setAttribute(attr, referencedGradient.getAttribute(attr));\n }\n });\n if (!gradient.children.length) {\n var referenceClone = referencedGradient.cloneNode(true);\n while (referenceClone.firstChild) {\n gradient.appendChild(referenceClone.firstChild);\n }\n }\n gradient.removeAttribute(xlinkAttr);\n }\n\n var reFontDeclaration = new RegExp(\n '(normal|italic)?\\\\s*(normal|small-caps)?\\\\s*' +\n '(normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900)?\\\\s*(' +\n fabric.reNum +\n '(?:px|cm|mm|em|pt|pc|in)*)(?:\\\\/(normal|' + fabric.reNum + '))?\\\\s+(.*)');\n\n extend(fabric, {\n /**\n * Parses a short font declaration, building adding its properties to a style object\n * @static\n * @function\n * @memberOf fabric\n * @param {String} value font declaration\n * @param {Object} oStyle definition\n */\n parseFontDeclaration: function(value, oStyle) {\n var match = value.match(reFontDeclaration);\n\n if (!match) {\n return;\n }\n var fontStyle = match[1],\n // font variant is not used\n // fontVariant = match[2],\n fontWeight = match[3],\n fontSize = match[4],\n lineHeight = match[5],\n fontFamily = match[6];\n\n if (fontStyle) {\n oStyle.fontStyle = fontStyle;\n }\n if (fontWeight) {\n oStyle.fontWeight = isNaN(parseFloat(fontWeight)) ? fontWeight : parseFloat(fontWeight);\n }\n if (fontSize) {\n oStyle.fontSize = parseUnit(fontSize);\n }\n if (fontFamily) {\n oStyle.fontFamily = fontFamily;\n }\n if (lineHeight) {\n oStyle.lineHeight = lineHeight === 'normal' ? 1 : lineHeight;\n }\n },\n\n /**\n * Parses an SVG document, returning all of the gradient declarations found in it\n * @static\n * @function\n * @memberOf fabric\n * @param {SVGDocument} doc SVG document to parse\n * @return {Object} Gradient definitions; key corresponds to element id, value -- to gradient definition element\n */\n getGradientDefs: function(doc) {\n var tagArray = [\n 'linearGradient',\n 'radialGradient',\n 'svg:linearGradient',\n 'svg:radialGradient'],\n elList = _getMultipleNodes(doc, tagArray),\n el, j = 0, gradientDefs = { };\n j = elList.length;\n while (j--) {\n el = elList[j];\n if (el.getAttribute('xlink:href')) {\n recursivelyParseGradientsXlink(doc, el);\n }\n gradientDefs[el.getAttribute('id')] = el;\n }\n return gradientDefs;\n },\n\n /**\n * Returns an object of attributes' name/value, given element and an array of attribute names;\n * Parses parent \"g\" nodes recursively upwards.\n * @static\n * @memberOf fabric\n * @param {DOMElement} element Element to parse\n * @param {Array} attributes Array of attributes to parse\n * @return {Object} object containing parsed attributes' names/values\n */\n parseAttributes: function(element, attributes, svgUid) {\n\n if (!element) {\n return;\n }\n\n var value,\n parentAttributes = { },\n fontSize, parentFontSize;\n\n if (typeof svgUid === 'undefined') {\n svgUid = element.getAttribute('svgUid');\n }\n // if there's a parent container (`g` or `a` or `symbol` node), parse its attributes recursively upwards\n if (element.parentNode && fabric.svgValidParentsRegEx.test(element.parentNode.nodeName)) {\n parentAttributes = fabric.parseAttributes(element.parentNode, attributes, svgUid);\n }\n\n var ownAttributes = attributes.reduce(function(memo, attr) {\n value = element.getAttribute(attr);\n if (value) { // eslint-disable-line\n memo[attr] = value;\n }\n return memo;\n }, { });\n // add values parsed from style, which take precedence over attributes\n // (see: http://www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes)\n var cssAttrs = extend(\n getGlobalStylesForElement(element, svgUid),\n fabric.parseStyleAttribute(element)\n );\n ownAttributes = extend(\n ownAttributes,\n cssAttrs\n );\n if (cssAttrs[cPath]) {\n element.setAttribute(cPath, cssAttrs[cPath]);\n }\n fontSize = parentFontSize = parentAttributes.fontSize || fabric.Text.DEFAULT_SVG_FONT_SIZE;\n if (ownAttributes[fSize]) {\n // looks like the minimum should be 9px when dealing with ems. this is what looks like in browsers.\n ownAttributes[fSize] = fontSize = parseUnit(ownAttributes[fSize], parentFontSize);\n }\n\n var normalizedAttr, normalizedValue, normalizedStyle = {};\n for (var attr in ownAttributes) {\n normalizedAttr = normalizeAttr(attr);\n normalizedValue = normalizeValue(normalizedAttr, ownAttributes[attr], parentAttributes, fontSize);\n normalizedStyle[normalizedAttr] = normalizedValue;\n }\n if (normalizedStyle && normalizedStyle.font) {\n fabric.parseFontDeclaration(normalizedStyle.font, normalizedStyle);\n }\n var mergedAttrs = extend(parentAttributes, normalizedStyle);\n return fabric.svgValidParentsRegEx.test(element.nodeName) ? mergedAttrs : _setStrokeFillOpacity(mergedAttrs);\n },\n\n /**\n * Transforms an array of svg elements to corresponding fabric.* instances\n * @static\n * @memberOf fabric\n * @param {Array} elements Array of elements to parse\n * @param {Function} callback Being passed an array of fabric instances (transformed from SVG elements)\n * @param {Object} [options] Options object\n * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.\n */\n parseElements: function(elements, callback, options, reviver, parsingOptions) {\n new fabric.ElementsParser(elements, callback, options, reviver, parsingOptions).parse();\n },\n\n /**\n * Parses \"style\" attribute, retuning an object with values\n * @static\n * @memberOf fabric\n * @param {SVGElement} element Element to parse\n * @return {Object} Objects with values parsed from style attribute of an element\n */\n parseStyleAttribute: function(element) {\n var oStyle = { },\n style = element.getAttribute('style');\n\n if (!style) {\n return oStyle;\n }\n\n if (typeof style === 'string') {\n parseStyleString(style, oStyle);\n }\n else {\n parseStyleObject(style, oStyle);\n }\n\n return oStyle;\n },\n\n /**\n * Parses \"points\" attribute, returning an array of values\n * @static\n * @memberOf fabric\n * @param {String} points points attribute string\n * @return {Array} array of points\n */\n parsePointsAttribute: function(points) {\n\n // points attribute is required and must not be empty\n if (!points) {\n return null;\n }\n\n // replace commas with whitespace and remove bookending whitespace\n points = points.replace(/,/g, ' ').trim();\n\n points = points.split(/\\s+/);\n var parsedPoints = [], i, len;\n\n for (i = 0, len = points.length; i < len; i += 2) {\n parsedPoints.push({\n x: parseFloat(points[i]),\n y: parseFloat(points[i + 1])\n });\n }\n\n // odd number of points is an error\n // if (parsedPoints.length % 2 !== 0) {\n // return null;\n // }\n\n return parsedPoints;\n },\n\n /**\n * Returns CSS rules for a given SVG document\n * @static\n * @function\n * @memberOf fabric\n * @param {SVGDocument} doc SVG document to parse\n * @return {Object} CSS rules of this document\n */\n getCSSRules: function(doc) {\n var styles = doc.getElementsByTagName('style'), i, len,\n allRules = { }, rules;\n\n // very crude parsing of style contents\n for (i = 0, len = styles.length; i < len; i++) {\n var styleContents = styles[i].textContent;\n\n // remove comments\n styleContents = styleContents.replace(/\\/\\*[\\s\\S]*?\\*\\//g, '');\n if (styleContents.trim() === '') {\n continue;\n }\n // recovers all the rule in this form `body { style code... }`\n // rules = styleContents.match(/[^{]*\\{[\\s\\S]*?\\}/g);\n rules = styleContents.split('}');\n // remove empty rules.\n rules = rules.filter(function(rule) { return rule.trim(); });\n // at this point we have hopefully an array of rules `body { style code... `\n // eslint-disable-next-line no-loop-func\n rules.forEach(function(rule) {\n\n var match = rule.split('{'),\n ruleObj = { }, declaration = match[1].trim(),\n propertyValuePairs = declaration.split(';').filter(function(pair) { return pair.trim(); });\n\n for (i = 0, len = propertyValuePairs.length; i < len; i++) {\n var pair = propertyValuePairs[i].split(':'),\n property = pair[0].trim(),\n value = pair[1].trim();\n ruleObj[property] = value;\n }\n rule = match[0].trim();\n rule.split(',').forEach(function(_rule) {\n _rule = _rule.replace(/^svg/i, '').trim();\n if (_rule === '') {\n return;\n }\n if (allRules[_rule]) {\n fabric.util.object.extend(allRules[_rule], ruleObj);\n }\n else {\n allRules[_rule] = fabric.util.object.clone(ruleObj);\n }\n });\n });\n }\n return allRules;\n },\n\n /**\n * Takes url corresponding to an SVG document, and parses it into a set of fabric objects.\n * Note that SVG is fetched via XMLHttpRequest, so it needs to conform to SOP (Same Origin Policy)\n * @memberOf fabric\n * @param {String} url\n * @param {Function} callback\n * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.\n * @param {Object} [options] Object containing options for parsing\n * @param {String} [options.crossOrigin] crossOrigin crossOrigin setting to use for external resources\n */\n loadSVGFromURL: function(url, callback, reviver, options) {\n\n url = url.replace(/^\\n\\s*/, '').trim();\n new fabric.util.request(url, {\n method: 'get',\n onComplete: onComplete\n });\n\n function onComplete(r) {\n\n var xml = r.responseXML;\n if (!xml || !xml.documentElement) {\n callback && callback(null);\n return false;\n }\n\n fabric.parseSVGDocument(xml.documentElement, function (results, _options, elements, allElements) {\n callback && callback(results, _options, elements, allElements);\n }, reviver, options);\n }\n },\n\n /**\n * Takes string corresponding to an SVG document, and parses it into a set of fabric objects\n * @memberOf fabric\n * @param {String} string\n * @param {Function} callback\n * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.\n * @param {Object} [options] Object containing options for parsing\n * @param {String} [options.crossOrigin] crossOrigin crossOrigin setting to use for external resources\n */\n loadSVGFromString: function(string, callback, reviver, options) {\n var parser = new fabric.window.DOMParser(),\n doc = parser.parseFromString(string.trim(), 'text/xml');\n fabric.parseSVGDocument(doc.documentElement, function (results, _options, elements, allElements) {\n callback(results, _options, elements, allElements);\n }, reviver, options);\n }\n });\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\nfabric.ElementsParser = function(elements, callback, options, reviver, parsingOptions, doc) {\n this.elements = elements;\n this.callback = callback;\n this.options = options;\n this.reviver = reviver;\n this.svgUid = (options && options.svgUid) || 0;\n this.parsingOptions = parsingOptions;\n this.regexUrl = /^url\\(['\"]?#([^'\"]+)['\"]?\\)/g;\n this.doc = doc;\n};\n\n(function(proto) {\n proto.parse = function() {\n this.instances = new Array(this.elements.length);\n this.numElements = this.elements.length;\n this.createObjects();\n };\n\n proto.createObjects = function() {\n var _this = this;\n this.elements.forEach(function(element, i) {\n element.setAttribute('svgUid', _this.svgUid);\n _this.createObject(element, i);\n });\n };\n\n proto.findTag = function(el) {\n return fabric[fabric.util.string.capitalize(el.tagName.replace('svg:', ''))];\n };\n\n proto.createObject = function(el, index) {\n var klass = this.findTag(el);\n if (klass && klass.fromElement) {\n try {\n klass.fromElement(el, this.createCallback(index, el), this.options);\n }\n catch (err) {\n fabric.log(err);\n }\n }\n else {\n this.checkIfDone();\n }\n };\n\n proto.createCallback = function(index, el) {\n var _this = this;\n return function(obj) {\n var _options;\n _this.resolveGradient(obj, el, 'fill');\n _this.resolveGradient(obj, el, 'stroke');\n if (obj instanceof fabric.Image && obj._originalElement) {\n _options = obj.parsePreserveAspectRatioAttribute(el);\n }\n obj._removeTransformMatrix(_options);\n _this.resolveClipPath(obj, el);\n _this.reviver && _this.reviver(el, obj);\n _this.instances[index] = obj;\n _this.checkIfDone();\n };\n };\n\n proto.extractPropertyDefinition = function(obj, property, storage) {\n var value = obj[property], regex = this.regexUrl;\n if (!regex.test(value)) {\n return;\n }\n regex.lastIndex = 0;\n var id = regex.exec(value)[1];\n regex.lastIndex = 0;\n return fabric[storage][this.svgUid][id];\n };\n\n proto.resolveGradient = function(obj, el, property) {\n var gradientDef = this.extractPropertyDefinition(obj, property, 'gradientDefs');\n if (gradientDef) {\n var opacityAttr = el.getAttribute(property + '-opacity');\n var gradient = fabric.Gradient.fromElement(gradientDef, obj, opacityAttr, this.options);\n obj.set(property, gradient);\n }\n };\n\n proto.createClipPathCallback = function(obj, container) {\n return function(_newObj) {\n _newObj._removeTransformMatrix();\n _newObj.fillRule = _newObj.clipRule;\n container.push(_newObj);\n };\n };\n\n proto.resolveClipPath = function(obj, usingElement) {\n var clipPath = this.extractPropertyDefinition(obj, 'clipPath', 'clipPaths'),\n element, klass, objTransformInv, container, gTransform, options;\n if (clipPath) {\n container = [];\n objTransformInv = fabric.util.invertTransform(obj.calcTransformMatrix());\n // move the clipPath tag as sibling to the real element that is using it\n var clipPathTag = clipPath[0].parentNode;\n var clipPathOwner = usingElement;\n while (clipPathOwner.parentNode && clipPathOwner.getAttribute('clip-path') !== obj.clipPath) {\n clipPathOwner = clipPathOwner.parentNode;\n }\n clipPathOwner.parentNode.appendChild(clipPathTag);\n for (var i = 0; i < clipPath.length; i++) {\n element = clipPath[i];\n klass = this.findTag(element);\n klass.fromElement(\n element,\n this.createClipPathCallback(obj, container),\n this.options\n );\n }\n if (container.length === 1) {\n clipPath = container[0];\n }\n else {\n clipPath = new fabric.Group(container);\n }\n gTransform = fabric.util.multiplyTransformMatrices(\n objTransformInv,\n clipPath.calcTransformMatrix()\n );\n if (clipPath.clipPath) {\n this.resolveClipPath(clipPath, clipPathOwner);\n }\n var options = fabric.util.qrDecompose(gTransform);\n clipPath.flipX = false;\n clipPath.flipY = false;\n clipPath.set('scaleX', options.scaleX);\n clipPath.set('scaleY', options.scaleY);\n clipPath.angle = options.angle;\n clipPath.skewX = options.skewX;\n clipPath.skewY = 0;\n clipPath.setPositionByOrigin({ x: options.translateX, y: options.translateY }, 'center', 'center');\n obj.clipPath = clipPath;\n }\n else {\n // if clip-path does not resolve to any element, delete the property.\n delete obj.clipPath;\n }\n };\n\n proto.checkIfDone = function() {\n if (--this.numElements === 0) {\n this.instances = this.instances.filter(function(el) {\n // eslint-disable-next-line no-eq-null, eqeqeq\n return el != null;\n });\n this.callback(this.instances, this.elements);\n }\n };\n})(fabric.ElementsParser.prototype);\n\n\n(function(global) {\n\n 'use strict';\n\n /* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */\n\n var fabric = global.fabric || (global.fabric = { });\n\n if (fabric.Point) {\n fabric.warn('fabric.Point is already defined');\n return;\n }\n\n fabric.Point = Point;\n\n /**\n * Point class\n * @class fabric.Point\n * @memberOf fabric\n * @constructor\n * @param {Number} x\n * @param {Number} y\n * @return {fabric.Point} thisArg\n */\n function Point(x, y) {\n this.x = x;\n this.y = y;\n }\n\n Point.prototype = /** @lends fabric.Point.prototype */ {\n\n type: 'point',\n\n constructor: Point,\n\n /**\n * Adds another point to this one and returns another one\n * @param {fabric.Point} that\n * @return {fabric.Point} new Point instance with added values\n */\n add: function (that) {\n return new Point(this.x + that.x, this.y + that.y);\n },\n\n /**\n * Adds another point to this one\n * @param {fabric.Point} that\n * @return {fabric.Point} thisArg\n * @chainable\n */\n addEquals: function (that) {\n this.x += that.x;\n this.y += that.y;\n return this;\n },\n\n /**\n * Adds value to this point and returns a new one\n * @param {Number} scalar\n * @return {fabric.Point} new Point with added value\n */\n scalarAdd: function (scalar) {\n return new Point(this.x + scalar, this.y + scalar);\n },\n\n /**\n * Adds value to this point\n * @param {Number} scalar\n * @return {fabric.Point} thisArg\n * @chainable\n */\n scalarAddEquals: function (scalar) {\n this.x += scalar;\n this.y += scalar;\n return this;\n },\n\n /**\n * Subtracts another point from this point and returns a new one\n * @param {fabric.Point} that\n * @return {fabric.Point} new Point object with subtracted values\n */\n subtract: function (that) {\n return new Point(this.x - that.x, this.y - that.y);\n },\n\n /**\n * Subtracts another point from this point\n * @param {fabric.Point} that\n * @return {fabric.Point} thisArg\n * @chainable\n */\n subtractEquals: function (that) {\n this.x -= that.x;\n this.y -= that.y;\n return this;\n },\n\n /**\n * Subtracts value from this point and returns a new one\n * @param {Number} scalar\n * @return {fabric.Point}\n */\n scalarSubtract: function (scalar) {\n return new Point(this.x - scalar, this.y - scalar);\n },\n\n /**\n * Subtracts value from this point\n * @param {Number} scalar\n * @return {fabric.Point} thisArg\n * @chainable\n */\n scalarSubtractEquals: function (scalar) {\n this.x -= scalar;\n this.y -= scalar;\n return this;\n },\n\n /**\n * Multiplies this point by a value and returns a new one\n * TODO: rename in scalarMultiply in 2.0\n * @param {Number} scalar\n * @return {fabric.Point}\n */\n multiply: function (scalar) {\n return new Point(this.x * scalar, this.y * scalar);\n },\n\n /**\n * Multiplies this point by a value\n * TODO: rename in scalarMultiplyEquals in 2.0\n * @param {Number} scalar\n * @return {fabric.Point} thisArg\n * @chainable\n */\n multiplyEquals: function (scalar) {\n this.x *= scalar;\n this.y *= scalar;\n return this;\n },\n\n /**\n * Divides this point by a value and returns a new one\n * TODO: rename in scalarDivide in 2.0\n * @param {Number} scalar\n * @return {fabric.Point}\n */\n divide: function (scalar) {\n return new Point(this.x / scalar, this.y / scalar);\n },\n\n /**\n * Divides this point by a value\n * TODO: rename in scalarDivideEquals in 2.0\n * @param {Number} scalar\n * @return {fabric.Point} thisArg\n * @chainable\n */\n divideEquals: function (scalar) {\n this.x /= scalar;\n this.y /= scalar;\n return this;\n },\n\n /**\n * Returns true if this point is equal to another one\n * @param {fabric.Point} that\n * @return {Boolean}\n */\n eq: function (that) {\n return (this.x === that.x && this.y === that.y);\n },\n\n /**\n * Returns true if this point is less than another one\n * @param {fabric.Point} that\n * @return {Boolean}\n */\n lt: function (that) {\n return (this.x < that.x && this.y < that.y);\n },\n\n /**\n * Returns true if this point is less than or equal to another one\n * @param {fabric.Point} that\n * @return {Boolean}\n */\n lte: function (that) {\n return (this.x <= that.x && this.y <= that.y);\n },\n\n /**\n\n * Returns true if this point is greater another one\n * @param {fabric.Point} that\n * @return {Boolean}\n */\n gt: function (that) {\n return (this.x > that.x && this.y > that.y);\n },\n\n /**\n * Returns true if this point is greater than or equal to another one\n * @param {fabric.Point} that\n * @return {Boolean}\n */\n gte: function (that) {\n return (this.x >= that.x && this.y >= that.y);\n },\n\n /**\n * Returns new point which is the result of linear interpolation with this one and another one\n * @param {fabric.Point} that\n * @param {Number} t , position of interpolation, between 0 and 1 default 0.5\n * @return {fabric.Point}\n */\n lerp: function (that, t) {\n if (typeof t === 'undefined') {\n t = 0.5;\n }\n t = Math.max(Math.min(1, t), 0);\n return new Point(this.x + (that.x - this.x) * t, this.y + (that.y - this.y) * t);\n },\n\n /**\n * Returns distance from this point and another one\n * @param {fabric.Point} that\n * @return {Number}\n */\n distanceFrom: function (that) {\n var dx = this.x - that.x,\n dy = this.y - that.y;\n return Math.sqrt(dx * dx + dy * dy);\n },\n\n /**\n * Returns the point between this point and another one\n * @param {fabric.Point} that\n * @return {fabric.Point}\n */\n midPointFrom: function (that) {\n return this.lerp(that);\n },\n\n /**\n * Returns a new point which is the min of this and another one\n * @param {fabric.Point} that\n * @return {fabric.Point}\n */\n min: function (that) {\n return new Point(Math.min(this.x, that.x), Math.min(this.y, that.y));\n },\n\n /**\n * Returns a new point which is the max of this and another one\n * @param {fabric.Point} that\n * @return {fabric.Point}\n */\n max: function (that) {\n return new Point(Math.max(this.x, that.x), Math.max(this.y, that.y));\n },\n\n /**\n * Returns string representation of this point\n * @return {String}\n */\n toString: function () {\n return this.x + ',' + this.y;\n },\n\n /**\n * Sets x/y of this point\n * @param {Number} x\n * @param {Number} y\n * @chainable\n */\n setXY: function (x, y) {\n this.x = x;\n this.y = y;\n return this;\n },\n\n /**\n * Sets x of this point\n * @param {Number} x\n * @chainable\n */\n setX: function (x) {\n this.x = x;\n return this;\n },\n\n /**\n * Sets y of this point\n * @param {Number} y\n * @chainable\n */\n setY: function (y) {\n this.y = y;\n return this;\n },\n\n /**\n * Sets x/y of this point from another point\n * @param {fabric.Point} that\n * @chainable\n */\n setFromPoint: function (that) {\n this.x = that.x;\n this.y = that.y;\n return this;\n },\n\n /**\n * Swaps x/y of this point and another point\n * @param {fabric.Point} that\n */\n swap: function (that) {\n var x = this.x,\n y = this.y;\n this.x = that.x;\n this.y = that.y;\n that.x = x;\n that.y = y;\n },\n\n /**\n * return a cloned instance of the point\n * @return {fabric.Point}\n */\n clone: function () {\n return new Point(this.x, this.y);\n }\n };\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n /* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */\n var fabric = global.fabric || (global.fabric = { });\n\n if (fabric.Intersection) {\n fabric.warn('fabric.Intersection is already defined');\n return;\n }\n\n /**\n * Intersection class\n * @class fabric.Intersection\n * @memberOf fabric\n * @constructor\n */\n function Intersection(status) {\n this.status = status;\n this.points = [];\n }\n\n fabric.Intersection = Intersection;\n\n fabric.Intersection.prototype = /** @lends fabric.Intersection.prototype */ {\n\n constructor: Intersection,\n\n /**\n * Appends a point to intersection\n * @param {fabric.Point} point\n * @return {fabric.Intersection} thisArg\n * @chainable\n */\n appendPoint: function (point) {\n this.points.push(point);\n return this;\n },\n\n /**\n * Appends points to intersection\n * @param {Array} points\n * @return {fabric.Intersection} thisArg\n * @chainable\n */\n appendPoints: function (points) {\n this.points = this.points.concat(points);\n return this;\n }\n };\n\n /**\n * Checks if one line intersects another\n * TODO: rename in intersectSegmentSegment\n * @static\n * @param {fabric.Point} a1\n * @param {fabric.Point} a2\n * @param {fabric.Point} b1\n * @param {fabric.Point} b2\n * @return {fabric.Intersection}\n */\n fabric.Intersection.intersectLineLine = function (a1, a2, b1, b2) {\n var result,\n uaT = (b2.x - b1.x) * (a1.y - b1.y) - (b2.y - b1.y) * (a1.x - b1.x),\n ubT = (a2.x - a1.x) * (a1.y - b1.y) - (a2.y - a1.y) * (a1.x - b1.x),\n uB = (b2.y - b1.y) * (a2.x - a1.x) - (b2.x - b1.x) * (a2.y - a1.y);\n if (uB !== 0) {\n var ua = uaT / uB,\n ub = ubT / uB;\n if (0 <= ua && ua <= 1 && 0 <= ub && ub <= 1) {\n result = new Intersection('Intersection');\n result.appendPoint(new fabric.Point(a1.x + ua * (a2.x - a1.x), a1.y + ua * (a2.y - a1.y)));\n }\n else {\n result = new Intersection();\n }\n }\n else {\n if (uaT === 0 || ubT === 0) {\n result = new Intersection('Coincident');\n }\n else {\n result = new Intersection('Parallel');\n }\n }\n return result;\n };\n\n /**\n * Checks if line intersects polygon\n * TODO: rename in intersectSegmentPolygon\n * fix detection of coincident\n * @static\n * @param {fabric.Point} a1\n * @param {fabric.Point} a2\n * @param {Array} points\n * @return {fabric.Intersection}\n */\n fabric.Intersection.intersectLinePolygon = function(a1, a2, points) {\n var result = new Intersection(),\n length = points.length,\n b1, b2, inter, i;\n\n for (i = 0; i < length; i++) {\n b1 = points[i];\n b2 = points[(i + 1) % length];\n inter = Intersection.intersectLineLine(a1, a2, b1, b2);\n\n result.appendPoints(inter.points);\n }\n if (result.points.length > 0) {\n result.status = 'Intersection';\n }\n return result;\n };\n\n /**\n * Checks if polygon intersects another polygon\n * @static\n * @param {Array} points1\n * @param {Array} points2\n * @return {fabric.Intersection}\n */\n fabric.Intersection.intersectPolygonPolygon = function (points1, points2) {\n var result = new Intersection(),\n length = points1.length, i;\n\n for (i = 0; i < length; i++) {\n var a1 = points1[i],\n a2 = points1[(i + 1) % length],\n inter = Intersection.intersectLinePolygon(a1, a2, points2);\n\n result.appendPoints(inter.points);\n }\n if (result.points.length > 0) {\n result.status = 'Intersection';\n }\n return result;\n };\n\n /**\n * Checks if polygon intersects rectangle\n * @static\n * @param {Array} points\n * @param {fabric.Point} r1\n * @param {fabric.Point} r2\n * @return {fabric.Intersection}\n */\n fabric.Intersection.intersectPolygonRectangle = function (points, r1, r2) {\n var min = r1.min(r2),\n max = r1.max(r2),\n topRight = new fabric.Point(max.x, min.y),\n bottomLeft = new fabric.Point(min.x, max.y),\n inter1 = Intersection.intersectLinePolygon(min, topRight, points),\n inter2 = Intersection.intersectLinePolygon(topRight, max, points),\n inter3 = Intersection.intersectLinePolygon(max, bottomLeft, points),\n inter4 = Intersection.intersectLinePolygon(bottomLeft, min, points),\n result = new Intersection();\n\n result.appendPoints(inter1.points);\n result.appendPoints(inter2.points);\n result.appendPoints(inter3.points);\n result.appendPoints(inter4.points);\n\n if (result.points.length > 0) {\n result.status = 'Intersection';\n }\n return result;\n };\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { });\n\n if (fabric.Color) {\n fabric.warn('fabric.Color is already defined.');\n return;\n }\n\n /**\n * Color class\n * The purpose of {@link fabric.Color} is to abstract and encapsulate common color operations;\n * {@link fabric.Color} is a constructor and creates instances of {@link fabric.Color} objects.\n *\n * @class fabric.Color\n * @param {String} color optional in hex or rgb(a) or hsl format or from known color list\n * @return {fabric.Color} thisArg\n * @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#colors}\n */\n function Color(color) {\n if (!color) {\n this.setSource([0, 0, 0, 1]);\n }\n else {\n this._tryParsingColor(color);\n }\n }\n\n fabric.Color = Color;\n\n fabric.Color.prototype = /** @lends fabric.Color.prototype */ {\n\n /**\n * @private\n * @param {String|Array} color Color value to parse\n */\n _tryParsingColor: function(color) {\n var source;\n\n if (color in Color.colorNameMap) {\n color = Color.colorNameMap[color];\n }\n\n if (color === 'transparent') {\n source = [255, 255, 255, 0];\n }\n\n if (!source) {\n source = Color.sourceFromHex(color);\n }\n if (!source) {\n source = Color.sourceFromRgb(color);\n }\n if (!source) {\n source = Color.sourceFromHsl(color);\n }\n if (!source) {\n //if color is not recognize let's make black as canvas does\n source = [0, 0, 0, 1];\n }\n if (source) {\n this.setSource(source);\n }\n },\n\n /**\n * Adapted from https://github.com/mjijackson\n * @private\n * @param {Number} r Red color value\n * @param {Number} g Green color value\n * @param {Number} b Blue color value\n * @return {Array} Hsl color\n */\n _rgbToHsl: function(r, g, b) {\n r /= 255; g /= 255; b /= 255;\n\n var h, s, l,\n max = fabric.util.array.max([r, g, b]),\n min = fabric.util.array.min([r, g, b]);\n\n l = (max + min) / 2;\n\n if (max === min) {\n h = s = 0; // achromatic\n }\n else {\n var d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n switch (max) {\n case r:\n h = (g - b) / d + (g < b ? 6 : 0);\n break;\n case g:\n h = (b - r) / d + 2;\n break;\n case b:\n h = (r - g) / d + 4;\n break;\n }\n h /= 6;\n }\n\n return [\n Math.round(h * 360),\n Math.round(s * 100),\n Math.round(l * 100)\n ];\n },\n\n /**\n * Returns source of this color (where source is an array representation; ex: [200, 200, 100, 1])\n * @return {Array}\n */\n getSource: function() {\n return this._source;\n },\n\n /**\n * Sets source of this color (where source is an array representation; ex: [200, 200, 100, 1])\n * @param {Array} source\n */\n setSource: function(source) {\n this._source = source;\n },\n\n /**\n * Returns color representation in RGB format\n * @return {String} ex: rgb(0-255,0-255,0-255)\n */\n toRgb: function() {\n var source = this.getSource();\n return 'rgb(' + source[0] + ',' + source[1] + ',' + source[2] + ')';\n },\n\n /**\n * Returns color representation in RGBA format\n * @return {String} ex: rgba(0-255,0-255,0-255,0-1)\n */\n toRgba: function() {\n var source = this.getSource();\n return 'rgba(' + source[0] + ',' + source[1] + ',' + source[2] + ',' + source[3] + ')';\n },\n\n /**\n * Returns color representation in HSL format\n * @return {String} ex: hsl(0-360,0%-100%,0%-100%)\n */\n toHsl: function() {\n var source = this.getSource(),\n hsl = this._rgbToHsl(source[0], source[1], source[2]);\n\n return 'hsl(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%)';\n },\n\n /**\n * Returns color representation in HSLA format\n * @return {String} ex: hsla(0-360,0%-100%,0%-100%,0-1)\n */\n toHsla: function() {\n var source = this.getSource(),\n hsl = this._rgbToHsl(source[0], source[1], source[2]);\n\n return 'hsla(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%,' + source[3] + ')';\n },\n\n /**\n * Returns color representation in HEX format\n * @return {String} ex: FF5555\n */\n toHex: function() {\n var source = this.getSource(), r, g, b;\n\n r = source[0].toString(16);\n r = (r.length === 1) ? ('0' + r) : r;\n\n g = source[1].toString(16);\n g = (g.length === 1) ? ('0' + g) : g;\n\n b = source[2].toString(16);\n b = (b.length === 1) ? ('0' + b) : b;\n\n return r.toUpperCase() + g.toUpperCase() + b.toUpperCase();\n },\n\n /**\n * Returns color representation in HEXA format\n * @return {String} ex: FF5555CC\n */\n toHexa: function() {\n var source = this.getSource(), a;\n\n a = Math.round(source[3] * 255);\n a = a.toString(16);\n a = (a.length === 1) ? ('0' + a) : a;\n\n return this.toHex() + a.toUpperCase();\n },\n\n /**\n * Gets value of alpha channel for this color\n * @return {Number} 0-1\n */\n getAlpha: function() {\n return this.getSource()[3];\n },\n\n /**\n * Sets value of alpha channel for this color\n * @param {Number} alpha Alpha value 0-1\n * @return {fabric.Color} thisArg\n */\n setAlpha: function(alpha) {\n var source = this.getSource();\n source[3] = alpha;\n this.setSource(source);\n return this;\n },\n\n /**\n * Transforms color to its grayscale representation\n * @return {fabric.Color} thisArg\n */\n toGrayscale: function() {\n var source = this.getSource(),\n average = parseInt((source[0] * 0.3 + source[1] * 0.59 + source[2] * 0.11).toFixed(0), 10),\n currentAlpha = source[3];\n this.setSource([average, average, average, currentAlpha]);\n return this;\n },\n\n /**\n * Transforms color to its black and white representation\n * @param {Number} threshold\n * @return {fabric.Color} thisArg\n */\n toBlackWhite: function(threshold) {\n var source = this.getSource(),\n average = (source[0] * 0.3 + source[1] * 0.59 + source[2] * 0.11).toFixed(0),\n currentAlpha = source[3];\n\n threshold = threshold || 127;\n\n average = (Number(average) < Number(threshold)) ? 0 : 255;\n this.setSource([average, average, average, currentAlpha]);\n return this;\n },\n\n /**\n * Overlays color with another color\n * @param {String|fabric.Color} otherColor\n * @return {fabric.Color} thisArg\n */\n overlayWith: function(otherColor) {\n if (!(otherColor instanceof Color)) {\n otherColor = new Color(otherColor);\n }\n\n var result = [],\n alpha = this.getAlpha(),\n otherAlpha = 0.5,\n source = this.getSource(),\n otherSource = otherColor.getSource(), i;\n\n for (i = 0; i < 3; i++) {\n result.push(Math.round((source[i] * (1 - otherAlpha)) + (otherSource[i] * otherAlpha)));\n }\n\n result[3] = alpha;\n this.setSource(result);\n return this;\n }\n };\n\n /**\n * Regex matching color in RGB or RGBA formats (ex: rgb(0, 0, 0), rgba(255, 100, 10, 0.5), rgba( 255 , 100 , 10 , 0.5 ), rgb(1,1,1), rgba(100%, 60%, 10%, 0.5))\n * @static\n * @field\n * @memberOf fabric.Color\n */\n // eslint-disable-next-line max-len\n fabric.Color.reRGBa = /^rgba?\\(\\s*(\\d{1,3}(?:\\.\\d+)?\\%?)\\s*,\\s*(\\d{1,3}(?:\\.\\d+)?\\%?)\\s*,\\s*(\\d{1,3}(?:\\.\\d+)?\\%?)\\s*(?:\\s*,\\s*((?:\\d*\\.?\\d+)?)\\s*)?\\)$/i;\n\n /**\n * Regex matching color in HSL or HSLA formats (ex: hsl(200, 80%, 10%), hsla(300, 50%, 80%, 0.5), hsla( 300 , 50% , 80% , 0.5 ))\n * @static\n * @field\n * @memberOf fabric.Color\n */\n fabric.Color.reHSLa = /^hsla?\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3}\\%)\\s*,\\s*(\\d{1,3}\\%)\\s*(?:\\s*,\\s*(\\d+(?:\\.\\d+)?)\\s*)?\\)$/i;\n\n /**\n * Regex matching color in HEX format (ex: #FF5544CC, #FF5555, 010155, aff)\n * @static\n * @field\n * @memberOf fabric.Color\n */\n fabric.Color.reHex = /^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i;\n\n /**\n * Map of the 148 color names with HEX code\n * @static\n * @field\n * @memberOf fabric.Color\n * @see: https://www.w3.org/TR/css3-color/#svg-color\n */\n fabric.Color.colorNameMap = {\n aliceblue: '#F0F8FF',\n antiquewhite: '#FAEBD7',\n aqua: '#00FFFF',\n aquamarine: '#7FFFD4',\n azure: '#F0FFFF',\n beige: '#F5F5DC',\n bisque: '#FFE4C4',\n black: '#000000',\n blanchedalmond: '#FFEBCD',\n blue: '#0000FF',\n blueviolet: '#8A2BE2',\n brown: '#A52A2A',\n burlywood: '#DEB887',\n cadetblue: '#5F9EA0',\n chartreuse: '#7FFF00',\n chocolate: '#D2691E',\n coral: '#FF7F50',\n cornflowerblue: '#6495ED',\n cornsilk: '#FFF8DC',\n crimson: '#DC143C',\n cyan: '#00FFFF',\n darkblue: '#00008B',\n darkcyan: '#008B8B',\n darkgoldenrod: '#B8860B',\n darkgray: '#A9A9A9',\n darkgrey: '#A9A9A9',\n darkgreen: '#006400',\n darkkhaki: '#BDB76B',\n darkmagenta: '#8B008B',\n darkolivegreen: '#556B2F',\n darkorange: '#FF8C00',\n darkorchid: '#9932CC',\n darkred: '#8B0000',\n darksalmon: '#E9967A',\n darkseagreen: '#8FBC8F',\n darkslateblue: '#483D8B',\n darkslategray: '#2F4F4F',\n darkslategrey: '#2F4F4F',\n darkturquoise: '#00CED1',\n darkviolet: '#9400D3',\n deeppink: '#FF1493',\n deepskyblue: '#00BFFF',\n dimgray: '#696969',\n dimgrey: '#696969',\n dodgerblue: '#1E90FF',\n firebrick: '#B22222',\n floralwhite: '#FFFAF0',\n forestgreen: '#228B22',\n fuchsia: '#FF00FF',\n gainsboro: '#DCDCDC',\n ghostwhite: '#F8F8FF',\n gold: '#FFD700',\n goldenrod: '#DAA520',\n gray: '#808080',\n grey: '#808080',\n green: '#008000',\n greenyellow: '#ADFF2F',\n honeydew: '#F0FFF0',\n hotpink: '#FF69B4',\n indianred: '#CD5C5C',\n indigo: '#4B0082',\n ivory: '#FFFFF0',\n khaki: '#F0E68C',\n lavender: '#E6E6FA',\n lavenderblush: '#FFF0F5',\n lawngreen: '#7CFC00',\n lemonchiffon: '#FFFACD',\n lightblue: '#ADD8E6',\n lightcoral: '#F08080',\n lightcyan: '#E0FFFF',\n lightgoldenrodyellow: '#FAFAD2',\n lightgray: '#D3D3D3',\n lightgrey: '#D3D3D3',\n lightgreen: '#90EE90',\n lightpink: '#FFB6C1',\n lightsalmon: '#FFA07A',\n lightseagreen: '#20B2AA',\n lightskyblue: '#87CEFA',\n lightslategray: '#778899',\n lightslategrey: '#778899',\n lightsteelblue: '#B0C4DE',\n lightyellow: '#FFFFE0',\n lime: '#00FF00',\n limegreen: '#32CD32',\n linen: '#FAF0E6',\n magenta: '#FF00FF',\n maroon: '#800000',\n mediumaquamarine: '#66CDAA',\n mediumblue: '#0000CD',\n mediumorchid: '#BA55D3',\n mediumpurple: '#9370DB',\n mediumseagreen: '#3CB371',\n mediumslateblue: '#7B68EE',\n mediumspringgreen: '#00FA9A',\n mediumturquoise: '#48D1CC',\n mediumvioletred: '#C71585',\n midnightblue: '#191970',\n mintcream: '#F5FFFA',\n mistyrose: '#FFE4E1',\n moccasin: '#FFE4B5',\n navajowhite: '#FFDEAD',\n navy: '#000080',\n oldlace: '#FDF5E6',\n olive: '#808000',\n olivedrab: '#6B8E23',\n orange: '#FFA500',\n orangered: '#FF4500',\n orchid: '#DA70D6',\n palegoldenrod: '#EEE8AA',\n palegreen: '#98FB98',\n paleturquoise: '#AFEEEE',\n palevioletred: '#DB7093',\n papayawhip: '#FFEFD5',\n peachpuff: '#FFDAB9',\n peru: '#CD853F',\n pink: '#FFC0CB',\n plum: '#DDA0DD',\n powderblue: '#B0E0E6',\n purple: '#800080',\n rebeccapurple: '#663399',\n red: '#FF0000',\n rosybrown: '#BC8F8F',\n royalblue: '#4169E1',\n saddlebrown: '#8B4513',\n salmon: '#FA8072',\n sandybrown: '#F4A460',\n seagreen: '#2E8B57',\n seashell: '#FFF5EE',\n sienna: '#A0522D',\n silver: '#C0C0C0',\n skyblue: '#87CEEB',\n slateblue: '#6A5ACD',\n slategray: '#708090',\n slategrey: '#708090',\n snow: '#FFFAFA',\n springgreen: '#00FF7F',\n steelblue: '#4682B4',\n tan: '#D2B48C',\n teal: '#008080',\n thistle: '#D8BFD8',\n tomato: '#FF6347',\n turquoise: '#40E0D0',\n violet: '#EE82EE',\n wheat: '#F5DEB3',\n white: '#FFFFFF',\n whitesmoke: '#F5F5F5',\n yellow: '#FFFF00',\n yellowgreen: '#9ACD32'\n };\n\n /**\n * @private\n * @param {Number} p\n * @param {Number} q\n * @param {Number} t\n * @return {Number}\n */\n function hue2rgb(p, q, t) {\n if (t < 0) {\n t += 1;\n }\n if (t > 1) {\n t -= 1;\n }\n if (t < 1 / 6) {\n return p + (q - p) * 6 * t;\n }\n if (t < 1 / 2) {\n return q;\n }\n if (t < 2 / 3) {\n return p + (q - p) * (2 / 3 - t) * 6;\n }\n return p;\n }\n\n /**\n * Returns new color object, when given a color in RGB format\n * @memberOf fabric.Color\n * @param {String} color Color value ex: rgb(0-255,0-255,0-255)\n * @return {fabric.Color}\n */\n fabric.Color.fromRgb = function(color) {\n return Color.fromSource(Color.sourceFromRgb(color));\n };\n\n /**\n * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in RGB or RGBA format\n * @memberOf fabric.Color\n * @param {String} color Color value ex: rgb(0-255,0-255,0-255), rgb(0%-100%,0%-100%,0%-100%)\n * @return {Array} source\n */\n fabric.Color.sourceFromRgb = function(color) {\n var match = color.match(Color.reRGBa);\n if (match) {\n var r = parseInt(match[1], 10) / (/%$/.test(match[1]) ? 100 : 1) * (/%$/.test(match[1]) ? 255 : 1),\n g = parseInt(match[2], 10) / (/%$/.test(match[2]) ? 100 : 1) * (/%$/.test(match[2]) ? 255 : 1),\n b = parseInt(match[3], 10) / (/%$/.test(match[3]) ? 100 : 1) * (/%$/.test(match[3]) ? 255 : 1);\n\n return [\n parseInt(r, 10),\n parseInt(g, 10),\n parseInt(b, 10),\n match[4] ? parseFloat(match[4]) : 1\n ];\n }\n };\n\n /**\n * Returns new color object, when given a color in RGBA format\n * @static\n * @function\n * @memberOf fabric.Color\n * @param {String} color\n * @return {fabric.Color}\n */\n fabric.Color.fromRgba = Color.fromRgb;\n\n /**\n * Returns new color object, when given a color in HSL format\n * @param {String} color Color value ex: hsl(0-260,0%-100%,0%-100%)\n * @memberOf fabric.Color\n * @return {fabric.Color}\n */\n fabric.Color.fromHsl = function(color) {\n return Color.fromSource(Color.sourceFromHsl(color));\n };\n\n /**\n * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in HSL or HSLA format.\n * Adapted from https://github.com/mjijackson\n * @memberOf fabric.Color\n * @param {String} color Color value ex: hsl(0-360,0%-100%,0%-100%) or hsla(0-360,0%-100%,0%-100%, 0-1)\n * @return {Array} source\n * @see http://http://www.w3.org/TR/css3-color/#hsl-color\n */\n fabric.Color.sourceFromHsl = function(color) {\n var match = color.match(Color.reHSLa);\n if (!match) {\n return;\n }\n\n var h = (((parseFloat(match[1]) % 360) + 360) % 360) / 360,\n s = parseFloat(match[2]) / (/%$/.test(match[2]) ? 100 : 1),\n l = parseFloat(match[3]) / (/%$/.test(match[3]) ? 100 : 1),\n r, g, b;\n\n if (s === 0) {\n r = g = b = l;\n }\n else {\n var q = l <= 0.5 ? l * (s + 1) : l + s - l * s,\n p = l * 2 - q;\n\n r = hue2rgb(p, q, h + 1 / 3);\n g = hue2rgb(p, q, h);\n b = hue2rgb(p, q, h - 1 / 3);\n }\n\n return [\n Math.round(r * 255),\n Math.round(g * 255),\n Math.round(b * 255),\n match[4] ? parseFloat(match[4]) : 1\n ];\n };\n\n /**\n * Returns new color object, when given a color in HSLA format\n * @static\n * @function\n * @memberOf fabric.Color\n * @param {String} color\n * @return {fabric.Color}\n */\n fabric.Color.fromHsla = Color.fromHsl;\n\n /**\n * Returns new color object, when given a color in HEX format\n * @static\n * @memberOf fabric.Color\n * @param {String} color Color value ex: FF5555\n * @return {fabric.Color}\n */\n fabric.Color.fromHex = function(color) {\n return Color.fromSource(Color.sourceFromHex(color));\n };\n\n /**\n * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in HEX format\n * @static\n * @memberOf fabric.Color\n * @param {String} color ex: FF5555 or FF5544CC (RGBa)\n * @return {Array} source\n */\n fabric.Color.sourceFromHex = function(color) {\n if (color.match(Color.reHex)) {\n var value = color.slice(color.indexOf('#') + 1),\n isShortNotation = (value.length === 3 || value.length === 4),\n isRGBa = (value.length === 8 || value.length === 4),\n r = isShortNotation ? (value.charAt(0) + value.charAt(0)) : value.substring(0, 2),\n g = isShortNotation ? (value.charAt(1) + value.charAt(1)) : value.substring(2, 4),\n b = isShortNotation ? (value.charAt(2) + value.charAt(2)) : value.substring(4, 6),\n a = isRGBa ? (isShortNotation ? (value.charAt(3) + value.charAt(3)) : value.substring(6, 8)) : 'FF';\n\n return [\n parseInt(r, 16),\n parseInt(g, 16),\n parseInt(b, 16),\n parseFloat((parseInt(a, 16) / 255).toFixed(2))\n ];\n }\n };\n\n /**\n * Returns new color object, when given color in array representation (ex: [200, 100, 100, 0.5])\n * @static\n * @memberOf fabric.Color\n * @param {Array} source\n * @return {fabric.Color}\n */\n fabric.Color.fromSource = function(source) {\n var oColor = new Color();\n oColor.setSource(source);\n return oColor;\n };\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { }),\n scaleMap = ['e', 'se', 's', 'sw', 'w', 'nw', 'n', 'ne', 'e'],\n skewMap = ['ns', 'nesw', 'ew', 'nwse'],\n controls = {},\n LEFT = 'left', TOP = 'top', RIGHT = 'right', BOTTOM = 'bottom', CENTER = 'center',\n opposite = {\n top: BOTTOM,\n bottom: TOP,\n left: RIGHT,\n right: LEFT,\n center: CENTER,\n }, radiansToDegrees = fabric.util.radiansToDegrees,\n sign = (Math.sign || function(x) { return ((x > 0) - (x < 0)) || +x; });\n\n /**\n * Combine control position and object angle to find the control direction compared\n * to the object center.\n * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls\n * @param {fabric.Control} control the control class\n * @return {Number} 0 - 7 a quadrant number\n */\n function findCornerQuadrant(fabricObject, control) {\n var cornerAngle = fabricObject.angle + radiansToDegrees(Math.atan2(control.y, control.x)) + 360;\n return Math.round((cornerAngle % 360) / 45);\n }\n\n function fireEvent(eventName, options) {\n var target = options.transform.target,\n canvas = target.canvas,\n canvasOptions = fabric.util.object.clone(options);\n canvasOptions.target = target;\n canvas && canvas.fire('object:' + eventName, canvasOptions);\n target.fire(eventName, options);\n }\n\n /**\n * Inspect event and fabricObject properties to understand if the scaling action\n * @param {Event} eventData from the user action\n * @param {fabric.Object} fabricObject the fabric object about to scale\n * @return {Boolean} true if scale is proportional\n */\n function scaleIsProportional(eventData, fabricObject) {\n var canvas = fabricObject.canvas, uniScaleKey = canvas.uniScaleKey,\n uniformIsToggled = eventData[uniScaleKey];\n return (canvas.uniformScaling && !uniformIsToggled) ||\n (!canvas.uniformScaling && uniformIsToggled);\n }\n\n /**\n * Checks if transform is centered\n * @param {Object} transform transform data\n * @return {Boolean} true if transform is centered\n */\n function isTransformCentered(transform) {\n return transform.originX === CENTER && transform.originY === CENTER;\n }\n\n /**\n * Inspect fabricObject to understand if the current scaling action is allowed\n * @param {fabric.Object} fabricObject the fabric object about to scale\n * @param {String} by 'x' or 'y' or ''\n * @param {Boolean} scaleProportionally true if we are trying to scale proportionally\n * @return {Boolean} true if scaling is not allowed at current conditions\n */\n function scalingIsForbidden(fabricObject, by, scaleProportionally) {\n var lockX = fabricObject.lockScalingX, lockY = fabricObject.lockScalingY;\n if (lockX && lockY) {\n return true;\n }\n if (!by && (lockX || lockY) && scaleProportionally) {\n return true;\n }\n if (lockX && by === 'x') {\n return true;\n }\n if (lockY && by === 'y') {\n return true;\n }\n return false;\n }\n\n /**\n * return the correct cursor style for the scale action\n * @param {Event} eventData the javascript event that is causing the scale\n * @param {fabric.Control} control the control that is interested in the action\n * @param {fabric.Object} fabricObject the fabric object that is interested in the action\n * @return {String} a valid css string for the cursor\n */\n function scaleCursorStyleHandler(eventData, control, fabricObject) {\n var notAllowed = 'not-allowed',\n scaleProportionally = scaleIsProportional(eventData, fabricObject),\n by = '';\n if (control.x !== 0 && control.y === 0) {\n by = 'x';\n }\n else if (control.x === 0 && control.y !== 0) {\n by = 'y';\n }\n if (scalingIsForbidden(fabricObject, by, scaleProportionally)) {\n return notAllowed;\n }\n var n = findCornerQuadrant(fabricObject, control);\n return scaleMap[n] + '-resize';\n }\n\n /**\n * return the correct cursor style for the skew action\n * @param {Event} eventData the javascript event that is causing the scale\n * @param {fabric.Control} control the control that is interested in the action\n * @param {fabric.Object} fabricObject the fabric object that is interested in the action\n * @return {String} a valid css string for the cursor\n */\n function skewCursorStyleHandler(eventData, control, fabricObject) {\n var notAllowed = 'not-allowed';\n if (control.x !== 0 && fabricObject.lockSkewingY) {\n return notAllowed;\n }\n if (control.y !== 0 && fabricObject.lockSkewingX) {\n return notAllowed;\n }\n var n = findCornerQuadrant(fabricObject, control) % 4;\n return skewMap[n] + '-resize';\n }\n\n /**\n * Combine skew and scale style handlers to cover fabric standard use case\n * @param {Event} eventData the javascript event that is causing the scale\n * @param {fabric.Control} control the control that is interested in the action\n * @param {fabric.Object} fabricObject the fabric object that is interested in the action\n * @return {String} a valid css string for the cursor\n */\n function scaleSkewCursorStyleHandler(eventData, control, fabricObject) {\n if (eventData[fabricObject.canvas.altActionKey]) {\n return controls.skewCursorStyleHandler(eventData, control, fabricObject);\n }\n return controls.scaleCursorStyleHandler(eventData, control, fabricObject);\n }\n\n /**\n * Inspect event, control and fabricObject to return the correct action name\n * @param {Event} eventData the javascript event that is causing the scale\n * @param {fabric.Control} control the control that is interested in the action\n * @param {fabric.Object} fabricObject the fabric object that is interested in the action\n * @return {String} an action name\n */\n function scaleOrSkewActionName(eventData, control, fabricObject) {\n var isAlternative = eventData[fabricObject.canvas.altActionKey];\n if (control.x === 0) {\n // then is scaleY or skewX\n return isAlternative ? 'skewX' : 'scaleY';\n }\n if (control.y === 0) {\n // then is scaleY or skewX\n return isAlternative ? 'skewY' : 'scaleX';\n }\n }\n\n /**\n * Find the correct style for the control that is used for rotation.\n * this function is very simple and it just take care of not-allowed or standard cursor\n * @param {Event} eventData the javascript event that is causing the scale\n * @param {fabric.Control} control the control that is interested in the action\n * @param {fabric.Object} fabricObject the fabric object that is interested in the action\n * @return {String} a valid css string for the cursor\n */\n function rotationStyleHandler(eventData, control, fabricObject) {\n if (fabricObject.lockRotation) {\n return 'not-allowed';\n }\n return control.cursorStyle;\n }\n\n function commonEventInfo(eventData, transform, x, y) {\n return {\n e: eventData,\n transform: transform,\n pointer: {\n x: x,\n y: y,\n }\n };\n }\n\n /**\n * Wrap an action handler with saving/restoring object position on the transform.\n * this is the code that permits to objects to keep their position while transforming.\n * @param {Function} actionHandler the function to wrap\n * @return {Function} a function with an action handler signature\n */\n function wrapWithFixedAnchor(actionHandler) {\n return function(eventData, transform, x, y) {\n var target = transform.target, centerPoint = target.getCenterPoint(),\n constraint = target.translateToOriginPoint(centerPoint, transform.originX, transform.originY),\n actionPerformed = actionHandler(eventData, transform, x, y);\n target.setPositionByOrigin(constraint, transform.originX, transform.originY);\n return actionPerformed;\n };\n }\n\n /**\n * Wrap an action handler with firing an event if the action is performed\n * @param {Function} actionHandler the function to wrap\n * @return {Function} a function with an action handler signature\n */\n function wrapWithFireEvent(eventName, actionHandler) {\n return function(eventData, transform, x, y) {\n var actionPerformed = actionHandler(eventData, transform, x, y);\n if (actionPerformed) {\n fireEvent(eventName, commonEventInfo(eventData, transform, x, y));\n }\n return actionPerformed;\n };\n }\n\n /**\n * Transforms a point described by x and y in a distance from the top left corner of the object\n * bounding box.\n * @param {Object} transform\n * @param {String} originX\n * @param {String} originY\n * @param {number} x\n * @param {number} y\n * @return {Fabric.Point} the normalized point\n */\n function getLocalPoint(transform, originX, originY, x, y) {\n var target = transform.target,\n control = target.controls[transform.corner],\n zoom = target.canvas.getZoom(),\n padding = target.padding / zoom,\n localPoint = target.toLocalPoint(new fabric.Point(x, y), originX, originY);\n if (localPoint.x >= padding) {\n localPoint.x -= padding;\n }\n if (localPoint.x <= -padding) {\n localPoint.x += padding;\n }\n if (localPoint.y >= padding) {\n localPoint.y -= padding;\n }\n if (localPoint.y <= padding) {\n localPoint.y += padding;\n }\n localPoint.x -= control.offsetX;\n localPoint.y -= control.offsetY;\n return localPoint;\n }\n\n /**\n * Detect if the fabric object is flipped on one side.\n * @param {fabric.Object} target\n * @return {Boolean} true if one flip, but not two.\n */\n function targetHasOneFlip(target) {\n return target.flipX !== target.flipY;\n }\n\n /**\n * Utility function to compensate the scale factor when skew is applied on both axes\n * @private\n */\n function compensateScaleForSkew(target, oppositeSkew, scaleToCompensate, axis, reference) {\n if (target[oppositeSkew] !== 0) {\n var newDim = target._getTransformedDimensions()[axis];\n var newValue = reference / newDim * target[scaleToCompensate];\n target.set(scaleToCompensate, newValue);\n }\n }\n\n /**\n * Action handler for skewing on the X axis\n * @private\n */\n function skewObjectX(eventData, transform, x, y) {\n var target = transform.target,\n // find how big the object would be, if there was no skewX. takes in account scaling\n dimNoSkew = target._getTransformedDimensions(0, target.skewY),\n localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y),\n // the mouse is in the center of the object, and we want it to stay there.\n // so the object will grow twice as much as the mouse.\n // this makes the skew growth to localPoint * 2 - dimNoSkew.\n totalSkewSize = Math.abs(localPoint.x * 2) - dimNoSkew.x,\n currentSkew = target.skewX, newSkew;\n if (totalSkewSize < 2) {\n // let's make it easy to go back to position 0.\n newSkew = 0;\n }\n else {\n newSkew = radiansToDegrees(\n Math.atan2((totalSkewSize / target.scaleX), (dimNoSkew.y / target.scaleY))\n );\n // now we have to find the sign of the skew.\n // it mostly depend on the origin of transformation.\n if (transform.originX === LEFT && transform.originY === BOTTOM) {\n newSkew = -newSkew;\n }\n if (transform.originX === RIGHT && transform.originY === TOP) {\n newSkew = -newSkew;\n }\n if (targetHasOneFlip(target)) {\n newSkew = -newSkew;\n }\n }\n var hasSkewed = currentSkew !== newSkew;\n if (hasSkewed) {\n var dimBeforeSkewing = target._getTransformedDimensions().y;\n target.set('skewX', newSkew);\n compensateScaleForSkew(target, 'skewY', 'scaleY', 'y', dimBeforeSkewing);\n }\n return hasSkewed;\n }\n\n /**\n * Action handler for skewing on the Y axis\n * @private\n */\n function skewObjectY(eventData, transform, x, y) {\n var target = transform.target,\n // find how big the object would be, if there was no skewX. takes in account scaling\n dimNoSkew = target._getTransformedDimensions(target.skewX, 0),\n localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y),\n // the mouse is in the center of the object, and we want it to stay there.\n // so the object will grow twice as much as the mouse.\n // this makes the skew growth to localPoint * 2 - dimNoSkew.\n totalSkewSize = Math.abs(localPoint.y * 2) - dimNoSkew.y,\n currentSkew = target.skewY, newSkew;\n if (totalSkewSize < 2) {\n // let's make it easy to go back to position 0.\n newSkew = 0;\n }\n else {\n newSkew = radiansToDegrees(\n Math.atan2((totalSkewSize / target.scaleY), (dimNoSkew.x / target.scaleX))\n );\n // now we have to find the sign of the skew.\n // it mostly depend on the origin of transformation.\n if (transform.originX === LEFT && transform.originY === BOTTOM) {\n newSkew = -newSkew;\n }\n if (transform.originX === RIGHT && transform.originY === TOP) {\n newSkew = -newSkew;\n }\n if (targetHasOneFlip(target)) {\n newSkew = -newSkew;\n }\n }\n var hasSkewed = currentSkew !== newSkew;\n if (hasSkewed) {\n var dimBeforeSkewing = target._getTransformedDimensions().x;\n target.set('skewY', newSkew);\n compensateScaleForSkew(target, 'skewX', 'scaleX', 'x', dimBeforeSkewing);\n }\n return hasSkewed;\n }\n\n /**\n * Wrapped Action handler for skewing on the Y axis, takes care of the\n * skew direction and determine the correct transform origin for the anchor point\n * @param {Event} eventData javascript event that is doing the transform\n * @param {Object} transform javascript object containing a series of information around the current transform\n * @param {number} x current mouse x position, canvas normalized\n * @param {number} y current mouse y position, canvas normalized\n * @return {Boolean} true if some change happened\n */\n function skewHandlerX(eventData, transform, x, y) {\n // step1 figure out and change transform origin.\n // if skewX > 0 and originY bottom we anchor on right\n // if skewX > 0 and originY top we anchor on left\n // if skewX < 0 and originY bottom we anchor on left\n // if skewX < 0 and originY top we anchor on right\n // if skewX is 0, we look for mouse position to understand where are we going.\n var target = transform.target, currentSkew = target.skewX, originX, originY = transform.originY;\n if (target.lockSkewingX) {\n return false;\n }\n if (currentSkew === 0) {\n var localPointFromCenter = getLocalPoint(transform, CENTER, CENTER, x, y);\n if (localPointFromCenter.x > 0) {\n // we are pulling right, anchor left;\n originX = LEFT;\n }\n else {\n // we are pulling right, anchor right\n originX = RIGHT;\n }\n }\n else {\n if (currentSkew > 0) {\n originX = originY === TOP ? LEFT : RIGHT;\n }\n if (currentSkew < 0) {\n originX = originY === TOP ? RIGHT : LEFT;\n }\n // is the object flipped on one side only? swap the origin.\n if (targetHasOneFlip(target)) {\n originX = originX === LEFT ? RIGHT : LEFT;\n }\n }\n\n // once we have the origin, we find the anchor point\n transform.originX = originX;\n var finalHandler = wrapWithFireEvent('skewing', wrapWithFixedAnchor(skewObjectX));\n return finalHandler(eventData, transform, x, y);\n }\n\n /**\n * Wrapped Action handler for skewing on the Y axis, takes care of the\n * skew direction and determine the correct transform origin for the anchor point\n * @param {Event} eventData javascript event that is doing the transform\n * @param {Object} transform javascript object containing a series of information around the current transform\n * @param {number} x current mouse x position, canvas normalized\n * @param {number} y current mouse y position, canvas normalized\n * @return {Boolean} true if some change happened\n */\n function skewHandlerY(eventData, transform, x, y) {\n // step1 figure out and change transform origin.\n // if skewY > 0 and originX left we anchor on top\n // if skewY > 0 and originX right we anchor on bottom\n // if skewY < 0 and originX left we anchor on bottom\n // if skewY < 0 and originX right we anchor on top\n // if skewY is 0, we look for mouse position to understand where are we going.\n var target = transform.target, currentSkew = target.skewY, originY, originX = transform.originX;\n if (target.lockSkewingY) {\n return false;\n }\n if (currentSkew === 0) {\n var localPointFromCenter = getLocalPoint(transform, CENTER, CENTER, x, y);\n if (localPointFromCenter.y > 0) {\n // we are pulling down, anchor up;\n originY = TOP;\n }\n else {\n // we are pulling up, anchor down\n originY = BOTTOM;\n }\n }\n else {\n if (currentSkew > 0) {\n originY = originX === LEFT ? TOP : BOTTOM;\n }\n if (currentSkew < 0) {\n originY = originX === LEFT ? BOTTOM : TOP;\n }\n // is the object flipped on one side only? swap the origin.\n if (targetHasOneFlip(target)) {\n originY = originY === TOP ? BOTTOM : TOP;\n }\n }\n\n // once we have the origin, we find the anchor point\n transform.originY = originY;\n var finalHandler = wrapWithFireEvent('skewing', wrapWithFixedAnchor(skewObjectY));\n return finalHandler(eventData, transform, x, y);\n }\n\n /**\n * Action handler for rotation and snapping, without anchor point.\n * Needs to be wrapped with `wrapWithFixedAnchor` to be effective\n * @param {Event} eventData javascript event that is doing the transform\n * @param {Object} transform javascript object containing a series of information around the current transform\n * @param {number} x current mouse x position, canvas normalized\n * @param {number} y current mouse y position, canvas normalized\n * @return {Boolean} true if some change happened\n * @private\n */\n function rotationWithSnapping(eventData, transform, x, y) {\n var t = transform,\n target = t.target,\n pivotPoint = target.translateToOriginPoint(target.getCenterPoint(), t.originX, t.originY);\n\n if (target.lockRotation) {\n return false;\n }\n\n var lastAngle = Math.atan2(t.ey - pivotPoint.y, t.ex - pivotPoint.x),\n curAngle = Math.atan2(y - pivotPoint.y, x - pivotPoint.x),\n angle = radiansToDegrees(curAngle - lastAngle + t.theta),\n hasRotated = true;\n\n if (target.snapAngle > 0) {\n var snapAngle = target.snapAngle,\n snapThreshold = target.snapThreshold || snapAngle,\n rightAngleLocked = Math.ceil(angle / snapAngle) * snapAngle,\n leftAngleLocked = Math.floor(angle / snapAngle) * snapAngle;\n\n if (Math.abs(angle - leftAngleLocked) < snapThreshold) {\n angle = leftAngleLocked;\n }\n else if (Math.abs(angle - rightAngleLocked) < snapThreshold) {\n angle = rightAngleLocked;\n }\n }\n\n // normalize angle to positive value\n if (angle < 0) {\n angle = 360 + angle;\n }\n angle %= 360;\n\n hasRotated = target.angle !== angle;\n target.angle = angle;\n return hasRotated;\n }\n\n /**\n * Basic scaling logic, reused with different constrain for scaling X,Y, freely or equally.\n * Needs to be wrapped with `wrapWithFixedAnchor` to be effective\n * @param {Event} eventData javascript event that is doing the transform\n * @param {Object} transform javascript object containing a series of information around the current transform\n * @param {number} x current mouse x position, canvas normalized\n * @param {number} y current mouse y position, canvas normalized\n * @param {Object} options additional information for scaling\n * @param {String} options.by 'x', 'y', 'equally' or '' to indicate type of scaling\n * @return {Boolean} true if some change happened\n * @private\n */\n function scaleObject(eventData, transform, x, y, options) {\n options = options || {};\n var target = transform.target,\n lockScalingX = target.lockScalingX, lockScalingY = target.lockScalingY,\n by = options.by, newPoint, scaleX, scaleY, dim,\n scaleProportionally = scaleIsProportional(eventData, target),\n forbidScaling = scalingIsForbidden(target, by, scaleProportionally),\n signX, signY, gestureScale = transform.gestureScale;\n\n if (forbidScaling) {\n return false;\n }\n if (gestureScale) {\n scaleX = transform.scaleX * gestureScale;\n scaleY = transform.scaleY * gestureScale;\n }\n else {\n newPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y);\n // use of sign: We use sign to detect change of direction of an action. sign usually change when\n // we cross the origin point with the mouse. So a scale flip for example. There is an issue when scaling\n // by center and scaling using one middle control ( default: mr, mt, ml, mb), the mouse movement can easily\n // cross many time the origin point and flip the object. so we need a way to filter out the noise.\n // This ternary here should be ok to filter out X scaling when we want Y only and vice versa.\n signX = by !== 'y' ? sign(newPoint.x) : 1;\n signY = by !== 'x' ? sign(newPoint.y) : 1;\n if (!transform.signX) {\n transform.signX = signX;\n }\n if (!transform.signY) {\n transform.signY = signY;\n }\n\n if (target.lockScalingFlip &&\n (transform.signX !== signX || transform.signY !== signY)\n ) {\n return false;\n }\n\n dim = target._getTransformedDimensions();\n // missing detection of flip and logic to switch the origin\n if (scaleProportionally && !by) {\n // uniform scaling\n var distance = Math.abs(newPoint.x) + Math.abs(newPoint.y),\n original = transform.original,\n originalDistance = Math.abs(dim.x * original.scaleX / target.scaleX) +\n Math.abs(dim.y * original.scaleY / target.scaleY),\n scale = distance / originalDistance;\n scaleX = original.scaleX * scale;\n scaleY = original.scaleY * scale;\n }\n else {\n scaleX = Math.abs(newPoint.x * target.scaleX / dim.x);\n scaleY = Math.abs(newPoint.y * target.scaleY / dim.y);\n }\n // if we are scaling by center, we need to double the scale\n if (isTransformCentered(transform)) {\n scaleX *= 2;\n scaleY *= 2;\n }\n if (transform.signX !== signX && by !== 'y') {\n transform.originX = opposite[transform.originX];\n scaleX *= -1;\n transform.signX = signX;\n }\n if (transform.signY !== signY && by !== 'x') {\n transform.originY = opposite[transform.originY];\n scaleY *= -1;\n transform.signY = signY;\n }\n }\n // minScale is taken are in the setter.\n var oldScaleX = target.scaleX, oldScaleY = target.scaleY;\n if (!by) {\n !lockScalingX && target.set('scaleX', scaleX);\n !lockScalingY && target.set('scaleY', scaleY);\n }\n else {\n // forbidden cases already handled on top here.\n by === 'x' && target.set('scaleX', scaleX);\n by === 'y' && target.set('scaleY', scaleY);\n }\n return oldScaleX !== target.scaleX || oldScaleY !== target.scaleY;\n }\n\n /**\n * Generic scaling logic, to scale from corners either equally or freely.\n * Needs to be wrapped with `wrapWithFixedAnchor` to be effective\n * @param {Event} eventData javascript event that is doing the transform\n * @param {Object} transform javascript object containing a series of information around the current transform\n * @param {number} x current mouse x position, canvas normalized\n * @param {number} y current mouse y position, canvas normalized\n * @return {Boolean} true if some change happened\n */\n function scaleObjectFromCorner(eventData, transform, x, y) {\n return scaleObject(eventData, transform, x, y);\n }\n\n /**\n * Scaling logic for the X axis.\n * Needs to be wrapped with `wrapWithFixedAnchor` to be effective\n * @param {Event} eventData javascript event that is doing the transform\n * @param {Object} transform javascript object containing a series of information around the current transform\n * @param {number} x current mouse x position, canvas normalized\n * @param {number} y current mouse y position, canvas normalized\n * @return {Boolean} true if some change happened\n */\n function scaleObjectX(eventData, transform, x, y) {\n return scaleObject(eventData, transform, x, y , { by: 'x' });\n }\n\n /**\n * Scaling logic for the Y axis.\n * Needs to be wrapped with `wrapWithFixedAnchor` to be effective\n * @param {Event} eventData javascript event that is doing the transform\n * @param {Object} transform javascript object containing a series of information around the current transform\n * @param {number} x current mouse x position, canvas normalized\n * @param {number} y current mouse y position, canvas normalized\n * @return {Boolean} true if some change happened\n */\n function scaleObjectY(eventData, transform, x, y) {\n return scaleObject(eventData, transform, x, y , { by: 'y' });\n }\n\n /**\n * Composed action handler to either scale Y or skew X\n * Needs to be wrapped with `wrapWithFixedAnchor` to be effective\n * @param {Event} eventData javascript event that is doing the transform\n * @param {Object} transform javascript object containing a series of information around the current transform\n * @param {number} x current mouse x position, canvas normalized\n * @param {number} y current mouse y position, canvas normalized\n * @return {Boolean} true if some change happened\n */\n function scalingYOrSkewingX(eventData, transform, x, y) {\n // ok some safety needed here.\n if (eventData[transform.target.canvas.altActionKey]) {\n return controls.skewHandlerX(eventData, transform, x, y);\n }\n return controls.scalingY(eventData, transform, x, y);\n }\n\n /**\n * Composed action handler to either scale X or skew Y\n * Needs to be wrapped with `wrapWithFixedAnchor` to be effective\n * @param {Event} eventData javascript event that is doing the transform\n * @param {Object} transform javascript object containing a series of information around the current transform\n * @param {number} x current mouse x position, canvas normalized\n * @param {number} y current mouse y position, canvas normalized\n * @return {Boolean} true if some change happened\n */\n function scalingXOrSkewingY(eventData, transform, x, y) {\n // ok some safety needed here.\n if (eventData[transform.target.canvas.altActionKey]) {\n return controls.skewHandlerY(eventData, transform, x, y);\n }\n return controls.scalingX(eventData, transform, x, y);\n }\n\n /**\n * Action handler to change textbox width\n * Needs to be wrapped with `wrapWithFixedAnchor` to be effective\n * @param {Event} eventData javascript event that is doing the transform\n * @param {Object} transform javascript object containing a series of information around the current transform\n * @param {number} x current mouse x position, canvas normalized\n * @param {number} y current mouse y position, canvas normalized\n * @return {Boolean} true if some change happened\n */\n function changeWidth(eventData, transform, x, y) {\n var target = transform.target, localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y),\n strokePadding = target.strokeWidth / (target.strokeUniform ? target.scaleX : 1),\n multiplier = isTransformCentered(transform) ? 2 : 1,\n oldWidth = target.width,\n newWidth = Math.abs(localPoint.x * multiplier / target.scaleX) - strokePadding;\n target.set('width', Math.max(newWidth, 0));\n return oldWidth !== newWidth;\n }\n\n /**\n * Action handler\n * @private\n * @param {Event} eventData javascript event that is doing the transform\n * @param {Object} transform javascript object containing a series of information around the current transform\n * @param {number} x current mouse x position, canvas normalized\n * @param {number} y current mouse y position, canvas normalized\n * @return {Boolean} true if the translation occurred\n */\n function dragHandler(eventData, transform, x, y) {\n var target = transform.target,\n newLeft = x - transform.offsetX,\n newTop = y - transform.offsetY,\n moveX = !target.get('lockMovementX') && target.left !== newLeft,\n moveY = !target.get('lockMovementY') && target.top !== newTop;\n moveX && target.set('left', newLeft);\n moveY && target.set('top', newTop);\n if (moveX || moveY) {\n fireEvent('moving', commonEventInfo(eventData, transform, x, y));\n }\n return moveX || moveY;\n }\n\n controls.scaleCursorStyleHandler = scaleCursorStyleHandler;\n controls.skewCursorStyleHandler = skewCursorStyleHandler;\n controls.scaleSkewCursorStyleHandler = scaleSkewCursorStyleHandler;\n controls.rotationWithSnapping = wrapWithFireEvent('rotating', wrapWithFixedAnchor(rotationWithSnapping));\n controls.scalingEqually = wrapWithFireEvent('scaling', wrapWithFixedAnchor( scaleObjectFromCorner));\n controls.scalingX = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectX));\n controls.scalingY = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectY));\n controls.scalingYOrSkewingX = scalingYOrSkewingX;\n controls.scalingXOrSkewingY = scalingXOrSkewingY;\n controls.changeWidth = wrapWithFireEvent('resizing', wrapWithFixedAnchor(changeWidth));\n controls.skewHandlerX = skewHandlerX;\n controls.skewHandlerY = skewHandlerY;\n controls.dragHandler = dragHandler;\n controls.scaleOrSkewActionName = scaleOrSkewActionName;\n controls.rotationStyleHandler = rotationStyleHandler;\n controls.fireEvent = fireEvent;\n controls.wrapWithFixedAnchor = wrapWithFixedAnchor;\n controls.wrapWithFireEvent = wrapWithFireEvent;\n controls.getLocalPoint = getLocalPoint;\n fabric.controlsUtils = controls;\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { }),\n degreesToRadians = fabric.util.degreesToRadians,\n controls = fabric.controlsUtils;\n\n /**\n * Render a round control, as per fabric features.\n * This function is written to respect object properties like transparentCorners, cornerSize\n * cornerColor, cornerStrokeColor\n * plus the addition of offsetY and offsetX.\n * @param {CanvasRenderingContext2D} ctx context to render on\n * @param {Number} left x coordinate where the control center should be\n * @param {Number} top y coordinate where the control center should be\n * @param {Object} styleOverride override for fabric.Object controls style\n * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls\n */\n function renderCircleControl (ctx, left, top, styleOverride, fabricObject) {\n styleOverride = styleOverride || {};\n var xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize,\n ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize,\n transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ?\n styleOverride.transparentCorners : fabricObject.transparentCorners,\n methodName = transparentCorners ? 'stroke' : 'fill',\n stroke = !transparentCorners && (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor),\n myLeft = left,\n myTop = top, size;\n ctx.save();\n ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor;\n ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor;\n // as soon as fabric react v5, remove ie11, use proper ellipse code.\n if (xSize > ySize) {\n size = xSize;\n ctx.scale(1.0, ySize / xSize);\n myTop = top * xSize / ySize;\n }\n else if (ySize > xSize) {\n size = ySize;\n ctx.scale(xSize / ySize, 1.0);\n myLeft = left * ySize / xSize;\n }\n else {\n size = xSize;\n }\n // this is still wrong\n ctx.lineWidth = 1;\n ctx.beginPath();\n ctx.arc(myLeft, myTop, size / 2, 0, 2 * Math.PI, false);\n ctx[methodName]();\n if (stroke) {\n ctx.stroke();\n }\n ctx.restore();\n }\n\n /**\n * Render a square control, as per fabric features.\n * This function is written to respect object properties like transparentCorners, cornerSize\n * cornerColor, cornerStrokeColor\n * plus the addition of offsetY and offsetX.\n * @param {CanvasRenderingContext2D} ctx context to render on\n * @param {Number} left x coordinate where the control center should be\n * @param {Number} top y coordinate where the control center should be\n * @param {Object} styleOverride override for fabric.Object controls style\n * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls\n */\n function renderSquareControl(ctx, left, top, styleOverride, fabricObject) {\n styleOverride = styleOverride || {};\n var xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize,\n ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize,\n transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ?\n styleOverride.transparentCorners : fabricObject.transparentCorners,\n methodName = transparentCorners ? 'stroke' : 'fill',\n stroke = !transparentCorners && (\n styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor\n ), xSizeBy2 = xSize / 2, ySizeBy2 = ySize / 2;\n ctx.save();\n ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor;\n ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor;\n // this is still wrong\n ctx.lineWidth = 1;\n ctx.translate(left, top);\n ctx.rotate(degreesToRadians(fabricObject.angle));\n // this does not work, and fixed with ( && ) does not make sense.\n // to have real transparent corners we need the controls on upperCanvas\n // transparentCorners || ctx.clearRect(-xSizeBy2, -ySizeBy2, xSize, ySize);\n ctx[methodName + 'Rect'](-xSizeBy2, -ySizeBy2, xSize, ySize);\n if (stroke) {\n ctx.strokeRect(-xSizeBy2, -ySizeBy2, xSize, ySize);\n }\n ctx.restore();\n }\n\n controls.renderCircleControl = renderCircleControl;\n controls.renderSquareControl = renderSquareControl;\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function(global) {\n\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = { });\n\n function Control(options) {\n for (var i in options) {\n this[i] = options[i];\n }\n }\n\n fabric.Control = Control;\n\n fabric.Control.prototype = /** @lends fabric.Control.prototype */ {\n\n /**\n * keep track of control visibility.\n * mainly for backward compatibility.\n * if you do not want to see a control, you can remove it\n * from the controlset.\n * @type {Boolean}\n * @default true\n */\n visible: true,\n\n /**\n * Name of the action that the control will likely execute.\n * This is optional. FabricJS uses to identify what the user is doing for some\n * extra optimizations. If you are writing a custom control and you want to know\n * somewhere else in the code what is going on, you can use this string here.\n * you can also provide a custom getActionName if your control run multiple actions\n * depending on some external state.\n * default to scale since is the most common, used on 4 corners by default\n * @type {String}\n * @default 'scale'\n */\n actionName: 'scale',\n\n /**\n * Drawing angle of the control.\n * NOT used for now, but name marked as needed for internal logic\n * example: to reuse the same drawing function for different rotated controls\n * @type {Number}\n * @default 0\n */\n angle: 0,\n\n /**\n * Relative position of the control. X\n * 0,0 is the center of the Object, while -0.5 (left) or 0.5 (right) are the extremities\n * of the bounding box.\n * @type {Number}\n * @default 0\n */\n x: 0,\n\n /**\n * Relative position of the control. Y\n * 0,0 is the center of the Object, while -0.5 (top) or 0.5 (bottom) are the extremities\n * of the bounding box.\n * @type {Number}\n * @default 0\n */\n y: 0,\n\n /**\n * Horizontal offset of the control from the defined position. In pixels\n * Positive offset moves the control to the right, negative to the left.\n * It used when you want to have position of control that does not scale with\n * the bounding box. Example: rotation control is placed at x:0, y: 0.5 on\n * the boundindbox, with an offset of 30 pixels vertically. Those 30 pixels will\n * stay 30 pixels no matter how the object is big. Another example is having 2\n * controls in the corner, that stay in the same position when the object scale.\n * of the bounding box.\n * @type {Number}\n * @default 0\n */\n offsetX: 0,\n\n /**\n * Vertical offset of the control from the defined position. In pixels\n * Positive offset moves the control to the bottom, negative to the top.\n * @type {Number}\n * @default 0\n */\n offsetY: 0,\n\n /**\n * Sets the length of the control. If null, defaults to object's cornerSize.\n * Expects both sizeX and sizeY to be set when set.\n * @type {?Number}\n * @default null\n */\n sizeX: null,\n\n /**\n * Sets the height of the control. If null, defaults to object's cornerSize.\n * Expects both sizeX and sizeY to be set when set.\n * @type {?Number}\n * @default null\n */\n sizeY: null,\n\n /**\n * Sets the length of the touch area of the control. If null, defaults to object's touchCornerSize.\n * Expects both touchSizeX and touchSizeY to be set when set.\n * @type {?Number}\n * @default null\n */\n touchSizeX: null,\n\n /**\n * Sets the height of the touch area of the control. If null, defaults to object's touchCornerSize.\n * Expects both touchSizeX and touchSizeY to be set when set.\n * @type {?Number}\n * @default null\n */\n touchSizeY: null,\n\n /**\n * Css cursor style to display when the control is hovered.\n * if the method `cursorStyleHandler` is provided, this property is ignored.\n * @type {String}\n * @default 'crosshair'\n */\n cursorStyle: 'crosshair',\n\n /**\n * If controls has an offsetY or offsetX, draw a line that connects\n * the control to the bounding box\n * @type {Boolean}\n * @default false\n */\n withConnection: false,\n\n /**\n * The control actionHandler, provide one to handle action ( control being moved )\n * @param {Event} eventData the native mouse event\n * @param {Object} transformData properties of the current transform\n * @param {Number} x x position of the cursor\n * @param {Number} y y position of the cursor\n * @return {Boolean} true if the action/event modified the object\n */\n actionHandler: function(/* eventData, transformData, x, y */) { },\n\n /**\n * The control handler for mouse down, provide one to handle mouse down on control\n * @param {Event} eventData the native mouse event\n * @param {Object} transformData properties of the current transform\n * @param {Number} x x position of the cursor\n * @param {Number} y y position of the cursor\n * @return {Boolean} true if the action/event modified the object\n */\n mouseDownHandler: function(/* eventData, transformData, x, y */) { },\n\n /**\n * The control mouseUpHandler, provide one to handle an effect on mouse up.\n * @param {Event} eventData the native mouse event\n * @param {Object} transformData properties of the current transform\n * @param {Number} x x position of the cursor\n * @param {Number} y y position of the cursor\n * @return {Boolean} true if the action/event modified the object\n */\n mouseUpHandler: function(/* eventData, transformData, x, y */) { },\n\n /**\n * Returns control actionHandler\n * @param {Event} eventData the native mouse event\n * @param {fabric.Object} fabricObject on which the control is displayed\n * @param {fabric.Control} control control for which the action handler is being asked\n * @return {Function} the action handler\n */\n getActionHandler: function(/* eventData, fabricObject, control */) {\n return this.actionHandler;\n },\n\n /**\n * Returns control mouseDown handler\n * @param {Event} eventData the native mouse event\n * @param {fabric.Object} fabricObject on which the control is displayed\n * @param {fabric.Control} control control for which the action handler is being asked\n * @return {Function} the action handler\n */\n getMouseDownHandler: function(/* eventData, fabricObject, control */) {\n return this.mouseDownHandler;\n },\n\n /**\n * Returns control mouseUp handler\n * @param {Event} eventData the native mouse event\n * @param {fabric.Object} fabricObject on which the control is displayed\n * @param {fabric.Control} control control for which the action handler is being asked\n * @return {Function} the action handler\n */\n getMouseUpHandler: function(/* eventData, fabricObject, control */) {\n return this.mouseUpHandler;\n },\n\n /**\n * Returns control cursorStyle for css using cursorStyle. If you need a more elaborate\n * function you can pass one in the constructor\n * the cursorStyle property\n * @param {Event} eventData the native mouse event\n * @param {fabric.Control} control the current control ( likely this)\n * @param {fabric.Object} object on which the control is displayed\n * @return {String}\n */\n cursorStyleHandler: function(eventData, control /* fabricObject */) {\n return control.cursorStyle;\n },\n\n /**\n * Returns the action name. The basic implementation just return the actionName property.\n * @param {Event} eventData the native mouse event\n * @param {fabric.Control} control the current control ( likely this)\n * @param {fabric.Object} object on which the control is displayed\n * @return {String}\n */\n getActionName: function(eventData, control /* fabricObject */) {\n return control.actionName;\n },\n\n /**\n * Returns controls visibility\n * @param {fabric.Object} object on which the control is displayed\n * @param {String} controlKey key where the control is memorized on the\n * @return {Boolean}\n */\n getVisibility: function(fabricObject, controlKey) {\n var objectVisibility = fabricObject._controlsVisibility;\n if (objectVisibility && typeof objectVisibility[controlKey] !== 'undefined') {\n return objectVisibility[controlKey];\n }\n return this.visible;\n },\n\n /**\n * Sets controls visibility\n * @param {Boolean} visibility for the object\n * @return {Void}\n */\n setVisibility: function(visibility /* name, fabricObject */) {\n this.visible = visibility;\n },\n\n\n positionHandler: function(dim, finalMatrix /*, fabricObject, currentControl */) {\n var point = fabric.util.transformPoint({\n x: this.x * dim.x + this.offsetX,\n y: this.y * dim.y + this.offsetY }, finalMatrix);\n return point;\n },\n\n /**\n * Returns the coords for this control based on object values.\n * @param {Number} objectAngle angle from the fabric object holding the control\n * @param {Number} objectCornerSize cornerSize from the fabric object holding the control (or touchCornerSize if\n * isTouch is true)\n * @param {Number} centerX x coordinate where the control center should be\n * @param {Number} centerY y coordinate where the control center should be\n * @param {boolean} isTouch true if touch corner, false if normal corner\n */\n calcCornerCoords: function(objectAngle, objectCornerSize, centerX, centerY, isTouch) {\n var cosHalfOffset,\n sinHalfOffset,\n cosHalfOffsetComp,\n sinHalfOffsetComp,\n xSize = (isTouch) ? this.touchSizeX : this.sizeX,\n ySize = (isTouch) ? this.touchSizeY : this.sizeY;\n if (xSize && ySize && xSize !== ySize) {\n // handle rectangular corners\n var controlTriangleAngle = Math.atan2(ySize, xSize);\n var cornerHypotenuse = Math.sqrt(xSize * xSize + ySize * ySize) / 2;\n var newTheta = controlTriangleAngle - fabric.util.degreesToRadians(objectAngle);\n var newThetaComp = Math.PI / 2 - controlTriangleAngle - fabric.util.degreesToRadians(objectAngle);\n cosHalfOffset = cornerHypotenuse * fabric.util.cos(newTheta);\n sinHalfOffset = cornerHypotenuse * fabric.util.sin(newTheta);\n // use complementary angle for two corners\n cosHalfOffsetComp = cornerHypotenuse * fabric.util.cos(newThetaComp);\n sinHalfOffsetComp = cornerHypotenuse * fabric.util.sin(newThetaComp);\n }\n else {\n // handle square corners\n // use default object corner size unless size is defined\n var cornerSize = (xSize && ySize) ? xSize : objectCornerSize;\n /* 0.7071067812 stands for sqrt(2)/2 */\n cornerHypotenuse = cornerSize * 0.7071067812;\n // complementary angles are equal since they're both 45 degrees\n var newTheta = fabric.util.degreesToRadians(45 - objectAngle);\n cosHalfOffset = cosHalfOffsetComp = cornerHypotenuse * fabric.util.cos(newTheta);\n sinHalfOffset = sinHalfOffsetComp = cornerHypotenuse * fabric.util.sin(newTheta);\n }\n\n return {\n tl: {\n x: centerX - sinHalfOffsetComp,\n y: centerY - cosHalfOffsetComp,\n },\n tr: {\n x: centerX + cosHalfOffset,\n y: centerY - sinHalfOffset,\n },\n bl: {\n x: centerX - cosHalfOffset,\n y: centerY + sinHalfOffset,\n },\n br: {\n x: centerX + sinHalfOffsetComp,\n y: centerY + cosHalfOffsetComp,\n },\n };\n },\n\n /**\n * Render function for the control.\n * When this function runs the context is unscaled. unrotate. Just retina scaled.\n * all the functions will have to translate to the point left,top before starting Drawing\n * if they want to draw a control where the position is detected.\n * left and top are the result of the positionHandler function\n * @param {RenderingContext2D} ctx the context where the control will be drawn\n * @param {Number} left position of the canvas where we are about to render the control.\n * @param {Number} top position of the canvas where we are about to render the control.\n * @param {Object} styleOverride\n * @param {fabric.Object} fabricObject the object where the control is about to be rendered\n */\n render: function(ctx, left, top, styleOverride, fabricObject) {\n styleOverride = styleOverride || {};\n switch (styleOverride.cornerStyle || fabricObject.cornerStyle) {\n case 'circle':\n fabric.controlsUtils.renderCircleControl.call(this, ctx, left, top, styleOverride, fabricObject);\n break;\n default:\n fabric.controlsUtils.renderSquareControl.call(this, ctx, left, top, styleOverride, fabricObject);\n }\n },\n };\n\n})(typeof exports !== 'undefined' ? exports : this);\n\n\n(function() {\n\n /* _FROM_SVG_START_ */\n function getColorStop(el, multiplier) {\n var style = el.getAttribute('style'),\n offset = el.getAttribute('offset') || 0,\n color, colorAlpha, opacity, i;\n\n // convert percents to absolute values\n offset = parseFloat(offset) / (/%$/.test(offset) ? 100 : 1);\n offset = offset < 0 ? 0 : offset > 1 ? 1 : offset;\n if (style) {\n var keyValuePairs = style.split(/\\s*;\\s*/);\n\n if (keyValuePairs[keyValuePairs.length - 1] === '') {\n keyValuePairs.pop();\n }\n\n for (i = keyValuePairs.length; i--; ) {\n\n var split = keyValuePairs[i].split(/\\s*:\\s*/),\n key = split[0].trim(),\n value = split[1].trim();\n\n if (key === 'stop-color') {\n color = value;\n }\n else if (key === 'stop-opacity') {\n opacity = value;\n }\n }\n }\n\n if (!color) {\n color = el.getAttribute('stop-color') || 'rgb(0,0,0)';\n }\n if (!opacity) {\n opacity = el.getAttribute('stop-opacity');\n }\n\n color = new fabric.Color(color);\n colorAlpha = color.getAlpha();\n opacity = isNaN(parseFloat(opacity)) ? 1 : parseFloat(opacity);\n opacity *= colorAlpha * multiplier;\n\n return {\n offset: offset,\n color: color.toRgb(),\n opacity: opacity\n };\n }\n\n function getLinearCoords(el) {\n return {\n x1: el.getAttribute('x1') || 0,\n y1: el.getAttribute('y1') || 0,\n x2: el.getAttribute('x2') || '100%',\n y2: el.getAttribute('y2') || 0\n };\n }\n\n function getRadialCoords(el) {\n return {\n x1: el.getAttribute('fx') || el.getAttribute('cx') || '50%',\n y1: el.getAttribute('fy') || el.getAttribute('cy') || '50%',\n r1: 0,\n x2: el.getAttribute('cx') || '50%',\n y2: el.getAttribute('cy') || '50%',\n r2: el.getAttribute('r') || '50%'\n };\n }\n /* _FROM_SVG_END_ */\n\n var clone = fabric.util.object.clone;\n\n /**\n * Gradient class\n * @class fabric.Gradient\n * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#gradients}\n * @see {@link fabric.Gradient#initialize} for constructor definition\n */\n fabric.Gradient = fabric.util.createClass(/** @lends fabric.Gradient.prototype */ {\n\n /**\n * Horizontal offset for aligning gradients coming from SVG when outside pathgroups\n * @type Number\n * @default 0\n */\n offsetX: 0,\n\n /**\n * Vertical offset for aligning gradients coming from SVG when outside pathgroups\n * @type Number\n * @default 0\n */\n offsetY: 0,\n\n /**\n * A transform matrix to apply to the gradient before painting.\n * Imported from svg gradients, is not applied with the current transform in the center.\n * Before this transform is applied, the origin point is at the top left corner of the object\n * plus the addition of offsetY and offsetX.\n * @type Number[]\n * @default null\n */\n gradientTransform: null,\n\n /**\n * coordinates units for coords.\n * If `pixels`, the number of coords are in the same unit of width / height.\n * If set as `percentage` the coords are still a number, but 1 means 100% of width\n * for the X and 100% of the height for the y. It can be bigger than 1 and negative.\n * allowed values pixels or percentage.\n * @type String\n * @default 'pixels'\n */\n gradientUnits: 'pixels',\n\n /**\n * Gradient type linear or radial\n * @type String\n * @default 'pixels'\n */\n type: 'linear',\n\n /**\n * Constructor\n * @param {Object} options Options object with type, coords, gradientUnits and colorStops\n * @param {Object} [options.type] gradient type linear or radial\n * @param {Object} [options.gradientUnits] gradient units\n * @param {Object} [options.offsetX] SVG import compatibility\n * @param {Object} [options.offsetY] SVG import compatibility\n * @param {Object[]} options.colorStops contains the colorstops.\n * @param {Object} options.coords contains the coords of the gradient\n * @param {Number} [options.coords.x1] X coordiante of the first point for linear or of the focal point for radial\n * @param {Number} [options.coords.y1] Y coordiante of the first point for linear or of the focal point for radial\n * @param {Number} [options.coords.x2] X coordiante of the second point for linear or of the center point for radial\n * @param {Number} [options.coords.y2] Y coordiante of the second point for linear or of the center point for radial\n * @param {Number} [options.coords.r1] only for radial gradient, radius of the inner circle\n * @param {Number} [options.coords.r2] only for radial gradient, radius of the external circle\n * @return {fabric.Gradient} thisArg\n */\n initialize: function(options) {\n options || (options = { });\n options.coords || (options.coords = { });\n\n var coords, _this = this;\n\n // sets everything, then coords and colorstops get sets again\n Object.keys(options).forEach(function(option) {\n _this[option] = options[option];\n });\n\n if (this.id) {\n this.id += '_' + fabric.Object.__uid++;\n }\n else {\n this.id = fabric.Object.__uid++;\n }\n\n coords = {\n x1: options.coords.x1 || 0,\n y1: options.coords.y1 || 0,\n x2: options.coords.x2 || 0,\n y2: options.coords.y2 || 0\n };\n\n if (this.type === 'radial') {\n coords.r1 = options.coords.r1 || 0;\n coords.r2 = options.coords.r2 || 0;\n }\n\n this.coords = coords;\n this.colorStops = options.colorStops.slice();\n },\n\n /**\n * Adds another colorStop\n * @param {Object} colorStop Object with offset and color\n * @return {fabric.Gradient} thisArg\n */\n addColorStop: function(colorStops) {\n for (var position in colorStops) {\n var color = new fabric.Color(colorStops[position]);\n this.colorStops.push({\n offset: parseFloat(position),\n color: color.toRgb(),\n opacity: color.getAlpha()\n });\n }\n return this;\n },\n\n /**\n * Returns object representation of a gradient\n * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n * @return {Object}\n */\n toObject: function(propertiesToInclude) {\n var object = {\n type: this.type,\n coords: this.coords,\n colorStops: this.colorStops,\n offsetX: this.offsetX,\n offsetY: this.offsetY,\n gradientUnits: this.gradientUnits,\n gradientTransform: this.gradientTransform ? this.gradientTransform.concat() : this.gradientTransform\n };\n fabric.util.populateWithProperties(this, object, propertiesToInclude);\n\n return object;\n },\n\n /* _TO_SVG_START_ */\n /**\n * Returns SVG representation of an gradient\n * @param {Object} object Object to create a gradient for\n * @return {String} SVG representation of an gradient (linear/radial)\n */\n toSVG: function(object, options) {\n var coords = clone(this.coords, true), i, len, options = options || {},\n markup, commonAttributes, colorStops = clone(this.colorStops, true),\n needsSwap = coords.r1 > coords.r2,\n transform = this.gradientTransform ? this.gradientTransform.concat() : fabric.iMatrix.concat(),\n offsetX = -this.offsetX, offsetY = -this.offsetY,\n withViewport = !!options.additionalTransform,\n gradientUnits = this.gradientUnits === 'pixels' ? 'userSpaceOnUse' : 'objectBoundingBox';\n // colorStops must be sorted ascending\n colorStops.sort(function(a, b) {\n return a.offset - b.offset;\n });\n\n if (gradientUnits === 'objectBoundingBox') {\n offsetX /= object.width;\n offsetY /= object.height;\n }\n else {\n offsetX += object.width / 2;\n offsetY += object.height / 2;\n }\n if (object.type === 'path' && this.gradientUnits !== 'percentage') {\n offsetX -= object.pathOffset.x;\n offsetY -= object.pathOffset.y;\n }\n\n\n transform[4] -= offsetX;\n transform[5] -= offsetY;\n\n commonAttributes = 'id=\"SVGID_' + this.id +\n '\" gradientUnits=\"' + gradientUnits + '\"';\n commonAttributes += ' gradientTransform=\"' + (withViewport ?\n options.additionalTransform + ' ' : '') + fabric.util.matrixToSVG(transform) + '\" ';\n\n if (this.type === 'linear') {\n markup = [\n '\\n'\n ];\n }\n else if (this.type === 'radial') {\n // svg radial gradient has just 1 radius. the biggest.\n markup = [\n '\\n'\n ];\n }\n\n if (this.type === 'radial') {\n if (needsSwap) {\n // svg goes from internal to external radius. if radius are inverted, swap color stops.\n colorStops = colorStops.concat();\n colorStops.reverse();\n for (i = 0, len = colorStops.length; i < len; i++) {\n colorStops[i].offset = 1 - colorStops[i].offset;\n }\n }\n var minRadius = Math.min(coords.r1, coords.r2);\n if (minRadius > 0) {\n // i have to shift all colorStops and add new one in 0.\n var maxRadius = Math.max(coords.r1, coords.r2),\n percentageShift = minRadius / maxRadius;\n for (i = 0, len = colorStops.length; i < len; i++) {\n colorStops[i].offset += percentageShift * (1 - colorStops[i].offset);\n }\n }\n }\n\n for (i = 0, len = colorStops.length; i < len; i++) {\n var colorStop = colorStops[i];\n markup.push(\n '\\n'\n );\n }\n\n markup.push((this.type === 'linear' ? '\\n' : '\\n'));\n\n return markup.join('');\n },\n /* _TO_SVG_END_ */\n\n /**\n * Returns an instance of CanvasGradient\n * @param {CanvasRenderingContext2D} ctx Context to render on\n * @return {CanvasGradient}\n */\n toLive: function(ctx) {\n var gradient, coords = fabric.util.object.clone(this.coords), i, len;\n\n if (!this.type) {\n return;\n }\n\n if (this.type === 'linear') {\n gradient = ctx.createLinearGradient(\n coords.x1, coords.y1, coords.x2, coords.y2);\n }\n else if (this.type === 'radial') {\n gradient = ctx.createRadialGradient(\n coords.x1, coords.y1, coords.r1, coords.x2, coords.y2, coords.r2);\n }\n\n for (i = 0, len = this.colorStops.length; i < len; i++) {\n var color = this.colorStops[i].color,\n opacity = this.colorStops[i].opacity,\n offset = this.colorStops[i].offset;\n\n if (typeof opacity !== 'undefined') {\n color = new fabric.Color(color).setAlpha(opacity).toRgba();\n }\n gradient.addColorStop(offset, color);\n }\n\n return gradient;\n }\n });\n\n fabric.util.object.extend(fabric.Gradient, {\n\n /* _FROM_SVG_START_ */\n /**\n * Returns {@link fabric.Gradient} instance from an SVG element\n * @static\n * @memberOf fabric.Gradient\n * @param {SVGGradientElement} el SVG gradient element\n * @param {fabric.Object} instance\n * @param {String} opacityAttr A fill-opacity or stroke-opacity attribute to multiply to each stop's opacity.\n * @param {Object} svgOptions an object containing the size of the SVG in order to parse correctly gradients\n * that uses gradientUnits as 'userSpaceOnUse' and percentages.\n * @param {Object.number} viewBoxWidth width part of the viewBox attribute on svg\n * @param {Object.number} viewBoxHeight height part of the viewBox attribute on svg\n * @param {Object.number} width width part of the svg tag if viewBox is not specified\n * @param {Object.number} height height part of the svg tag if viewBox is not specified\n * @return {fabric.Gradient} Gradient instance\n * @see http://www.w3.org/TR/SVG/pservers.html#LinearGradientElement\n * @see http://www.w3.org/TR/SVG/pservers.html#RadialGradientElement\n */\n fromElement: function(el, instance, opacityAttr, svgOptions) {\n /**\n * @example:\n *\n * \n * \n * \n * \n *\n * OR\n *\n * \n * \n * \n * \n *\n * OR\n *\n * \n * \n * \n * \n * \n *\n * OR\n *\n * \n * \n * \n * \n * \n *\n */\n\n var multiplier = parseFloat(opacityAttr) / (/%$/.test(opacityAttr) ? 100 : 1);\n multiplier = multiplier < 0 ? 0 : multiplier > 1 ? 1 : multiplier;\n if (isNaN(multiplier)) {\n multiplier = 1;\n }\n\n var colorStopEls = el.getElementsByTagName('stop'),\n type,\n gradientUnits = el.getAttribute('gradientUnits') === 'userSpaceOnUse' ?\n 'pixels' : 'percentage',\n gradientTransform = el.getAttribute('gradientTransform') || '',\n colorStops = [],\n coords, i, offsetX = 0, offsetY = 0,\n transformMatrix;\n if (el.nodeName === 'linearGradient' || el.nodeName === 'LINEARGRADIENT') {\n type = 'linear';\n coords = getLinearCoords(el);\n }\n else {\n type = 'radial';\n coords = getRadialCoords(el);\n }\n\n for (i = colorStopEls.length; i--; ) {\n colorStops.push(getColorStop(colorStopEls[i], multiplier));\n }\n\n transformMatrix = fabric.parseTransformAttribute(gradientTransform);\n\n __convertPercentUnitsToValues(instance, coords, svgOptions, gradientUnits);\n\n if (gradientUnits === 'pixels') {\n offsetX = -instance.left;\n offsetY = -instance.top;\n }\n\n var gradient = new fabric.Gradient({\n id: el.getAttribute('id'),\n type: type,\n coords: coords,\n colorStops: colorStops,\n gradientUnits: gradientUnits,\n gradientTransform: transformMatrix,\n offsetX: offsetX,\n offsetY: offsetY,\n });\n\n return gradient;\n }\n /* _FROM_SVG_END_ */\n });\n\n /**\n * @private\n */\n function __convertPercentUnitsToValues(instance, options, svgOptions, gradientUnits) {\n var propValue, finalValue;\n Object.keys(options).forEach(function(prop) {\n propValue = options[prop];\n if (propValue === 'Infinity') {\n finalValue = 1;\n }\n else if (propValue === '-Infinity') {\n finalValue = 0;\n }\n else {\n finalValue = parseFloat(options[prop], 10);\n if (typeof propValue === 'string' && /^(\\d+\\.\\d+)%|(\\d+)%$/.test(propValue)) {\n finalValue *= 0.01;\n if (gradientUnits === 'pixels') {\n // then we need to fix those percentages here in svg parsing\n if (prop === 'x1' || prop === 'x2' || prop === 'r2') {\n finalValue *= svgOptions.viewBoxWidth || svgOptions.width;\n }\n if (prop === 'y1' || prop === 'y2') {\n finalValue *= svgOptions.viewBoxHeight || svgOptions.height;\n }\n }\n }\n }\n options[prop] = finalValue;\n });\n }\n})();\n\n\n(function() {\n\n 'use strict';\n\n var toFixed = fabric.util.toFixed;\n\n /**\n * Pattern class\n * @class fabric.Pattern\n * @see {@link http://fabricjs.com/patterns|Pattern demo}\n * @see {@link http://fabricjs.com/dynamic-patterns|DynamicPattern demo}\n * @see {@link fabric.Pattern#initialize} for constructor definition\n */\n\n\n fabric.Pattern = fabric.util.createClass(/** @lends fabric.Pattern.prototype */ {\n\n /**\n * Repeat property of a pattern (one of repeat, repeat-x, repeat-y or no-repeat)\n * @type String\n * @default\n */\n repeat: 'repeat',\n\n /**\n * Pattern horizontal offset from object's left/top corner\n * @type Number\n * @default\n */\n offsetX: 0,\n\n /**\n * Pattern vertical offset from object's left/top corner\n * @type Number\n * @default\n */\n offsetY: 0,\n\n /**\n * crossOrigin value (one of \"\", \"anonymous\", \"use-credentials\")\n * @see https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes\n * @type String\n * @default\n */\n crossOrigin: '',\n\n /**\n * transform matrix to change the pattern, imported from svgs.\n * @type Array\n * @default\n */\n patternTransform: null,\n\n /**\n * Constructor\n * @param {Object} [options] Options object\n * @param {Function} [callback] function to invoke after callback init.\n * @return {fabric.Pattern} thisArg\n */\n initialize: function(options, callback) {\n options || (options = { });\n\n this.id = fabric.Object.__uid++;\n this.setOptions(options);\n if (!options.source || (options.source && typeof options.source !== 'string')) {\n callback && callback(this);\n return;\n }\n else {\n // img src string\n var _this = this;\n this.source = fabric.util.createImage();\n fabric.util.loadImage(options.source, function(img, isError) {\n _this.source = img;\n callback && callback(_this, isError);\n }, null, this.crossOrigin);\n }\n },\n\n /**\n * Returns object representation of a pattern\n * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n * @return {Object} Object representation of a pattern instance\n */\n toObject: function(propertiesToInclude) {\n var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS,\n source, object;\n\n // element\n if (typeof this.source.src === 'string') {\n source = this.source.src;\n }\n //
\n \n
\n ))}\n