@visns-studio/visns-components 4.10.13 → 4.10.15

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

@@ -0,0 +1,365 @@
+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
+            });
+
+            // Scale the image to fit the canvas dimensions
+            img.scaleToWidth(this._fc.width);
+            img.scaleToHeight(this._fc.height);
+            img.set({ selectable: false, evented: false });
+
+            // Set the image directly as the background
+            this._fc.backgroundImage = img;
+            this._fc.renderAll(); // Render the canvas immediately
+        } 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._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) {
+            console.info('test');
+            // 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) {
+                // console.log(
+                //     'Setting new background image:',
+                //     this.props.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

@@ -0,0 +1,108 @@
+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

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1,16 @@
+/*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

@@ -0,0 +1,22 @@
+/* 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;