@configuratorware/configurator-admingui 1.41.1 → 1.42.1

package/src/Utils/Events/pointerEvent.js

@@ -1,77 +0,0 @@
-/**
- * @param {MouseEvent|TouchEvent} evt
- * @returns {{x: number, y: number}}
- */
-export const getPointFromPointerEvent = (evt, relativeTo = false) => {
-    let x, y;
-    const touches =
-        (evt.changedTouches && evt.changedTouches.length > 0 && evt.changedTouches) || evt.touches;
-    if (touches && touches.length > 0) {
-        x = touches[0].clientX;
-        y = touches[0].clientY;
-    } else {
-        x = evt.clientX;
-        y = evt.clientY;
-    }
-    if (relativeTo) {
-        const { top, left } = relativeTo.getBoundingClientRect();
-        x -= left;
-        y -= top;
-    }
-    if (relativeTo.width) {
-        const scaling = relativeTo.getBoundingClientRect().width / relativeTo.width;
-        x *= 1 / scaling;
-        y *= 1 / scaling;
-    }
-    return { x, y };
-};
-
-/**
- * Creates a general pointer event listener (for mouse and touch events)
- * @param element
- * @param {string} name The name of the event phase ('start'|'move'|'end')
- * @param {function} fn The event handler function
- * @returns {function()} A function to be called to remove the event listeners
- */
-export const createPointerEventListener = (element, name, fn) => {
-    let touchName, mouseName;
-    switch (name) {
-        case 'start': {
-            touchName = 'touchstart';
-            mouseName = 'mousedown';
-            break;
-        }
-        case 'move': {
-            touchName = 'touchmove';
-            mouseName = 'mousemove';
-            break;
-        }
-        case 'end': {
-            touchName = 'touchend';
-            mouseName = 'mouseup';
-            break;
-        }
-    }
-    const tolerance = 1; // ms
-    let timeStamp = 0;
-    const touchHandler = (evt, ...args) => {
-        // prevent mouse events if it's a touch event
-        //evt.type.indexOf('touch') === 0 && evt.preventDefault();
-        timeStamp = evt.timeStamp;
-        fn(evt, ...args);
-    };
-    const mouseHandler = (evt, ...args) => {
-        if (evt.timeStamp - timeStamp < tolerance) {
-            // eslint-disable-next-line no-console
-            console.log('Skipped double event handling.');
-            return;
-        }
-        fn(evt, ...args);
-    };
-    element.addEventListener(touchName, touchHandler);
-    element.addEventListener(mouseName, mouseHandler);
-    return () => {
-        element.removeEventListener(touchName, touchHandler);
-        element.removeEventListener(mouseName, mouseHandler);
-    };
-};

package/src/Utils/FunDraw/createMask.js

@@ -1,67 +0,0 @@
-import { createArea, createObject, draw, fitSize, loadImage } from './funDraw';
-import size from 'lodash/size';
-
-export const createMask = async (initialObject, maskSrc, maskData = {}) => {
-    const maskImage = await loadImage({ name: 'mask' }, maskSrc, false);
-    const { width, height } = initialObject;
-
-    const { relativeScaling = 1 } = maskData;
-
-    const maskBase = fitSize(
-        createObject({
-            ...maskImage,
-            relativeScaling,
-            drawSelf: (ctx, object) => {
-                const { width, height } = object;
-
-                // draw a rect to represent the editable area
-                const left = -width / 2;
-                const top = -height / 2;
-                const rectParams = [left, top, width, height];
-                ctx.fillStyle = 'green';
-                ctx.fillRect(...rectParams);
-
-                // draw the mask with destination-in blending, so that will keep only the area covered by the mask image
-                ctx.save();
-                ctx.globalCompositeOperation = 'destination-in';
-                const maskFit = fitSize(maskImage, width, height, true);
-                maskFit.drawSelf(ctx, maskFit);
-                ctx.restore();
-            },
-            recalculateSize: createSizeCalculator(maskData),
-        }),
-        width,
-        height,
-        true
-    );
-
-    return size(maskData) === 0 ? maskBase : maskBase.recalculateSize(maskBase, { width, height });
-};
-
-const createSizeCalculator = maskData => (maskBase, { width, height }) => {
-    const { x = 0.5, y = 0.5, rotation = 0, relativeScaling = 1 } = maskData;
-    const ratio = maskBase.width / maskBase.height;
-    return maskBase
-        .setSize(width * relativeScaling, (width / ratio) * relativeScaling)
-        .setAngle(rotation)
-        .setPosition(width * x, height * y);
-};
-
-export const createAreaWithMask = (initialObject = {}, mask) => {
-    const area = createArea(initialObject);
-    return {
-        ...area,
-        drawSelf: (ctx, object) => {
-            // fix the position and draw the mask first
-            ctx.save();
-            ctx.translate(-object.width / 2, -object.height / 2);
-            draw(mask.recalculateSize(mask, object), ctx);
-            ctx.restore();
-            // then draw the area behind the mask
-            ctx.save();
-            ctx.globalCompositeOperation = 'destination-over';
-            area.drawSelf(ctx, object);
-            ctx.restore();
-        },
-    };
-};

package/src/Utils/FunDraw/funDraw.js

@@ -1,287 +0,0 @@
-import moveIcon from '../../Screens/Designer/SubScreens/Visualization/Components/resources/move.svg';
-import rotateIcon from '../../Screens/Designer/SubScreens/Visualization/Components/resources/rotate.svg';
-import sizeIcon from '../../Screens/Designer/SubScreens/Visualization/Components/resources/size.svg';
-import logoRHM from '../../Screens/Designer/SubScreens/Visualization/Components/resources/logo.svg';
-
-export const decorateObject = (object, decoratorsMap) => {
-    const keys = Object.keys(decoratorsMap);
-    const decorators = {};
-    keys.forEach(key => {
-        const decoratorFn = decoratorsMap[key];
-        decorators[key] = (...args) => decoratorFn(object, ...args);
-    });
-    return {
-        ...object,
-        ...decorators,
-    };
-};
-
-export const createObject = (initialObject = {}) =>
-    decorateObject(initialObject, {
-        setPosition,
-        setSize,
-        setAngle,
-        draw,
-    });
-
-export const setPosition = (object, x, y) =>
-    createObject({
-        ...object,
-        x,
-        y,
-    });
-
-export const setSize = (object, width, height) =>
-    createObject({
-        ...object,
-        width,
-        height,
-    });
-
-export const setAngle = (object, angle) =>
-    createObject({
-        ...object,
-        angle,
-    });
-
-export const draw = (object, ctx) => {
-    const { x, y, angle, drawSelf, children } = object;
-    ctx.save();
-    ctx.translate(x, y);
-    ctx.rotate(angle);
-    drawSelf && drawSelf(ctx, object);
-    if (children) {
-        children.forEach(child => draw(child, ctx));
-    }
-    ctx.restore();
-    return object;
-};
-
-export const getBounds = object => {
-    const { width, height } = {
-        width: 0,
-        height: 0,
-        ...object,
-    };
-    const left = -width / 2;
-    const top = -height / 2;
-    const right = left + width;
-    const bottom = top + height;
-    return {
-        top,
-        left,
-        bottom,
-        right,
-    };
-};
-
-export const containsPoint = (object, x, y) => {
-    const { top, left, bottom, right } = getBounds(object);
-    return !(x < left || y < top || x > right || y > bottom);
-};
-
-export const setChildren = async (object, children) =>
-    createObject({
-        ...object,
-        children: await Promise.all(children),
-    });
-
-export const createArea = (initialObject = {}) =>
-    createObject({
-        drawSelf: (ctx, object) => {
-            const { width, height, fillStyle } = object;
-            const left = -width / 2;
-            const top = -height / 2;
-            const rectParams = [left, top, width, height];
-            ctx.lineWidth = 1;
-            ctx.strokeStyle = 'black';
-            ctx.fillStyle = fillStyle || 'rgba(255, 255, 255, 0.5)';
-            ctx.fillRect.apply(ctx, rectParams);
-            ctx.strokeRect.apply(ctx, rectParams);
-        },
-        ...initialObject,
-    });
-
-export const createControl = (initialObject = {}) =>
-    createObject({
-        ...initialObject,
-    })
-        .setSize(20, 20)
-        .setPosition(0, 0);
-
-export const reversePointTransform = (object, x, y) => {
-    const { x: cx, y: cy, angle } = {
-        x: 0,
-        y: 0,
-        angle: 0,
-        ...object,
-    };
-    const ox = x - cx;
-    const oy = y - cy;
-    const cosAi = Math.cos(-angle);
-    const sinAi = Math.sin(-angle);
-    return {
-        x: ox * cosAi - oy * sinAi,
-        y: oy * cosAi + ox * sinAi,
-    };
-};
-
-export const getIntersectedObjects = (objects, x, y) => {
-    const result = [];
-    []
-        .concat(objects)
-        .reverse()
-        .forEach(object => {
-            const { x: tx, y: ty } = reversePointTransform(object, x, y);
-            if (containsPoint(object, tx, ty)) {
-                result.push(object);
-            }
-            if (object.children) {
-                result.push(...getIntersectedObjects(object.children, tx, ty));
-            }
-        });
-    return result;
-};
-
-export const addPaddingToBounds = ({ top, right, bottom, left }, padding) => ({
-    top: top - padding,
-    right: right + padding,
-    bottom: bottom + padding,
-    left: left - padding,
-});
-
-export const setDefaultControls = async (object, size = 20, padding = 10) => {
-    const { top, right, bottom, left } = addPaddingToBounds(getBounds(object), padding);
-    return await setChildren(
-        object,
-        (
-            await Promise.all([
-                loadImage(
-                    createControl({ name: 'move' })
-                        .setSize(size, size)
-                        .setPosition(left, top),
-                    moveIcon
-                ),
-                loadImage(
-                    createControl({ name: 'rotate' })
-                        .setSize(size, size)
-                        .setPosition(right, top),
-                    rotateIcon
-                ),
-                loadImage(
-                    createControl({ name: 'size' })
-                        .setSize(size, size)
-                        .setPosition(right, bottom),
-                    sizeIcon
-                ),
-            ])
-        ).map(controlObject => ({
-            ...controlObject,
-            drawSelf: (ctx, object) => {
-                ctx.shadowColor = 'white';
-                ctx.shadowBlur = 5;
-                controlObject.drawSelf(ctx, object);
-            },
-        }))
-    );
-};
-
-export const getDistance = (x0, y0, x1, y1) => Math.sqrt(Math.pow(x0 - x1, 2) + Math.pow(y0 - y1, 2));
-
-export const loadImage = (() => {
-    const imageCache = {};
-    return (object, extSrc = false, useCache = true) =>
-        new Promise(async (resolve, reject) => {
-            const { name, src } = object;
-            const key = name || src || extSrc;
-            let image;
-            if (!key || !imageCache[key]) {
-                image = await new Promise(resolve => {
-                    const img = document.createElement('img');
-                    img.onload = () => resolve(img);
-                    img.onerror = reject;
-                    img.src = src || extSrc;
-                });
-                if (useCache) {
-                    imageCache[key] = image;
-                }
-            } else {
-                image = imageCache[key];
-            }
-            resolve(createImageObject(image, object));
-        });
-})();
-
-export const createImageObject = (image, initialObject) => {
-    const { width, height } = image;
-    return createObject({
-        drawSelf: (ctx, object) => {
-            if (object.image) {
-                const { width, height, image } = object;
-                const { top, left } = getBounds(object);
-                ctx.drawImage(image, left, top, width, height);
-            }
-        },
-        width,
-        height,
-        image,
-        ...initialObject,
-    });
-};
-
-export const fitSize = (object, width, height, allowScaleUp = false) => {
-    const { width: ow, height: oh } = object;
-    let nw = ow,
-        nh = oh;
-    if (allowScaleUp) {
-        nw = width;
-        nh = nw / (ow / oh);
-    }
-    if (nw > width) {
-        nw = width;
-        nh = nw / (ow / oh);
-    }
-    if (nh > height) {
-        nh = height;
-        nw = nh * (ow / oh);
-    }
-    return {
-        ...object,
-        width: nw,
-        height: nh,
-        x: width / 2,
-        y: height / 2,
-    };
-};
-
-export const rescale = ({ width, height, x, y, ...otherProps }, scale, roundFn = v => v) => ({
-    ...otherProps,
-    width: roundFn.call(0, width * scale),
-    height: roundFn.call(0, height * scale),
-    x: roundFn.call(0, x * scale),
-    y: roundFn.call(0, y * scale),
-});
-
-export const scaleToWidth = (object, width, roundFn = v => v) =>
-    rescale(object, width / object.width, roundFn);
-
-// eslint-disable-next-line no-unused-vars
-export const only = ({ children, ...otherProps }) => otherProps;
-
-export const createAreaWithLogo = async (initialObject, logoSrc = logoRHM, padding = 10) => {
-    const logo = await loadImage({ name: 'logo' }, logoSrc);
-    const area = createArea(initialObject);
-    return createObject({
-        ...area,
-        logo,
-        drawSelf: (ctx, object) => {
-            const { logo, width, height, flipX } = object;
-            if (flipX) {
-                ctx.scale(-1, 1);
-            }
-            area.drawSelf(ctx, object);
-            const logoFit = fitSize(logo, width - padding, height - padding, true);
-            logoFit.drawSelf(ctx, logoFit);
-        },
-    });
-};

package/src/Utils/FunDraw/movableObject.js

@@ -1,108 +0,0 @@
-import { createPointerEventListener, getPointFromPointerEvent } from '../Events/pointerEvent';
-import { draw, getDistance, getIntersectedObjects, setDefaultControls } from './funDraw';
-
-export const snapToDeg = (valueRad, toleranceDeg = 3, snapValues = [0, 90, 180, 270, 360]) => {
-    let deg = (valueRad / (Math.PI * 2)) * 360;
-    for (let snapDeg of snapValues) {
-        if (Math.abs(deg - snapDeg) < toleranceDeg) {
-            return (snapDeg / 360) * Math.PI * 2;
-        }
-    }
-    return valueRad;
-};
-
-export const createMovableObject = (canvas, initialObject, onUpdate) => {
-    let object = initialObject;
-
-    const detachPointerEventListener = createPointerEventListener(canvas, 'start', evt => {
-        const { x, y } = getPointFromPointerEvent(evt, canvas);
-        const activeControl = getIntersectedObjects([object], x, y).pop();
-        const { x: ox, y: oy, width: ow, height: oh, angle: oAngle } = {
-            x: 0,
-            y: 0,
-            angle: 0,
-            width: 0,
-            height: 0,
-            ...object,
-        };
-
-        const detachMoveListener = createPointerEventListener(window, 'move', async evt => {
-            if (activeControl) {
-                const { x: x1, y: y1 } = getPointFromPointerEvent(evt, canvas);
-                const { name } = activeControl;
-                if (name === 'move') {
-                    const dx = x1 - x;
-                    const dy = y1 - y;
-                    object = object.setPosition(ox + dx, oy + dy);
-                } else if (name === 'rotate') {
-                    const dAngle = Math.atan2(y1 - oy, x1 - ox) - Math.atan2(y - oy, x - ox) + Math.PI * 2;
-                    let rad = snapToDeg((oAngle + dAngle) % (Math.PI * 2));
-                    object = object.setAngle(rad);
-                } else if (name === 'size') {
-                    const scale = getDistance(ox, oy, x1, y1) / getDistance(ox, oy, x, y);
-                    const nw = ow * scale;
-                    const nh = oh * scale;
-                    object = object.setSize(nw, nh);
-                }
-                onUpdate({
-                    eventName: name,
-                    object,
-                    setObject,
-                });
-            }
-        });
-        const detachEndListener = createPointerEventListener(window, 'end', () => {
-            detachMoveListener();
-            detachEndListener();
-        });
-    });
-
-    const dispose = () => {
-        detachPointerEventListener();
-    };
-
-    const setObject = nextObject => {
-        object = nextObject;
-    };
-
-    const init = () => {
-        onUpdate({
-            eventName: 'init',
-            object,
-            setObject,
-        });
-    };
-
-    return {
-        dispose,
-        setObject,
-        init,
-    };
-};
-
-export const createMovableObjectWithControls = (canvas, object, options) => {
-    const { width, height } = canvas;
-    const ctx = canvas.getContext('2d');
-    const {
-        drawFunction = draw,
-        controlFactory = object => setDefaultControls(object, 24, -12),
-        onUpdate,
-    } = options;
-
-    return createMovableObject(canvas, object, async ({ object, setObject }) => {
-        ctx.clearRect(0, 0, width, height);
-        const objectWithControls = await controlFactory(object);
-        setObject(objectWithControls);
-        drawFunction(objectWithControls, ctx);
-        onUpdate &&
-            onUpdate({
-                getData: () => ({
-                    object,
-                    canvas: {
-                        width,
-                        height,
-                    },
-                }),
-            });
-    });
-};

package/src/Utils/Function/__tests__/sendMessage.test.js

@@ -1,20 +0,0 @@
-import { sendMessage } from '../sendMessage';
-
-describe('Utils/Function/sendMessage', () => {
-    test(
-        'sendMessage calls the given function on the subject with the correct args, ' +
-            'and returns the original result',
-        () => {
-            const testObj = {
-                foo: jest.fn(() => 'result'),
-            };
-            const result = sendMessage(testObj, 'foo', 'test argument');
-            expect(result).toBe('result');
-            expect(testObj.foo).toHaveBeenCalledWith('test argument');
-        }
-    );
-    test('sendMessage not errors if the first arg is not an object, or the function does not exist', () => {
-        expect(() => sendMessage(false)).not.toThrowError();
-        expect(() => sendMessage({}, 'nonExistingFunction')).not.toThrowError();
-    });
-});

package/src/Utils/Function/sendMessage.js

@@ -1,7 +0,0 @@
-export function sendMessage(obj, fn, ...args) {
-    if (obj && typeof obj === 'object' && typeof obj[fn] === 'function') {
-        return obj[fn].apply(obj, args);
-    }
-}
-
-export default sendMessage;

package/src/Utils/HOCs/AsyncProps.js

@@ -1,39 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-/**
- * A HOC to provide custom async prop mapping to the wrapped components
- * If any of the dependency props changes (deps array) it calls the given asyncPropMapper function
- * to update the data mapping.
- * Features:
- *  - render custom component while loading: provide options.renderLoading
- *  - render custom component on error: provide options.renderError
- * @param {function} asyncPropMapper
- * @param {array} deps
- * @param {object} options
- * @return {function(*): Function}
- */
-export const withAsyncProps = (asyncPropMapper, deps = [], options = {}) => Component => props => {
-    const [asyncProps, setAsyncProps] = useState({ isLoading: false, data: {}, error: null });
-
-    const asyncFunc = async () => {
-        setAsyncProps({ isLoading: true, data: {}, error: null });
-        try {
-            const data = await asyncPropMapper(props);
-            setAsyncProps({ isLoading: false, data });
-        } catch (e) {
-            setAsyncProps({ isLoading: false, error: e });
-        }
-    };
-
-    useEffect(() => {
-        asyncFunc();
-    }, deps);
-
-    if (asyncProps.error && options.renderError) {
-        return options.renderError(asyncProps.error, asyncFunc);
-    } else if (asyncProps.isLoading && options.renderLoading) {
-        return options.renderLoading();
-    }
-
-    return <Component {...asyncProps.data} isLoading={asyncProps.isLoading} {...props} />;
-};

package/src/Utils/HOCs/LocalState.js

@@ -1,34 +0,0 @@
-/**
- * A higher order component to provide local state to deeper level nested components
- */
-
-import React from 'react';
-
-const LocalStateContext = React.createContext();
-
-export class LocalStateProvider extends React.Component {
-    state = {
-        sharedState: this.props.initialState,
-        setState: sharedState => {
-            this.setState({ sharedState });
-        },
-    };
-
-    render() {
-        return (
-            <LocalStateContext.Provider value={this.state}>{this.props.children}</LocalStateContext.Provider>
-        );
-    }
-}
-
-export const provideLocalState = (initialState = {}) => Component => props => (
-    <LocalStateProvider initialState={initialState}>
-        <Component {...props} />
-    </LocalStateProvider>
-);
-
-export const withLocalState = Component => props => (
-    <LocalStateContext.Consumer>
-        {({ setState, sharedState }) => <Component setState={setState} {...sharedState} {...props} />}
-    </LocalStateContext.Consumer>
-);

package/src/Utils/HOCs/RemappedProps.js

@@ -1,15 +0,0 @@
-import React from 'react';
-
-/**
- * A simple HOC to remap the given props
- * Usages:
- *  - prop aliasing
- *  - use additional selectors to provide values directly
- *  - calculated props (the calculation method should be memoized)
- *  - other dependency injection purposes
- * @param {function} remapFunction
- * @return {function(*): function(*=): *}
- */
-export const withRemappedProps = remapFunction => Component => props => (
-    <Component {...props} {...remapFunction(props)} />
-);

package/src/Utils/Request/lazyFetch.js

@@ -1,29 +0,0 @@
-import { pathParams } from './pathParams';
-import Api from '../../App/Api';
-import networkConfig from '../../App/Config/network';
-
-export const lazyFetch = async (url, params, fallbackValue) => {
-    try {
-        return await Api.request(pathParams(url, params));
-    } catch (e) {
-        // eslint-disable-next-line no-console
-        console.error(e);
-        if (typeof fallbackValue !== 'undefined') {
-            return fallbackValue;
-        }
-        throw e;
-    }
-};
-
-export const lazyFetchFrontend = async (url, params, fallbackValue) => {
-    try {
-        return await Api.request({ url: pathParams(url, params), baseURL: networkConfig.frontendBaseURL });
-    } catch (e) {
-        // eslint-disable-next-line no-console
-        console.error(e);
-        if (typeof fallbackValue !== 'undefined') {
-            return fallbackValue;
-        }
-        throw e;
-    }
-};

package/src/Utils/Request/pathParams.js

@@ -1,8 +0,0 @@
-export const pathParams = (path, params = {}) => {
-    const keys = Object.keys(params);
-    let result = path;
-    for (let key of keys) {
-        result = result.replace(`{${key}}`, params[key]);
-    }
-    return result;
-};