@configuratorware/configurator-admingui 1.41.1 → 1.42.1

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

@@ -1,566 +0,0 @@
-import first from 'lodash/first';
-import get from 'lodash/get';
-import { THREE } from 'redhotmagma-visualization/ExposedModules';
-import {
-    createPointerEventListener,
-    getPointFromPointerEvent,
-} from '../../../../../Utils/Events/pointerEvent';
-import { createAreaWithLogo, draw, getDistance } from '../../../../../Utils/FunDraw/funDraw';
-import { createAreaWithMask, createMask } from '../../../../../Utils/FunDraw/createMask';
-import moveIcon from './resources/move.svg';
-import sizeIcon from './resources/size.svg';
-import rotateIcon from './resources/rotate.svg';
-import rotateIconX from './resources/rotate-x.svg';
-import rotateIconY from './resources/rotate-y.svg';
-import rotateIconZ from './resources/rotate-z.svg';
-
-const {
-    Group,
-    Raycaster,
-    Vector2,
-    Vector3,
-    MeshBasicMaterial,
-    Mesh,
-    CylinderGeometry,
-    BackSide,
-    PlaneBufferGeometry,
-    TextureLoader,
-    DoubleSide,
-    LinearFilter,
-} = THREE;
-
-const EPS = 0.01;
-const TWO_PI = Math.PI * 2;
-const CONTROL_SIZE = 24;
-const CYLINDER_DEFAULT_RADIUS = 100;
-const MAX_ZOOM = 1.5;
-
-export const getAreaProps = designArea => {
-    const { width: wBase, height: hBase } = designArea.baseShape;
-    const { width, height, x, y } = {
-        width: wBase,
-        height: hBase,
-        x: wBase / 2,
-        y: hBase / 2,
-        ...designArea.position,
-    };
-    return {
-        ...designArea.position,
-        width,
-        height,
-        x,
-        y,
-    };
-};
-
-export const scaleAreaProps = ({ width, height, x, y, ...others }, scaling) => ({
-    width: width * scaling,
-    height: height * scaling,
-    x: x * scaling,
-    y: y * scaling,
-    ...others,
-});
-
-export const fixIncompletePosition = designArea => ({
-    ...designArea,
-    position: getAreaProps(designArea),
-});
-
-const createTextureRepo = async (...textureList) => {
-    const cache = {};
-
-    const preload = (...textureList) =>
-        Promise.all(
-            textureList.map(
-                src =>
-                    new Promise(resolve => {
-                        const texture = new TextureLoader().load(src, () => {
-                            resolve(cache[src]);
-                        });
-                        texture.minFilter = LinearFilter;
-                        cache[src] = texture;
-                    })
-            )
-        );
-
-    if (textureList.length > 0) {
-        await preload(...textureList);
-    }
-
-    return {
-        preload,
-        get: src => cache[src],
-    };
-};
-
-const controlFactory = textureRepo => (name, props = {}) => {
-    const geometry = new PlaneBufferGeometry(CONTROL_SIZE, CONTROL_SIZE);
-    const material = new MeshBasicMaterial();
-    const control = new Mesh(geometry, material);
-    control.name = name;
-    control.isControl = true;
-    Object.assign(control, props);
-
-    if (props.icon) {
-        material.map = textureRepo.get(props.icon);
-        material.side = DoubleSide;
-        material.transparent = true;
-    } else {
-        material.color = 0x00ff00;
-    }
-
-    return control;
-};
-
-const watchZoomChange = (threeInstance, callback) => {
-    let zoom = threeInstance.camera.zoom;
-    Object.defineProperty(threeInstance.camera, 'zoom', {
-        get: () => zoom,
-        set: value => {
-            zoom = value;
-            callback(zoom);
-        },
-    });
-};
-
-export const createThree2DEditor = async (threeInstance, onChange) => {
-    let baseShapeData;
-    let advancedMode;
-    let controls;
-    let maskObject;
-
-    const textureRepo = await createTextureRepo(
-        moveIcon,
-        sizeIcon,
-        rotateIcon,
-        rotateIconX,
-        rotateIconY,
-        rotateIconZ
-    );
-
-    const triggerChange = async () => await onChange(baseShapeData);
-
-    const createHelper = obj => {
-        if (obj.geometry.type === 'CylinderGeometry') {
-            const inside = obj.material.side === BackSide;
-            const p = obj.geometry.parameters;
-            const geo = new CylinderGeometry(
-                p.radiusTop + (inside ? 1 : -1),
-                p.radiusBottom + (inside ? 1 : -1),
-                p.height + 2,
-                p.radialSegments,
-                1, // height segments
-                true, // open ended
-                p.thetaStart
-            );
-            const mat = new MeshBasicMaterial({
-                color: 0xff2222,
-                transparent: true,
-                opacity: 0.5,
-                depthWrite: false,
-            });
-            mat.side = DoubleSide;
-            return new Mesh(geo, mat);
-        }
-        return false;
-    };
-
-    const _clearScene = threeInstance.clearScene.bind(threeInstance);
-
-    const addControls = () => {
-        if (!threeInstance._containerGroup) {
-            // eslint-disable-next-line no-console
-            console.log('No container group, skipping addControls step.');
-            return;
-        }
-        const createControl = controlFactory(textureRepo, threeInstance);
-
-        threeInstance.scene.remove(threeInstance._containerGroup);
-        const containerGroup = new Group();
-
-        // edit only one baseShape at a time
-        const baseShapeObj = first(threeInstance._containerGroup.children);
-
-        const obj = baseShapeObj.clone();
-
-        const group = new Group();
-        group.position.copy(obj.position);
-        group.rotation.copy(obj.rotation);
-
-        const { geometry } = obj;
-        geometry.computeBoundingBox();
-        const { boundingBox } = geometry;
-
-        obj.rotation.set(0, 0, 0);
-        obj.position.set(0, 0, 0);
-        group.add(obj);
-
-        // move
-        const move = createControl('move', { icon: moveIcon });
-        move.position.x = boundingBox.min.x;
-        move.position.y = boundingBox.max.y;
-        move.position.z = boundingBox.max.z + EPS;
-        group.add(move);
-
-        // scale
-        const scale = createControl('scale', { icon: sizeIcon });
-        scale.position.x = boundingBox.max.x;
-        scale.position.y = boundingBox.min.y;
-        scale.position.z = boundingBox.max.z + EPS;
-        group.add(scale);
-
-        // rotate
-        const rotate = createControl('rotate', { axis: 'z', icon: rotateIcon });
-        rotate.position.x = boundingBox.max.x;
-        rotate.position.y = boundingBox.max.y;
-        rotate.position.z = boundingBox.max.z + EPS;
-
-        // rotate-z
-        const rotateZ = createControl('rotate', { axis: 'z', icon: rotateIconZ });
-        rotateZ.position.x = boundingBox.max.x;
-        rotateZ.position.y = boundingBox.max.y;
-        rotateZ.position.z = boundingBox.max.z + EPS;
-
-        // rotate-y
-        const rotateY = createControl('rotate', { axis: 'y', icon: rotateIconY });
-        rotateY.position.y = boundingBox.max.y * 1.2 + EPS;
-
-        // rotate-x
-        const rotateX = createControl('rotate', { axis: 'x', icon: rotateIconX });
-        rotateX.position.x = boundingBox.min.x * 1.3 + EPS;
-
-        const helper = createHelper(obj);
-        helper && group.add(helper);
-
-        group.applyScale = value => {
-            obj.scale.multiplyScalar(value);
-            helper && helper.scale.multiplyScalar(value);
-            move.position.multiplyScalar(value);
-            scale.position.multiplyScalar(value);
-            rotate.position.multiplyScalar(value);
-            rotateZ.position.multiplyScalar(value);
-            rotateY.position.multiplyScalar(value);
-            rotateX.position.multiplyScalar(value);
-        };
-
-        containerGroup.add(group);
-
-        const update = () => {
-            group.remove(rotate, rotateX, rotateY, rotateZ);
-            if (advancedMode) {
-                group.add(rotateX, rotateY, rotateZ);
-            } else {
-                group.add(rotate);
-            }
-            group.children
-                .filter(o => o.isControl)
-                .forEach(o => {
-                    o.scale.setScalar(1 / threeInstance.camera.zoom);
-                });
-            threeInstance.render();
-        };
-
-        update();
-
-        watchZoomChange(threeInstance, update);
-
-        threeInstance._containerGroup = containerGroup;
-        threeInstance.scene.add(containerGroup);
-        threeInstance.clearScene = () => {
-            containerGroup.remove(group);
-            _clearScene();
-        };
-
-        return {
-            update,
-        };
-    };
-
-    const createChessboardPattern = (targetCtx, { width }) => {
-        const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d');
-
-        const size = Math.max(20, Math.ceil(width / 20));
-
-        canvas.width = size * 2;
-        canvas.height = size * 2;
-
-        ctx.beginPath();
-        ctx.rect(0, 0, size, size);
-        ctx.rect(size, size, size, size);
-        ctx.closePath();
-        ctx.fillStyle = 'rgba(128, 128, 128, 0.2)';
-        ctx.fill();
-
-        ctx.beginPath();
-        ctx.rect(size, 0, size, size);
-        ctx.rect(0, size, size, size);
-        ctx.closePath();
-        ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
-        ctx.fill();
-
-        return targetCtx.createPattern(canvas, 'repeat');
-    };
-
-    const clearContextCanvas = (ctx, baseColor) => {
-        const {
-            canvas: { width, height },
-        } = ctx;
-        ctx.clearRect(0, 0, width, height);
-        if (baseColor) {
-            ctx.fillStyle = baseColor;
-            ctx.fillRect(0, 0, width, height);
-        }
-    };
-
-    const addCenterLines = (ctx, scaling, width, height) => {
-        ctx.save();
-        ctx.lineWidth = 2 * scaling;
-        ctx.strokeStyle = 'rgba(57, 255, 20 , 1)';
-        ctx.beginPath();
-        const lineOffset = 3;
-        const lineY = (height * 0.5) + lineOffset;
-        ctx.moveTo(0, lineY);
-        ctx.lineTo(width, lineY);
-        const lineX = (width * 0.5) + lineOffset;
-        ctx.moveTo(lineX, 0);
-        ctx.lineTo(lineX, height);
-        ctx.stroke();
-        ctx.restore();
-    };
-
-    const redrawCanvas = async () => {
-        await threeInstance.getDrawingContext(
-            async (textureCanvasCtx, getTextureBuilder, [designArea]) => {
-                const { calculateDesignAreaSize } = getTextureBuilder();
-
-                const { scaling } = calculateDesignAreaSize(designArea);
-                const areaProps = scaleAreaProps(getAreaProps(designArea), scaling);
-                const { width, height } = areaProps;
-                const area =
-                    maskObject && maskObject.maskData
-                        ? createAreaWithMask(
-                              areaProps,
-                              await createMask({ width, height }, maskObject.maskSrc, maskObject.maskData)
-                          )
-                        : await createAreaWithLogo({
-                              ...areaProps,
-                              name: 'area',
-                              fillStyle: createChessboardPattern(textureCanvasCtx, areaProps),
-                          });
-                clearContextCanvas(textureCanvasCtx, 'rgba(128, 128, 128, 0.15)');
-                addCenterLines(textureCanvasCtx, scaling, width, height);
-                draw(
-                    {
-                        ...area,
-                        flipX: designArea.baseShape.inside,
-                    },
-                    textureCanvasCtx
-                );
-            },
-            false,
-            true
-        );
-    };
-
-    const getIntersection = pointerEvent => {
-        const raycaster = new Raycaster();
-        const {
-            width: elementWidth,
-            height: elementHeight,
-            left: offsetX,
-            top: offsetY,
-        } = threeInstance.renderer.domElement.getBoundingClientRect();
-        const point = getPointFromPointerEvent(pointerEvent);
-        const mouse = new Vector2(
-            ((point.x - offsetX) / elementWidth) * 2 - 1,
-            -((point.y - offsetY) / elementHeight) * 2 + 1
-        );
-        raycaster.setFromCamera(mouse, threeInstance.camera);
-
-        const intersects = raycaster.intersectObjects(threeInstance._containerGroup.children, true);
-        if (intersects.length > 0) {
-            // use the control if available, otherwise the closest object
-            const intersect = intersects.find(({ object }) => object.isControl) || intersects[0];
-            return {
-                target: intersect,
-                getTextureHit: () => {
-                    const { material } = intersect.object;
-                    // note: the texture Y is flipped by default in the webgl context
-                    // see (https://github.com/mrdoob/three.js/issues/5644)
-                    // so if it's flipped we need to flip it back to get the image coordinates
-                    const texture = material.map;
-                    const { flipY } = texture;
-                    const { width, height } = texture.image;
-                    const x = Math.round(intersect.uv.x * width);
-                    const y = Math.round((flipY ? 1 - intersect.uv.y : intersect.uv.y) * height);
-                    return {
-                        intersect,
-                        position: { width, height, x, y },
-                    };
-                },
-            };
-        }
-        return null;
-    };
-
-    const setupHitTest = () => {
-        const element = threeInstance.renderer.domElement;
-        return createPointerEventListener(element, 'start', evt => {
-            const is = getIntersection(evt);
-            if (is) {
-                // prevent moving the camera with the shape transformation
-                evt.stopImmediatePropagation();
-
-                const handle = is.target.object;
-                const { name, axis } = handle;
-                const { zoom } = threeInstance.camera;
-
-                let startPoint = getPointFromPointerEvent(evt, element);
-
-                const size = new Vector2();
-                threeInstance.renderer.getSize(size);
-
-                const obj = handle.parent;
-                const targetObj = first(obj.children);
-
-                const removeMoveListener = createPointerEventListener(window, 'move', evt => {
-                    const point = getPointFromPointerEvent(evt, element);
-
-                    if (name === 'rotate') {
-                        const { x: ox, y: oy } = {
-                            x: obj.position.x * zoom + size.x / 2,
-                            y: -obj.position.y * zoom + size.y / 2,
-                        };
-                        const { x: x1, y: y1 } = point;
-                        const { x, y } = startPoint;
-
-                        if (axis === 'y') {
-                            const position = new Vector3();
-                            handle.getWorldPosition(position);
-                            const { x: ox, y: oy } = position;
-                            const dAngle = getDistance(ox, oy, x1, y1) - getDistance(ox, oy, x, y);
-                            obj.rotateY(dAngle / TWO_PI / 10);
-                        } else if (axis === 'x') {
-                            const position = new Vector3();
-                            handle.getWorldPosition(position);
-                            const { x: ox, y: oy } = position;
-                            const dAngle = getDistance(ox, oy, x1, y1) - getDistance(ox, oy, x, y);
-                            obj.rotateX(dAngle / TWO_PI / 10);
-                        } else {
-                            const dAngle = Math.atan2(y1 - oy, x1 - ox) - Math.atan2(y - oy, x - ox);
-                            obj.rotateZ(-dAngle);
-                        }
-                    } else if (name === 'scale') {
-                        const { y: oy, x: ox } = {
-                            x: obj.position.x * zoom + size.x / 2,
-                            y: -obj.position.y * zoom + size.y / 2,
-                        };
-                        const { x: x1, y: y1 } = point;
-                        const { x, y } = startPoint;
-                        const scale = getDistance(ox, oy, x1, y1) / getDistance(ox, oy, x, y);
-                        obj.applyScale(scale);
-                    } else {
-                        obj.position.x += (point.x - startPoint.x) / zoom;
-                        obj.position.y += -(point.y - startPoint.y) / zoom;
-                    }
-
-                    startPoint = point;
-                    threeInstance.render();
-                });
-                const removeEndListener = createPointerEventListener(window, 'end', async () => {
-                    removeMoveListener();
-                    removeEndListener();
-
-                    // update data
-                    const getShapeSpecificData = baseShape => {
-                        if (baseShape.type === 'Cylinder') {
-                            return {
-                                r: (baseShape.r || CYLINDER_DEFAULT_RADIUS) * targetObj.scale.x,
-                            };
-                        }
-                        return {};
-                    };
-
-                    baseShapeData = {
-                        ...baseShapeData,
-                        height: Math.round(baseShapeData.height * targetObj.scale.y),
-                        width: Math.round(baseShapeData.width * targetObj.scale.x),
-                        x: obj.position.x,
-                        y: obj.position.y,
-                        rotation: {
-                            ...obj.rotation.toVector3(),
-                            order: obj.rotation.order,
-                        },
-                        ...getShapeSpecificData(baseShapeData),
-                    };
-
-                    await triggerChange();
-                });
-            }
-        });
-    };
-
-    const getData = () => baseShapeData;
-
-    let _prevBaseShapeData;
-    const updateBaseShapeData = () => {
-        _prevBaseShapeData = baseShapeData;
-        baseShapeData = get(threeInstance, '_designAreaList[0].baseShape', {});
-    };
-
-    let removeHitTestListener;
-    const init = () => {
-        threeInstance.setMaxZoom(MAX_ZOOM);
-        removeHitTestListener = setupHitTest();
-    };
-
-    const update = async () => {
-        updateBaseShapeData();
-        controls = addControls();
-        await redrawCanvas();
-
-        // set the min zoom to fit the image in the area
-        threeInstance.setMinZoom(threeInstance.getDefaultZoom());
-
-        if (_prevBaseShapeData && baseShapeData.inside !== get(_prevBaseShapeData, 'inside')) {
-            if (baseShapeData.type === 'Cylinder') {
-                const obj = first(threeInstance._containerGroup.children);
-                obj.rotateY(Math.PI * (baseShapeData.inside ? 1 : -1));
-                baseShapeData = {
-                    ...baseShapeData,
-                    rotation: {
-                        ...obj.rotation.toVector3(),
-                        order: obj.rotation.order,
-                    },
-                };
-                await triggerChange();
-            }
-        }
-    };
-
-    const dispose = () => {
-        if (removeHitTestListener) {
-            removeHitTestListener();
-        }
-    };
-
-    const setAdvancedMode = value => {
-        advancedMode = value;
-        controls && controls.update();
-    };
-
-    const setMask = value => {
-        maskObject = value;
-    };
-
-    return {
-        init,
-        update,
-        redrawCanvas,
-        getData,
-        dispose,
-        setAdvancedMode,
-        setMask,
-    };
-};

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

@@ -1,88 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import withStyles from '@material-ui/core/styles/withStyles';
-import { ResizeSensor } from 'css-element-queries';
-import { VisualizationInterface } from 'redhotmagma-visualization/VisualizationInterface';
-
-const styles = () => ({
-    visualizationContainer: {
-        width: 500,
-        height: 400,
-    },
-});
-
-/**
- * Component for the Three.js visualization
- * Responsibilities:
- *  - renders the placeholder for the THREE.js visualization
- *  - updates the size of the visualization component on resize events
- */
-export class VisualizationContainer extends React.Component {
-    static propTypes = {
-        three: PropTypes.instanceOf(VisualizationInterface).isRequired,
-        classes: PropTypes.object,
-        className: PropTypes.string,
-    };
-
-    static defaultProps = {
-        classes: {},
-    };
-
-    componentDidMount() {
-        this.initialize();
-    }
-
-    componentDidUpdate(prevProps) {
-        this.initialize(prevProps);
-    }
-
-    initialize(prevProps = {}) {
-        const { three } = this.props;
-
-        if (!three) {
-            // eslint-disable-next-line no-console
-            console.warn('Three instance is not provided! Visualization will not be rendered.');
-            return;
-        }
-
-        if (three === prevProps.three) {
-            // eslint-disable-next-line no-console
-            console.info('Three instance is the same, skipping initialization.');
-            return;
-        }
-
-        this.resizeSensor = new ResizeSensor(this.containerRef.current, this.onSizeChange);
-
-        if (three.isInitialized()) {
-            // Three is already initialized, just add it to the current container instead of reloading it completely
-            three.addToContainer(this.containerRef.current);
-        } else {
-            three.init(this.containerRef.current);
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.resizeSensor) {
-            this.resizeSensor.detach();
-        }
-    }
-
-    onSizeChange = size => {
-        const { three } = this.props;
-        three.setSize(size);
-        if (three.updateZoom) {
-            three.updateZoom();
-        }
-    };
-
-    containerRef = React.createRef();
-
-    render() {
-        const { classes, className } = this.props;
-        return (
-            <div className={`${classes.visualizationContainer} ${className || ''}`} ref={this.containerRef} />
-        );
-    }
-}
-
-export default withStyles(styles, { name: 'VisualizationContainer' })(VisualizationContainer);