@visns-studio/visns-components 4.10.48 → 5.0.1-8.1

package/src/components/crm/sketch/SketchField.jsx

@@ -1,395 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import History from './history';
-import Select from './select';
-import Pencil from './pencil';
-import Line from './line';
-import Arrow from './arrow';
-import Rectangle from './rectangle';
-import Circle from './circle';
-import Pan from './pan';
-import Tool from './tools';
-import RectangleLabel from './rectangle-label';
-import DefaultTool from './default-tool';
-import * as fabric from 'fabric'; // v6
-import { toast } from 'react-toastify'; // Import toast
-
-// Debounce function
-function debounce(func, delay) {
-    let timeout;
-    return (...args) => {
-        clearTimeout(timeout);
-        timeout = setTimeout(() => func.apply(this, args), delay);
-    };
-}
-
-class SketchField extends PureComponent {
-    static propTypes = {
-        lineColor: PropTypes.string,
-        lineWidth: PropTypes.number,
-        lineRadius: PropTypes.number,
-        fillColor: PropTypes.string,
-        backgroundColor: PropTypes.string,
-        backgroundImage: PropTypes.string,
-        opacity: PropTypes.number,
-        undoSteps: PropTypes.number,
-        tool: PropTypes.string,
-        imageFormat: PropTypes.string,
-        value: PropTypes.object,
-        forceValue: PropTypes.bool,
-        widthCorrection: PropTypes.number,
-        heightCorrection: PropTypes.number,
-        onChange: PropTypes.func,
-        defaultValue: PropTypes.object,
-        width: PropTypes.number,
-        height: PropTypes.number,
-        onObjectAdded: PropTypes.func,
-        onObjectModified: PropTypes.func,
-        onObjectRemoved: PropTypes.func,
-        className: PropTypes.string,
-        style: PropTypes.object,
-    };
-
-    static defaultProps = {
-        lineColor: 'black',
-        lineWidth: 10,
-        lineRadius: 10,
-        fillColor: 'transparent',
-        backgroundColor: 'transparent',
-        opacity: 1.0,
-        undoSteps: 25,
-        tool: null,
-        widthCorrection: 0,
-        heightCorrection: 0,
-        forceValue: false,
-        onObjectAdded: () => null,
-        onObjectModified: () => null,
-        onObjectRemoved: () => null,
-    };
-
-    _initTools = (fabricCanvas) => {
-        this._tools = {
-            [Tool.Select]: new Select(fabricCanvas),
-            [Tool.Pencil]: new Pencil(fabricCanvas),
-            [Tool.Line]: new Line(fabricCanvas),
-            [Tool.Arrow]: new Arrow(fabricCanvas),
-            [Tool.Rectangle]: new Rectangle(fabricCanvas),
-            [Tool.RectangleLabel]: new RectangleLabel(fabricCanvas),
-            [Tool.Circle]: new Circle(fabricCanvas),
-            [Tool.Pan]: new Pan(fabricCanvas),
-            [Tool.DefaultTool]: new DefaultTool(fabricCanvas),
-        };
-    };
-
-    setBackgroundImage = async (imageUrl) => {
-        try {
-            const img = await fabric.Image.fromURL(imageUrl, {
-                crossOrigin: 'anonymous', // Enable CORS
-            });
-
-            const imgWidth = img.width;
-            const imgHeight = img.height;
-
-            // Get the aspect ratio of the image
-            const aspectRatio = imgWidth / imgHeight;
-
-            // Calculate the new canvas dimensions based on aspect ratio
-            const { width, height } = this.props; // Default width and height
-
-            let newWidth, newHeight;
-            if (aspectRatio > 1) {
-                // Landscape orientation: Set width to max and adjust height
-                newWidth = width;
-                newHeight = width / aspectRatio;
-            } else {
-                // Portrait orientation: Set height to max and adjust width
-                newHeight = height;
-                newWidth = height * aspectRatio;
-            }
-
-            // Set the new canvas dimensions
-            this._fc.setWidth(newWidth);
-            this._fc.setHeight(newHeight);
-
-            // Scale the image to fit the canvas dimensions
-            img.scaleToWidth(newWidth);
-            img.scaleToHeight(newHeight);
-
-            // Center the image both horizontally and vertically
-            img.set({
-                left: (newWidth - img.getScaledWidth()) / 2,
-                top: (newHeight - img.getScaledHeight()) / 2,
-                selectable: false,
-                evented: false,
-            });
-
-            // Set the image as the background directly
-            this._fc.backgroundImage = img;
-
-            // Render the canvas to apply changes
-            this._fc.requestRenderAll();
-        } catch (error) {
-            console.error('Failed to load background image:', error);
-        }
-    };
-
-    saveCanvasState = () => {
-        // Return the current state of the canvas as JSON
-        const state = this._fc.toJSON();
-        const backgroundImage = this._fc.backgroundImage
-            ? {
-                  src: this._fc.backgroundImage._element.src,
-                  left: this._fc.backgroundImage.left,
-                  top: this._fc.backgroundImage.top,
-                  scaleX: this._fc.backgroundImage.scaleX,
-                  scaleY: this._fc.backgroundImage.scaleY,
-              }
-            : null;
-
-        return {
-            state,
-            backgroundImage,
-        };
-    };
-
-    exportCanvasImage = async (format = 'png') => {
-        // Ensure all images are loaded with CORS
-        const imageObjects = this._fc.getObjects('image');
-        for (const imgObj of imageObjects) {
-            if (imgObj.crossOrigin !== 'anonymous') {
-                // Set crossOrigin for images that are not set
-                imgObj.set({ crossOrigin: 'anonymous' });
-            }
-        }
-
-        // Get the Base64 representation of the canvas image
-        const dataURL = this._fc.toDataURL({
-            format: format,
-            quality: 0.8,
-        });
-
-        // Return the Base64 string
-        return dataURL; // This returns a promise
-    };
-
-    clearCanvas = () => {
-        // Clear all objects from the canvas while keeping the background image
-        const backgroundImage = this._fc.backgroundImage;
-        this._fc.clear();
-
-        // Restore the background image after clearing
-        if (backgroundImage) {
-            this._fc.backgroundImage = backgroundImage;
-        }
-        this._fc.renderAll(); // Re-render to show the background image
-    };
-
-    _resize = (e) => {
-        const { widthCorrection, heightCorrection } = this.props;
-        const canvas = this._fc;
-
-        const { offsetWidth, clientHeight } = this._container;
-        const wfactor = (offsetWidth - widthCorrection) / canvas.width;
-        const hfactor = (clientHeight - heightCorrection) / canvas.height;
-
-        canvas.setWidth(offsetWidth - widthCorrection);
-        canvas.setHeight(clientHeight - heightCorrection);
-
-        canvas.getObjects().forEach((obj) => {
-            obj.scaleX *= wfactor;
-            obj.scaleY *= hfactor;
-            obj.left *= wfactor;
-            obj.top *= hfactor;
-            obj.setCoords();
-        });
-
-        this.setState({ parentWidth: offsetWidth });
-        canvas.requestRenderAll();
-    };
-
-    _backgroundColor = (color) => {
-        if (this._fc && color) {
-            this._fc.backgroundColor = color;
-            this._fc.requestRenderAll();
-        }
-    };
-
-    undo = () => {
-        if (this._history && this._history.canUndo()) {
-            const previousState = this._history.undo();
-            if (previousState) {
-                // Restore the previous state
-                this.fromJSON(previousState.state);
-                // Reapply the background image after undoing
-                if (previousState.backgroundImage) {
-                    this.setBackgroundImage(previousState.backgroundImage.src);
-                }
-            } else {
-                this._fc.clear(); // If no previous state, clear the canvas
-
-                this.setBackgroundImage(this.props.backgroundImage);
-            }
-            this._fc.renderAll(); // Re-render canvas
-            this.props.onChange && this.props.onChange();
-        }
-    };
-
-    redo = () => {
-        if (this._history && this._history.canRedo()) {
-            const nextState = this._history.redo();
-            if (nextState) {
-                this.fromJSON(nextState.state);
-                // Reapply the background image after redoing
-                if (nextState.backgroundImage) {
-                    this.setBackgroundImage(nextState.backgroundImage.src);
-                }
-                this._fc.renderAll(); // Re-render canvas
-                this.props.onChange && this.props.onChange();
-            }
-        }
-    };
-
-    fromJSON = (json) => {
-        if (!json) return;
-        this._fc.loadFromJSON(json, () => {
-            this._fc.requestRenderAll();
-            this.props.onChange && this.props.onChange();
-        });
-    };
-
-    componentDidMount = () => {
-        const {
-            tool,
-            undoSteps,
-            backgroundColor,
-            width = 800,
-            height = 600,
-            backgroundImage,
-            defaultValue,
-        } = this.props;
-
-        this._fc = new fabric.Canvas(this._canvas);
-        this._fc.setWidth(width);
-        this._fc.setHeight(height);
-
-        this._initTools(this._fc);
-        this._backgroundColor(backgroundColor);
-
-        const selectedTool = this._tools[tool];
-        if (selectedTool) {
-            selectedTool.configureCanvas(this.props);
-            selectedTool.attachListeners();
-        }
-        this._selectedTool = selectedTool;
-
-        window.addEventListener('resize', this._resize, false);
-
-        this._history = new History(undoSteps);
-
-        this._fc.on('object:added', this._captureState);
-        this._fc.on('object:modified', this._captureState);
-        this._fc.on('object:removed', this._captureState);
-
-        this.setState({ canvasReady: true }, () => {
-            // Load the defaultValue to set the initial state of the canvas
-            if (defaultValue) {
-                // Show loading toast
-                setTimeout(() => {
-                    this.fromJSON(defaultValue);
-                }, 1000);
-            } else {
-                if (backgroundImage) {
-                    this.setBackgroundImage(backgroundImage);
-                }
-            }
-        });
-
-        // Load the defaultValue to set the initial state of the canvas
-        if (defaultValue) {
-            // Show loading toast
-            const toastId = toast.loading('Loading Canvas...');
-            setTimeout(() => {
-                this.fromJSON(defaultValue);
-                // Update toast after loading is done
-                toast.update(toastId, {
-                    render: 'Saved Canvas loaded!',
-                    type: 'success',
-                    isLoading: false,
-                    autoClose: 2000,
-                });
-            }, 1000);
-        } else {
-            if (backgroundImage) {
-                this.setBackgroundImage(backgroundImage);
-            }
-        }
-    };
-
-    _captureState = debounce(() => {
-        if (this._history && this._fc) {
-            const state = this._fc.toJSON();
-            const backgroundImage = this._fc.backgroundImage
-                ? {
-                      src: this._fc.backgroundImage._element.src,
-                      left: this._fc.backgroundImage.left,
-                      top: this._fc.backgroundImage.top,
-                      scaleX: this._fc.backgroundImage.scaleX,
-                      scaleY: this._fc.backgroundImage.scaleY,
-                  }
-                : null;
-
-            this._history.keep({
-                state,
-                backgroundImage,
-            });
-        }
-    }, 300);
-
-    componentWillUnmount = () => {
-        window.removeEventListener('resize', this._resize);
-    };
-
-    componentDidUpdate = (prevProps) => {
-        if (this.props.tool !== prevProps.tool) {
-            if (this._selectedTool) {
-                this._selectedTool.detachListeners();
-            }
-
-            this._selectedTool = this._tools[this.props.tool];
-            this._selectedTool.configureCanvas(this.props);
-            this._selectedTool.attachListeners();
-        }
-
-        if (this.props.backgroundColor !== prevProps.backgroundColor) {
-            this._backgroundColor(this.props.backgroundColor);
-        }
-
-        if (this.props.defaultValue !== prevProps.defaultValue) {
-            this.fromJSON(this.props.defaultValue);
-        } else {
-            if (this.props.backgroundImage !== prevProps.backgroundImage) {
-                this.setBackgroundImage(this.props.backgroundImage);
-            }
-        }
-    };
-
-    render() {
-        const { className, style, width = 800, height = 600 } = this.props;
-        const canvasDivStyle = { ...style, width, height };
-
-        return (
-            <div
-                className={className}
-                ref={(c) => (this._container = c)}
-                style={canvasDivStyle}
-            >
-                <canvas ref={(c) => (this._canvas = c)}>
-                    Sorry, Canvas HTML5 element is not supported by your
-                    browser.
-                </canvas>
-            </div>
-        );
-    }
-}
-
-export default SketchField;

package/src/components/crm/sketch/arrow.jsx

@@ -1,108 +0,0 @@
-import FabricCanvasTool from './fabrictool';
-import {
-    Line as FabricLine,
-    Triangle as FabricTriangle,
-    Group as FabricGroup,
-} from 'fabric'; // Import specific classes
-
-class Arrow extends FabricCanvasTool {
-    configureCanvas(props) {
-        const canvas = this._canvas;
-
-        // Disable selection and set up drawing mode
-        canvas.isDrawingMode = false;
-        canvas.selection = false;
-        canvas.forEachObject((o) => {
-            o.selectable = false;
-            o.evented = false;
-        });
-
-        // Set arrow line properties
-        this._width = props.lineWidth || 1;
-        this._color = props.lineColor || 'black';
-    }
-
-    doMouseDown(o) {
-        this.isDown = true;
-        const canvas = this._canvas;
-
-        // Get initial mouse pointer position
-        const pointer = canvas.getPointer(o.e);
-        const points = [pointer.x, pointer.y, pointer.x, pointer.y];
-
-        // Create the main line of the arrow
-        this.line = new FabricLine(points, {
-            strokeWidth: this._width,
-            fill: this._color,
-            stroke: this._color,
-            originX: 'center',
-            originY: 'center',
-            selectable: false,
-            evented: false,
-        });
-
-        // Create the arrowhead as a triangle
-        this.head = new FabricTriangle({
-            fill: this._color,
-            left: pointer.x,
-            top: pointer.y,
-            originX: 'center',
-            originY: 'center',
-            height: 3 * this._width,
-            width: 3 * this._width,
-            selectable: false,
-            evented: false,
-            angle: 90,
-        });
-
-        // Add both line and head to the canvas
-        canvas.add(this.line);
-        canvas.add(this.head);
-    }
-
-    doMouseMove(o) {
-        if (!this.isDown) return;
-        const canvas = this._canvas;
-        const pointer = canvas.getPointer(o.e);
-
-        // Update the line endpoint as mouse moves
-        this.line.set({ x2: pointer.x, y2: pointer.y });
-        this.line.setCoords();
-
-        // Calculate angle for the arrowhead to point along the line
-        const xDelta = pointer.x - this.line.x1;
-        const yDelta = pointer.y - this.line.y1;
-        this.head.set({
-            left: pointer.x,
-            top: pointer.y,
-            angle: 90 + (Math.atan2(yDelta, xDelta) * 180) / Math.PI,
-        });
-
-        // Render changes
-        canvas.requestRenderAll();
-    }
-
-    doMouseUp() {
-        this.isDown = false;
-        const canvas = this._canvas;
-
-        // Remove separate line and head and group them into an arrow
-        canvas.remove(this.line);
-        canvas.remove(this.head);
-
-        const arrow = new FabricGroup([this.line, this.head], {
-            selectable: true,
-            evented: true,
-        });
-
-        // Add the grouped arrow back to the canvas
-        canvas.add(arrow);
-        canvas.requestRenderAll();
-    }
-
-    doMouseOut() {
-        this.isDown = false;
-    }
-}
-
-export default Arrow;

package/src/components/crm/sketch/circle.jsx

@@ -1,75 +0,0 @@
-import FabricCanvasTool from './fabrictool';
-import { Circle as FabricCircle } from 'fabric';
-
-class Circle extends FabricCanvasTool {
-    constructor(canvas) {
-        super(canvas);
-        // Define event handlers as arrow functions for consistent references
-        this.doMouseDown = (o) => this._doMouseDown(o);
-        this.doMouseMove = (o) => this._doMouseMove(o);
-        this.doMouseUp = () => this._doMouseUp();
-    }
-
-    configureCanvas(props) {
-        const canvas = this._canvas;
-        canvas.isDrawingMode = false; // Disable drawing mode for custom drawing
-        canvas.selection = false;
-        this._width = props.lineWidth || 2;
-        this._color = props.lineColor || 'black';
-        this._fill = props.fillColor || 'transparent';
-    }
-
-    attachListeners() {
-        this._canvas.on('mouse:down', this.doMouseDown);
-        this._canvas.on('mouse:move', this.doMouseMove);
-        this._canvas.on('mouse:up', this.doMouseUp);
-    }
-
-    detachListeners() {
-        this._canvas.off('mouse:down', this.doMouseDown);
-        this._canvas.off('mouse:move', this.doMouseMove);
-        this._canvas.off('mouse:up', this.doMouseUp);
-    }
-
-    _doMouseDown(o) {
-        const canvas = this._canvas;
-        this.isDown = true;
-        const pointer = canvas.getPointer(o.e);
-        this.startX = pointer.x;
-        this.startY = pointer.y;
-
-        this.circle = new FabricCircle({
-            left: this.startX,
-            top: this.startY,
-            originX: 'center',
-            originY: 'center',
-            strokeWidth: this._width,
-            stroke: this._color,
-            fill: this._fill,
-            radius: 1, // Start with a minimal radius, updated on `doMouseMove`
-            selectable: false,
-            evented: false,
-        });
-        canvas.add(this.circle);
-    }
-
-    _doMouseMove(o) {
-        if (!this.isDown) return;
-        const canvas = this._canvas;
-        const pointer = canvas.getPointer(o.e);
-        const radius = Math.sqrt(
-            Math.pow(pointer.x - this.startX, 2) +
-                Math.pow(pointer.y - this.startY, 2)
-        );
-
-        this.circle.set({ radius });
-        this.circle.setCoords();
-        canvas.renderAll();
-    }
-
-    _doMouseUp() {
-        this.isDown = false;
-    }
-}
-
-export default Circle;

package/src/components/crm/sketch/default-tool.jsx

@@ -1,16 +0,0 @@
-/*eslint no-unused-vars: 0*/
-
-import FabricCanvasTool from './fabrictool';
-
-class DefaultTool extends FabricCanvasTool {
-    configureCanvas(props) {
-        let canvas = this._canvas;
-        canvas.isDrawingMode = canvas.selection = false;
-        canvas.forEachObject((o) => (o.selectable = o.evented = false));
-        canvas.discardActiveObject();
-        canvas.defaultCursor = 'pointer';
-        canvas.renderAll();
-    }
-}
-
-export default DefaultTool;

package/src/components/crm/sketch/fabrictool.jsx

@@ -1,22 +0,0 @@
-/* eslint no-unused-vars: 0 */
-
-/**
- * "Abstract" like base class for a Canvas tool
- */
-class FabricCanvasTool {
-    constructor(canvas) {
-        this._canvas = canvas;
-    }
-
-    configureCanvas(props) {}
-
-    doMouseUp(event) {}
-
-    doMouseDown(event) {}
-
-    doMouseMove(event) {}
-
-    doMouseOut(event) {}
-}
-
-export default FabricCanvasTool;