@configuratorware/configurator-admingui 1.41.1 → 1.42.1

package/src/Screens/Assemblypointeditor/Components/Assemblypointeditor.js

@@ -1,703 +0,0 @@
-/* global fabric */
-
-import React, { Component } from 'react';
-import _ from 'lodash';
-import { T } from '../../../App/i18n';
-
-import RaisedButton from '../../../UIComponents/RaisedButton';
-import IconButton from '../../../UIComponents/IconButton';
-import ZoomResetIcon from '../../../UIComponents/icons/ZoomResetIcon';
-import AssemblypointTable from './AssemblypointTable';
-import Select from '../../../Components/FormFragments/Select';
-import networkConf from '../../../App/Config/network';
-import CopyPaste from '../../../Components/CopyPaste';
-
-const baseUrl = networkConf.assemblyPointEditorBaseURL;
-
-import './Styles.scss';
-
-const DEVICE_PIXEL_RATIO = window.devicePixelRatio || 1;
-
-import './fabric.min.js';
-
-/**
- * AssemblyImage fabric class that extends the fabric.Image, used to render the assembly points
- */
-const AssemblyImage = fabric.util.createClass(fabric.Image, {
-    objectCaching: false,
-
-    initialize: function(options) {
-        this.callSuper('initialize', options);
-
-        this.originX = 'center';
-        this.originY = 'center';
-        this.borderColor = 'red';
-        this.cornerColor = 'red';
-        this.transparentCorners = false;
-        this.lockUniScaling = true;
-        this.lockScalingX = true;
-        this.lockScalingY = true;
-
-        // we just need the rotation control
-        this.setControlsVisibility({
-            bl: false, // bottom left
-            br: false, // bottom right
-            mb: false, // midle bottom
-            ml: false, // middle left
-            mr: false, // middle right
-            mt: false, // middle top disable
-            tl: false, // top left
-            tr: false, // top right
-        });
-    },
-
-    /**
-     * Set the identifier and the initial position by the AssemblyPoint
-     * @param ap
-     */
-    setAssemblyPoint: function(ap) {
-        this.identifier = ap.identifier;
-        this.left = parseInt(ap.x) || 0;
-        this.top = parseInt(ap.y) || 0;
-        this.angle = parseInt(ap.rotation) || 0;
-    },
-
-    setAsMain: function() {
-        this.isMain = true;
-        this.top = 0;
-        this.left = 0;
-        this.selectable = false;
-        this.evented = false;
-    },
-
-    _render: function(ctx) {
-        // render the image
-        this.callSuper('_render', ctx);
-        if (this.isMain) {
-            return; // nothing more to do...
-        }
-
-        // draw the crosshair
-        const scale = this.canvas.getZoom() * DEVICE_PIXEL_RATIO;
-        const size = 10;
-        const { viewportTransform } = this.canvas;
-
-        ctx.save();
-
-        ctx.beginPath();
-        ctx.setTransform(1, 0, 0, 1, 0, 0); // resetTransform polyfill
-        ctx.setTransform(
-            1,
-            0,
-            0,
-            1,
-            viewportTransform[4] * DEVICE_PIXEL_RATIO,
-            viewportTransform[5] * DEVICE_PIXEL_RATIO
-        );
-        ctx.translate(this.left * scale, this.top * scale);
-        ctx.lineWidth = 1;
-        ctx.moveTo(-size, 0);
-        ctx.lineTo(size, 0);
-        ctx.moveTo(0, -size);
-        ctx.lineTo(0, size);
-        ctx.strokeStyle = '#FF0000';
-        ctx.stroke();
-        ctx.closePath();
-
-        ctx.restore();
-    },
-});
-/**
- * Loads the image from the given url and instantiates an AssemblyImage object
- * @param {string} url - The image to load
- * @param {function} callback - The callback function to call with the AssemblyImage object
- */
-AssemblyImage.fromURL = (url, callback) =>
-    fabric.util.loadImage(url, function(img) {
-        const obj = new AssemblyImage(img);
-        callback(obj);
-    });
-
-export default class Assemblypointeditor extends Component {
-    constructor(props) {
-        super(props);
-
-        // the fabric canvas object
-        this.canvas = null;
-        // canvas object map (keys are AssemblyPoint identifiers)
-        this.canvasObjects = {};
-
-        // drag canvas flag (currently dragging)
-        this._dragCanvas = false;
-        // force drag flag (want to start dragging)
-        this._forceDragCanvas = false;
-        // last position of dragging (helper in movement calculation)
-        this._position = {};
-
-        // reference to the last state of the selected visualizationdata element
-        this._selectedElementLastState = null;
-
-        this.zoomValues = [100, 110, 125, 150, 175, 200, 250, 300, 500];
-        this.zoomBase = 1;
-
-        this.state = {
-            zoom: 0, // the zoom level
-            zoomValue: this.zoomValues[0], // the zoom value (given by zoom level)
-
-            elements: [], // visualizationdata elements
-            selectedElement: null, // selected visualizationdata element
-            selectedElementIndex: 0, // selected visualizationdata element index
-            assemblyPoints: [], // assemblyPoints of selected visualizationdata element
-            activeAssemblyPoints: [], // selected assemblyPoints (list of identifiers)
-            sampleOptions: {},
-        };
-    }
-
-    componentDidMount() {
-        // register handlers
-        this.refs.canvasContainer.addEventListener('wheel', this.wheelHandler);
-        document.addEventListener('keydown', this.keyDownHandler);
-        document.addEventListener('keyup', this.keyUpHandler);
-        window.addEventListener('resize', this.resizeHandler);
-
-        const canvasElement = this.refs.canvas;
-
-        // the main canvas element
-        this.canvas = new fabric.Canvas(canvasElement, {
-            width: canvasElement.offsetWidth,
-            height: canvasElement.offsetHeight,
-            selection: false,
-        });
-
-        // set (0,0) as the center
-        const center = this.canvas.getCenter();
-        const { viewportTransform } = this.canvas;
-        viewportTransform[4] = center.left;
-        viewportTransform[5] = center.top;
-        this.canvas.setViewportTransform(viewportTransform);
-
-        // register mouse:down to detect start of dragging canvas
-        this.canvas.on('mouse:down', e => {
-            // ctrlKey forces it (canvas can be moved when object is selected)
-            if (!e.target || !e.target.selectable || e.e.ctrlKey || this._forceDragCanvas) {
-                this.lockObjectMovement(true);
-                this._dragCanvas = true;
-                this._position = {
-                    x: e.e.clientX,
-                    y: e.e.clientY,
-                };
-            }
-        });
-        // register mouse:up to finish dragging
-        this.canvas.on('mouse:up', () => {
-            if (this._dragCanvas) {
-                this._dragCanvas = false;
-                this.lockObjectMovement(false);
-            }
-        });
-        // register mouse:move to translate canvas when dragging
-        this.canvas.on('mouse:move', e => {
-            if (this._dragCanvas) {
-                const { x, y } = this._position;
-
-                this._position = {
-                    x: e.e.clientX,
-                    y: e.e.clientY,
-                };
-
-                const movement = {
-                    x: this._position.x - x,
-                    y: this._position.y - y,
-                };
-
-                // translating viewport x and y
-                const { viewportTransform } = this.canvas;
-                viewportTransform[4] += movement.x;
-                viewportTransform[5] += movement.y;
-                this.canvas.setViewportTransform(viewportTransform);
-            }
-        });
-        // register canvas object and selection events
-        this.canvas.on({
-            'object:moving': this.updateAssemblyPointData,
-            'object:rotating': this.updateAssemblyPointData,
-            'object:selected': this.updateSelection,
-            'selection:cleared': this.updateSelection,
-        });
-
-        this._lastCanvasContainerWidth = this.refs.canvasContainer.clientWidth;
-        this._resizeCheckInterval = setInterval(() => {
-            if (this.refs.canvasContainer.clientWidth !== this._lastCanvasContainerWidth) {
-                this._lastCanvasContainerWidth = this.refs.canvasContainer.clientWidth;
-                this.canvas.setWidth(this._lastCanvasContainerWidth);
-            }
-        }, 500);
-
-        this.handleProps({}, this.props);
-    }
-
-    componentWillUnmount() {
-        // clean up listeners
-        this.refs.canvasContainer.removeEventListener('wheel', this.wheelHandler);
-        document.removeEventListener('keydown', this.keyDownHandler);
-        document.removeEventListener('keyup', this.keyUpHandler);
-        window.removeEventListener('resize', this.resizeHandler);
-        clearInterval(this._resizeCheckInterval);
-    }
-
-    componentWillReceiveProps(props) {
-        this.handleProps(this.props, props);
-    }
-
-    handleProps(prevProps, props) {
-        const { entityState } = props;
-        const { selectedElementIndex } = this.state;
-
-        // cloning elements to keep the state clean
-        const elements = _.cloneDeep(_.get(entityState, 'data.visualizationdata.value', [])) || [];
-        // make the first element selected by default
-        const selectedElement = elements.length > 0 ? elements[selectedElementIndex] : null;
-        // just a reference to the current assemblyPoints
-        const assemblyPoints = _.get(selectedElement, 'assemblyPoints', []) || [];
-
-        const sampleOptions = _.get(entityState, 'dataSources.sampleOptions', {});
-
-        // init canvas when entity state becomes ready
-        const initCanvas = !_.get(prevProps, 'entityState.isReady', false) && entityState.isReady;
-        // setting a reference to the last state
-        this._selectedElementLastState = _.get(
-            this,
-            `props.entityState.data.visualizationdata.value[${selectedElementIndex}]`
-        );
-        // update when element data has changed
-        const updateElements =
-            entityState.isReady && !_.isEqual(selectedElement, this._selectedElementLastState);
-
-        const optionId = _.get(entityState, 'data.id.value');
-
-        this.setState(
-            {
-                elements,
-                selectedElement,
-                assemblyPoints,
-                sampleOptions,
-            },
-            () => {
-                if (initCanvas) {
-                    this.canvas.clear();
-                    this.props.fetchSampleOptions(assemblyPoints, optionId).then(() => {
-                        this.addElementsToCanvas();
-                    });
-                } else if (updateElements) {
-                    this.updateAllCanvasObjects();
-                }
-            }
-        );
-    }
-
-    /**
-     * Lock or release objects (to make canvas draggable when clicking on active element)
-     * @param {boolean} lock
-     */
-    lockObjectMovement = lock => {
-        for (let o of this.canvas.getObjects()) {
-            o.setOptions({ lockMovementX: lock, lockMovementY: lock });
-        }
-    };
-
-    /**
-     * Modify the position of the active object (rerenders the canvas, updates related AssemblyPoints)
-     * @param {('left'|'top')} positionProp
-     * @param {number} value
-     */
-    modifyPosition = (positionProp, value) => {
-        const aobj = this.canvas.getActiveObject() || this.canvas.getActiveGroup();
-        if (!aobj) {
-            return;
-        }
-
-        aobj.set(positionProp, aobj[positionProp] + value);
-        aobj.setCoords();
-
-        const objs = aobj.identifier ? [aobj] : aobj.getObjects();
-
-        const { assemblyPoints } = this.state;
-
-        for (let obj of objs) {
-            if (obj.identifier) {
-                const ap = _.find(assemblyPoints, { identifier: obj.identifier }),
-                    matrix = obj.calcTransformMatrix(),
-                    options = fabric.util.qrDecompose(matrix);
-                ap.y = Math.round(options.translateY);
-                ap.x = Math.round(options.translateX);
-                ap.rotation = Math.round(options.angle);
-            }
-        }
-        this.onAssemblyPointChange(assemblyPoints);
-        this.canvas.renderAll();
-    };
-
-    /**
-     * Wheel handler for zooming
-     * @param {object} e - The mouse wheel event object
-     */
-    wheelHandler = e => {
-        const zoom = this.state.zoom + (e.wheelDelta > 0 ? 1 : -1);
-        if (zoom >= 0 && zoom < this.zoomValues.length) {
-            const zoomValue = this.zoomValues[zoom];
-            this.canvas.zoomToPoint(this.canvas.getPointer(e), (this.zoomBase * zoomValue) / 100);
-            this.setState({ zoom, zoomValue });
-        }
-    };
-
-    /**
-     * KeyDown handler to move the active object and drag the canvas
-     * @param {object} e - The keydown event object
-     */
-    keyDownHandler = e => {
-        const value = e.ctrlKey ? 10 : 1; // move more when ctrlKey is down
-        switch (e.keyCode) {
-            case 37: // left arrow
-                this.modifyPosition('left', -value);
-                break;
-            case 38: // up arrow
-                this.modifyPosition('top', -value);
-                break;
-            case 39: // right arrow
-                this.modifyPosition('left', value);
-                break;
-            case 40: // down arrow
-                this.modifyPosition('top', value);
-                break;
-            case 32: // space
-                this._forceDragCanvas = true;
-                break;
-        }
-    };
-
-    /**
-     * KeyUp handler to stop forced canvas dragging
-     * @param {object} e - The keyup event object
-     */
-    keyUpHandler = e => {
-        switch (e.keyCode) {
-            case 32: // space
-                this._forceDragCanvas = false;
-                break;
-        }
-    };
-
-    /**
-     * Resize handler to adjust canvas width to the maximum available width
-     */
-    resizeHandler = () => {
-        if (this.refs.canvasContainer) {
-            this.canvas.setWidth(this.refs.canvasContainer.clientWidth);
-        }
-    };
-
-    /**
-     * Update assembly point data when modifying object on canvas
-     * @param {object} target - The fabric object (or group)
-     */
-    updateAssemblyPointData = ({ target }) => {
-        const { assemblyPoints } = this.state;
-        const objs = target.identifier ? [target] : target.getObjects();
-        for (let obj of objs) {
-            if (obj.identifier) {
-                const ap = _.find(assemblyPoints, { identifier: obj.identifier }),
-                    matrix = obj.calcTransformMatrix(),
-                    options = fabric.util.qrDecompose(matrix);
-                ap.y = Math.round(options.translateY);
-                ap.x = Math.round(options.translateX);
-                ap.rotation = Math.round(options.angle);
-            }
-        }
-        this.onAssemblyPointChange(assemblyPoints);
-    };
-
-    /**
-     * Update the related object on the canvas by the given AssemblyPoint data
-     * @param {object} assemblyPoint - AssemblyPoint object
-     * @param {boolean} [rerender=true] - rerender canvas after update element
-     */
-    updateCanvasObject = (assemblyPoint, rerender = true) => {
-        const element = this.canvasObjects[assemblyPoint.identifier];
-        if (!element) {
-            // eslint-disable-next-line no-console
-            console.warn('Canvas element is missing for identifier: ' + assemblyPoint.identifier);
-            return;
-        }
-
-        element.setLeft(parseInt(assemblyPoint.x) || 0);
-        element.setTop(parseInt(assemblyPoint.y) || 0);
-        element.setAngle(parseInt(assemblyPoint.rotation) || 0);
-
-        rerender && this.canvas.renderAll();
-    };
-
-    /**
-     * Update all the canvas objects by the current AssemblyPoint data
-     */
-    updateAllCanvasObjects = () => {
-        const aps = this.state.assemblyPoints;
-
-        if (_.size(this.canvasObjects) !== aps.length) {
-            // skipping, canvas objects are not added yet..
-            // eslint-disable-next-line no-console
-            console.log('skipping update, canvas objects are not added yet..');
-            return;
-        }
-
-        for (let api in aps) {
-            const ap = aps[api];
-            if (!ap.product) {
-                // if no product it cannot be displayed
-                // eslint-disable-next-line no-console
-                console.log('skipping update, no product for assembly point: ' + ap.identifier);
-                continue;
-            }
-            if (ap.product !== this._selectedElementLastState.assemblyPoints[api].product) {
-                AssemblyImage.fromURL(
-                    baseUrl + ap.imageDirectory + '/' + ap.product + ap.imageSuffix + '.png',
-                    assemblyPart => {
-                        assemblyPart.setAssemblyPoint(ap);
-
-                        this.canvas
-                            .add(assemblyPart)
-                            .moveTo(assemblyPart, ap.imageSequenceNumber)
-                            .setActiveObject(assemblyPart);
-
-                        // remove previous object
-                        this.canvas.remove(this.canvasObjects[ap.identifier]);
-                        // store object reference (key = assembly part identifier)
-                        this.canvasObjects[ap.identifier] = assemblyPart;
-                    }
-                );
-            } else {
-                this.updateCanvasObject(aps[api], false);
-            }
-        }
-        this.canvas.renderAll();
-    };
-
-    /**
-     * Set activeAssemblyPoints by selection target
-     * @param {object} target - Canvas selection event target
-     */
-    updateSelection = ({ target }) => {
-        const activeAssemblyPoints = target
-            ? target.identifier
-                ? [target.identifier]
-                : target.getObjects().map(obj => obj.identifier)
-            : [];
-        this.setState({ activeAssemblyPoints });
-    };
-
-    /**
-     * Load and add AssemblyImage elements to the canvas (in initial phase)
-     */
-    addElementsToCanvas = () => {
-        const { selectedElement } = this.state;
-
-        this.canvasObjects = {};
-
-        // Load the main (parent) element
-        AssemblyImage.fromURL(
-            baseUrl + selectedElement.imageDirectory + '/' + selectedElement.imageName + '.png',
-            assemblyPart => {
-                assemblyPart.setAsMain();
-
-                // set zoom and zoomValue to fit the main element within the canvas
-                if (
-                    assemblyPart.height > this.canvas.getHeight() ||
-                    assemblyPart.width > this.canvas.getWidth()
-                ) {
-                    this.zoomBase = Math.min(
-                        this.canvas.getHeight() / assemblyPart.height,
-                        this.canvas.getWidth() / assemblyPart.width
-                    );
-                    const center = this.canvas.getCenter();
-                    this.canvas.zoomToPoint(new fabric.Point(center.left, center.top), this.zoomBase);
-                }
-
-                this.canvas.add(assemblyPart).moveTo(assemblyPart, selectedElement.imageSequenceNumber);
-            }
-        );
-
-        // Load all the other assembly points belonging to the main element
-        for (let ap of this.state.assemblyPoints) {
-            AssemblyImage.fromURL(
-                baseUrl + ap.imageDirectory + '/' + ap.product + ap.imageSuffix + '.png',
-                assemblyPart => {
-                    assemblyPart.setAssemblyPoint(ap);
-
-                    this.canvas.add(assemblyPart).moveTo(assemblyPart, ap.imageSequenceNumber);
-
-                    // store object reference (key = assembly part identifier)
-                    this.canvasObjects[ap.identifier] = assemblyPart;
-                }
-            );
-        }
-    };
-
-    /**
-     * Update redux state when AssemblyPoint data changes
-     * @param {object} [assemblyPoint] - The AssemblyPoint object to update on canvas
-     */
-    onAssemblyPointChange = () => {
-        const { setData } = this.props;
-        const { elements } = this.state;
-
-        setData('visualizationdata', elements);
-    };
-
-    /**
-     * Set the active AssemblyPoint from outside of the canvas (eg. with selecting it from the list)
-     * @param {string} identifier - The AssemblyPoint identifier
-     */
-    setActiveAssemblyPoint = identifier => {
-        const obj = this.canvasObjects[identifier];
-        this.canvas.deactivateAll().setActiveObject(obj);
-    };
-
-    selectElement = (name, index) => {
-        const selectedElementIndex = index;
-        const selectedElement = this.state.elements[index];
-        if (!selectedElement) {
-            throw new Error('Element does not exist at index: ' + index);
-        }
-        const assemblyPoints = _.get(selectedElement, 'assemblyPoints', []) || [];
-        this.setState(
-            {
-                selectedElement,
-                selectedElementIndex,
-                assemblyPoints,
-            },
-            () => {
-                this.canvas.clear();
-                this.addElementsToCanvas();
-            }
-        );
-    };
-
-    resetZoom = () => {
-        const center = this.canvas.getCenter();
-        const { viewportTransform } = this.canvas;
-        viewportTransform[4] = center.left;
-        viewportTransform[5] = center.top;
-        this.canvas.setViewportTransform(viewportTransform);
-        this.canvas.zoomToPoint(new fabric.Point(center.left, center.top), this.zoomBase);
-        this.setState({
-            zoom: 0,
-            zoomValue: this.zoomValues[0],
-        });
-    };
-
-    pasteAssemblyPoints = assemblyPoints => {
-        const { entityState, setData } = this.props;
-        const { selectedElementIndex } = this.state;
-
-        // cloning elements to keep the state clean
-        const elements = _.cloneDeep(_.get(entityState, 'data.visualizationdata.value', [])) || [];
-        // make the first element selected by default
-        const selectedElement = elements.length > 0 ? elements[selectedElementIndex] : null;
-        // just a reference to the current assemblyPoints
-        _.set(selectedElement, 'assemblyPoints', assemblyPoints);
-
-        setData('visualizationdata', elements);
-    };
-
-    render() {
-        const {
-            elements,
-            selectedElement,
-            selectedElementIndex,
-            assemblyPoints,
-            activeAssemblyPoints,
-        } = this.state;
-        const { postData, hideDetails } = this.props;
-
-        return (
-            <div style={{ height: '100%', width: '100%' }}>
-                {elements.length > 0 && (
-                    <div className="assembly-element">
-                        <span className="assembly-element-select-label">Assemblypoint element: </span>
-                        {elements.length === 1 ? (
-                            <span className="assembly-element-single-identifier">
-                                {_.get(selectedElement, 'identifier')}
-                            </span>
-                        ) : (
-                            <div className="assembly-element-select">
-                                <Select
-                                    source={elements.map(({ identifier }, idx) => ({ identifier, idx }))}
-                                    sourceConfig={{ value: 'idx', text: 'identifier' }}
-                                    value={selectedElementIndex}
-                                    onChange={this.selectElement}
-                                />
-                            </div>
-                        )}
-                    </div>
-                )}
-
-                <div
-                    className={'assembly-editor-container' + (this.state.move ? ' move' : '')}
-                    ref="canvasContainer"
-                    style={{ height: '70%', width: '100%', border: '1px solid grey' }}
-                >
-                    <div className="tools">
-                        <div className="zoom-reset">
-                            <IconButton tooltip={T('Reset zoom')} onClick={this.resetZoom}>
-                                <ZoomResetIcon />
-                            </IconButton>
-                        </div>
-                        <div className="zoom-value">{Math.round(this.state.zoomValue)}%</div>
-                    </div>
-
-                    <canvas ref="canvas" style={{ height: '100%', width: '100%' }} />
-                </div>
-
-                {assemblyPoints.length > 0 && (
-                    <div
-                        className="assemblypoints"
-                        style={{ height: '30%', width: '100%', overflow: 'auto' }}
-                    >
-                        <AssemblypointTable
-                            assemblyPoints={assemblyPoints}
-                            onSelect={this.setActiveAssemblyPoint}
-                            activeAssemblyPoints={activeAssemblyPoints}
-                            sampleOptions={this.state.sampleOptions}
-                            onChange={this.onAssemblyPointChange}
-                        />
-                    </div>
-                )}
-
-                <div className="action-buttons">
-                    <CopyPaste
-                        data={assemblyPoints}
-                        type="assemblypoints"
-                        paste={this.pasteAssemblyPoints}
-                        style={{ display: 'inline-block', float: 'left' }}
-                    />
-
-                    {postData && (
-                        <RaisedButton label={T('Save')} primary={true} onClick={postData} id="submit" />
-                    )}
-                    {hideDetails && (
-                        <RaisedButton
-                            label={T('Back')}
-                            className="full"
-                            primary={false}
-                            onClick={hideDetails}
-                            id="back"
-                        />
-                    )}
-                </div>
-            </div>
-        );
-    }
-}
-
-export const generateAssemblypointeditor = (formFields = []) => props => (
-    <Assemblypointeditor {...props} formFields={formFields} />
-);