@configuratorware/configurator-admingui 1.41.1 → 1.42.1

package/src/Screens/Designer/SubScreens/Visualization/Components/AdvancedShapeEditor.js

@@ -1,247 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import get from 'lodash/get';
-import debounce from 'lodash/debounce';
-import TextField from '@material-ui/core/TextField';
-import { withStyles } from '@material-ui/core/styles';
-import { t } from '../../../../../App/i18n';
-import RaisedButton from '../../../../../UIComponents/RaisedButton';
-import Typography from '../../../../../UIComponents/Typography';
-import FormControlLabel from '../../../../../UIComponents/FormControlLabel';
-import { RadioButton, RadioGroup } from '../../../../../UIComponents/RadioButton';
-import Checkbox from '../../../../../UIComponents/Checkbox';
-
-const baseShapeTypes = ['Plane', 'Cylinder'];
-
-const toNumber = value => Number(value) || 0;
-
-const toRad = deg => (Math.PI * deg) / 180;
-
-const toDeg = rad => ((180 * rad) / Math.PI).toFixed(2);
-
-const formatters = {
-    angle: v => toDeg(toNumber(v)),
-    number: v => toNumber(v).toFixed(2),
-    boolean: v => !!v,
-};
-
-function persistEvent(fn) {
-    return function(evt) {
-        evt.persist();
-        fn(evt);
-    };
-}
-
-const NumberInput = withStyles({
-    root: {
-        maxWidth: 100,
-        marginRight: 20,
-    },
-})(({ classes, onChange, value, ...props }) => {
-    const [_value, _setValue] = useState(value);
-    const [focused, setFocused] = useState(false);
-    const onFocus = () => setFocused(true);
-    const onBlur = useMemo(
-        () => () => {
-            _setValue(value);
-            setFocused(false);
-        },
-        [value]
-    );
-    useEffect(() => {
-        !focused && _setValue(value);
-    }, [value, focused]);
-    const onChangeDebounced = useMemo(() => persistEvent(debounce(onChange, 50)), [onChange]);
-    return (
-        <TextField
-            type="number"
-            className={classes.root}
-            onChange={evt => {
-                _setValue(evt.target.value);
-                onChangeDebounced(evt);
-            }}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            value={_value}
-            {...props}
-        />
-    );
-});
-
-export const AdvancedShapeEditor = withStyles({
-    sectionTitle: {
-        fontSize: '1.2em',
-        marginTop: '1.2em',
-        marginBottom: '0.6em',
-    },
-    groupTitle: {
-        marginTop: '0.6em',
-    },
-})(({ show, onToggle, designAreaData, onChange, className, classes }) => {
-    const changeHandler = evt => {
-        onChange(evt.target.name, evt.target.value);
-    };
-
-    const numberChangeHandler = evt => {
-        if (evt.target.value) {
-            onChange(evt.target.name, toNumber(evt.target.value));
-        }
-    };
-
-    const angleChangeHandler = evt => {
-        if (evt.target.value) {
-            onChange(evt.target.name, toRad(toNumber(evt.target.value)));
-        }
-    };
-
-    const toggleHandler = evt => {
-        onChange(evt.target.name, evt.target.checked);
-    };
-
-    const format = (path, formatter = formatters.number) => formatter(toNumber(get(designAreaData, path)));
-
-    return (
-        <div className={className}>
-            <RaisedButton
-                label={t(`designer.advancedEditor.${show ? 'without3dEffect' : 'with3dEffect'}`)}
-                onClick={onToggle}
-            />
-            {show && (
-                <div>
-                    <Typography variant="h3" className={classes.sectionTitle}>
-                        {t('designer.advancedEditor.shapeSectionTitle')}
-                    </Typography>
-
-                    <RadioGroup
-                        name="baseShape.type"
-                        value={get(designAreaData, 'baseShape.type')}
-                        onChange={changeHandler}
-                    >
-                        {baseShapeTypes.map((item, idx) => (
-                            <FormControlLabel
-                                key={idx}
-                                value={item}
-                                label={t(`designer.advancedEditor.${item.toLowerCase()}`)}
-                                control={<RadioButton color="primary" />}
-                            />
-                        ))}
-                    </RadioGroup>
-
-                    {get(designAreaData, 'baseShape.type') === 'Cylinder' && (
-                        <div>
-                            <NumberInput
-                                name={'baseShape.r'}
-                                label={t('designer.advancedEditor.radius')}
-                                onChange={numberChangeHandler}
-                                value={format('baseShape.r')}
-                                inputProps={{
-                                    min: 1,
-                                }}
-                            />
-                            <FormControlLabel
-                                control={
-                                    <Checkbox
-                                        name="baseShape.inside"
-                                        onChange={toggleHandler}
-                                        checked={format('baseShape.inside', formatters.boolean)}
-                                    />
-                                }
-                                label={t('designer.advancedEditor.inside')}
-                            />
-                        </div>
-                    )}
-
-                    <div>
-                        <div className={classes.groupTitle}>{t('designer.advancedEditor.positioning')}</div>
-                        <NumberInput
-                            name={'baseShape.x'}
-                            label={'x'}
-                            onChange={numberChangeHandler}
-                            value={format('baseShape.x')}
-                        />
-                        <NumberInput
-                            name={'baseShape.y'}
-                            label={'y'}
-                            onChange={numberChangeHandler}
-                            value={format('baseShape.y')}
-                        />
-                    </div>
-
-                    <div>
-                        <div className={classes.groupTitle}>{t('designer.advancedEditor.rotating')}</div>
-                        <NumberInput
-                            name={'baseShape.rotation.x'}
-                            label={'x'}
-                            onChange={angleChangeHandler}
-                            value={format('baseShape.rotation.x', formatters.angle)}
-                        />
-                        <NumberInput
-                            name={'baseShape.rotation.y'}
-                            label={'y'}
-                            onChange={angleChangeHandler}
-                            value={format('baseShape.rotation.y', formatters.angle)}
-                        />
-                        <NumberInput
-                            name={'baseShape.rotation.z'}
-                            label={'z'}
-                            onChange={angleChangeHandler}
-                            value={format('baseShape.rotation.z', formatters.angle)}
-                        />
-                    </div>
-
-                    <Typography variant="h3" className={classes.sectionTitle}>
-                        {t('designer.advancedEditor.areaSectionTitle')}
-                    </Typography>
-
-                    <div>
-                        <NumberInput
-                            name={'position.angle'}
-                            label={t('designer.advancedEditor.rotation')}
-                            onChange={angleChangeHandler}
-                            value={format('position.angle', formatters.angle)}
-                        />
-                    </div>
-
-                    <div>
-                        <div className={classes.groupTitle}>{t('designer.advancedEditor.scaling')}</div>
-                        <NumberInput
-                            name={'position.width'}
-                            label={t('designer.advancedEditor.width')}
-                            onChange={numberChangeHandler}
-                            value={format('position.width')}
-                            inputProps={{
-                                min: 1,
-                            }}
-                        />
-                        <NumberInput
-                            name={'position.height'}
-                            label={t('designer.advancedEditor.height')}
-                            onChange={numberChangeHandler}
-                            value={format('position.height')}
-                            inputProps={{
-                                min: 1,
-                            }}
-                        />
-                    </div>
-
-                    <div>
-                        <div className={classes.groupTitle}>{t('designer.advancedEditor.positioning')}</div>
-                        <NumberInput
-                            name={'position.x'}
-                            label={'x'}
-                            onChange={numberChangeHandler}
-                            value={format('position.x')}
-                        />
-                        <NumberInput
-                            name={'position.y'}
-                            label={'y'}
-                            onChange={numberChangeHandler}
-                            value={format('position.y')}
-                        />
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-});
-
-export default AdvancedShapeEditor;

package/src/Screens/Designer/SubScreens/Visualization/Components/AreaEditor.js

@@ -1,174 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import debounce from 'lodash/debounce';
-import isEqual from 'lodash/isEqual';
-import {
-    createImageObject,
-    draw,
-    fitSize,
-    setDefaultControls,
-    only,
-    rescale,
-    createAreaWithLogo,
-} from '../../../../../Utils/FunDraw/funDraw';
-import { createMovableObjectWithControls } from '../../../../../Utils/FunDraw/movableObject';
-import { createAreaWithMask, createMask } from '../../../../../Utils/FunDraw/createMask';
-
-export class AreaEditor extends React.Component {
-    static defaultProps = {
-        areaData: null,
-        areaRatio: 1,
-        redrawDelay: 25,
-        updateDelay: 300,
-    };
-
-    static propTypes = {
-        backgroundImageElement: PropTypes.instanceOf(HTMLImageElement).isRequired,
-        onRedraw: PropTypes.func,
-        onUpdate: PropTypes.func,
-    };
-
-    ctx = null;
-    area = null;
-    activeControl = null;
-    backgroundImage = null;
-
-    componentDidMount() {
-        this.setupAreaEditor();
-        window.addEventListener('resize', this.setupAreaEditor);
-    }
-
-    componentDidUpdate(prevProps, prevState, snapshot) {
-        prevProps.areaData !== this.props.areaData && this.setupAreaEditor();
-    }
-
-    onChangeDebounced = debounce(prevArea => {
-        const { area } = this;
-        const { onChange } = this.props;
-        onChange && !isEqual(area, prevArea) && onChange();
-    }, 1000);
-
-    setupAreaEditor = async () => {
-        const canvas = this.canvasRef.current;
-        this.ctx = canvas.getContext('2d');
-        const { width } = canvas.parentElement.getBoundingClientRect();
-        const { backgroundImageElement } = this.props;
-
-        // resize the canvas to fit the texture aspect ratio
-        const textureAspectRatio = backgroundImageElement.width / backgroundImageElement.height;
-        canvas.width = width;
-        canvas.height = width / textureAspectRatio;
-
-        this.area = await this.createScaledArea();
-
-        if (backgroundImageElement) {
-            this.backgroundImage = fitSize(
-                createImageObject(backgroundImageElement),
-                canvas.width,
-                canvas.height
-            );
-        }
-
-        this._movableArea = createMovableObjectWithControls(canvas, this.area, {
-            drawFunction: (object, ctx) => {
-                draw(object, ctx);
-
-                // draw the background image behind the area
-                ctx.save();
-                ctx.globalCompositeOperation = 'destination-over';
-                this.backgroundImage && draw(this.backgroundImage, ctx);
-                ctx.restore();
-
-                this.onRedraw();
-            },
-            controlFactory: object => setDefaultControls(object, 20, 0),
-            onUpdate: ({ getData }) => {
-                const { object } = getData();
-                const { area } = this;
-                this.area = object;
-                this.onChangeDebounced(area);
-            },
-        });
-
-        this._movableArea.init();
-
-        this.onUpdate();
-    };
-
-    componentWillUnmount() {
-        window.removeEventListener('resize', this.setupAreaEditor);
-        this._movableArea.dispose();
-    }
-
-    getData() {
-        const { width, height } = this.ctx.canvas;
-        return {
-            canvasSize: {
-                width,
-                height,
-            },
-            area: only(this.area),
-        };
-    }
-
-    getCalculatedAreaData() {
-        const {
-            backgroundImageElement: { width: bgWidth },
-        } = this.props;
-        const scale = bgWidth / this.ctx.canvas.width;
-        const { width, height, x, y, angle } = rescale(this.area, scale, Math.round);
-        return { width, height, x, y, angle };
-    }
-
-    async createScaledArea() {
-        const canvas = this.canvasRef.current;
-        const { areaData, areaRatio, maskObject } = this.props;
-
-        let area =
-            maskObject && maskObject.maskData
-                ? createAreaWithMask(
-                      areaData,
-                      await createMask(areaData, maskObject.maskSrc, maskObject.maskData)
-                  )
-                : await createAreaWithLogo({ ...areaData, name: 'area' });
-
-        if (areaData && areaData.width) {
-            const {
-                backgroundImageElement: { width: bgWidth },
-            } = this.props;
-            const scale = this.ctx.canvas.width / bgWidth;
-            area = rescale(
-                {
-                    ...area,
-                    height: area.width / areaRatio, // recalculate size with the current ratio
-                },
-                scale
-            );
-        } else {
-            const areaWidth = 100;
-            const areaHeight = areaWidth / areaRatio;
-            area = fitSize(area.setSize(areaWidth, areaHeight), canvas.width, canvas.height);
-        }
-        return area;
-    }
-
-    onRedraw = debounce(() => {
-        const { onRedraw } = this.props;
-        if (onRedraw) {
-            onRedraw(this.getData());
-        }
-    }, this.props.redrawDelay);
-
-    onUpdate = debounce(() => {
-        const { onUpdate } = this.props;
-        if (onUpdate) {
-            onUpdate(this.getData());
-        }
-    }, this.props.updateDelay);
-
-    canvasRef = React.createRef();
-
-    render() {
-        return <canvas ref={this.canvasRef} style={{ border: '1px solid #000', maxWidth: '100%' }} />;
-    }
-}

package/src/Screens/Designer/SubScreens/Visualization/Components/AreaEditorForm.js

@@ -1,139 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import get from 'lodash/get';
-import debounce from 'lodash/debounce';
-import TextField from '@material-ui/core/TextField';
-import { withStyles } from '@material-ui/core/styles';
-import { t } from '../../../../../App/i18n';
-
-const toNumber = value => Number(value) || 0;
-
-const toRad = deg => (Math.PI * deg) / 180;
-
-const toDeg = rad => ((180 * rad) / Math.PI).toFixed(2);
-
-const formatters = {
-    angle: v => toDeg(toNumber(v)),
-    number: v => toNumber(v).toFixed(2),
-    boolean: v => !!v,
-};
-
-function persistEvent(fn) {
-    return function(evt) {
-        evt.persist();
-        fn(evt);
-    };
-}
-
-const NumberInput = withStyles({
-    root: {
-        maxWidth: 100,
-        marginRight: 20,
-    },
-})(({ classes, onChange, value, ...props }) => {
-    const [_value, _setValue] = useState(value);
-    const [focused, setFocused] = useState(false);
-    const onFocus = () => setFocused(true);
-    const onBlur = useMemo(
-        () => () => {
-            _setValue(value);
-            setFocused(false);
-        },
-        [value]
-    );
-    useEffect(() => {
-        !focused && _setValue(value);
-    }, [value, focused]);
-    const onChangeDebounced = useMemo(() => persistEvent(debounce(onChange, 50)), [onChange]);
-    return (
-        <TextField
-            type="number"
-            className={classes.root}
-            onChange={evt => {
-                _setValue(evt.target.value);
-                onChangeDebounced(evt);
-            }}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            value={_value}
-            {...props}
-        />
-    );
-});
-
-export const AreaEditorForm = withStyles({
-    sectionTitle: {
-        fontSize: '1.2em',
-        marginTop: '1.2em',
-        marginBottom: '0.6em',
-    },
-    groupTitle: {
-        marginTop: '0.6em',
-    },
-})(({ designAreaData, onChange, className, classes }) => {
-    const numberChangeHandler = evt => {
-        if (evt.target.value) {
-            onChange(evt.target.name, toNumber(evt.target.value));
-        }
-    };
-
-    const angleChangeHandler = evt => {
-        if (evt.target.value) {
-            onChange(evt.target.name, toRad(toNumber(evt.target.value)));
-        }
-    };
-
-    const format = (path, formatter = formatters.number) => formatter(toNumber(get(designAreaData, path)));
-
-    return (
-        <div className={className}>
-            <div>
-                <NumberInput
-                    name={'position.angle'}
-                    label={t('designer.advancedEditor.rotation')}
-                    onChange={angleChangeHandler}
-                    value={format('position.angle', formatters.angle)}
-                />
-            </div>
-
-            <div>
-                <div className={classes.groupTitle}>{t('designer.advancedEditor.scaling')}</div>
-                <NumberInput
-                    name={'position.width'}
-                    label={t('designer.advancedEditor.width')}
-                    onChange={numberChangeHandler}
-                    value={format('position.width')}
-                    inputProps={{
-                        min: 1,
-                    }}
-                />
-                <NumberInput
-                    name={'position.height'}
-                    label={t('designer.advancedEditor.height')}
-                    onChange={numberChangeHandler}
-                    value={format('position.height')}
-                    inputProps={{
-                        min: 1,
-                    }}
-                />
-            </div>
-
-            <div>
-                <div className={classes.groupTitle}>{t('designer.advancedEditor.positioning')}</div>
-                <NumberInput
-                    name={'position.x'}
-                    label={'x'}
-                    onChange={numberChangeHandler}
-                    value={format('position.x')}
-                />
-                <NumberInput
-                    name={'position.y'}
-                    label={'y'}
-                    onChange={numberChangeHandler}
-                    value={format('position.y')}
-                />
-            </div>
-        </div>
-    );
-});
-
-export default AreaEditorForm;

package/src/Screens/Designer/SubScreens/Visualization/Components/EntryList.js

@@ -1,49 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
-import ListItemText from '@material-ui/core/ListItemText';
-import IconButton from '@material-ui/core/IconButton';
-import ReadyIcon from '@material-ui/icons/Check';
-import EmptyIcon from '@material-ui/icons/Close';
-import EditIcon from '@material-ui/icons/Edit';
-import DeleteIcon from '@material-ui/icons/Delete';
-
-const styles = theme => ({
-    root: {
-        width: '100%',
-        backgroundColor: theme.palette.background.paper,
-    },
-    item: {
-        cursor: 'pointer',
-    },
-});
-
-export const EntryList = withStyles(styles)(({ children, classes }) => (
-    <List className={classes.root}>{children}</List>
-));
-
-export const EntryListItem = withStyles(styles)(
-    ({ onClick, ready, text, onClickEdit, onClickDelete, classes }) => (
-        <ListItem dense onClick={onClick} className={classes.item}>
-            {ready ? <ReadyIcon /> : <EmptyIcon />}
-            <ListItemText primary={text} />
-            <ListItemSecondaryAction>
-                <IconButton aria-label="Edit" onClick={onClickEdit}>
-                    <EditIcon />
-                </IconButton>
-                {ready && (
-                    <IconButton aria-label="Delete" onClick={onClickDelete}>
-                        <DeleteIcon />
-                    </IconButton>
-                )}
-            </ListItemSecondaryAction>
-        </ListItem>
-    )
-);
-
-EntryListItem.propTypes = {
-    ready: PropTypes.bool,
-};

package/src/Screens/Designer/SubScreens/Visualization/Components/ExpansionContainer.js

@@ -1,68 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import ExpansionPanel from '@material-ui/core/ExpansionPanel';
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
-import Typography from '@material-ui/core/Typography';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-
-const ExpansionContext = React.createContext({});
-
-export class ExpansionContainer extends React.Component {
-    static propTypes = {
-        single: PropTypes.bool,
-    };
-
-    state = {
-        expanded: {},
-        toggle: expansionKey => () =>
-            this.setState({
-                ...this.state,
-                expanded: this.props.single
-                    ? {
-                          [expansionKey]: !this.state.expanded[expansionKey],
-                      }
-                    : {
-                          ...this.state.expanded,
-                          [expansionKey]: !this.state.expanded[expansionKey],
-                      },
-            }),
-    };
-
-    render() {
-        return (
-            <ExpansionContext.Provider value={this.state}>{this.props.children}</ExpansionContext.Provider>
-        );
-    }
-}
-
-const styles = theme => ({
-    heading: {
-        fontSize: theme.typography.pxToRem(15),
-        flexShrink: 0,
-    },
-    secondaryHeading: {
-        fontSize: theme.typography.pxToRem(15),
-        color: theme.palette.text.secondary,
-    },
-});
-
-export const ExpansionItem = withStyles(styles)(({ expansionKey, title, children, classes }) => (
-    <ExpansionContext.Consumer>
-        {state => (
-            <ExpansionPanel expanded={!!state.expanded[expansionKey]} onChange={state.toggle(expansionKey)}>
-                <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
-                    {title && <Typography className={classes.heading}>{title}</Typography>}
-                </ExpansionPanelSummary>
-                <ExpansionPanelDetails>{children}</ExpansionPanelDetails>
-            </ExpansionPanel>
-        )}
-    </ExpansionContext.Consumer>
-));
-
-ExpansionItem.propTypes = {
-    classes: PropTypes.object,
-    expansionKey: PropTypes.string.isRequired,
-    title: PropTypes.string,
-};