@configuratorware/configurator-admingui 1.41.2 → 1.42.2

package/src/Screens/Designer/SubScreens/Visualization/Containers/Edit/Edit.js

@@ -1,789 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import find from 'lodash/find';
-import findIndex from 'lodash/findIndex';
-import get from 'lodash/get';
-import set from 'lodash/set';
-import first from 'lodash/first';
-import merge from 'lodash/merge';
-import withStyles from '@material-ui/core/styles/withStyles';
-import {
-    createAdapterConfig,
-    createVisualizationAdapter,
-} from 'redhotmagma-visualization/visualizationAdapterCreator';
-import { EventTypes } from 'redhotmagma-visualization/Constants';
-
-import { withRemappedProps } from '../../../../../../Utils/HOCs/RemappedProps';
-import { withAsyncProps } from '../../../../../../Utils/HOCs/AsyncProps';
-import { connectDefault } from '../../../../../../Components/DefaultConnectedForm';
-import Actions, { REDUCER_NAME } from '../../../Designviews/Reducers/Actions';
-import TranslationFinder from '../../../../../../Components/TranslationFinder';
-
-import SelectField from '../../../../../../UIComponents/SelectField';
-import MenuItem from '../../../../../../UIComponents/MenuItem';
-import { t, T } from '../../../../../../App/i18n';
-import Data from '../../../../../../App/Data';
-import Typography from '../../../../../../UIComponents/Typography';
-import RaisedButton from '../../../../../../UIComponents/RaisedButton';
-import { createError, parseError } from '../../../../../../Utils/Error/createError';
-import networkConfig from '../../../../../../App/Config/network';
-
-import { createThree2DEditor, fixIncompletePosition, getAreaProps } from '../../Components/Three2DEditor';
-import VisualizationContainer from '../../Components/VisualizationContainer';
-import AdvancedShapeEditor from '../../Components/AdvancedShapeEditor';
-import { AreaEditor } from '../../Components/AreaEditor';
-import { loadConfigurationByIdentifier, loadItemById } from '../../ApiCalls';
-import {
-    drawOnTexture,
-    getCameraViewNames,
-    getDataWithout3dEffect,
-    has3dEffect,
-    isPositionComplete,
-    withDefaultBaseShape,
-} from './VisualizationUtils';
-import { applyLinks } from './DataLinks';
-import { getMaskSrcByType } from '../../../DesignAreas/Utils/getMaskSrcByType';
-import { getFreeFormUrl } from '../../../DesignAreas/Utils/getFreeFormUrl';
-import Checkbox from '../../../../../../UIComponents/Checkbox';
-import FormControlLabel from '../../../../../../UIComponents/FormControlLabel';
-import { sendMessage } from '../../../../../../Utils/Function/sendMessage';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import AreaEditorForm from '../../Components/AreaEditorForm';
-
-const styles = theme => {
-    const breakPoint = {
-        max: `@media screen and (max-width:${1144 + 2 * theme.spacing.unit}px)`,
-    };
-    return {
-        editorRoot: {
-            display: 'flex',
-            flexDirection: 'row',
-            overflow: 'hidden',
-            '&.fullHeight': {
-                height: 'calc(100vh - 180px)',
-            },
-            '& > $header': {
-                display: 'none',
-                [breakPoint.max]: {
-                    display: 'block',
-                },
-            },
-            '& > $header3DContainer': {
-                display: 'none',
-                [breakPoint.max]: {
-                    display: 'flex',
-                },
-            },
-            [breakPoint.max]: {
-                flexDirection: 'column',
-            },
-        },
-        leftSide: {
-            marginRight: 2 * theme.spacing.unit,
-            flex: 1,
-            overflow: 'auto',
-        },
-        header: {},
-        header3D: {
-            flex: 1,
-        },
-        header3DContainer: {
-            display: 'flex',
-            flexDirection: 'row',
-        },
-        rightSide: {
-            flex: 1,
-            display: 'flex',
-            flexDirection: 'column',
-            overflow: 'auto',
-            '& > $header': {
-                [breakPoint.max]: {
-                    display: 'none',
-                },
-            },
-        },
-        rightSide3D: {
-            flex: 1,
-            '& > $header3DContainer': {
-                [breakPoint.max]: {
-                    display: 'none',
-                },
-            },
-            display: 'flex',
-            flexDirection: 'column',
-            maxWidth: '50%',
-            marginLeft: 'auto',
-            overflow: 'hidden',
-            [breakPoint.max]: {
-                maxWidth: '100%',
-            },
-        },
-        areaEditorForm: {
-            marginLeft: 4 * theme.spacing.unit,
-            marginBottom: 2 * theme.spacing.unit,
-            flex: 1,
-        },
-        title: {
-            fontSize: 20,
-            marginBottom: theme.spacing.unit,
-        },
-        data: {
-            padding: 0,
-            marginBottom: theme.spacing.unit,
-            marginTop: 0,
-            listStyle: 'none',
-            '& li': {
-                display: 'inline-block',
-                marginRight: 2 * theme.spacing.unit,
-            },
-        },
-        errors: {
-            color: 'red',
-        },
-        actionButtons: {
-            paddingTop: 2 * theme.spacing.unit,
-            textAlign: 'right',
-        },
-        loadingText: {
-            marginTop: 2 * theme.spacing.unit,
-        },
-        advancedEditor: {
-            maxWidth: 600,
-            overflow: 'auto',
-            [breakPoint.max]: {
-                maxWidth: '100%',
-            },
-        },
-        visualizationRoot: {
-            display: 'flex',
-            flexDirection: 'row',
-            overflow: 'hidden',
-            [breakPoint.max]: {
-                flexDirection: 'column',
-            },
-            '& > $leftSide': {
-                width: '70%',
-                overflow: 'hidden',
-                flex: 'initial',
-                [breakPoint.max]: {
-                    width: '100%',
-                    flex: 1,
-                },
-            },
-        },
-        visualizationContainer: {
-            width: '100%',
-            height: '39vw',
-        },
-        visualizationContainer3D: {
-            width: 'auto',
-            flex: 1,
-            maxHeight: '100%',
-            overflow: 'hidden',
-        },
-        loaderContainer: {
-            minHeight: 400,
-            display: 'flex',
-            alignItems: 'center',
-            '& > div': {
-                flex: 1,
-                alignItems: 'center',
-                flexDirection: 'column',
-                display: 'flex',
-            },
-            '&$loaderContainerFullSize': {
-                position: 'absolute',
-                top: 0,
-                bottom: 0,
-                left: 0,
-                right: 0,
-                overflow: 'hidden',
-                backgroundColor: 'rgba(255,255,255,0.3)',
-            },
-        },
-        loaderContainerFullSize: {},
-    };
-};
-
-function isKindOf2D(mode) {
-    return mode === '2dVariant' || mode === '2dLayer';
-}
-function isKindOf3D(mode) {
-    return mode === '3dVariant' || mode === '3dScene';
-}
-
-export class VisualizationSettingsEdit extends Component {
-    static propTypes = {
-        designArea: PropTypes.object,
-        entityState: PropTypes.object,
-        classes: PropTypes.object,
-        setData: PropTypes.func.isRequired,
-        postData: PropTypes.func.isRequired,
-    };
-    static defaultProps = {
-        classes: {},
-    };
-
-    state = {
-        imageElement: null,
-        cameraViews: [],
-        selectedCameraView: '',
-        errorMessage: null,
-        errorData: null,
-        loading: true,
-        advancedMode: false,
-    };
-
-    host = networkConfig.basePath.replace(/\/$/, '');
-
-    adapterConfig = createAdapterConfig(
-        { host: this.host },
-        {
-            '3dVariant': {
-                basePath: `${this.host}/content/3D`,
-            },
-        }
-    );
-
-    three = null;
-
-    componentDidMount() {
-        if (this.props.item) {
-            this.loadModel();
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.three) {
-            this.three.dispose();
-        }
-        if (this.baseShapeEditor) {
-            this.baseShapeEditor.dispose();
-        }
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-        if (this.props.item !== prevProps.item) {
-            this.loadModel();
-        } else {
-            const designAreas = get(this.props, 'entityState.data.designAreas.value') || [];
-            const prevDesignAreas = get(prevProps, 'entityState.data.designAreas.value');
-            if (designAreas.length > 0 && designAreas !== prevDesignAreas) {
-                this.updateVisualization();
-            }
-        }
-        if (this.state.advancedMode !== prevState.advancedMode && this.baseShapeEditor) {
-            this.baseShapeEditor.setAdvancedMode(this.state.advancedMode);
-        }
-    }
-
-    async updateVisualization() {
-        const { entityState } = this.props;
-        const baseData = this.getCurrentDesignAreaData();
-
-        const designView = {
-            ...entityState.source,
-            designAreas: [baseData],
-        };
-
-        const designViewImages = get(designView, 'layerImages');
-        if (designViewImages) {
-            const guessedDesignViewIdentifier = Object.keys(designViewImages).find(
-                identifier => identifier.indexOf(designView.identifier) !== -1
-            );
-            if (guessedDesignViewIdentifier) {
-                Object.assign(designView, {
-                    identifier: guessedDesignViewIdentifier,
-                });
-            }
-            const configuration = {
-                visualizationData: {
-                    viewImages: designViewImages,
-                },
-            };
-            await sendMessage(this.three, 'update', configuration);
-        }
-
-        await this.three.updateDesignAreaList([
-            {
-                ...baseData,
-                designView,
-            },
-        ]);
-        await sendMessage(this.three, 'setView', designView);
-
-        if (this.baseShapeEditor) {
-            this.baseShapeEditor.update();
-        }
-
-        if (has3dEffect(baseData) && !this.state.advancedMode) {
-            this.toggleAdvancedMode();
-        }
-    }
-
-    toggleAdvancedMode = () => {
-        const designAreaData = this.getCurrentDesignAreaData();
-        if (!isPositionComplete(designAreaData.position)) {
-            this.updateData();
-        }
-        if (this.state.advancedMode && has3dEffect(designAreaData)) {
-            this.updateData(getDataWithout3dEffect());
-        }
-        this.setState({ advancedMode: !this.state.advancedMode });
-    };
-
-    getCurrentDesignAreaData() {
-        const { designArea, entityState } = this.props;
-        if (!designArea) {
-            return null;
-        }
-        const currentArr = entityState.data.designAreas.value;
-
-        const designData = find(currentArr, { identifier: designArea.identifier }) || designArea;
-
-        if (designData.baseShape) {
-            return designData;
-        }
-
-        const { width, height } = designArea;
-        const ratio = (width || 1) / (height || 1);
-        let options = {};
-
-        if (this.state.imageElement) {
-            const { width, height } = this.state.imageElement;
-            options = {
-                x: width / 2,
-                y: height / 2,
-            };
-        }
-
-        return withDefaultBaseShape(designData, { ratio, ...options });
-    }
-
-    getCurrentMaskObject() {
-        const {
-            designArea,
-            item: { identifier: itemIdentifier },
-        } = this.props;
-        const { mask, identifier: designAreaIdentifier } = {
-            ...designArea,
-            ...this.getCurrentDesignAreaData(),
-        };
-        const maskSrc = getMaskSrcByType(
-            mask && mask.maskType,
-            getFreeFormUrl(itemIdentifier, designAreaIdentifier)
-        );
-        return maskSrc
-            ? {
-                  ...mask,
-                  maskSrc,
-              }
-            : false;
-    }
-
-    getErrorsForDesignAreaData(designAreaData) {
-        if (!designAreaData) {
-            return null;
-        }
-        const { entityState } = this.props;
-        const currentArr = entityState.data.designAreas.value;
-        const idx = currentArr.indexOf(designAreaData);
-        return get(this.props, `entityState.data.designAreas.errors[${idx}]`);
-    }
-
-    updateBaseShapeData = async (baseShapeData = false) => {
-        if (baseShapeData) {
-            this.updateData({ baseShape: baseShapeData });
-        }
-    };
-
-    /**
-     * Sets the paths and loads the model, then renders it
-     * @returns {Promise.<*>}
-     */
-    async loadModel() {
-        const { item, mode } = this.props;
-
-        try {
-            const variant = get(item, 'children[0]', item);
-            if (!item || !variant) {
-                createError('failedToLoadItem');
-            }
-
-            if (this.three) {
-                this.three.dispose();
-            }
-            const three = createVisualizationAdapter(this.adapterConfig, mode);
-            this.three = three;
-
-            three.observable.on(EventTypes.LoadError, () => {
-                this.setState({ errorMessage: 'objectLoadError' });
-            });
-
-            three.observable.on(EventTypes.Initialized, async () => {
-                try {
-                    three.setItemPath(item.identifier);
-                    three.setMaterialVariantPath(variant.identifier);
-
-                    await three.updateMaterial();
-                    await three.loadModel();
-
-                    if (isKindOf3D(mode)) {
-                        // fixme: until the visualizationData is not available, load it from the configuration
-                        const loadedConfiguration = await loadConfigurationByIdentifier(item.identifier);
-                        if (loadedConfiguration) {
-                            await sendMessage(three, 'update', loadedConfiguration);
-                        }
-
-                        const material = first(three.getCustomizableMaterials());
-                        if (!material) {
-                            createError('failedToGetCustomizableMaterial');
-                        }
-                        const texture = material.map || {};
-                        const imageElement = texture.originalImage;
-                        if (!imageElement) {
-                            createError('failedToLoadTextureImage');
-                        }
-                        const cameraViews = getCameraViewNames(three);
-                        this.setState({ imageElement, cameraViews });
-
-                        const currentData = this.getCurrentDesignAreaData();
-                        const selectedCameraView = (
-                            '' + get(currentData, 'customData.selectedCameraView', '')
-                        ).toLowerCase();
-                        if (selectedCameraView) {
-                            this.setState({ selectedCameraView });
-                            three.jumpToView(selectedCameraView);
-                        }
-                    } else if (isKindOf2D(mode)) {
-                        if (this.baseShapeEditor) {
-                            this.baseShapeEditor.dispose();
-                            this.baseShapeEditor = null;
-                        }
-                        await this.updateVisualization();
-                        const editor = await createThree2DEditor(three, this.updateBaseShapeData);
-                        this.baseShapeEditor = editor;
-                        const maskData = this.getCurrentMaskObject();
-                        maskData && editor.setMask(maskData);
-                        editor.init();
-                        this.state.advancedMode && editor.setAdvancedMode(true);
-                        this.updateVisualization();
-                    }
-
-                    this.setState({ loading: false });
-                } catch (e) {
-                    // eslint-disable-next-line no-console
-                    console.error(e);
-                    this.setState(parseError(e));
-                }
-            });
-
-            this.forceUpdate();
-        } catch (e) {
-            // eslint-disable-next-line no-console
-            console.error('Error while loading 3D model.', e);
-            this.setState(parseError(e));
-        }
-    }
-
-    onChangeCameraView = evt => {
-        const selectedCameraView = evt.target.value;
-        this.three.jumpToView(selectedCameraView);
-        this.setState({ selectedCameraView });
-    };
-
-    updateData = (customData = {}) => {
-        const designAreas = get(this.props, 'entityState.data.designAreas');
-        const data = new Data(designAreas.schema);
-        const previousData = fixIncompletePosition(this.getCurrentDesignAreaData());
-
-        let baseShapeData = previousData.baseShape || {
-            type: 'Plane',
-        };
-        if (this.baseShapeEditor) {
-            baseShapeData = this.baseShapeEditor.getData();
-        }
-
-        let positionData = isPositionComplete(previousData.position)
-            ? previousData.position
-            : getAreaProps({
-                  ...previousData,
-                  baseShape: { ...baseShapeData },
-              });
-
-        if (this.areaEditorRef.current) {
-            positionData = this.areaEditorRef.current.getCalculatedAreaData();
-        }
-
-        const { selectedCameraView } = this.state;
-        const currentArr = designAreas.value;
-        const nextArr = [].concat(currentArr);
-        const nextData = merge(
-            {
-                ...previousData,
-                id: get(this.props, 'designArea.id', null),
-                baseShape: { ...baseShapeData },
-                position: { ...positionData },
-                customData: {
-                    ...previousData.customData,
-                    selectedCameraView,
-                },
-            },
-            customData
-        );
-
-        const {
-            designArea: { width, height },
-        } = this.props;
-
-        applyLinks(previousData, nextData, {
-            positionRatio: (width || 1) / (height || 1),
-            recalculatePosition: isKindOf2D(this.props.mode),
-        });
-
-        data.updateValues(nextData);
-        if (data.validate()) {
-            const validatedData = data.getData();
-            const idx = findIndex(currentArr, { identifier: previousData.identifier });
-            // if it's in the array, just replace the item at the index
-            if (idx > -1) {
-                nextArr[idx] = validatedData;
-            }
-            // if it's new, append it to the end
-            else {
-                nextArr.push(validatedData);
-            }
-            this.props.setData('designAreas', nextArr);
-            return true;
-        }
-        return false;
-    };
-
-    onChangeData = (path, value) => {
-        const customData = {};
-        set(customData, path, value);
-        this.updateData(customData);
-    };
-
-    updateAndSaveData = () => {
-        if (this.updateData()) {
-            this.props.postData();
-        }
-    };
-
-    cancel = () => this.props.hideDetails();
-
-    areaEditorRef = React.createRef();
-
-    renderHeader(designAreaData) {
-        const { designArea, classes, mode } = this.props;
-        const designProductionMethods = (designArea.designProductionMethods || [])
-            .map(dpm => dpm.title)
-            .join(', ');
-        return (
-            <div className={isKindOf3D(mode) ? classes.header3D : classes.header}>
-                <Typography variant="h3" className={classes.title}>
-                    <TranslationFinder
-                        data={designArea.texts}
-                        property="title"
-                        fallback={designArea.identifier || 'Title of the design area'}
-                    />
-                </Typography>
-
-                <div className={classes.data}>{designProductionMethods}</div>
-
-                <ul className={classes.data}>
-                    <li>
-                        {T('designer.visualization.width')}: {designArea.width} mm
-                    </li>
-                    <li>
-                        {T('designer.visualization.height')}: {designArea.height} mm
-                    </li>
-                </ul>
-
-                {this.state.cameraViews.length > 0 && (
-                    <SelectField
-                        onChange={this.onChangeCameraView}
-                        label={T('designer.visualization.cameraPosition')}
-                        value={this.state.selectedCameraView}
-                        disableUnderline
-                        style={{ minWidth: 150 }}
-                    >
-                        {this.state.cameraViews.map(option => (
-                            <MenuItem value={option} key={option}>
-                                {option}
-                            </MenuItem>
-                        ))}
-                    </SelectField>
-                )}
-
-                {designAreaData && isKindOf2D(mode) && (
-                    <FormControlLabel
-                        control={
-                            <Checkbox
-                                name="isDefault"
-                                onChange={() => this.onChangeData('isDefault', !designAreaData.isDefault)}
-                                checked={designAreaData.isDefault}
-                            />
-                        }
-                        label={t('designer.designArea.isDefaultView')}
-                    />
-                )}
-            </div>
-        );
-    }
-
-    renderHeader3D(designAreaData) {
-        const { classes } = this.props;
-        return (
-            <div className={classes.header3DContainer}>
-                {this.renderHeader()}
-                <AreaEditorForm
-                    designAreaData={designAreaData}
-                    onChange={this.onChangeData}
-                    className={classes.areaEditorForm}
-                />
-            </div>
-        );
-    }
-
-    renderVisualization(designAreaData) {
-        const { mode, classes } = this.props;
-        const { three } = this;
-        if (isKindOf2D(mode)) {
-            return (
-                <div className={classes.visualizationRoot}>
-                    <div className={classes.leftSide}>
-                        <VisualizationContainer three={three} className={classes.visualizationContainer} />
-                    </div>
-
-                    <div className={classes.rightSide}>
-                        {this.renderHeader(designAreaData)}
-                        <AdvancedShapeEditor
-                            show={this.state.advancedMode}
-                            onToggle={this.toggleAdvancedMode}
-                            designAreaData={designAreaData}
-                            onChange={this.onChangeData}
-                            className={classes.advancedEditor}
-                        />
-                    </div>
-                </div>
-            );
-        }
-        if (isKindOf3D(mode)) {
-            return (
-                <React.Fragment>
-                    {this.renderHeader3D(designAreaData)}
-                    <VisualizationContainer three={three} className={classes.visualizationContainer3D} />
-                </React.Fragment>
-            );
-        }
-        return null;
-    }
-
-    render() {
-        const { designArea, classes, mode } = this.props;
-        const { three } = this;
-        if (!designArea) {
-            return null;
-        }
-        const data = this.getCurrentDesignAreaData();
-        const { imageElement, errorMessage, errorData, loading } = this.state;
-        const { width, height } = designArea;
-        const areaRatio = (width || 1) / (height || 1);
-        const errors = this.getErrorsForDesignAreaData(data);
-
-        if (errorMessage) {
-            return (
-                <div>
-                    <Typography variant="h3" className={classes.title}>
-                        {T('designer.visualization.cannotRenderEditor')}
-                    </Typography>
-                    <div className={classes.errors}>{T(`designer.visualization.errors.${errorMessage}`)}</div>
-                    <div>{errorData}</div>
-                </div>
-            );
-        }
-
-        return (
-            <div className={`${classes.editorRoot} ${isKindOf3D(mode) ? 'fullHeight' : ''}`}>
-                {loading && <LoadingComponent fullSize />}
-
-                {isKindOf3D(mode) ? this.renderHeader3D(data) : this.renderHeader()}
-
-                {imageElement && (
-                    <div className={classes.leftSide}>
-                        <AreaEditor
-                            backgroundImageElement={imageElement}
-                            onRedraw={drawOnTexture(three)}
-                            maskObject={this.getCurrentMaskObject()}
-                            areaData={data && data.position}
-                            areaRatio={areaRatio}
-                            ref={this.areaEditorRef}
-                            onChange={this.updateData}
-                        />
-                    </div>
-                )}
-
-                <div className={isKindOf3D(mode) ? classes.rightSide3D : classes.rightSide}>
-                    {this.renderVisualization(data)}
-
-                    {errors && (
-                        <ul className={classes.errors}>
-                            {errors.map(e => (
-                                <li>{e.message}</li>
-                            ))}
-                        </ul>
-                    )}
-
-                    <div className={classes.actionButtons}>
-                        <RaisedButton label={T('Cancel')} primary={false} onClick={this.cancel} />
-                        <RaisedButton label={T('Ok')} primary={true} onClick={this.updateAndSaveData} />
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
-
-const ErrorComponent = withStyles(styles)(({ classes }) => (
-    <div className={classes.errors}>{T('designer.visualization.errors.failedToLoadItem')}</div>
-));
-
-const LoadingComponent = withStyles(styles)(({ classes, fullSize }) => (
-    <div className={`${classes.loaderContainer} ${fullSize ? classes.loaderContainerFullSize : ''}`}>
-        <CircularProgress />
-    </div>
-));
-
-export const StyledVisualizationSettingsEdit = withStyles(styles)(
-    withRemappedProps(({ entityState }) => ({
-        itemId: get(entityState, 'data.item.value.id') || get(entityState, 'source.itemId'),
-    }))(
-        withAsyncProps(
-            async ({ itemId, item: _item }) => {
-                // use the item from the props if it's provided explicitly
-                const item = _item || (itemId && (await loadItemById(itemId)));
-                return { item };
-            },
-            ['itemId'],
-            {
-                renderError: () => <ErrorComponent />,
-                renderLoading: () => <LoadingComponent />,
-            }
-        )(
-            withRemappedProps(({ item }) => {
-                const mode = get(item, 'visualizationMode.identifier', 'default');
-                return { mode };
-            })(VisualizationSettingsEdit)
-        )
-    )
-);
-
-export default connectDefault(
-    StyledVisualizationSettingsEdit,
-    REDUCER_NAME,
-    Actions.setFieldData,
-    Actions.postData,
-    Actions.hideDetails
-);