@syngrisi/syngrisi 2.2.1

package/src/ui-app/index2/components/Tests/Table/Checks/CheckDetails/Canvas/sideToSideView.ts

@@ -0,0 +1,398 @@
+/* eslint-disable no-underscore-dangle */
+import { fabric } from 'fabric';
+
+// patching fabric Object transformation
+// @ts-ignore
+// fabric.Object.prototype.ignoreZoom = false;
+// fabric.Object.prototype.transform = function (ctx) {
+//
+//     const needFullTransform = (this.group && !this.group._transformDone)
+//         || (this.group && this.canvas && ctx === this.canvas.contextTop);
+//     const m = this.calcTransformMatrix(!needFullTransform);
+//     ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
+//     // // ignore zoom start
+//     // if (this.ignoreZoom && !this.group && this.canvas) {
+//     //     console.log('111')
+//     //     const zoom = 1 / this.canvas.getZoom();
+//     //     ctx.scale(zoom, zoom);
+//     // }
+//     // // ignore zoom end
+// };
+
+export class SideToSideView {
+    private mainView: any;
+
+    canvas: any;
+
+    private dividerLine: any;
+
+    private dividerSlider: any;
+
+    constructor({ mainView }: any) {
+        this.mainView = mainView;
+        this.canvas = mainView.canvas;
+
+        // event handlers, here - because need arrow function to overstate this and bind problem
+        this.zoomEventHandler = () => {
+            this.dividerLine.scaleX = (1 / this.canvas.getZoom());
+            this.dividerSlider.scaleX = (1 / this.canvas.getZoom());
+            this.dividerSlider.scaleY = (1 / this.canvas.getZoom());
+        };
+
+        this.canvasMouseCLickHandler = (e) => {
+            const $this = this;
+            $this.folowMouse = !$this.folowMouse;
+            $this.followCursor(e);
+            $this.divider.set({
+                hoverCursor: $this.folowMouse ? 'grab' : 'pointer',
+            });
+            if ($this.folowMouse) {
+                $this.removeLabels();
+            } else {
+                $this.renderLabels();
+            }
+        };
+
+        this.canvasMouseMoveHandler = (e) => {
+            const $this = this;
+            if (!$this.folowMouse) return;
+            $this.followCursor(e);
+        };
+
+        this.canvasPanHandler = (e) => {
+            const $this = this;
+            if (!$this.folowMouse) return;
+            $this.followCursor(e);
+        };
+    }
+
+    static lockCommon(object) {
+        object.set({
+            lockMovementY: true,
+            lockMovementX: true,
+            selectable: false,
+            hasControls: false,
+        });
+    }
+
+    addZoomEvents() {
+        document.addEventListener('zoom', this.zoomEventHandler, false);
+    }
+
+    removeZoomEvents() {
+        document.removeEventListener('zoom', this.zoomEventHandler, false);
+    }
+
+    followCursor(e: any) {
+        const newLeft = (
+            ((e.e.clientX - (this.canvasLeft + this.canvasOffsetX()))
+                / this.canvas.getZoom())
+        );
+
+        const newTop = (
+            e.e.clientY / this.canvas.getZoom()
+            - this.canvasOffsetY() / this.canvas.getZoom()
+            - this.canvasTop / this.canvas.getZoom()
+            - this.dividerSlider.width / 2
+            // + (48 / this.canvas.getZoom())
+        );
+
+        // moving the object along with mouse cursor
+        this.divider.left = newLeft - (this.divider.width) / 2 + (this.dividerSlider.width / 2);
+        // (this.expectedRectClip.width * -1) + this.actualImg.getScaledWidth() / 2;
+        this.actualRectClip.left = newLeft;
+        this.expectedRectClip.left = newLeft - this.expectedRectClip.width;
+        this.divider.top = newTop - (this.dividerSlider.height / this.canvas.getZoom()) / 2;
+        this.divider.setCoords();
+        this.canvas.renderAll();
+    }
+
+    addDividerFollowMouseEvents() {
+        this.canvas.on(
+            {
+                'mouse:down': this.canvasMouseCLickHandler,
+                'mouse:move': this.canvasMouseMoveHandler,
+                pan: this.canvasPanHandler,
+            },
+        );
+    }
+
+    removeDividerFollowMouseEvents() {
+        this.canvas.off('mouse:down', this.canvasMouseCLickHandler);
+        this.canvas.off('mouse:move', this.canvasMouseMoveHandler);
+        this.canvas.off('pan', this.canvasPanHandler);
+    }
+
+    canvasOffsetX() {
+        return this.canvas.viewportTransform[4];
+    }
+
+    canvasOffsetY() {
+        return this.canvas.viewportTransform[5];
+    }
+
+    divider() {
+        const $this = this;
+        const dividerFillColor = '#FFFFFF';
+        const dividerStrokeColor = '#878a8c';
+        this.dividerOffset = 500000;
+        this.dividerLine = new fabric.Rect({
+            originX: 'center',
+            originY: 'top',
+            left: this.canvas.getWidth() / 2,
+            top: 0,
+            lockMovementY: true,
+            lockMovementX: true,
+            hasControls: false,
+            hasBorders: false,
+            stroke: dividerStrokeColor,
+            fill: dividerFillColor,
+            strokeWidth: 1,
+            strokeUniform: false,
+            width: 3,
+            height: this.canvas.getHeight() + this.dividerOffset,
+        });
+
+        this.dividerSliderCircle = new fabric.Circle({
+            originX: 'center',
+            originY: 'top',
+            moveCursor: 'none',
+            hasControls: false,
+            hasBorders: false,
+            left: (this.canvas.getWidth() / 2),
+            // top: 200,
+            top: (this.canvas.getHeight() / 2) + this.dividerOffset / 2 + 24,
+            radius: 24,
+            fill: 'white',
+            stroke: dividerStrokeColor,
+            strokeUniform: false,
+            strokeWidth: 1,
+        });
+
+        this.dividerSliderText = new fabric.Text('❮   ❯', {
+            top: (this.canvas.getHeight() / 2) + this.dividerOffset / 2 + 48,
+            left: (this.canvas.getWidth() / 2),
+            textAlign: 'left',
+            originX: 'center',
+            originY: 'center',
+            hoverCursor: 'default',
+            fill: dividerStrokeColor,
+            fontSize: 17,
+            lockMovementY: true,
+            lockMovementX: true,
+            lockScalingX: true,
+            lockScalingY: true,
+        });
+
+        this.dividerSlider = new fabric.Group(
+            [
+                this.dividerSliderCircle,
+                this.dividerSliderText,
+            ],
+        );
+
+        this.dividerSlider.set(
+            {
+                top: (this.canvas.getHeight() / 2) + this.dividerOffset / 2 + 48,
+                left: (this.canvas.getWidth() / 2),
+                textAlign: 'left',
+                originX: 'center',
+                originY: 'center',
+                hoverCursor: 'default',
+                fill: dividerStrokeColor,
+                fontSize: 17,
+                lockMovementY: true,
+                lockMovementX: true,
+                lockScalingX: true,
+                lockScalingY: true,
+            },
+        );
+
+        const divider = new fabric.Group(
+            [
+                this.dividerLine,
+                this.dividerSlider,
+            ],
+        );
+        divider.set({
+            originX: 'center',
+            originY: 'center',
+            top: ((this.canvas.getHeight() / 2) / this.canvas.getZoom()) - this.canvasOffsetY() - 48,
+            name: 'divider',
+            hoverCursor: $this.folowMouse ? 'grab' : 'pointer',
+            borderColor: 'transparent',
+            hasControls: false,
+            lockScalingX: true,
+            lockScalingY: true,
+            lockMovementY: true,
+            lockMovementX: true,
+            opacity: 1,
+        });
+        return divider;
+    }
+
+    actualRectClip() {
+        return new fabric.Rect({
+            top: this.actualImg.height * -1,
+            originX: 'left',
+            originY: 'top',
+            absolutePositioned: true,
+            lockMovementY: true,
+            lockMovementX: true,
+            objectCaching: false,
+            // opacity: 0.00001,
+            // width: 70,
+            height: this.actualImg.height * 3,
+        });
+    }
+
+    expectedRectClip() {
+        return new fabric.Rect({
+            top: this.expectedImg.height * -1,
+            // opacity: 0.00001,
+            originX: 'left',
+            originY: 'top',
+            absolutePositioned: true,
+            lockMovementY: true,
+            lockMovementX: true,
+            objectCaching: false,
+            // width: 70,
+            height: this.expectedImg.height * 3,
+        });
+    }
+
+    renderLabels() {
+        const style = document.createElement('style');
+        style.innerHTML = `
+          @keyframes fadeIn {
+            from {
+              opacity: 0;
+            }
+            to {
+              opacity: 0.8;
+            }
+          }
+        `;
+        document.head.appendChild(style);
+
+        const renderCanvasLabel = (label: string) => {
+            const canvasEl = document.getElementById('snapshoot')!;
+            const labelEl = document.createElement('div');
+            labelEl.id = `label_${label}`;
+            labelEl.style.position = 'absolute';
+            labelEl.style.fontSize = '28px';
+            labelEl.style.zIndex = '100000';
+            labelEl.style.padding = '15px';
+            labelEl.style.textAlign = 'center';
+            // labelEl.style.animation = 'fadeIn 0.5s ease-in-out forwards';
+            // labelEl.style.transition = 'opacity 0.5s ease-out';
+            labelEl.style.transition = '';
+            labelEl.style.opacity = '0.8';
+            labelEl.style.top = `${canvasEl.clientHeight / 2 - 34}px`;
+            labelEl.style.left = `${
+                (label === 'expected'
+                    ? canvasEl.clientWidth / 4
+                    : (canvasEl.clientWidth / 4) * 3 - 50)
+            }px`;
+            labelEl.style.backgroundColor = '#373A40';
+            labelEl.style.color = 'white';
+            labelEl.innerText = label;
+
+            canvasEl.append(labelEl);
+        };
+        renderCanvasLabel('expected');
+        renderCanvasLabel('actual');
+    }
+
+    removeLabels() {
+        const removeLabel = (label: string) => {
+            const labelEl = document.getElementById(`label_${label}`)!;
+            if (!labelEl) return;
+            // labelEl.style.animation = '';
+            labelEl.style.transition = 'opacity 0.5s ease-out';
+            labelEl.style.opacity = '0';
+            setTimeout(() => labelEl.remove(), 700);
+        };
+        removeLabel('expected');
+        removeLabel('actual');
+    }
+
+    async render() {
+        // IMAGES
+        this.expectedImg = this.mainView.expectedImage;
+        this.expectedImg.evented = false;
+        SideToSideView.lockCommon(this.expectedImg);
+
+        // this.actualImg = await imageFromUrl(this.uriActual);
+        this.actualImg = this.mainView.actualImage;
+        this.actualImg.evented = false;
+        SideToSideView.lockCommon(this.actualImg);
+
+        this.divider = this.divider();
+        // CLIPS
+        this.actualRectClip = this.actualRectClip();
+        SideToSideView.lockCommon(this.actualRectClip);
+        this.actualImg.clipPath = this.actualRectClip;
+
+        this.expectedRectClip = this.expectedRectClip();
+        SideToSideView.lockCommon(this.expectedRectClip);
+        this.expectedImg.clipPath = this.expectedRectClip;
+
+        this.actualRectClip.width = (this.canvas.getWidth() / this.canvas.getZoom()) * 5;
+        // this.expectedRectClip.width = 500;
+        this.expectedRectClip.width = (this.canvas.getWidth() / this.canvas.getZoom()) * 5;
+
+        this.actualRectClip.left = Math.max(this.mainView.expectedImage.width, this.mainView.expectedImage.width) / 2;
+        this.expectedRectClip.left = Math.max(this.mainView.expectedImage.width, this.mainView.expectedImage.width) / 2
+            - this.expectedRectClip.width;
+
+        this.divider.left = Math.max(this.mainView.expectedImage.width, this.mainView.expectedImage.width) / 2;
+        // RENDER
+        await this.canvas.add(this.expectedImg);
+        await this.canvas.add(this.actualImg);
+        await this.canvas.add(this.divider);
+
+        this.canvasLeft = document.getElementById('snapshoot')
+            .getBoundingClientRect().x;
+
+        this.canvasTop = document.getElementById('snapshoot')
+            .getBoundingClientRect().y;
+
+        this.addZoomEvents();
+        this.addDividerFollowMouseEvents();
+
+        // workaround for not draggable (and also without the col-resize cursor) divider
+        setTimeout(() => {
+            const delta = new fabric.Point(0, 0);
+            this.canvas.relativePan(delta);
+        }, 0);
+
+        // workaround ro rescale divider
+        setTimeout(() => {
+            this.mainView.sliderView.zoomEventHandler();
+            this.mainView.canvas.renderAll();
+        }, 100);
+        this.renderLabels();
+    }
+
+    async destroy() {
+        delete this.actualImg?.clipPath;
+        delete this.expectedImg?.clipPath;
+
+        [
+            this.actualImg,
+            this.expectedImg,
+            this.divider,
+            this.actualLabel,
+            this.expectedLabel,
+            this.actualRectClip,
+            this.expectedRectClip,
+        ].forEach((item) => {
+            this.canvas.remove(item);
+        });
+        delete this.canvas.backgroundImage;
+        this.removeDividerFollowMouseEvents();
+        this.removeZoomEvents();
+        this.removeLabels();
+    }
+}

package/src/ui-app/index2/components/Tests/Table/Checks/CheckDetails/Canvas/simpleView.ts

@@ -0,0 +1,21 @@
+export class SimpleView {
+    constructor(mainView, type) {
+        this.mainView = mainView;
+        this.type = type;
+    }
+
+    async render() {
+        this.mainView.currentView = this.type;
+        this.mainView.canvas.add(this.mainView[`${this.type}Image`]);
+
+        this.mainView[`${this.type}Image`].sendToBack();
+
+        // await initResize(this.mainView[`${this.type}Image`], this.mainView.canvas);
+
+        // await this.mainView.panToCenter(this.mainView[`${this.type}Image`]);
+    }
+
+    destroy() {
+        this.mainView.canvas.remove(this.mainView[`${this.type}Image`]);
+    }
+}

package/src/ui-app/index2/components/Tests/Table/Checks/CheckDetails/CheckDetails.tsx

@@ -0,0 +1,237 @@
+/* eslint-disable no-underscore-dangle,react/jsx-one-expression-per-line,prefer-arrow-callback,max-len,react/jsx-indent */
+import * as React from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { fabric } from 'fabric';
+import { createStyles, Group, Loader, Stack } from '@mantine/core';
+import { useDisclosure, useDocumentTitle } from '@mantine/hooks';
+import { useQuery } from '@tanstack/react-query';
+import { MainView } from './Canvas/mainView';
+import { createImageAndWaitForLoad, imageFromUrl } from './Canvas/helpers';
+import { errorMsg } from '../../../../../../shared/utils';
+import { GenericService } from '../../../../../../shared/services';
+import config from '../../../../../../config';
+import { RelatedChecks } from './RelatedChecks/RelatedChecks';
+import { useRelatedChecks } from './hooks/useRelatedChecks';
+import { useParams } from '../../../../../hooks/useParams';
+import { Toolbar } from './Toolbar/Toolbar';
+import { Header } from './Header';
+import { Canvas } from './Canvas/Canvas';
+
+// eslint-disable-next-line no-unused-vars
+const useStyles = createStyles((theme) => ({
+    zoomButtonsWrapper: {
+        '@media (max-width: 1070px)': {
+            display: 'none',
+        },
+    },
+    checkPathFragment: {
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+    },
+}));
+
+interface Props {
+    initCheckData: any, // initially open check by clicking from table (not from related panel)
+    checkQuery: any,
+    closeHandler: any,
+}
+
+export function CheckDetails({ initCheckData, checkQuery, closeHandler }: Props) {
+    useDocumentTitle(initCheckData?.name);
+    const canvasElementRef = useRef(null);
+    const { query } = useParams();
+    const { classes } = useStyles();
+    const [mainView, setMainView] = useState<MainView | null>(null);
+
+    const [relatedActiveCheckId, setRelatedActiveCheckId] = useState<string>(initCheckData._id);
+
+    const [relatedChecksOpened, relatedChecksHandler] = useDisclosure(true);
+    const related: any = useRelatedChecks(initCheckData);
+    related.opened = relatedChecksOpened;
+    related.handler = relatedChecksHandler;
+
+    related.relatedActiveCheckId = relatedActiveCheckId;
+    related.setRelatedActiveCheckId = setRelatedActiveCheckId;
+
+    const currentCheck = related.relatedFlatChecksData.find((x: any) => x._id === relatedActiveCheckId) || initCheckData;
+
+    const textLoader = <Loader size="xs" color="blue" variant="dots" />;
+    const currentCheckSafe = {
+        _id: currentCheck?._id,
+        name: currentCheck?.name || '',
+        status: currentCheck?.status || '',
+        viewport: currentCheck?.viewport || '',
+        os: currentCheck?.os || currentCheck?.os || '',
+        browserFullVersion: currentCheck?.browserFullVersion || '',
+        browserVersion: currentCheck?.browserVersion || '',
+        browserName: currentCheck?.browserName || '',
+        failReasons: currentCheck?.failReasons || '',
+        result: currentCheck?.result || '{}',
+        markedAs: currentCheck?.markedAs,
+        markedByUsername: currentCheck?.markedByUsername,
+        markedDate: currentCheck?.markedDate,
+        app: { name: currentCheck?.app?.name || textLoader },
+        suite: { name: currentCheck?.suite?.name || textLoader },
+        test: {
+            _id: currentCheck?.test?._id,
+            name: currentCheck?.test?.name || textLoader,
+        },
+        actualSnapshotId: {
+            createdDate: currentCheck?.actualSnapshotId?.createdDate,
+            _id: currentCheck?.actualSnapshotId?._id,
+        },
+        baselineId: {
+            createdDate: currentCheck?.baselineId?.createdDate,
+            _id: currentCheck?.baselineId?._id,
+        },
+        diffId: { filename: currentCheck?.diffId?.filename },
+
+        parsedResult: currentCheck?.result ? JSON.parse(currentCheck?.result) : null,
+    };
+
+    const baselineQuery = useQuery(
+        [
+            'baseline_by_snapshot_id',
+            currentCheck?.baselineId._id,
+        ],
+        () => GenericService.get(
+            'baselines',
+            { snapshootId: currentCheck?.baselineId._id },
+            {
+                populate: 'app',
+                limit: '1',
+            },
+            'baseline_by_snapshot_id',
+        ),
+        {
+            enabled: true,
+            refetchOnWindowFocus: false,
+            onError: (e) => {
+                errorMsg({ error: e });
+            },
+        },
+    );
+
+    const baselineId = useMemo<string>(() => {
+        if (baselineQuery.data?.results && baselineQuery.data?.results.length > 0) {
+            return baselineQuery.data?.results[0]._id as string;
+        }
+        return '';
+    }, [baselineQuery.data?.timestamp]);
+
+    // init mainView
+    useEffect(() => {
+        const destroyMV = async () => {
+            if (mainView) {
+                await mainView.destroyAllViews();
+                mainView.canvas.clear();
+                mainView.canvas.dispose();
+                setMainView(() => null);
+            }
+        };
+
+        const initMV = async () => {
+            // init
+            fabric.Object.prototype.objectCaching = false;
+            const expectedImgSrc = `${config.baseUri}/snapshoots/${currentCheck?.baselineId?.filename}?expectedImg`;
+            const expectedImg = await createImageAndWaitForLoad(expectedImgSrc);
+
+            const actual = currentCheck.actualSnapshotId || null;
+            const actualImgSrc = `${config.baseUri}/snapshoots/${currentCheck?.actualSnapshotId?.filename}?actualImg`;
+            const actualImg = await createImageAndWaitForLoad(actualImgSrc);
+
+            // eslint-disable-next-line max-len
+            // document.getElementById('snapshoot').style.height = `${MainView.calculateExpectedCanvasViewportAreaSize().height - 10}px`;
+            canvasElementRef.current.style.height = `${MainView.calculateExpectedCanvasViewportAreaSize().height - 10}px`;
+
+            const expectedImage = await imageFromUrl(expectedImg.src);
+            const actualImage = await imageFromUrl((actualImg).src);
+
+            const diffImgSrc = `${config.baseUri}/snapshoots/${currentCheck?.diffId?.filename}?diffImg`;
+            const diffImage = currentCheck?.diffId?.filename ? await imageFromUrl(diffImgSrc) : null;
+
+            setMainView((prev) => {
+                if (prev) return prev; // for dev mode, when components render twice
+                const MV = new MainView(
+                    {
+                        canvasId: '2d',
+                        // canvasElementWidth: document.getElementById('snapshoot')!.clientWidth,
+                        // canvasElementHeight: document.getElementById('snapshoot')!.clientHeight,
+                        canvasElementWidth: canvasElementRef.current?.clientWidth,
+                        canvasElementHeight: canvasElementRef.current?.clientHeight,
+                        expectedImage,
+                        actualImage,
+                        diffImage,
+                        actual,
+                    },
+                );
+                // @ts-ignore
+                window.mainView = MV;
+                return MV;
+            });
+        };
+        // set view
+        destroyMV().then(() => initMV());
+    }, [
+        relatedActiveCheckId,
+        relatedChecksOpened,
+        query.checkId,
+    ]);
+
+    useEffect(function afterMainViewCreatedHandleRegions() {
+        if (!baselineId) return;
+        if (mainView) {
+            mainView.getSnapshotIgnoreRegionsDataAndDrawRegions(baselineId);
+        }
+    }, [
+        // baselineQuery.data?.timestamp,
+        mainView?.toString(),
+        // query.checkId,
+    ]);
+
+    return (
+        <Group style={{ width: '96vw' }} spacing={4}>
+
+            <Stack sx={{ width: '100%' }}>
+
+                {/* Header */}
+                <Header
+                    classes={classes}
+                    currentCheck={currentCheckSafe}
+                />
+                {/* Toolbar */}
+                <Toolbar
+                    mainView={mainView}
+                    checkQuery={checkQuery}
+                    curCheck={currentCheckSafe}
+                    initCheckData={initCheckData}
+                    classes={classes}
+                    baselineId={baselineId}
+                    closeHandler={closeHandler}
+                />
+
+                <Group
+                    spacing={4}
+                    align="start"
+                    sx={{ width: '100%' }}
+                    noWrap
+                >
+                    {/* Related checks */}
+                    <Group
+                        align="start"
+                        noWrap
+                    >
+                        <RelatedChecks
+                            currentCheck={initCheckData}
+                            related={related}
+                        />
+                    </Group>
+
+                    {/* Canvas container */}
+                    <Canvas related={related} canvasElementRef={canvasElementRef} />
+                </Group>
+            </Stack>
+        </Group>
+    );
+}