@configuratorware/configurator-admingui 1.41.1 → 1.42.1

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

@@ -1,98 +0,0 @@
-import { draw, rescale } from '../../../../../../Utils/FunDraw/funDraw';
-import get from 'lodash/get';
-import mergeWith from 'lodash/mergeWith';
-import isNull from 'lodash/isNull';
-import { DEFAULT_BASE_SHAPE_PADDING, DEFAULT_BASE_SHAPE_WIDTH } from './Constants';
-
-export const drawOnTexture = threeInstance => data => {
-    window.requestAnimationFrame(() => {
-        threeInstance.getDrawingContext(
-            async (textureCanvasCtx, getTextureBuilder) => {
-                const { getTextureImage } = getTextureBuilder();
-                const { area, canvasSize } = data;
-                const originalImg = getTextureImage();
-                const scale = originalImg.width / canvasSize.width;
-                draw(rescale(area, scale), textureCanvasCtx);
-            },
-            true /* update alpha */,
-            true /* clear texture */
-        );
-    });
-};
-
-export const withDefaultBaseShape = (designAreaData, options = {}) => {
-    const {
-        ratio = 1,
-        baseShapePadding = DEFAULT_BASE_SHAPE_PADDING,
-        width = DEFAULT_BASE_SHAPE_WIDTH,
-    } = options;
-    const height = Math.round(width / ratio);
-    const baseShape = {
-        type: 'Plane',
-        width: width + baseShapePadding,
-        height: height + baseShapePadding,
-        x: 0,
-        y: 0,
-    };
-    const position = {
-        width,
-        height,
-        x: options.x || baseShape.width / 2,
-        y: options.y || baseShape.height / 2,
-    };
-    return mergeWith(
-        {},
-        {
-            baseShape,
-            position,
-        },
-        designAreaData,
-        (o, s) => (isNull(s) ? o : s)
-    );
-};
-
-export const has3dEffect = designAreaData => {
-    return (
-        get(designAreaData, 'baseShape.type', 'Plane') !== 'Plane' ||
-        get(designAreaData, 'baseShape.rotation.x', 0) !== 0 ||
-        get(designAreaData, 'baseShape.rotation.y', 0) !== 0
-    );
-};
-
-export const getDataWithout3dEffect = () => ({
-    baseShape: {
-        type: 'Plane',
-        rotation: {
-            x: 0,
-            y: 0,
-            z: 0,
-        },
-        inside: false,
-    },
-});
-
-/**
- * Checks that the given object contains the given property list
- * @param {object} object
- * @param {array} propsToExist
- * @return {boolean}
- */
-export const isObjectComplete = (object, propsToExist) => {
-    if (typeof object === 'object') {
-        for (const prop of propsToExist) {
-            if (typeof object[prop] === 'undefined') {
-                return false;
-            }
-        }
-        return true;
-    }
-    return false;
-};
-
-export const isPositionComplete = position => isObjectComplete(position, ['width', 'height', 'x', 'y']);
-
-/**
- * Returns the list of available (already loaded) camera views
- * @returns {Array}
- */
-export const getCameraViewNames = threeInstance => Object.keys(threeInstance.cameraViews);

package/src/Screens/Designer/SubScreens/Visualization/Containers/Edit/__tests__/calculateBoundingBoxSize.test.js

@@ -1,46 +0,0 @@
-import { calculateBoundingBoxSize } from '../calculateBoundingBoxSize';
-
-describe('Designer/SubScreens/Visualization/Containers/Edit/calculateBoundingBoxSize', () => {
-    test('calculates the bounding box size correctly if not rotated', () => {
-        const canvasPositionObject = {
-            width: 3,
-            height: 4,
-            angle: 0,
-        };
-        const expectedBoundingBoxSize = {
-            width: 3,
-            height: 4,
-        };
-        expect(calculateBoundingBoxSize(canvasPositionObject)).toEqual(expectedBoundingBoxSize);
-    });
-    test('calculates the bounding box size correctly if rotated by 90 deg', () => {
-        const canvasPositionObject = {
-            width: 3,
-            height: 4,
-            angle: Math.PI / 2,
-        };
-        const expectedBoundingBoxSize = {
-            width: 4,
-            height: 3,
-        };
-        const { width, height } = calculateBoundingBoxSize(canvasPositionObject);
-        expect(width).toBeCloseTo(expectedBoundingBoxSize.width, 5);
-        expect(height).toBeCloseTo(expectedBoundingBoxSize.height, 5);
-    });
-    test('calculates the bounding box size correctly if rotated by 45 deg', () => {
-        const canvasPositionObject = {
-            width: 3,
-            height: 3,
-            angle: Math.PI / 4,
-        };
-        // square rotated by 45 deg => it's diagonal will be equal to the bounding box width and height
-        const diag = Math.sqrt(18);
-        const expectedBoundingBoxSize = {
-            width: diag,
-            height: diag,
-        };
-        const { width, height } = calculateBoundingBoxSize(canvasPositionObject);
-        expect(width).toBeCloseTo(expectedBoundingBoxSize.width, 5);
-        expect(height).toBeCloseTo(expectedBoundingBoxSize.height, 5);
-    });
-});

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

@@ -1,40 +0,0 @@
-const rotateCoordinates = (x, y, theta) => ({
-    x: x * Math.cos(theta) + y * Math.sin(theta),
-    y: x * Math.sin(theta) + y * Math.cos(theta),
-});
-
-const getRectCoordinates = ({ width, height }) => [
-    [
-        // top left
-        -width / 2,
-        -height / 2,
-    ],
-    [
-        // top right
-        width / 2,
-        -height / 2,
-    ],
-    [
-        // bottom right
-        width / 2,
-        height / 2,
-    ],
-    [
-        // bottom left
-        -width / 2,
-        height / 2,
-    ],
-];
-
-export const calculateBoundingBoxSize = (position = {}) => {
-    const { width = 0, height = 0, angle = 0 } = position;
-    const boundingRectCoordinates = getRectCoordinates({ width, height }).map(([x, y]) =>
-        rotateCoordinates(x, y, angle)
-    );
-    const allX = boundingRectCoordinates.map(({ x }) => x);
-    const allY = boundingRectCoordinates.map(({ y }) => y);
-    return {
-        width: Math.max(...allX) * 2,
-        height: Math.max(...allY) * 2,
-    };
-};

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

@@ -1,132 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import get from 'lodash/get';
-import find from 'lodash/find';
-import designViewActions, { LIST_KEY, REDUCER_NAME } from '../../Designviews/Reducers/Actions';
-import { LIST_KEY as DESIGN_AREA_LIST_KEY } from '../../DesignAreas/Reducers/Actions';
-import designAreaActions from '../../DesignAreas/Reducers/Actions';
-
-import { connectDefault } from '../../../../../Components/DefaultConnectedList';
-import { ExpansionContainer, ExpansionItem } from '../Components/ExpansionContainer';
-import TranslationFinder from '../../../../../Components/TranslationFinder';
-import { connect } from 'react-redux';
-import { EntryList, EntryListItem } from '../Components/EntryList';
-import { DESIGNER_REDUCER_NAME } from '../../../Reducers/Actions';
-
-class VisualizationSettings extends React.Component {
-    static propTypes = {
-        loadDetails: PropTypes.func.isRequired,
-        setState: PropTypes.func.isRequired,
-        onDeleteItems: PropTypes.func.isRequired,
-    };
-
-    componentDidUpdate(prevProps) {
-        const { didInvalidate, loadList } = this.props;
-        if (didInvalidate && didInvalidate !== prevProps.didInvalidate) {
-            loadList({});
-        }
-    }
-
-    renderDesignAreaList(designView) {
-        const designAreaList = get(this.props, 'designAreaList.data.data') || [];
-        return (
-            <EntryList>
-                {designAreaList.map(designArea => {
-                    const loadDetails = () => {
-                        this.props.loadDetails(designView);
-                        // set the designArea in the localState (see Utils/HOCs/LocalState)
-                        // so it will be available in the Edit view
-                        this.props.setState({ designArea });
-                    };
-                    const removeDesignArea = () => {
-                        // the designView entity has to be loaded first to remove a designArea from it
-                        this.props
-                            .loadDetails({
-                                ...designView,
-                                showDetailsWhenLoaded: false,
-                            })
-                            .then(() => {
-                                // it removes only the given designArea, never the designView
-                                // see the implementation of designViewActions.removeDesignArea
-                                this.props.onDeleteItems(designArea.identifier);
-                            });
-                    };
-                    const alreadyExists = !!find(designView.designAreas, {
-                        identifier: designArea.identifier,
-                    });
-                    return (
-                        <EntryListItem
-                            key={designArea.identifier}
-                            text={
-                                <TranslationFinder
-                                    data={designArea.texts}
-                                    property="title"
-                                    fallback={designArea.identifier}
-                                />
-                            }
-                            ready={alreadyExists}
-                            onClickEdit={loadDetails}
-                            onClickDelete={removeDesignArea}
-                            onClick={loadDetails}
-                        />
-                    );
-                })}
-            </EntryList>
-        );
-    }
-
-    render() {
-        const designViewList = get(this.props, 'list.data') || [];
-        if (!designViewList.length) {
-            return null;
-        } else if (designViewList.length === 1) {
-            return this.renderDesignAreaList(designViewList[0]);
-        }
-        return (
-            <ExpansionContainer single>
-                {designViewList.map(designView => (
-                    <ExpansionItem
-                        key={designView.identifier}
-                        expansionKey={designView.identifier}
-                        title={
-                            <TranslationFinder
-                                data={designView.texts}
-                                property="title"
-                                fallback={designView.identifier}
-                            />
-                        }
-                    >
-                        {this.renderDesignAreaList(designView)}
-                    </ExpansionItem>
-                ))}
-            </ExpansionContainer>
-        );
-    }
-}
-
-const mapStateToProps = state => ({
-    designAreaList: state.dataBySource[DESIGN_AREA_LIST_KEY],
-    item: get(state[DESIGNER_REDUCER_NAME], 'source'),
-});
-
-const ConnectedVisualizationSettings = connect(mapStateToProps)(VisualizationSettings);
-
-const listAction = () => dispatch => {
-    // load both lists with this custom listAction
-    dispatch(designViewActions.listAction());
-    dispatch(designAreaActions.listAction());
-};
-
-export default connectDefault(
-    ConnectedVisualizationSettings,
-    LIST_KEY,
-    listAction,
-    designViewActions.detailsAction,
-    designViewActions.hideDetails,
-    designViewActions.showDetails,
-    false,
-    designViewActions.removeDesignArea,
-    {
-        reducerName: REDUCER_NAME,
-    }
-);

package/src/Screens/Designer/SubScreens/Visualization/Screen.js

@@ -1,37 +0,0 @@
-import Actions, { REDUCER_NAME } from '../Designviews/Reducers/Actions';
-
-import List from './Containers/List';
-import Edit from './Containers/Edit/Edit';
-
-import './Translations';
-import withStyles from '@material-ui/core/styles/withStyles';
-import { connectDefault } from '../../../../Components/DefaultConnectedScreen';
-import { generateCustomScreen } from '../../../../Components/DefaultScreen';
-import ModalScreen from '../../../../Components/ModalContainer';
-import { provideLocalState, withLocalState } from '../../../../Utils/HOCs/LocalState';
-
-const styles = () => ({
-    paperRoot: {
-        maxWidth: '90vw',
-        maxHeight: '90vh',
-        marginTop: '16px',
-        marginBottom: '16px',
-    },
-});
-
-export default connectDefault(
-    provideLocalState({
-        designArea: null,
-    })(
-        generateCustomScreen(
-            false,
-            withLocalState(List),
-            withLocalState(Edit),
-            withStyles(styles)(ModalScreen)
-        )
-    ),
-    REDUCER_NAME,
-    Actions.invalidateList,
-    Actions.triggerUnsavedEntity,
-    Actions.hideDetails
-);

package/src/Screens/Designer/SubScreens/Visualization/Translations.js

@@ -1,82 +0,0 @@
-require('../../../../App/i18n').use(
-    {
-        de: {
-            designer: {
-                visualization: {
-                    loadingVisualization: 'Visualisierung lädt...',
-                    cannotRenderEditor: 'Designflächeneditor kann nicht geladen verden.',
-                    errors: {
-                        failedToLoadItem: 'Fehler beim Laden des Artikels.',
-                        failedToGetCustomizableMaterial: 'Fehler beim Laden der Textur des 3D Modells.',
-                        failedToLoadTextureImage: 'Fehler beim Laden der Textur des 3D Modells.',
-                        materialLoadError: 'Fehler beim Laden der Textur.',
-                        objectLoadError: 'Fehler beim Laden des Modells.',
-                    },
-                    width: 'Breite',
-                    height: 'Höhe',
-                    cameraPosition: 'Kameraposition',
-                    mode: 'Visualization mode',
-                },
-                advancedEditor: {
-                    with3dEffect: '3D Effekt',
-                    without3dEffect: 'ohne 3D Effekt',
-                    shapeSectionTitle: '3D Objekt',
-                    areaSectionTitle: 'Designfläche',
-                    plane: 'Ebene',
-                    cylinder: 'Zylinder',
-                    inside: 'Innenseite',
-                    scaling: 'Skalieren',
-                    height: 'Höhe',
-                    width: 'Breite',
-                    positioning: 'Verschieben',
-                    rotating: 'Rotieren',
-                    rotation: 'Rotation',
-                    radius: 'Radius',
-                },
-                designArea: {
-                    isDefaultView: 'Ist Standardansicht',
-                },
-            },
-        },
-        en: {
-            designer: {
-                visualization: {
-                    loadingVisualization: 'Loading visualization...',
-                    cannotRenderEditor: 'Design area editor cannot be rendered.',
-                    errors: {
-                        failedToLoadItem: 'Failed to load the base item.',
-                        failedToGetCustomizableMaterial:
-                            'Failed to get the customizable material of the 3D model.',
-                        failedToLoadTextureImage: 'Failed to load the texture image of the 3D model.',
-                        materialLoadError: 'Failed to load material.',
-                        objectLoadError: 'Failed to load the model.',
-                    },
-                    width: 'Width',
-                    height: 'Height',
-                    cameraPosition: 'Camera position',
-                    mode: 'Visualization mode',
-                },
-                advancedEditor: {
-                    with3dEffect: '3D effect',
-                    without3dEffect: 'without 3D effect',
-                    shapeSectionTitle: '3D Object',
-                    areaSectionTitle: 'Design area',
-                    plane: 'Plane',
-                    cylinder: 'Cylinder',
-                    inside: 'Inside',
-                    scaling: 'Scale',
-                    height: 'Height',
-                    width: 'Width',
-                    positioning: 'Position',
-                    rotating: 'Rotation',
-                    rotation: 'Rotation',
-                    radius: 'Radius',
-                },
-                designArea: {
-                    isDefaultView: 'Is default view',
-                },
-            },
-        },
-    },
-    true
-);

package/src/Screens/Designer/SubScreens/Visualization/index.js

@@ -1,3 +0,0 @@
-import Screen from './Screen';
-
-export default Screen;

package/src/Screens/Designer/Translations.js

@@ -1,55 +0,0 @@
-require('../../App/i18n').use(
-    {
-        en: {
-            designer_data: 'Product design settings',
-            designAreas: 'Design areas',
-            views: 'Views',
-            visualMaintenance: 'Visual maintenance',
-            pleaseUseVisualMaintanance: 'please use visual maintanance',
-            modeChangeConfirm: 'The views and visual maintanance data will be lost. Do you want to proceed?',
-            oneLineText: 'Restrict textinput to one line',
-            designDataTransfer: {
-                buttonUseAsTemplate: 'Use as template',
-                dialogTitle: 'Transfer of design settings',
-                settingsTransfer: 'What kind of settings do you like to transfer?',
-                designAreas: 'Design areas',
-                viewsVisualData: 'Views & visual data',
-                itemAvailability: 'Item availability',
-                noSelectedRows: 'No data has been selected.',
-                transferConfirmation:
-                    'Already existing data on the selected targets will be deleted. Do you want to proceed?',
-            },
-            designer: {
-                itemStatus: 'Status',
-            },
-        },
-        de: {
-            designer_data: 'Produkt-Design-Einstellungen',
-            designAreas: 'Designflächen',
-            views: 'Ansichten',
-            visualMaintenance: 'Visuelle Pflege',
-            pleaseUseVisualMaintanance: 'bitte visuelle Pflege benutzen',
-            modeChangeConfirm:
-                'Die Ansichten und Daten visuelle Pflege gehen verloren. Willst Du fortfahren?',
-            designDataTransfer: {
-                buttonUseAsTemplate: 'Als Vorlage verwenden',
-                dialogTitle: 'Übertragen von Design-Einstellungen',
-                settingsTransfer: 'Welche Einstellungen möchtest Du übertragen?',
-                designAreas: 'Designflächen',
-                viewsVisualData: 'Ansichten & visuelle Pflege',
-                itemAvailability: 'Freigabestatus',
-                noSelectedRows: 'Es wurden keine Daten ausgewählt.',
-                transferConfirmation:
-                    'Bereits gepflegte Daten auf den Zielen werden überschrieben. Willst Du fortfahren?',
-            },
-            Transfer: 'Übertragen',
-            Confirmation: 'Bestätigung',
-            designer: {
-                itemStatus: 'Status',
-            },
-            Hint: 'Hinweis',
-            oneLineText: 'Texteingabe auf eine Zeile beschränken',
-        },
-    },
-    true
-);

package/src/Screens/Designer/__tests__/DesigAreaEdit.js

@@ -1,9 +0,0 @@
-/* eslint-env jest */
-import { render } from 'enzyme';
-import React from 'react';
-import DesignAreaEdit from '../SubScreens/DesignAreas/Containers/Edit';
-
-xit('does not crash with default props', () => {
-    const tree = render(<DesignAreaEdit />);
-    expect(tree).toMatchSnapshot();
-});

package/src/Screens/Designer/__tests__/FormProductionMethods.test.js

@@ -1,165 +0,0 @@
-/* eslint-env jest */
-
-import React from 'react';
-import { render, shallow } from 'enzyme';
-import FormProductionMethods from '../SubScreens/DesignAreas/Containers/FormProductionMethods';
-import TextField from '@material-ui/core/TextField/TextField';
-
-jest.mock('../SubScreens/DesignAreas/Containers/ConnectedMaskEditorField', () => {
-    return {
-        ProductionMethodMaskEditorField: () => null,
-    };
-});
-
-const productionMethod = {
-    id: 0,
-    item: {
-        id: 0,
-        identifier: 'sheep',
-        title: 'Sheep',
-    },
-    option: {
-        id: 4,
-        identifier: 'face_nature',
-        title: 'Face nature',
-    },
-    identifier: 'clip',
-    texts: [
-        {
-            id: 0,
-            title: 'Clip',
-            language: 'en_GB',
-        },
-    ],
-    height: 0,
-    width: 0,
-    designProductionMethods: [
-        {
-            id: 0,
-            identifier: 'print',
-            title: 'string',
-            height: 0,
-            width: 0,
-            options: {
-                minFontSize: 5,
-                maxColorAmount: 4,
-                visualizationRenderer: 'print',
-            },
-            additionalData: {
-                engravingBackgroundColors: [
-                    {
-                        itemIdentifier: 'pen_red',
-                        colorHex: '#dedede',
-                    },
-                ],
-            },
-            customData: {},
-            calculationTypes: [
-                {
-                    id: 0,
-                    identifier: 'string',
-                    colorAmountDependent: true,
-                    itemAmountDependent: true,
-                    selectableByUser: true,
-                    title: 'string',
-                    prices: [
-                        {
-                            id: 0,
-                            channel: 1,
-                            colorAmountFrom: 1,
-                            amountFrom: 1,
-                            price: 1.99,
-                            priceNet: 1.67,
-                        },
-                    ],
-                },
-            ],
-        },
-    ],
-    customData: {},
-};
-
-const availableMethods = [
-    {
-        id: 1,
-        identifier: 'print',
-        title: 'string',
-        height: 0,
-        width: 0,
-        options: {
-            minFontSize: 5,
-            maxColorAmount: 4,
-            visualizationRenderer: 'print',
-        },
-        customData: {},
-        calculationTypes: [],
-    },
-    {
-        id: 2,
-        identifier: 'engraving',
-        title: 'string',
-        height: 0,
-        width: 0,
-        options: {
-            minFontSize: 5,
-            maxColorAmount: 4,
-            visualizationRenderer: 'engraving',
-        },
-        customData: {},
-        calculationTypes: [],
-    },
-    {
-        id: 3,
-        identifier: 'embossing',
-        title: 'string',
-        height: 0,
-        width: 0,
-        options: {
-            minFontSize: 5,
-            maxColorAmount: 4,
-            visualizationRenderer: 'embossing',
-        },
-        customData: {},
-        calculationTypes: [],
-    },
-];
-
-const extendedItem = { children: [] };
-const variantsDefaultColors = [];
-
-describe('Unit- FormProductionMethods', () => {
-    it('renders correctly', () => {
-        const tree = render(
-            <FormProductionMethods
-                editDesignProductionMethods={availableMethods}
-                data={productionMethod}
-                extendedItem={extendedItem}
-                variantsDefaultColors={variantsDefaultColors}
-            />
-        );
-        expect(tree).toMatchSnapshot();
-    });
-
-    xit('calls callback onChange', () => {
-        const onChangeSpy = jest.fn();
-        const tree = render(
-            <FormProductionMethods
-                editDesignProductionMethods={availableMethods}
-                data={productionMethod}
-                onChange={onChangeSpy}
-                extendedItem={extendedItem}
-                variantsDefaultColors={variantsDefaultColors}
-            />
-        );
-
-        const button = tree.find(TextField).at(3);
-        button.simulate('change', { target: { value: 'engraving' } });
-
-        expect(onChangeSpy).toHaveBeenCalled();
-    });
-
-    it('does not crash with default props', () => {
-        const tree = shallow(<FormProductionMethods />);
-        expect(tree).toBeTruthy();
-    });
-});