@configuratorware/configurator-admingui 1.41.1 → 1.42.1

package/src/Screens/Designer/SubScreens/DesignAreas/Components/MaskEditorField/InlineFileInput.js

@@ -1,53 +0,0 @@
-import React from 'react';
-import withStyles from '@material-ui/core/styles/withStyles';
-import FormControl from '@material-ui/core/FormControl';
-import FlatButton from '../../../../../../UIComponents/FlatButton';
-import FolderIcon from '../../../../../../UIComponents/icons/FolderIcon';
-import Typography from '@material-ui/core/Typography';
-
-const fileInputStyles = {
-    fileInputContainer: {
-        marginTop: 13,
-    },
-    fileInputButton: {
-        '& svg + span': {
-            marginLeft: 10,
-        },
-    },
-    fileInput: {
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        right: 0,
-        left: 0,
-        width: '100%',
-        opacity: 0,
-    },
-    fileInputName: {
-        display: 'inline-block',
-        position: 'relative',
-        top: -2,
-    },
-};
-
-export default withStyles(fileInputStyles)(({ classes, label, accept, onChange, src, fileName }) => (
-    <FormControl className={classes.fileInputContainer}>
-        <FlatButton className={classes.fileInputButton}>
-            <FolderIcon />
-            <span>{label}</span>
-            <input
-                type="file"
-                className={classes.fileInput}
-                accept={accept}
-                onChange={evt => {
-                    onChange(evt.target.files[0]);
-                }}
-            />
-        </FlatButton>
-        {!!src && (
-            <div className={classes.fileInputName}>
-                <Typography variant={'body2'}>{fileName}</Typography>
-            </div>
-        )}
-    </FormControl>
-));

package/src/Screens/Designer/SubScreens/DesignAreas/Components/MaskEditorField/MaskEditorCanvas.js

@@ -1,78 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { createMask } from '../../../../../../Utils/FunDraw/createMask';
-import { createMovableObjectWithControls } from '../../../../../../Utils/FunDraw/movableObject';
-
-const styles = {
-    maskEditorCanvas: {
-        border: '1px solid #000',
-        backgroundImage:
-            'linear-gradient(45deg, #F0F0F0 25%, transparent 25%), ' +
-            'linear-gradient(-45deg, #F0F0F0 25%, transparent 25%), ' +
-            'linear-gradient(45deg, transparent 75%, #F0F0F0 75%), ' +
-            'linear-gradient(-45deg, transparent 75%, #F0F0F0 75%)',
-        backgroundSize: '20px 20px',
-        backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',
-    },
-};
-
-const calculateCanvasSize = (ratio /* width / height */) => {
-    // experimental values for canvas margin (looks good with the dialog)
-    const modalFitCorrectionY = 280;
-    const modalFitCorrectionX = 144;
-    const base =
-        Math.min(window.innerWidth, window.innerHeight) -
-        (window.innerWidth < window.innerHeight - modalFitCorrectionY
-            ? modalFitCorrectionX
-            : modalFitCorrectionY);
-    const width = ratio < 1 ? base * ratio : base;
-    const height = ratio < 1 ? base : base / ratio;
-    return {
-        width,
-        height,
-    };
-};
-
-export const MaskEditorCanvas = ({ ratio, maskSrc, maskData, getMaskDataRef }) => {
-    const canvas = useRef(null);
-
-    useEffect(() => {
-        let movableObject;
-        canvas.current &&
-            (async () => {
-                const { width, height } = canvas.current;
-
-                // always start with blank canvas
-                const ctx = canvas.current.getContext('2d');
-                ctx.clearRect(0, 0, width, height);
-
-                if (!maskSrc) {
-                    return;
-                }
-                try {
-                    const mask = await createMask({ width, height }, maskSrc, maskData);
-                    movableObject = createMovableObjectWithControls(canvas.current, mask, {
-                        onUpdate: ({ getData }) => {
-                            getMaskDataRef.current = () => {
-                                const { object, canvas } = getData();
-                                return {
-                                    x: object.x / canvas.width,
-                                    y: object.y / canvas.height,
-                                    rotation: object.angle || 0,
-                                    relativeScaling: object.width / canvas.width,
-                                };
-                            };
-                        },
-                    });
-                    movableObject.init();
-                } catch (e) {
-                    // eslint-disable-next-line no-console
-                    console.log('Mask file is not available: ' + maskSrc, e);
-                }
-            })();
-        return () => {
-            movableObject && movableObject.dispose();
-        };
-    }, [ratio, maskSrc, maskData]);
-
-    return <canvas ref={canvas} {...calculateCanvasSize(ratio)} style={styles.maskEditorCanvas} />;
-};

package/src/Screens/Designer/SubScreens/DesignAreas/Components/MaskEditorField/MaskEditorField.dev.js

@@ -1,57 +0,0 @@
-import React from 'react';
-import '../../Translations';
-import { MaskEditorField } from './MaskEditorField';
-
-import networkConfig from '../../../../../../App/Config/network';
-import { RequestApiToken } from '../../../../../../Utils/Dev/RequestApiToken';
-import { withStateProps } from '../../../../../../Utils/Dev/withStateProps';
-
-const designAreaId = 2; // front_center
-
-const itemIdentifier = 'demo_hoodie';
-const designAreaIdentifier = 'front_center';
-
-const props = {
-    ratio: 16 / 9,
-    /*
-    // test data for freeForm shape
-    value: {
-        maskType: 'freeForm',
-        maskData: {
-            x: 0.8943452380952381,
-            y: 0.2222222222222222,
-            scaling: 0.7400969242473375,
-            rotation: 5.838424041370871,
-        },
-    },
-    */
-    // test data for circle shape
-    value: {
-        maskType: 'circle',
-        maskData: {
-            x: 0.5,
-            y: 0.5,
-            relativeScaling: 0.56,
-            rotation: 0,
-        },
-    },
-    uploadUrl: `design_areas/${designAreaId}/upload_mask`,
-    freeFormUrl: `${networkConfig.basePath}designer/masks/${itemIdentifier}/${designAreaIdentifier}.svg`,
-};
-
-export default withStateProps(
-    props,
-    state => state,
-    setState => ({
-        onChange: value => {
-            setState(state => ({ ...state, value }));
-            // eslint-disable-next-line no-console
-            console.log('new mask object:', value);
-        },
-    })
-)(props => (
-    <div>
-        <RequestApiToken />
-        <MaskEditorField {...props} />
-    </div>
-));

package/src/Screens/Designer/SubScreens/DesignAreas/Components/MaskEditorField/MaskEditorField.js

@@ -1,310 +0,0 @@
-import React, { useEffect, useRef, useState, useMemo } from 'react';
-import size from 'lodash/size';
-import first from 'lodash/first';
-import FormControlLabel from '@material-ui/core/FormControlLabel/index';
-import Checkbox from '@material-ui/core/Checkbox/index';
-import Grid from '@material-ui/core/Grid';
-import withStyles from '@material-ui/core/styles/withStyles';
-
-import { t, T } from '../../../../../../App/i18n';
-import Dialog from '../../../../../../UIComponents/Dialog';
-import MenuItem from '../../../../../../UIComponents/MenuItem';
-import SelectField from '../../../../../../UIComponents/SelectField';
-import FlatButton from '../../../../../../UIComponents/FlatButton';
-import circleMask from './masks/circle.svg';
-import { withFileUpload } from './withFileUpload';
-import InlineFileInput from './InlineFileInput';
-import { MaskEditorCanvas } from './MaskEditorCanvas';
-import { maskTypes } from '../../Utils/maskTypes';
-import Typography from '@material-ui/core/Typography/Typography';
-
-const maskTypeValues = Object.values(maskTypes);
-
-const defaultValue = {
-    maskType: first(maskTypeValues),
-    maskData: {},
-};
-
-const safeClipElements = ['ellipse', 'circle', 'rect', 'line', 'polygon', 'polyline', 'path'];
-
-const getUnsafeElements = svgString => {
-    const matchedElements = svgString.matchAll(/<((?!svg)\w+)/g);
-    const unsafeElements = [];
-    for (const match of matchedElements) {
-        const tagName = match[1];
-        !safeClipElements.includes(tagName) &&
-            !unsafeElements.includes(tagName) &&
-            unsafeElements.push(tagName);
-    }
-    return unsafeElements;
-};
-
-const UploadStatus = withStyles({
-    uploadStatusContainer: {
-        textAlign: 'right',
-    },
-    error: {
-        color: 'red',
-    },
-})(
-    ({ uploadStatus, classes }) =>
-        uploadStatus && (
-            <div className={classes.uploadStatusContainer}>
-                {uploadStatus === 'failed' && (
-                    <span className={classes.error}>{t('maskEditor.uploadFailed')}</span>
-                )}
-                {uploadStatus === 'pending' && <span>{t('maskEditor.uploadInProgress')}</span>}
-            </div>
-        )
-);
-
-const styles = {
-    inlineFormWrapper: {
-        display: 'inline-block',
-        '& > div': {
-            display: 'inline-block',
-            position: 'relative',
-            top: -18,
-        },
-        '& > span': {
-            paddingRight: 40,
-        },
-    },
-};
-
-const StyledDialog = withStyles({
-    dialogContentTextRoot: {
-        display: 'flex',
-        '& canvas': {
-            margin: 'auto',
-            maxHeight: '100%',
-            maxWidth: '100%',
-        },
-    },
-})(Dialog);
-
-export const MaskEditorField = withStyles(styles)(
-    withFileUpload(
-        ({
-            value,
-            ratio = 1,
-            freeFormUrl,
-            onChange,
-            uploadFile,
-            uploadStatus,
-            resetUploadStatus,
-            classes,
-            designAreaId,
-        }) => {
-            const disabled = !ratio || !freeFormUrl;
-
-            const initialValue = useMemo(() => (size(value) > 0 ? value : defaultValue), [value]);
-
-            const [showDialog, toggleDialog] = useState(false);
-            const [currentValue, setCurrentValue] = useState(initialValue);
-            const [freeFormFile, setFreeFormFile] = useState(false);
-            const [dataUrl, setDataUrl] = useState(initialValue?.maskDataUrl || false);
-            const [embeddedImageError, setEmbeddedImageError] = useState(false);
-            const [unsafeElements, setUnsafeElements] = useState([]);
-
-            const { maskType, maskData } = currentValue;
-
-            const clearMaskData = () => setCurrentValue({ ...currentValue, maskData: {} });
-            const setMaskType = maskType => {
-                setCurrentValue({ ...currentValue, maskType, maskData: {} });
-                resetState();
-            };
-
-            const resetState = () => {
-                setFreeFormFile(false);
-                setDataUrl(initialValue?.maskDataUrl || false);
-                setEmbeddedImageError(false);
-            };
-
-            const getFileDataUrl = file => {
-                setEmbeddedImageError(false);
-                if (!file) {
-                    return;
-                }
-                const reader = new FileReader();
-                reader.addEventListener(
-                    'load',
-                    function() {
-                        const svgString = atob(reader.result.replace(/data:image\/svg\+xml;base64,/, ''));
-                        const embeddedImageIndex = svgString.search('<image');
-                        if (embeddedImageIndex !== -1) {
-                            setEmbeddedImageError(true);
-                            return;
-                        }
-                        setUnsafeElements(getUnsafeElements(svgString));
-                        setDataUrl(reader.result);
-                        setFreeFormFile(file);
-                        clearMaskData();
-                    },
-                    false
-                );
-                reader.readAsDataURL(file);
-            };
-
-            useEffect(() => {
-                initialValue?.maskDataUrl && setDataUrl(initialValue.maskDataUrl);
-            }, [initialValue]);
-
-            useEffect(() => {
-                // update the current value explicitly with the value prop (eg. the changes has been saved)
-                if (size(value) > 0) {
-                    setCurrentValue({ ...value });
-                }
-            }, [value]);
-
-            useEffect(() => {
-                // reset internal state when showing the dialog
-                if (showDialog) {
-                    resetState();
-                    if (size(value) > 0) {
-                        setCurrentValue(initialValue);
-                    }
-                }
-            }, [showDialog]);
-
-            useEffect(() => {
-                // reset the upload status if the file or dialog status has changed
-                resetUploadStatus();
-            }, [freeFormFile, showDialog]);
-
-            const getMaskSrc = useMemo(
-                () => maskType =>
-                    showDialog &&
-                    {
-                        [maskTypes.none]: false,
-                        [maskTypes.circle]: circleMask,
-                        [maskTypes.freeForm]: dataUrl || `${freeFormUrl}?v=${Math.random()}`,
-                    }[maskType],
-                [freeFormUrl, dataUrl, showDialog]
-            );
-
-            const getMaskDataRef = useRef(() => {});
-
-            const onOkClick = async () => {
-                try {
-                    if (freeFormFile && designAreaId) {
-                        await uploadFile('mask', freeFormFile);
-                    }
-                    onChange(
-                        maskType === maskTypes.none
-                            ? null
-                            : {
-                                  maskType,
-                                  maskData: getMaskDataRef.current(),
-                                  maskFile: freeFormFile ? freeFormFile : initialValue.maskFile,
-                                  maskDataUrl: dataUrl ? dataUrl : initialValue.maskDataUrl,
-                              }
-                    );
-                    toggleDialog(false);
-                } catch (e) {
-                    // eslint-disable-next-line no-console
-                    console.error(e);
-                }
-            };
-
-            return (
-                <React.Fragment>
-                    <Grid item xs={12}>
-                        <FormControlLabel
-                            control={
-                                <Checkbox
-                                    checked={size(value) > 0}
-                                    onChange={() => toggleDialog(!showDialog)}
-                                    value={true}
-                                    disabled={disabled}
-                                    color="primary"
-                                />
-                            }
-                            label={t('maskEditor.checkboxLabel')}
-                        />
-                    </Grid>
-                    <StyledDialog
-                        title={
-                            <React.Fragment>
-                                <div className={classes.inlineFormWrapper}>
-                                    {T('mask editor')}
-                                    <SelectField
-                                        onChange={({ target: { value } }) => {
-                                            setMaskType(value);
-                                        }}
-                                        placeholder={T('maskEditor.maskType')}
-                                        value={maskType}
-                                        disableUnderline
-                                    >
-                                        {maskTypeValues.map(option => (
-                                            <MenuItem value={option} key={option}>
-                                                {t(`maskEditor.maskTypes.${option}`)}
-                                            </MenuItem>
-                                        ))}
-                                    </SelectField>
-                                    {maskType === 'freeForm' && (
-                                        <InlineFileInput
-                                            label={t('maskEditor.selectFile')}
-                                            accept={'image/svg+xml'}
-                                            onChange={getFileDataUrl}
-                                            src={getMaskSrc(maskType)}
-                                            fileName={
-                                                freeFormFile
-                                                    ? freeFormFile.name
-                                                    : freeFormUrl.replace(/.*\/([^/]+)$/, '$1')
-                                            }
-                                        />
-                                    )}
-                                </div>
-                                {embeddedImageError && (
-                                    <Typography variant="body1" color="error">
-                                        {t('maskEditor.embeddedImageError')}
-                                    </Typography>
-                                )}
-                                {unsafeElements.length > 0 && (
-                                    <Typography variant="body1" color="error">
-                                        {T('maskEditor.unsafeElementsError', {
-                                            unsafeElements: unsafeElements.join(', '),
-                                            safeClipElements: safeClipElements.join(', '),
-                                        })}
-                                    </Typography>
-                                )}
-                            </React.Fragment>
-                        }
-                        open={showDialog}
-                        maxWidth={'xl'}
-                        fullWidth={false}
-                        actions={
-                            <React.Fragment>
-                                <FlatButton
-                                    disabled={uploadStatus === 'pending'}
-                                    label={T('Cancel')}
-                                    onClick={() => toggleDialog(false)}
-                                />
-                                <FlatButton
-                                    disabled={uploadStatus === 'pending'}
-                                    label={T(freeFormFile ? 'maskEditor.uploadAndSave' : 'Ok')}
-                                    primary={true}
-                                    onClick={onOkClick}
-                                />
-                            </React.Fragment>
-                        }
-                    >
-                        <MaskEditorCanvas
-                            ratio={ratio}
-                            maskSrc={getMaskSrc(maskType)}
-                            maskData={maskData}
-                            getMaskDataRef={getMaskDataRef}
-                        />
-
-                        <UploadStatus uploadStatus={uploadStatus} />
-                    </StyledDialog>
-                </React.Fragment>
-            );
-        }
-    )
-);
-
-export default ({ onChange, name, ...props }) => {
-    return <MaskEditorField onChange={data => onChange(name, data)} {...props} />;
-};

package/src/Screens/Designer/SubScreens/DesignAreas/Components/MaskEditorField/masks/circle.svg

@@ -1,4 +0,0 @@
-<?xml version="1.0"?>
-<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="50%" cy="50%" r="50%" fill="red" />
-</svg>

package/src/Screens/Designer/SubScreens/DesignAreas/Components/MaskEditorField/withFileUpload.js

@@ -1,40 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import Api from '../../../../../../App/Api';
-
-export const withFileUpload = Component => ({ uploadUrl, ...otherProps }) => {
-    const [status, setStatus] = useState(false);
-
-    const uploadFile = useMemo(
-        () => async (key, file) => {
-            if (!file) {
-                return;
-            }
-            const data = new FormData();
-            data.append(key, file);
-
-            try {
-                setStatus('pending');
-                const result = await Api.request({
-                    method: 'POST',
-                    url: uploadUrl,
-                    data,
-                });
-                setStatus('done');
-                return result;
-            } catch (e) {
-                setStatus('failed');
-                throw e;
-            }
-        },
-        [uploadUrl]
-    );
-
-    return (
-        <Component
-            uploadFile={uploadFile}
-            uploadStatus={status}
-            resetUploadStatus={() => setStatus(false)}
-            {...otherProps}
-        />
-    );
-};

package/src/Screens/Designer/SubScreens/DesignAreas/Containers/ConnectedMaskEditorField.js

@@ -1,66 +0,0 @@
-import { connect } from 'react-redux';
-import { REDUCER_NAME } from '../Reducers/Actions';
-import get from 'lodash/get';
-import MaskEditorField from '../Components/MaskEditorField/MaskEditorField';
-import { getFreeFormUrl } from '../Utils/getFreeFormUrl';
-
-export const createConnectedMaskEditorField = getDerivedProps =>
-    connect((state, ownProps) => {
-        const entityState = state[REDUCER_NAME];
-
-        const width = get(entityState, 'data.width.value');
-        const height = get(entityState, 'data.height.value');
-        const designAreaId = get(entityState, 'data.id.value');
-        const itemIdentifier = get(entityState, 'data.item.value.identifier');
-        const designAreaIdentifier = get(entityState, 'data.identifier.value');
-
-        const props = {
-            width,
-            height,
-            designAreaId,
-            itemIdentifier,
-            designAreaIdentifier,
-        };
-        return getDerivedProps(props, ownProps);
-    })(MaskEditorField);
-
-const getDerivedMaskEditorPropsForDesignArea = (
-    { width, height, designAreaId, itemIdentifier, designAreaIdentifier },
-    ownProps
-) => ({
-    ratio: isFinite(width) && isFinite(height) && width / height,
-    uploadUrl: designAreaId && `design_areas/${designAreaId}/upload_mask`,
-    freeFormUrl: getFreeFormUrl(itemIdentifier, designAreaIdentifier),
-    designAreaId: designAreaId,
-    ...ownProps,
-});
-
-const getDerivedMaskEditorPropsForProductionMethod = (
-    { width, height, designAreaId, itemIdentifier, designAreaIdentifier },
-    {
-        width: ownWidth,
-        height: ownHeight,
-        designProductionMethodIdentifier,
-        designProductionMethodId,
-        ...otherProps
-    }
-) => ({
-    ...otherProps,
-    ratio:
-        isFinite(ownWidth) && isFinite(ownHeight) && ownWidth > 0 && ownHeight > 0
-            ? ownWidth / ownHeight
-            : isFinite(width) && isFinite(height) && width / height,
-    uploadUrl:
-        designAreaId &&
-        designProductionMethodId &&
-        `design_areas/${designAreaId}/design_production_methods/${designProductionMethodId}/upload_mask`,
-    freeFormUrl: getFreeFormUrl(itemIdentifier, designAreaIdentifier, designProductionMethodIdentifier),
-});
-
-export const DesignAreaMaskEditorField = createConnectedMaskEditorField(
-    getDerivedMaskEditorPropsForDesignArea
-);
-
-export const ProductionMethodMaskEditorField = createConnectedMaskEditorField(
-    getDerivedMaskEditorPropsForProductionMethod
-);